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