sakana-element 2.1.5 → 2.2.0

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 (82) hide show
  1. package/README.md +9 -6
  2. package/dist/es/Avatar-CxsRW-wl.js +9 -0
  3. package/dist/es/Badge-CoFWwBwv.js +14 -0
  4. package/dist/es/Breadcrumb-BtrwTVKW.js +15 -0
  5. package/dist/es/{Button-fW_ZOLmT.js → Button-S_31-UWJ.js} +3 -3
  6. package/dist/es/Card-DcW6nHYD.js +16 -0
  7. package/dist/es/Collapse-DsS7M-m3.js +53 -0
  8. package/dist/es/ConfigProvider-BgIewHXP.js +44 -0
  9. package/dist/es/{Dropdown-49nf6F8P.js → Dropdown-GcomGMAI.js} +10 -10
  10. package/dist/es/FileInput-BQ59woas.js +33 -0
  11. package/dist/es/Form-j90EzLXU.js +122 -0
  12. package/dist/es/{Input-DBPpvf0Y.js → Input-CiE4bPJN.js} +4 -4
  13. package/dist/es/Link-B9B2APZq.js +11 -0
  14. package/dist/es/Loading-BW99pE5N.js +92 -0
  15. package/dist/es/Message-DCNnTUje.js +123 -0
  16. package/dist/es/{Notification-D4RYHV9o.js → Notification-CBzY5904.js} +14 -14
  17. package/dist/es/Popconfirm-DF6d2ORS.js +23 -0
  18. package/dist/es/Select-Dwqv8isB.js +133 -0
  19. package/dist/es/Switch-B1Gnv1tB.js +34 -0
  20. package/dist/es/{Tooltip-HWx_i2FA.js → Tooltip-k6gKnMyt.js} +3 -3
  21. package/dist/es/hooks-BaG7l8K5.js +116 -0
  22. package/dist/es/index.js +73 -63
  23. package/dist/index.css +1 -1
  24. package/dist/theme/Alert.css +1 -1
  25. package/dist/theme/Avatar.css +116 -0
  26. package/dist/theme/Badge.css +36 -30
  27. package/dist/theme/Breadcrumb.css +150 -0
  28. package/dist/theme/Button.css +216 -216
  29. package/dist/theme/Card.css +170 -19
  30. package/dist/theme/Collapse.css +214 -54
  31. package/dist/theme/FileInput.css +365 -0
  32. package/dist/theme/Form.css +65 -34
  33. package/dist/theme/Link.css +50 -0
  34. package/dist/theme/Loading.css +154 -4
  35. package/dist/theme/Message.css +7 -4
  36. package/dist/theme/Notification.css +21 -21
  37. package/dist/theme/Popconfirm.css +5 -5
  38. package/dist/theme/Select.css +78 -78
  39. package/dist/types/components/Avatar/index.d.ts +30 -0
  40. package/dist/types/components/Avatar/types.d.ts +10 -0
  41. package/dist/types/components/Badge/types.d.ts +1 -0
  42. package/dist/types/components/Breadcrumb/constants.d.ts +3 -0
  43. package/dist/types/components/Breadcrumb/index.d.ts +45 -0
  44. package/dist/types/components/Breadcrumb/types.d.ts +13 -0
  45. package/dist/types/components/Card/types.d.ts +6 -0
  46. package/dist/types/components/Collapse/constants.d.ts +3 -0
  47. package/dist/types/components/Collapse/index.d.ts +9 -3
  48. package/dist/types/components/Collapse/types.d.ts +12 -0
  49. package/dist/types/components/FileInput/constants.d.ts +3 -0
  50. package/dist/types/components/FileInput/index.d.ts +58 -0
  51. package/dist/types/components/FileInput/types.d.ts +24 -0
  52. package/dist/types/components/Form/types.d.ts +17 -7
  53. package/dist/types/components/Input/index.d.ts +5 -5
  54. package/dist/types/components/Link/index.d.ts +34 -0
  55. package/dist/types/components/Link/types.d.ts +10 -0
  56. package/dist/types/components/Loading/index.d.ts +25 -0
  57. package/dist/types/components/Loading/types.d.ts +9 -0
  58. package/dist/types/components/Message/types.d.ts +2 -2
  59. package/dist/types/components/MessageBox/types.d.ts +2 -2
  60. package/dist/types/components/Notification/index.d.ts +1 -1
  61. package/dist/types/components/Notification/methods.d.ts +3 -1
  62. package/dist/types/components/Notification/types.d.ts +2 -2
  63. package/dist/types/components/Select/constants.d.ts +2 -1
  64. package/dist/types/components/Select/index.d.ts +11 -11
  65. package/dist/types/components/index.d.ts +4 -0
  66. package/dist/types/hooks/vitest.setup.d.ts +4 -0
  67. package/dist/umd/index.css +1 -1
  68. package/dist/umd/index.css.gz +0 -0
  69. package/dist/umd/index.umd.cjs +5 -14
  70. package/dist/umd/index.umd.cjs.gz +0 -0
  71. package/package.json +59 -60
  72. package/dist/es/Badge-BG-vYP8Y.js +0 -13
  73. package/dist/es/Card-BCBnlVi_.js +0 -12
  74. package/dist/es/Collapse-B08VhCVq.js +0 -38
  75. package/dist/es/ConfigProvider-DZO1d5Eq.js +0 -44
  76. package/dist/es/Form-CGiTDSGI.js +0 -108
  77. package/dist/es/Loading-DlygqGOv.js +0 -88
  78. package/dist/es/Message-ganFfLeU.js +0 -123
  79. package/dist/es/Popconfirm-Cop44KwQ.js +0 -22
  80. package/dist/es/Select-Blw_iO2r.js +0 -133
  81. package/dist/es/Switch-CHjcLtHs.js +0 -34
  82. package/dist/es/hooks-CYdEHUVd.js +0 -105
