@shuriken-ui/tailwind 0.0.4 → 0.1.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.
- package/README.md +54 -0
- package/dist/config.cjs +1 -0
- package/dist/config.d.ts +4 -10
- package/dist/config.mjs +1 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +10 -28
- package/dist/index.mjs +1 -0
- package/dist/preset.cjs +520 -67
- package/dist/preset.d.ts +4 -10
- package/dist/preset.mjs +519 -67
- package/package.json +13 -13
- /package/dist/{components-cff79ff9.d.ts → options-cff79ff9.d.ts} +0 -0
package/dist/preset.cjs
CHANGED
|
@@ -4,6 +4,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
4
4
|
const colors = require('tailwindcss/colors');
|
|
5
5
|
const typography = require('@tailwindcss/typography');
|
|
6
6
|
const aspectRatio = require('@tailwindcss/aspect-ratio');
|
|
7
|
+
const containerQueries = require('@tailwindcss/container-queries');
|
|
7
8
|
const plugin = require('tailwindcss/plugin');
|
|
8
9
|
const defu = require('defu');
|
|
9
10
|
|
|
@@ -13,40 +14,153 @@ const defaultTheme__default = /*#__PURE__*/_interopDefaultCompat(defaultTheme);
|
|
|
13
14
|
const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
|
|
14
15
|
const typography__default = /*#__PURE__*/_interopDefaultCompat(typography);
|
|
15
16
|
const aspectRatio__default = /*#__PURE__*/_interopDefaultCompat(aspectRatio);
|
|
17
|
+
const containerQueries__default = /*#__PURE__*/_interopDefaultCompat(containerQueries);
|
|
16
18
|
const plugin__default = /*#__PURE__*/_interopDefaultCompat(plugin);
|
|
17
19
|
|
|
20
|
+
const shurikenUIBase = plugin__default(function({ addBase }) {
|
|
21
|
+
addBase({
|
|
22
|
+
".dark": { colorScheme: "dark" }
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
|
|
18
26
|
const defaultPluginOptions = {
|
|
19
27
|
prefix: "nui"
|
|
20
28
|
};
|
|
21
|
-
|
|
29
|
+
|
|
30
|
+
const defaultDropdownDividerConfig = {
|
|
31
|
+
space: "2",
|
|
32
|
+
border: "muted-200",
|
|
33
|
+
borderDark: "muted-600"
|
|
34
|
+
};
|
|
35
|
+
const dropdown = plugin__default.withOptions(
|
|
22
36
|
function(options) {
|
|
23
37
|
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
24
|
-
return function({ addComponents }) {
|
|
38
|
+
return function({ addComponents, theme }) {
|
|
39
|
+
const config = theme(
|
|
40
|
+
"shurikenUi.dropdownDivider"
|
|
41
|
+
);
|
|
25
42
|
addComponents({
|
|
26
|
-
[`.${prefix}-
|
|
27
|
-
|
|
28
|
-
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
|
29
|
-
backgroundSize: "1200px 104px"
|
|
30
|
-
},
|
|
31
|
-
[`.dark .${prefix}-placeload`]: {
|
|
32
|
-
position: "relative",
|
|
33
|
-
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
|
34
|
-
backgroundSize: "1200px 104px"
|
|
43
|
+
[`.${prefix}-dropdown-divider`]: {
|
|
44
|
+
[`@apply my-${config.space} block h-px w-full border-t border-${config.border} dark:border-${config.borderDark}`]: {}
|
|
35
45
|
}
|
|
36
46
|
});
|
|
47
|
+
};
|
|
48
|
+
},
|
|
49
|
+
function() {
|
|
50
|
+
return {
|
|
51
|
+
theme: {
|
|
52
|
+
shurikenUi: {
|
|
53
|
+
dropdownDivider: defaultDropdownDividerConfig
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
const defaultFocusConfig = {
|
|
61
|
+
offset: "2",
|
|
62
|
+
width: "1",
|
|
63
|
+
style: "dashed",
|
|
64
|
+
color: "muted-300",
|
|
65
|
+
colorDark: "muted-600"
|
|
66
|
+
};
|
|
67
|
+
const focus = plugin__default.withOptions(
|
|
68
|
+
function(options) {
|
|
69
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
70
|
+
return function({ addComponents, theme }) {
|
|
71
|
+
const config = theme(
|
|
72
|
+
"shurikenUi.focus"
|
|
73
|
+
);
|
|
37
74
|
addComponents({
|
|
38
75
|
[`.${prefix}-focus`]: {
|
|
39
|
-
|
|
76
|
+
[`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]: {},
|
|
40
77
|
"@apply outline-transparent": {},
|
|
41
78
|
"&:focus-within": {
|
|
42
|
-
|
|
43
|
-
|
|
79
|
+
[`@apply outline-${config.color} dark:outline-${config.colorDark}`]: {},
|
|
80
|
+
[`@apply outline-${config.style} ring-0`]: {}
|
|
44
81
|
},
|
|
45
82
|
"&:focus-visible": {
|
|
46
|
-
|
|
83
|
+
[`@apply outline-${config.width}`]: {}
|
|
47
84
|
}
|
|
48
85
|
}
|
|
49
86
|
});
|
|
87
|
+
};
|
|
88
|
+
},
|
|
89
|
+
function() {
|
|
90
|
+
return {
|
|
91
|
+
theme: {
|
|
92
|
+
shurikenUi: {
|
|
93
|
+
focus: defaultFocusConfig
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
const defaultLabelConfig = {
|
|
101
|
+
font: "alt",
|
|
102
|
+
text: "muted-400",
|
|
103
|
+
textDark: "muted-400/80"
|
|
104
|
+
};
|
|
105
|
+
const label = plugin__default.withOptions(
|
|
106
|
+
function(options) {
|
|
107
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
108
|
+
return function({ addComponents, theme }) {
|
|
109
|
+
const config = theme(
|
|
110
|
+
"shurikenUi.label"
|
|
111
|
+
);
|
|
112
|
+
addComponents({
|
|
113
|
+
[`.${prefix}-label`]: {
|
|
114
|
+
[`@apply inline-block font-${config.font} leading-none text-${config.text} dark:text-${config.textDark}`]: {}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
},
|
|
119
|
+
function() {
|
|
120
|
+
return {
|
|
121
|
+
theme: {
|
|
122
|
+
shurikenUi: {
|
|
123
|
+
label: defaultLabelConfig
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
|
|
130
|
+
const defaultMarkConfig = {
|
|
131
|
+
bg: "primary-100",
|
|
132
|
+
bgDark: "primary-800",
|
|
133
|
+
text: "primary-800",
|
|
134
|
+
textDark: "primary-200"
|
|
135
|
+
};
|
|
136
|
+
const mark = plugin__default.withOptions(
|
|
137
|
+
function(options) {
|
|
138
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
139
|
+
return function({ addComponents, theme }) {
|
|
140
|
+
const config = theme("shurikenUi.mark");
|
|
141
|
+
addComponents({
|
|
142
|
+
[`.${prefix}-mark`]: {
|
|
143
|
+
[`@apply bg-${config.bg} dark:bg-${config.bgDark}`]: {},
|
|
144
|
+
[`@apply text-${config.text} dark:text-${config.textDark}`]: {}
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
},
|
|
149
|
+
function() {
|
|
150
|
+
return {
|
|
151
|
+
theme: {
|
|
152
|
+
shurikenUi: {
|
|
153
|
+
mark: defaultMarkConfig
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
const mask = plugin__default.withOptions(
|
|
161
|
+
function(options) {
|
|
162
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
163
|
+
return function({ addComponents }) {
|
|
50
164
|
addComponents({
|
|
51
165
|
[`.${prefix}-mask`]: {
|
|
52
166
|
"mask-size": "contain",
|
|
@@ -69,50 +183,329 @@ const shurikenUIComponents = plugin__default.withOptions(
|
|
|
69
183
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
|
|
70
184
|
}
|
|
71
185
|
});
|
|
186
|
+
};
|
|
187
|
+
},
|
|
188
|
+
function() {
|
|
189
|
+
return {};
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
|
|
193
|
+
const placeload = plugin__default.withOptions(
|
|
194
|
+
function(options) {
|
|
195
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
196
|
+
return function({ addComponents }) {
|
|
72
197
|
addComponents({
|
|
73
|
-
[`.${prefix}-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"@apply text-muted-50 dark:text-muted-900": {}
|
|
78
|
-
},
|
|
79
|
-
[`.${prefix}-text-100`]: {
|
|
80
|
-
"@apply text-muted-100 dark:text-muted-900": {}
|
|
81
|
-
},
|
|
82
|
-
[`.${prefix}-text-200`]: {
|
|
83
|
-
"@apply text-muted-200 dark:text-muted-800": {}
|
|
84
|
-
},
|
|
85
|
-
[`.${prefix}-text-300`]: {
|
|
86
|
-
"@apply text-muted-300 dark:text-muted-700": {}
|
|
87
|
-
},
|
|
88
|
-
[`.${prefix}-text-400`]: {
|
|
89
|
-
"@apply text-muted-400 dark:text-muted-600": {}
|
|
90
|
-
},
|
|
91
|
-
[`.${prefix}-text-500`]: {
|
|
92
|
-
"@apply text-muted-500 dark:text-muted-500": {}
|
|
198
|
+
[`.${prefix}-placeload`]: {
|
|
199
|
+
position: "relative",
|
|
200
|
+
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
|
201
|
+
backgroundSize: "1200px 104px"
|
|
93
202
|
},
|
|
94
|
-
[
|
|
95
|
-
|
|
203
|
+
[`.dark .${prefix}-placeload`]: {
|
|
204
|
+
position: "relative",
|
|
205
|
+
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
|
206
|
+
backgroundSize: "1200px 104px"
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
};
|
|
210
|
+
},
|
|
211
|
+
function(options) {
|
|
212
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
213
|
+
return {
|
|
214
|
+
theme: {
|
|
215
|
+
keyframes: {
|
|
216
|
+
[`${prefix}-placeload`]: {
|
|
217
|
+
"0%": { "background-position": "-468px 0" },
|
|
218
|
+
"100%": { "background-position": "468px 0" }
|
|
219
|
+
}
|
|
96
220
|
},
|
|
97
|
-
|
|
98
|
-
|
|
221
|
+
animation: {
|
|
222
|
+
[`${prefix}-placeload`]: `${prefix}-placeload 1s linear infinite forwards`
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
|
|
229
|
+
const defaultSlimscrollConfig = {
|
|
230
|
+
width: "[6px]",
|
|
231
|
+
bg: "black/5",
|
|
232
|
+
bgDark: "white/5",
|
|
233
|
+
bgHover: "black/20",
|
|
234
|
+
bgHoverDark: "white/20"
|
|
235
|
+
};
|
|
236
|
+
const slimscroll = plugin__default.withOptions(
|
|
237
|
+
function(options) {
|
|
238
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
239
|
+
return function({ addComponents, theme }) {
|
|
240
|
+
const config = theme(
|
|
241
|
+
"shurikenUi.slimscroll"
|
|
242
|
+
);
|
|
243
|
+
addComponents({
|
|
244
|
+
[`.${prefix}-slimscroll::-webkit-scrollbar, .${prefix}-slimscroll-opaque::-webkit-scrollbar`]: {
|
|
245
|
+
scrollBehavior: "smooth",
|
|
246
|
+
scrollbarGutter: "stable",
|
|
247
|
+
[`@apply w-${config.width}`]: {}
|
|
99
248
|
},
|
|
100
|
-
[`.${prefix}-
|
|
101
|
-
|
|
249
|
+
[`.${prefix}-slimscroll::-webkit-scrollbar-thumb`]: {
|
|
250
|
+
[`@apply rounded-lg bg-${config.bg} dark:bg-${config.bgDark} duration-300 transition-all`]: {}
|
|
102
251
|
},
|
|
103
|
-
[`.${prefix}-
|
|
104
|
-
|
|
252
|
+
[`.${prefix}-slimscroll-opaque::-webkit-scrollbar-thumb`]: {
|
|
253
|
+
[`@apply rounded-lg bg-transparent duration-300 transition-all`]: {}
|
|
105
254
|
},
|
|
106
|
-
[`.${prefix}-
|
|
107
|
-
|
|
255
|
+
[`.${prefix}-slimscroll:hover::-webkit-scrollbar-thumb, .${prefix}-slimscroll-opaque:hover::-webkit-scrollbar-thumb`]: {
|
|
256
|
+
[`@apply bg-${config.bgHover} dark:bg-${config.bgHoverDark}`]: {}
|
|
108
257
|
}
|
|
109
258
|
});
|
|
259
|
+
};
|
|
260
|
+
},
|
|
261
|
+
function() {
|
|
262
|
+
return {
|
|
263
|
+
theme: {
|
|
264
|
+
shurikenUi: {
|
|
265
|
+
slimscroll: defaultSlimscrollConfig
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
|
|
272
|
+
const defaultTooltipConfig = {
|
|
273
|
+
font: "sans",
|
|
274
|
+
bg: "[#1e293b]",
|
|
275
|
+
bgDark: "[#ec4899]",
|
|
276
|
+
text: "[#fff]",
|
|
277
|
+
textDark: "[#fff]",
|
|
278
|
+
minWidth: "3rem",
|
|
279
|
+
maxWidth: "21rem"
|
|
280
|
+
};
|
|
281
|
+
const tooltip = plugin__default.withOptions(
|
|
282
|
+
function(options) {
|
|
283
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
284
|
+
return function({ addComponents, theme }) {
|
|
285
|
+
const config = theme(
|
|
286
|
+
"shurikenUi.tooltip"
|
|
287
|
+
);
|
|
288
|
+
const tooltip = `data-${prefix}-tooltip`;
|
|
289
|
+
const position = `data-${prefix}-tooltip-position`;
|
|
110
290
|
addComponents({
|
|
291
|
+
[`[${tooltip}]`]: {
|
|
292
|
+
position: "relative"
|
|
293
|
+
},
|
|
294
|
+
[`[${tooltip}]::before, [${tooltip}]::after`]: {
|
|
295
|
+
textTransform: "none",
|
|
296
|
+
fontSize: "0.9em",
|
|
297
|
+
lineHeight: "1",
|
|
298
|
+
userSelect: "none",
|
|
299
|
+
pointerEvents: "none",
|
|
300
|
+
position: "absolute",
|
|
301
|
+
display: "none",
|
|
302
|
+
opacity: "0"
|
|
303
|
+
},
|
|
304
|
+
[`[${tooltip}]::before`]: {
|
|
305
|
+
content: "''",
|
|
306
|
+
border: "5px solid transparent",
|
|
307
|
+
zIndex: "1001"
|
|
308
|
+
},
|
|
309
|
+
[`[${tooltip}]::after`]: {
|
|
310
|
+
content: `attr(${tooltip})`,
|
|
311
|
+
textAlign: "center",
|
|
312
|
+
minWidth: config.minWidth,
|
|
313
|
+
maxWidth: config.maxWidth,
|
|
314
|
+
whiteSpace: "pre",
|
|
315
|
+
overflow: "hidden",
|
|
316
|
+
padding: "1ch 1.5ch",
|
|
317
|
+
borderRadius: "0.5ch",
|
|
318
|
+
zIndex: "1000",
|
|
319
|
+
[`@apply font-${config.font} text-xs shadow-lg`]: {},
|
|
320
|
+
[`@apply text-${config.text}`]: {},
|
|
321
|
+
[`@apply bg-${config.bg}`]: {}
|
|
322
|
+
},
|
|
323
|
+
[`.dark [${tooltip}]::after`]: {
|
|
324
|
+
[`@apply text-${config.textDark}`]: {},
|
|
325
|
+
[`@apply bg-${config.bgDark}`]: {}
|
|
326
|
+
},
|
|
327
|
+
[`[${tooltip}]:hover::before, [${tooltip}]:hover::after, [${tooltip}]:focus-visible::before, [${tooltip}]:focus-visible::after`]: {
|
|
328
|
+
display: "block"
|
|
329
|
+
},
|
|
330
|
+
[`[${tooltip}='']::before, [${tooltip}='']::after`]: {
|
|
331
|
+
display: "none !important"
|
|
332
|
+
},
|
|
333
|
+
/* position up (default) */
|
|
334
|
+
[`[${tooltip}]:not([${position}])::before, [${tooltip}][${position}^='up']::before`]: {
|
|
335
|
+
bottom: "calc(100% + 8px)",
|
|
336
|
+
borderBottomWidth: "0",
|
|
337
|
+
borderTopColor: "currentColor",
|
|
338
|
+
[`@apply text-${config.bg}`]: {}
|
|
339
|
+
},
|
|
340
|
+
[`.dark [${tooltip}]:not([${position}])::before, .dark [${tooltip}][${position}^='up']::before`]: {
|
|
341
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
342
|
+
},
|
|
343
|
+
[`[${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]: {
|
|
344
|
+
bottom: "calc(100% + 13px)"
|
|
345
|
+
},
|
|
346
|
+
[`[${tooltip}]:not([${position}])::before, [${tooltip}][${position}^='up']::before, [${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]: {
|
|
347
|
+
left: "50%",
|
|
348
|
+
// insetInlineStart
|
|
349
|
+
transform: "translate(-50%, -0.5em)"
|
|
350
|
+
},
|
|
351
|
+
/* position down */
|
|
352
|
+
[`[${tooltip}][${position}^='down']::before`]: {
|
|
353
|
+
top: "100%",
|
|
354
|
+
borderTopWidth: "0",
|
|
355
|
+
borderBottomColor: "currentColor",
|
|
356
|
+
[`@apply text-${config.bg}`]: {}
|
|
357
|
+
},
|
|
358
|
+
[`.dark [${tooltip}][${position}^='down']::before`]: {
|
|
359
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
360
|
+
},
|
|
361
|
+
[`[${tooltip}][${position}^='down']::after`]: {
|
|
362
|
+
top: "calc(100% + 5px)"
|
|
363
|
+
},
|
|
364
|
+
[`[${tooltip}][${position}^='down']::before, [${tooltip}][${position}^='down']::after`]: {
|
|
365
|
+
left: "50%",
|
|
366
|
+
// insetInlineStart
|
|
367
|
+
transform: "translate(-50%, 0.5em)"
|
|
368
|
+
},
|
|
369
|
+
/* position start (left) */
|
|
370
|
+
[`[${tooltip}][${position}^='start']::before, [${tooltip}][${position}^='left']::before`]: {
|
|
371
|
+
top: "50%",
|
|
372
|
+
borderEndWidth: "0",
|
|
373
|
+
borderStartColor: "currentColor",
|
|
374
|
+
insetInlineStart: "calc(0em - 5px)",
|
|
375
|
+
transform: "translate(-0.5em, -50%)",
|
|
376
|
+
[`@apply text-${config.bg}`]: {}
|
|
377
|
+
},
|
|
378
|
+
[`[${tooltip}][${position}^='start']::before, [${tooltip}][${position}^='left']::before`]: {
|
|
379
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
380
|
+
},
|
|
381
|
+
[`[${tooltip}][${position}^='start']::after, [${tooltip}][${position}^='left']::after`]: {
|
|
382
|
+
top: "50%",
|
|
383
|
+
insetInlineEnd: "calc(100% + 5px)",
|
|
384
|
+
transform: "translate(-0.5em, -50%)"
|
|
385
|
+
},
|
|
386
|
+
/* position end (right) */
|
|
387
|
+
[`[${tooltip}][${position}^='end']::before, [${tooltip}][${position}^='right']::before`]: {
|
|
388
|
+
top: "50%",
|
|
389
|
+
borderStartWidth: "0",
|
|
390
|
+
borderEndColor: "currentColor",
|
|
391
|
+
insetInlineEnd: "calc(0em - 5px)",
|
|
392
|
+
transform: "translate(0.5em, -50%)",
|
|
393
|
+
[`@apply text-${config.bg}`]: {}
|
|
394
|
+
},
|
|
395
|
+
[`[${tooltip}][${position}^='end']::before, [${tooltip}][${position}^='right']::before`]: {
|
|
396
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
397
|
+
},
|
|
398
|
+
[`[${tooltip}][${position}^='end']::after, [${tooltip}][${position}^='right']::after`]: {
|
|
399
|
+
top: "50%",
|
|
400
|
+
insetInlineStart: "calc(100% + 5px)",
|
|
401
|
+
transform: "translate(0.5em, -50%)"
|
|
402
|
+
},
|
|
403
|
+
[`${[
|
|
404
|
+
`[${tooltip}]:not([${position}]):hover::before`,
|
|
405
|
+
`[${tooltip}]:not([${position}]):hover::after`,
|
|
406
|
+
`[${tooltip}][${position}^='up']:hover::before`,
|
|
407
|
+
`[${tooltip}][${position}^='up']:hover::after`,
|
|
408
|
+
`[${tooltip}][${position}^='down']:hover::before`,
|
|
409
|
+
`[${tooltip}][${position}^='down']:hover::after`,
|
|
410
|
+
`[${tooltip}]:not([${position}]):focus-visible::before`,
|
|
411
|
+
`[${tooltip}]:not([${position}]):focus-visible::after`,
|
|
412
|
+
`[${tooltip}][${position}^='up']:focus-visible::before`,
|
|
413
|
+
`[${tooltip}][${position}^='up']:focus-visible::after`,
|
|
414
|
+
`[${tooltip}][${position}^='down']:focus-visible::before`,
|
|
415
|
+
`[${tooltip}][${position}^='down']:focus-visible::after`
|
|
416
|
+
].join(",")}`]: {
|
|
417
|
+
[`@apply animate-${prefix}-tooltip-x`]: {}
|
|
418
|
+
},
|
|
419
|
+
[`${[
|
|
420
|
+
`[${tooltip}][${position}^='left']:hover::before`,
|
|
421
|
+
`[${tooltip}][${position}^='left']:hover::after`,
|
|
422
|
+
`[${tooltip}][${position}^='right']:hover::before`,
|
|
423
|
+
`[${tooltip}][${position}^='right']:hover::after`,
|
|
424
|
+
`[${tooltip}][${position}^='start']:hover::before`,
|
|
425
|
+
`[${tooltip}][${position}^='start']:hover::after`,
|
|
426
|
+
`[${tooltip}][${position}^='end']:hover::before`,
|
|
427
|
+
`[${tooltip}][${position}^='end']:hover::after`,
|
|
428
|
+
`[${tooltip}][${position}^='left']:focus-visible::before`,
|
|
429
|
+
`[${tooltip}][${position}^='left']:focus-visible::after`,
|
|
430
|
+
`[${tooltip}][${position}^='right']:focus-visible::before`,
|
|
431
|
+
`[${tooltip}][${position}^='right']:focus-visible::after`,
|
|
432
|
+
`[${tooltip}][${position}^='start']:focus-visible::before`,
|
|
433
|
+
`[${tooltip}][${position}^='start']:focus-visible::after`,
|
|
434
|
+
`[${tooltip}][${position}^='end']:focus-visible::before`,
|
|
435
|
+
`[${tooltip}][${position}^='end']:focus-visible::after`
|
|
436
|
+
].join(",")}`]: {
|
|
437
|
+
[`@apply animate-${prefix}-tooltip-y`]: {}
|
|
438
|
+
}
|
|
439
|
+
});
|
|
440
|
+
};
|
|
441
|
+
},
|
|
442
|
+
function(options) {
|
|
443
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
444
|
+
return {
|
|
445
|
+
theme: {
|
|
446
|
+
keyframes: {
|
|
447
|
+
[`${prefix}-tooltip-x`]: {
|
|
448
|
+
to: {
|
|
449
|
+
opacity: "1",
|
|
450
|
+
transform: "translate(-50%, 0)"
|
|
451
|
+
}
|
|
452
|
+
},
|
|
453
|
+
[`${prefix}-tooltip-y`]: {
|
|
454
|
+
to: {
|
|
455
|
+
opacity: "1",
|
|
456
|
+
transform: "translate(0, -50%)"
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
},
|
|
460
|
+
animation: {
|
|
461
|
+
[`${prefix}-tooltip-x`]: `${prefix}-tooltip-x 300ms ease-out forwards`,
|
|
462
|
+
[`${prefix}-tooltip-y`]: `${prefix}-tooltip-y 300ms ease-out forwards`
|
|
463
|
+
},
|
|
464
|
+
shurikenUi: {
|
|
465
|
+
tooltip: defaultTooltipConfig
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
};
|
|
469
|
+
}
|
|
470
|
+
);
|
|
471
|
+
|
|
472
|
+
const components = [
|
|
473
|
+
dropdown,
|
|
474
|
+
focus,
|
|
475
|
+
label,
|
|
476
|
+
mark,
|
|
477
|
+
mask,
|
|
478
|
+
placeload,
|
|
479
|
+
slimscroll,
|
|
480
|
+
tooltip
|
|
481
|
+
];
|
|
482
|
+
const shurikenUIComponents = plugin__default.withOptions(
|
|
483
|
+
function(options) {
|
|
484
|
+
return function(api) {
|
|
485
|
+
for (const component of components) {
|
|
486
|
+
component(options).handler(api);
|
|
487
|
+
}
|
|
488
|
+
};
|
|
489
|
+
},
|
|
490
|
+
function(options) {
|
|
491
|
+
let config = {};
|
|
492
|
+
for (const component of components) {
|
|
493
|
+
config = defu.defu(config, component(options).config);
|
|
494
|
+
}
|
|
495
|
+
return config;
|
|
496
|
+
}
|
|
497
|
+
);
|
|
498
|
+
|
|
499
|
+
const bg = plugin__default.withOptions(
|
|
500
|
+
function(options) {
|
|
501
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
502
|
+
return function({ addUtilities }) {
|
|
503
|
+
addUtilities({
|
|
111
504
|
[`.${prefix}-bg-white`]: {
|
|
112
505
|
"@apply bg-white dark:bg-muted-900": {}
|
|
113
506
|
},
|
|
114
507
|
[`.${prefix}-bg-50`]: {
|
|
115
|
-
"@apply bg-muted-50 dark:bg-muted-
|
|
508
|
+
"@apply bg-muted-50 dark:bg-muted-950": {}
|
|
116
509
|
},
|
|
117
510
|
[`.${prefix}-bg-100`]: {
|
|
118
511
|
"@apply bg-muted-100 dark:bg-muted-900": {}
|
|
@@ -141,36 +534,101 @@ const shurikenUIComponents = plugin__default.withOptions(
|
|
|
141
534
|
[`.${prefix}-bg-900`]: {
|
|
142
535
|
"@apply bg-muted-900 dark:bg-muted-100": {}
|
|
143
536
|
},
|
|
537
|
+
[`.${prefix}-bg-950`]: {
|
|
538
|
+
"@apply bg-muted-950 dark:bg-muted-50": {}
|
|
539
|
+
},
|
|
144
540
|
[`.${prefix}-bg-black`]: {
|
|
145
541
|
"@apply bg-muted-900 dark:bg-white": {}
|
|
146
542
|
}
|
|
147
543
|
});
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
544
|
+
};
|
|
545
|
+
},
|
|
546
|
+
function(options) {
|
|
547
|
+
return {};
|
|
548
|
+
}
|
|
549
|
+
);
|
|
550
|
+
|
|
551
|
+
const text = plugin__default.withOptions(
|
|
552
|
+
function(options) {
|
|
553
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
|
554
|
+
return function({ addUtilities }) {
|
|
555
|
+
addUtilities({
|
|
556
|
+
[`.${prefix}-text-white`]: {
|
|
557
|
+
"@apply text-white dark:text-black": {}
|
|
558
|
+
},
|
|
559
|
+
[`.${prefix}-text-50`]: {
|
|
560
|
+
"@apply text-muted-50 dark:text-muted-950": {}
|
|
561
|
+
},
|
|
562
|
+
[`.${prefix}-text-100`]: {
|
|
563
|
+
"@apply text-muted-100 dark:text-muted-900": {}
|
|
564
|
+
},
|
|
565
|
+
[`.${prefix}-text-200`]: {
|
|
566
|
+
"@apply text-muted-200 dark:text-muted-800": {}
|
|
567
|
+
},
|
|
568
|
+
[`.${prefix}-text-300`]: {
|
|
569
|
+
"@apply text-muted-300 dark:text-muted-700": {}
|
|
570
|
+
},
|
|
571
|
+
[`.${prefix}-text-400`]: {
|
|
572
|
+
"@apply text-muted-400 dark:text-muted-600": {}
|
|
573
|
+
},
|
|
574
|
+
[`.${prefix}-text-500`]: {
|
|
575
|
+
"@apply text-muted-500 dark:text-muted-500": {}
|
|
576
|
+
},
|
|
577
|
+
[`.${prefix}-text-600`]: {
|
|
578
|
+
"@apply text-muted-600 dark:text-muted-400": {}
|
|
579
|
+
},
|
|
580
|
+
[`.${prefix}-text-700`]: {
|
|
581
|
+
"@apply text-muted-700 dark:text-muted-300": {}
|
|
582
|
+
},
|
|
583
|
+
[`.${prefix}-text-800`]: {
|
|
584
|
+
"@apply text-muted-800 dark:text-muted-200": {}
|
|
585
|
+
},
|
|
586
|
+
[`.${prefix}-text-900`]: {
|
|
587
|
+
"@apply text-muted-900 dark:text-muted-100": {}
|
|
588
|
+
},
|
|
589
|
+
[`.${prefix}-text-950`]: {
|
|
590
|
+
"@apply text-muted-950 dark:text-muted-50": {}
|
|
591
|
+
},
|
|
592
|
+
[`.${prefix}-text-black`]: {
|
|
593
|
+
"@apply text-black dark:text-white": {}
|
|
161
594
|
}
|
|
162
595
|
});
|
|
163
596
|
};
|
|
164
597
|
},
|
|
165
|
-
function(
|
|
598
|
+
function() {
|
|
166
599
|
return {};
|
|
167
600
|
}
|
|
168
601
|
);
|
|
169
602
|
|
|
603
|
+
const utilities = [bg, text];
|
|
604
|
+
const shurikenUIUtilities = plugin__default.withOptions(
|
|
605
|
+
function(options) {
|
|
606
|
+
return function(api) {
|
|
607
|
+
for (const utility of utilities) {
|
|
608
|
+
utility(options).handler(api);
|
|
609
|
+
}
|
|
610
|
+
};
|
|
611
|
+
},
|
|
612
|
+
function(options) {
|
|
613
|
+
let config = {};
|
|
614
|
+
for (const utility of utilities) {
|
|
615
|
+
config = defu.defu(config, utility(options).config);
|
|
616
|
+
}
|
|
617
|
+
return config;
|
|
618
|
+
}
|
|
619
|
+
);
|
|
620
|
+
|
|
170
621
|
const shurikenUIPreset = {
|
|
171
622
|
darkMode: "class",
|
|
172
623
|
content: [],
|
|
173
|
-
plugins: [
|
|
624
|
+
plugins: [
|
|
625
|
+
typography__default,
|
|
626
|
+
aspectRatio__default,
|
|
627
|
+
containerQueries__default,
|
|
628
|
+
shurikenUIBase,
|
|
629
|
+
shurikenUIComponents,
|
|
630
|
+
shurikenUIUtilities
|
|
631
|
+
],
|
|
174
632
|
theme: {
|
|
175
633
|
fontFamily: {
|
|
176
634
|
sans: defaultTheme__default.fontFamily.sans,
|
|
@@ -280,15 +738,10 @@ const shurikenUIPreset = {
|
|
|
280
738
|
"nui-indeterminate": {
|
|
281
739
|
"0%": { "margin-left": "-10%" },
|
|
282
740
|
"100%": { "margin-left": "100%" }
|
|
283
|
-
},
|
|
284
|
-
"nui-placeload": {
|
|
285
|
-
"0%": { "background-position": "-468px 0" },
|
|
286
|
-
"100%": { "background-position": "468px 0" }
|
|
287
741
|
}
|
|
288
742
|
},
|
|
289
743
|
animation: {
|
|
290
|
-
"nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite"
|
|
291
|
-
"nui-placeload": "nui-placeload 1s linear infinite forwards"
|
|
744
|
+
"nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite"
|
|
292
745
|
}
|
|
293
746
|
}
|
|
294
747
|
}
|