package/dist/theme/Card.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Card Variables */
2
- .px-card[data-v-1f65a210] {
2
+ .px-card[data-v-61d3ab66] {
3
3
  --px-card-bg-color: var(--px-bg-color);
4
4
  --px-card-border-color: var(--px-border-color);
5
5
  --px-card-shadow-color: var(--px-shadow-color);
@@ -9,7 +9,7 @@
9
9
  --px-card-padding: 16px;
10
10
  }
11
11
  /* Base Card Styles - Pixel Game Aesthetic */
12
- .px-card[data-v-1f65a210] {
12
+ .px-card[data-v-61d3ab66] {
13
13
  position: relative;
14
14
  display: flex;
15
15
  flex-direction: column;
@@ -23,7 +23,7 @@
23
23
  transition: none;
24
24
  }
25
25
  /* Border layer — filled with border color, clipped to pixel shape */
26
- .px-card[data-v-1f65a210]::before {
26
+ .px-card[data-v-61d3ab66]::before {
27
27
  content: '';
28
28
  position: absolute;
29
29
  inset: 0;
@@ -37,7 +37,7 @@
37
37
  z-index: 0;
38
38
  }
39
39
  /* Fill layer — inset by border width, filled with bg color */
40
- .px-card[data-v-1f65a210]::after {
40
+ .px-card[data-v-61d3ab66]::after {
41
41
  content: '';
42
42
  position: absolute;
43
43
  inset: 2px;
@@ -51,62 +51,213 @@
51
51
  z-index: 0;
52
52
  }
53
53
  /* Card sections - all above pseudo-elements */
54
- .px-card__header[data-v-1f65a210] {
54
+ .px-card__header[data-v-61d3ab66] {
55
55
  position: relative;
56
56
  z-index: 1;
57
57
  padding: var(--px-card-padding);
58
58
  border-bottom: 2px solid var(--px-card-header-border-color);
59
59
  font-weight: 600;
60
60
  }
61
- .px-card__body[data-v-1f65a210] {
61
+ .px-card__body[data-v-61d3ab66] {
62
62
  position: relative;
63
63
  z-index: 1;
64
64
  padding: var(--px-card-padding);
65
65
  flex: 1;
66
66
  }
67
- .px-card__footer[data-v-1f65a210] {
67
+ .px-card__footer[data-v-61d3ab66] {
68
68
  position: relative;
69
69
  z-index: 1;
70
70
  padding: var(--px-card-padding);
71
71
  border-top: 2px solid var(--px-card-footer-border-color);
72
72
  }
73
73
  /* Shadow variants */
74
- .px-card--shadow-always[data-v-1f65a210] {
74
+ .px-card--shadow-always[data-v-61d3ab66] {
75
75
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
76
76
  }
77
- .px-card--shadow-hover[data-v-1f65a210] {
77
+ .px-card--shadow-hover[data-v-61d3ab66] {
78
78
  filter: none;
79
79
  }
80
- .px-card--shadow-hover[data-v-1f65a210]:hover {
80
+ .px-card--shadow-hover[data-v-61d3ab66]:hover {
81
81
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
82
82
  }
83
- .px-card--shadow-never[data-v-1f65a210] {
83
+ .px-card--shadow-never[data-v-61d3ab66] {
84
84
  filter: none;
85
85
  }
86
86
  /* Hoverable interaction */
87
- .px-card.is-hoverable[data-v-1f65a210] {
87
+ .px-card.is-hoverable[data-v-61d3ab66] {
88
88
  cursor: pointer;
89
89
  }
90
- .px-card.is-hoverable[data-v-1f65a210]:hover {
90
+ .px-card.is-hoverable[data-v-61d3ab66]:hover {
91
91
  transform: translateY(-4px);
92
92
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
93
93
  }
94
- .px-card.is-hoverable[data-v-1f65a210]:active {
94
+ .px-card.is-hoverable[data-v-61d3ab66]:active {
95
95
  transform: translateY(0);
96
96
  }
97
97
  /* Size variants */
98
- .px-card--small[data-v-1f65a210] {
98
+ .px-card--small[data-v-61d3ab66] {
99
99
  --px-card-padding: 12px;
100
100
  font-size: var(--px-font-size-small);
101
101
  filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
102
102
  }
103
- .px-card--small.px-card--shadow-hover[data-v-1f65a210] { filter: none;
103
+ .px-card--small.px-card--shadow-hover[data-v-61d3ab66] { filter: none;
104
104
  }
105
- .px-card--small.px-card--shadow-hover[data-v-1f65a210]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
105
+ .px-card--small.px-card--shadow-hover[data-v-61d3ab66]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
106
106
  }
107
- .px-card--small.px-card--shadow-never[data-v-1f65a210] { filter: none;
107
+ .px-card--small.px-card--shadow-never[data-v-61d3ab66] { filter: none;
108
108
  }
109
- .px-card--large[data-v-1f65a210] {
109
+ .px-card--large[data-v-61d3ab66] {
110
110
  --px-card-padding: 20px;
111
111
  font-size: var(--px-font-size-large);
112
112
  }
113
+ /* Type variants */
114
+ .px-card--primary[data-v-61d3ab66] {
115
+ --px-card-bg-color: var(--px-color-primary-light-9);
116
+ --px-card-border-color: var(--px-color-primary);
117
+ --px-card-shadow-color: var(--px-color-primary-dark);
118
+ --px-card-text-color: var(--px-text-color-primary);
119
+ --px-card-header-border-color: var(--px-color-primary);
120
+ --px-card-footer-border-color: var(--px-color-primary);
121
+ }
122
+ .px-card--primary.is-outline[data-v-61d3ab66] {
123
+ --px-card-bg-color: transparent;
124
+ --px-card-border-color: var(--px-color-primary);
125
+ --px-card-text-color: var(--px-color-primary);
126
+ }
127
+ .px-card--primary.is-dash[data-v-61d3ab66] {
128
+ --px-card-bg-color: var(--px-color-primary-light-9);
129
+ --px-card-border-color: var(--px-color-primary);
130
+ --px-card-text-color: var(--px-color-primary);
131
+ }
132
+ .px-card--primary.is-ghost[data-v-61d3ab66] {
133
+ --px-card-bg-color: transparent;
134
+ --px-card-border-color: transparent;
135
+ --px-card-shadow-color: transparent;
136
+ --px-card-text-color: var(--px-color-primary);
137
+ }
138
+ .px-card--success[data-v-61d3ab66] {
139
+ --px-card-bg-color: var(--px-color-success-light-9);
140
+ --px-card-border-color: var(--px-color-success);
141
+ --px-card-shadow-color: var(--px-color-success-dark);
142
+ --px-card-text-color: var(--px-text-color-primary);
143
+ --px-card-header-border-color: var(--px-color-success);
144
+ --px-card-footer-border-color: var(--px-color-success);
145
+ }
146
+ .px-card--success.is-outline[data-v-61d3ab66] {
147
+ --px-card-bg-color: transparent;
148
+ --px-card-border-color: var(--px-color-success);
149
+ --px-card-text-color: var(--px-color-success);
150
+ }
151
+ .px-card--success.is-dash[data-v-61d3ab66] {
152
+ --px-card-bg-color: var(--px-color-success-light-9);
153
+ --px-card-border-color: var(--px-color-success);
154
+ --px-card-text-color: var(--px-color-success);
155
+ }
156
+ .px-card--success.is-ghost[data-v-61d3ab66] {
157
+ --px-card-bg-color: transparent;
158
+ --px-card-border-color: transparent;
159
+ --px-card-shadow-color: transparent;
160
+ --px-card-text-color: var(--px-color-success);
161
+ }
162
+ .px-card--info[data-v-61d3ab66] {
163
+ --px-card-bg-color: var(--px-color-info-light-9);
164
+ --px-card-border-color: var(--px-color-info);
165
+ --px-card-shadow-color: var(--px-color-info-dark);
166
+ --px-card-text-color: var(--px-text-color-primary);
167
+ --px-card-header-border-color: var(--px-color-info);
168
+ --px-card-footer-border-color: var(--px-color-info);
169
+ }
170
+ .px-card--info.is-outline[data-v-61d3ab66] {
171
+ --px-card-bg-color: transparent;
172
+ --px-card-border-color: var(--px-color-info);
173
+ --px-card-text-color: var(--px-color-info);
174
+ }
175
+ .px-card--info.is-dash[data-v-61d3ab66] {
176
+ --px-card-bg-color: var(--px-color-info-light-9);
177
+ --px-card-border-color: var(--px-color-info);
178
+ --px-card-text-color: var(--px-color-info);
179
+ }
180
+ .px-card--info.is-ghost[data-v-61d3ab66] {
181
+ --px-card-bg-color: transparent;
182
+ --px-card-border-color: transparent;
183
+ --px-card-shadow-color: transparent;
184
+ --px-card-text-color: var(--px-color-info);
185
+ }
186
+ .px-card--warning[data-v-61d3ab66] {
187
+ --px-card-bg-color: var(--px-color-warning-light-9);
188
+ --px-card-border-color: var(--px-color-warning);
189
+ --px-card-shadow-color: var(--px-color-warning-dark);
190
+ --px-card-text-color: var(--px-text-color-primary);
191
+ --px-card-header-border-color: var(--px-color-warning);
192
+ --px-card-footer-border-color: var(--px-color-warning);
193
+ }
194
+ .px-card--warning.is-outline[data-v-61d3ab66] {
195
+ --px-card-bg-color: transparent;
196
+ --px-card-border-color: var(--px-color-warning);
197
+ --px-card-text-color: var(--px-color-warning);
198
+ }
199
+ .px-card--warning.is-dash[data-v-61d3ab66] {
200
+ --px-card-bg-color: var(--px-color-warning-light-9);
201
+ --px-card-border-color: var(--px-color-warning);
202
+ --px-card-text-color: var(--px-color-warning);
203
+ }
204
+ .px-card--warning.is-ghost[data-v-61d3ab66] {
205
+ --px-card-bg-color: transparent;
206
+ --px-card-border-color: transparent;
207
+ --px-card-shadow-color: transparent;
208
+ --px-card-text-color: var(--px-color-warning);
209
+ }
210
+ .px-card--danger[data-v-61d3ab66] {
211
+ --px-card-bg-color: var(--px-color-danger-light-9);
212
+ --px-card-border-color: var(--px-color-danger);
213
+ --px-card-shadow-color: var(--px-color-danger-dark);
214
+ --px-card-text-color: var(--px-text-color-primary);
215
+ --px-card-header-border-color: var(--px-color-danger);
216
+ --px-card-footer-border-color: var(--px-color-danger);
217
+ }
218
+ .px-card--danger.is-outline[data-v-61d3ab66] {
219
+ --px-card-bg-color: transparent;
220
+ --px-card-border-color: var(--px-color-danger);
221
+ --px-card-text-color: var(--px-color-danger);
222
+ }
223
+ .px-card--danger.is-dash[data-v-61d3ab66] {
224
+ --px-card-bg-color: var(--px-color-danger-light-9);
225
+ --px-card-border-color: var(--px-color-danger);
226
+ --px-card-text-color: var(--px-color-danger);
227
+ }
228
+ .px-card--danger.is-ghost[data-v-61d3ab66] {
229
+ --px-card-bg-color: transparent;
230
+ --px-card-border-color: transparent;
231
+ --px-card-shadow-color: transparent;
232
+ --px-card-text-color: var(--px-color-danger);
233
+ }
234
+ /* Outline variant */
235
+ .px-card.is-outline[data-v-61d3ab66] {
236
+ border: 2px solid var(--px-card-border-color);
237
+ filter: none;
238
+ }
239
+ .px-card.is-outline[data-v-61d3ab66]::before { display: none;
240
+ }
241
+ .px-card.is-outline[data-v-61d3ab66]::after {
242
+ clip-path: none;
243
+ inset: 0;
244
+ background: var(--px-card-bg-color);
245
+ }
246
+ /* Dash variant */
247
+ .px-card.is-dash[data-v-61d3ab66] {
248
+ border: 2px dashed var(--px-card-border-color);
249
+ filter: none;
250
+ }
251
+ .px-card.is-dash[data-v-61d3ab66]::before { display: none;
252
+ }
253
+ .px-card.is-dash[data-v-61d3ab66]::after {
254
+ clip-path: none;
255
+ inset: 0;
256
+ background: var(--px-card-bg-color);
257
+ }
258
+ /* Ghost variant */
259
+ .px-card.is-ghost[data-v-61d3ab66] {
260
+ filter: none;
261
+ }
262
+ .px-card.is-ghost[data-v-61d3ab66]::before, .px-card.is-ghost[data-v-61d3ab66]::after { display: none;
263
+ }