@shuriken-ui/tailwind 0.0.2 → 0.0.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.
- package/LICENSE.md +21 -0
- package/README.md +53 -0
- package/dist/components-cff79ff9.d.ts +5 -0
- package/dist/config.cjs +2 -0
- package/dist/config.d.ts +10 -9
- package/dist/config.mjs +2 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +28 -27
- package/dist/index.mjs +1 -0
- package/dist/preset.cjs +53 -50
- package/dist/preset.d.ts +10 -9
- package/dist/preset.mjs +52 -50
- package/package.json +1 -1
package/LICENSE.md
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2023 Css Ninja
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,53 @@
|
|
1
|
+
<p align="center">
|
2
|
+
<picture>
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/3911343/232132279-8d8bf0ad-b1d7-4802-984e-a696763dc6cd.png">
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
|
5
|
+
<img alt="Shuriken UI logo" src="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
|
6
|
+
</picture>
|
7
|
+
</p>
|
8
|
+
|
9
|
+
|
10
|
+
<p align="center">
|
11
|
+
<a href="https://cssninja.io" title="Our official website">by <strong>cssninja.io</strong></a>
|
12
|
+
</p>
|
13
|
+
|
14
|
+
---
|
15
|
+
|
16
|
+
## Shuriken UI - Tailwind CSS
|
17
|
+
|
18
|
+
Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.
|
19
|
+
|
20
|
+
This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.
|
21
|
+
|
22
|
+
## Installation
|
23
|
+
|
24
|
+
```bash
|
25
|
+
pnpm install -D @shuriken-ui/tailwind
|
26
|
+
```
|
27
|
+
|
28
|
+
## Usage
|
29
|
+
|
30
|
+
The simplest way to register Shuriken UI is to use `withShurikenUI` helper function.
|
31
|
+
|
32
|
+
```ts
|
33
|
+
// tailwind.config.ts
|
34
|
+
import { withShurikenUI } from '@shuriken-ui/tailwind'
|
35
|
+
|
36
|
+
export default withShurikenUI({
|
37
|
+
// your config
|
38
|
+
})
|
39
|
+
```
|
40
|
+
|
41
|
+
|
42
|
+
You can also direcly import the preset and use it in your config.
|
43
|
+
|
44
|
+
```ts
|
45
|
+
// tailwind.config.ts
|
46
|
+
import type { Config } from 'tailwindcss'
|
47
|
+
import preset from '@shuriken-ui/tailwind/preset'
|
48
|
+
|
49
|
+
export default {
|
50
|
+
presets: [shurikenUIPreset],
|
51
|
+
// your config
|
52
|
+
} satisfies Config
|
53
|
+
```
|
package/dist/config.cjs
CHANGED
@@ -1,10 +1,12 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
3
|
const preset = require('./preset.cjs');
|
4
|
+
require('tailwindcss/defaultTheme');
|
4
5
|
require('tailwindcss/colors');
|
5
6
|
require('@tailwindcss/typography');
|
6
7
|
require('@tailwindcss/aspect-ratio');
|
7
8
|
require('tailwindcss/plugin');
|
9
|
+
require('defu');
|
8
10
|
|
9
11
|
const config = {
|
10
12
|
content: [],
|
package/dist/config.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import * as tailwindcss_types_config from 'tailwindcss/types/config';
|
2
|
+
import { P as PluginOption } from './components-cff79ff9.js';
|
2
3
|
import * as _tailwindcss_typography from '@tailwindcss/typography';
|
3
4
|
import { Config } from 'tailwindcss';
|
4
5
|
|
@@ -10,7 +11,7 @@ declare const _default: {
|
|
10
11
|
plugins: (typeof _tailwindcss_typography | {
|
11
12
|
handler: () => void;
|
12
13
|
} | {
|
13
|
-
(options:
|
14
|
+
(options: PluginOption): {
|
14
15
|
handler: tailwindcss_types_config.PluginCreator;
|
15
16
|
config?: Partial<Config> | undefined;
|
16
17
|
};
|
@@ -18,10 +19,10 @@ declare const _default: {
|
|
18
19
|
})[];
|
19
20
|
theme: {
|
20
21
|
fontFamily: {
|
21
|
-
sans: [
|
22
|
-
heading: [
|
23
|
-
alt: [
|
24
|
-
mono: [
|
22
|
+
sans: string[];
|
23
|
+
heading: string[];
|
24
|
+
alt: string[];
|
25
|
+
mono: string[];
|
25
26
|
};
|
26
27
|
extend: {
|
27
28
|
colors: {
|
@@ -196,7 +197,7 @@ declare const _default: {
|
|
196
197
|
};
|
197
198
|
};
|
198
199
|
keyframes: {
|
199
|
-
indeterminate: {
|
200
|
+
'nui-indeterminate': {
|
200
201
|
'0%': {
|
201
202
|
'margin-left': string;
|
202
203
|
};
|
@@ -204,7 +205,7 @@ declare const _default: {
|
|
204
205
|
'margin-left': string;
|
205
206
|
};
|
206
207
|
};
|
207
|
-
placeload: {
|
208
|
+
'nui-placeload': {
|
208
209
|
'0%': {
|
209
210
|
'background-position': string;
|
210
211
|
};
|
@@ -214,8 +215,8 @@ declare const _default: {
|
|
214
215
|
};
|
215
216
|
};
|
216
217
|
animation: {
|
217
|
-
indeterminate: string;
|
218
|
-
placeload: string;
|
218
|
+
'nui-indeterminate': string;
|
219
|
+
'nui-placeload': string;
|
219
220
|
};
|
220
221
|
};
|
221
222
|
};
|
package/dist/config.mjs
CHANGED
@@ -1,8 +1,10 @@
|
|
1
1
|
import shurikenUIPreset from './preset.mjs';
|
2
|
+
import 'tailwindcss/defaultTheme';
|
2
3
|
import 'tailwindcss/colors';
|
3
4
|
import '@tailwindcss/typography';
|
4
5
|
import '@tailwindcss/aspect-ratio';
|
5
6
|
import 'tailwindcss/plugin';
|
7
|
+
import 'defu';
|
6
8
|
|
7
9
|
const config = {
|
8
10
|
content: [],
|
package/dist/index.cjs
CHANGED
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import * as tailwindcss_types_config from 'tailwindcss/types/config';
|
2
|
+
import { P as PluginOption } from './components-cff79ff9.js';
|
2
3
|
import * as _tailwindcss_typography from '@tailwindcss/typography';
|
3
4
|
import { Config } from 'tailwindcss';
|
4
5
|
|
@@ -10,7 +11,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
10
11
|
plugins: (typeof _tailwindcss_typography | {
|
11
12
|
handler: () => void;
|
12
13
|
} | {
|
13
|
-
(options:
|
14
|
+
(options: PluginOption): {
|
14
15
|
handler: tailwindcss_types_config.PluginCreator;
|
15
16
|
config?: Partial<Config> | undefined;
|
16
17
|
};
|
@@ -18,10 +19,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
18
19
|
})[];
|
19
20
|
theme: {
|
20
21
|
fontFamily: {
|
21
|
-
sans: [
|
22
|
-
heading: [
|
23
|
-
alt: [
|
24
|
-
mono: [
|
22
|
+
sans: string[];
|
23
|
+
heading: string[];
|
24
|
+
alt: string[];
|
25
|
+
mono: string[];
|
25
26
|
};
|
26
27
|
extend: {
|
27
28
|
colors: {
|
@@ -196,7 +197,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
196
197
|
};
|
197
198
|
};
|
198
199
|
keyframes: {
|
199
|
-
indeterminate: {
|
200
|
+
'nui-indeterminate': {
|
200
201
|
'0%': {
|
201
202
|
'margin-left': string;
|
202
203
|
};
|
@@ -204,7 +205,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
204
205
|
'margin-left': string;
|
205
206
|
};
|
206
207
|
};
|
207
|
-
placeload: {
|
208
|
+
'nui-placeload': {
|
208
209
|
'0%': {
|
209
210
|
'background-position': string;
|
210
211
|
};
|
@@ -214,8 +215,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
214
215
|
};
|
215
216
|
};
|
216
217
|
animation: {
|
217
|
-
indeterminate: string;
|
218
|
-
placeload: string;
|
218
|
+
'nui-indeterminate': string;
|
219
|
+
'nui-placeload': string;
|
219
220
|
};
|
220
221
|
};
|
221
222
|
};
|
@@ -227,7 +228,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
227
228
|
plugins: (typeof _tailwindcss_typography | {
|
228
229
|
handler: () => void;
|
229
230
|
} | {
|
230
|
-
(options:
|
231
|
+
(options: PluginOption): {
|
231
232
|
handler: tailwindcss_types_config.PluginCreator;
|
232
233
|
config?: Partial<Config> | undefined;
|
233
234
|
};
|
@@ -235,10 +236,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
235
236
|
})[];
|
236
237
|
theme: {
|
237
238
|
fontFamily: {
|
238
|
-
sans: [
|
239
|
-
heading: [
|
240
|
-
alt: [
|
241
|
-
mono: [
|
239
|
+
sans: string[];
|
240
|
+
heading: string[];
|
241
|
+
alt: string[];
|
242
|
+
mono: string[];
|
242
243
|
};
|
243
244
|
extend: {
|
244
245
|
colors: {
|
@@ -413,7 +414,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
413
414
|
};
|
414
415
|
};
|
415
416
|
keyframes: {
|
416
|
-
indeterminate: {
|
417
|
+
'nui-indeterminate': {
|
417
418
|
'0%': {
|
418
419
|
'margin-left': string;
|
419
420
|
};
|
@@ -421,7 +422,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
421
422
|
'margin-left': string;
|
422
423
|
};
|
423
424
|
};
|
424
|
-
placeload: {
|
425
|
+
'nui-placeload': {
|
425
426
|
'0%': {
|
426
427
|
'background-position': string;
|
427
428
|
};
|
@@ -431,8 +432,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
431
432
|
};
|
432
433
|
};
|
433
434
|
animation: {
|
434
|
-
indeterminate: string;
|
435
|
-
placeload: string;
|
435
|
+
'nui-indeterminate': string;
|
436
|
+
'nui-placeload': string;
|
436
437
|
};
|
437
438
|
};
|
438
439
|
};
|
@@ -442,7 +443,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
442
443
|
plugins: (typeof _tailwindcss_typography | {
|
443
444
|
handler: () => void;
|
444
445
|
} | {
|
445
|
-
(options:
|
446
|
+
(options: PluginOption): {
|
446
447
|
handler: tailwindcss_types_config.PluginCreator;
|
447
448
|
config?: Partial<Config> | undefined;
|
448
449
|
};
|
@@ -450,10 +451,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
450
451
|
})[];
|
451
452
|
theme: {
|
452
453
|
fontFamily: {
|
453
|
-
sans: [
|
454
|
-
heading: [
|
455
|
-
alt: [
|
456
|
-
mono: [
|
454
|
+
sans: string[];
|
455
|
+
heading: string[];
|
456
|
+
alt: string[];
|
457
|
+
mono: string[];
|
457
458
|
};
|
458
459
|
extend: {
|
459
460
|
colors: {
|
@@ -628,7 +629,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
628
629
|
};
|
629
630
|
};
|
630
631
|
keyframes: {
|
631
|
-
indeterminate: {
|
632
|
+
'nui-indeterminate': {
|
632
633
|
'0%': {
|
633
634
|
'margin-left': string;
|
634
635
|
};
|
@@ -636,7 +637,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
636
637
|
'margin-left': string;
|
637
638
|
};
|
638
639
|
};
|
639
|
-
placeload: {
|
640
|
+
'nui-placeload': {
|
640
641
|
'0%': {
|
641
642
|
'background-position': string;
|
642
643
|
};
|
@@ -646,8 +647,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
|
|
646
647
|
};
|
647
648
|
};
|
648
649
|
animation: {
|
649
|
-
indeterminate: string;
|
650
|
-
placeload: string;
|
650
|
+
'nui-indeterminate': string;
|
651
|
+
'nui-placeload': string;
|
651
652
|
};
|
652
653
|
};
|
653
654
|
};
|
package/dist/index.mjs
CHANGED
package/dist/preset.cjs
CHANGED
@@ -1,34 +1,41 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
+
const defaultTheme = require('tailwindcss/defaultTheme');
|
3
4
|
const colors = require('tailwindcss/colors');
|
4
5
|
const typography = require('@tailwindcss/typography');
|
5
6
|
const aspectRatio = require('@tailwindcss/aspect-ratio');
|
6
7
|
const plugin = require('tailwindcss/plugin');
|
8
|
+
const defu = require('defu');
|
7
9
|
|
8
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
9
11
|
|
12
|
+
const defaultTheme__default = /*#__PURE__*/_interopDefaultCompat(defaultTheme);
|
10
13
|
const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
|
11
14
|
const typography__default = /*#__PURE__*/_interopDefaultCompat(typography);
|
12
15
|
const aspectRatio__default = /*#__PURE__*/_interopDefaultCompat(aspectRatio);
|
13
16
|
const plugin__default = /*#__PURE__*/_interopDefaultCompat(plugin);
|
14
17
|
|
18
|
+
const defaultPluginOptions = {
|
19
|
+
prefix: "nui"
|
20
|
+
};
|
15
21
|
const shurikenUIComponents = plugin__default.withOptions(
|
16
|
-
function(options
|
22
|
+
function(options) {
|
23
|
+
const { prefix } = defu.defu(options, defaultPluginOptions);
|
17
24
|
return function({ addComponents }) {
|
18
25
|
addComponents({
|
19
|
-
|
26
|
+
[`.${prefix}-placeload`]: {
|
20
27
|
position: "relative",
|
21
28
|
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
22
29
|
backgroundSize: "1200px 104px"
|
23
30
|
},
|
24
|
-
|
31
|
+
[`.dark .${prefix}-placeload`]: {
|
25
32
|
position: "relative",
|
26
33
|
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
27
34
|
backgroundSize: "1200px 104px"
|
28
35
|
}
|
29
36
|
});
|
30
37
|
addComponents({
|
31
|
-
|
38
|
+
[`.${prefix}-focus`]: {
|
32
39
|
"@apply outline-1 outline-dashed outline-offset-2": {},
|
33
40
|
"@apply outline-transparent": {},
|
34
41
|
"&:focus-within": {
|
@@ -41,126 +48,122 @@ const shurikenUIComponents = plugin__default.withOptions(
|
|
41
48
|
}
|
42
49
|
});
|
43
50
|
addComponents({
|
44
|
-
|
51
|
+
[`.${prefix}-mask`]: {
|
45
52
|
"mask-size": "contain",
|
46
53
|
"mask-repeat": "no-repeat",
|
47
54
|
"mask-position": "center"
|
48
55
|
},
|
49
|
-
|
56
|
+
[`.${prefix}-mask-hex`]: {
|
50
57
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
|
51
58
|
},
|
52
|
-
|
59
|
+
[`.${prefix}-mask-hexed`]: {
|
53
60
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
|
54
61
|
},
|
55
|
-
|
62
|
+
[`.${prefix}-mask-deca`]: {
|
56
63
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
|
57
64
|
},
|
58
|
-
|
65
|
+
[`.${prefix}-mask-blob`]: {
|
59
66
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
|
60
67
|
},
|
61
|
-
|
68
|
+
[`.${prefix}-mask-diamond`]: {
|
62
69
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
|
63
70
|
}
|
64
71
|
});
|
65
72
|
addComponents({
|
66
|
-
|
73
|
+
[`.${prefix}-text-white`]: {
|
67
74
|
"@apply text-white dark:text-black": {}
|
68
75
|
},
|
69
|
-
|
76
|
+
[`.${prefix}-text-50`]: {
|
70
77
|
"@apply text-muted-50 dark:text-muted-900": {}
|
71
78
|
},
|
72
|
-
|
79
|
+
[`.${prefix}-text-100`]: {
|
73
80
|
"@apply text-muted-100 dark:text-muted-900": {}
|
74
81
|
},
|
75
|
-
|
82
|
+
[`.${prefix}-text-200`]: {
|
76
83
|
"@apply text-muted-200 dark:text-muted-800": {}
|
77
84
|
},
|
78
|
-
|
85
|
+
[`.${prefix}-text-300`]: {
|
79
86
|
"@apply text-muted-300 dark:text-muted-700": {}
|
80
87
|
},
|
81
|
-
|
88
|
+
[`.${prefix}-text-400`]: {
|
82
89
|
"@apply text-muted-400 dark:text-muted-600": {}
|
83
90
|
},
|
84
|
-
|
91
|
+
[`.${prefix}-text-500`]: {
|
85
92
|
"@apply text-muted-500 dark:text-muted-500": {}
|
86
93
|
},
|
87
|
-
|
94
|
+
[`.${prefix}-text-600`]: {
|
88
95
|
"@apply text-muted-600 dark:text-muted-400": {}
|
89
96
|
},
|
90
|
-
|
97
|
+
[`.${prefix}-text-700`]: {
|
91
98
|
"@apply text-muted-700 dark:text-muted-300": {}
|
92
99
|
},
|
93
|
-
|
100
|
+
[`.${prefix}-text-800`]: {
|
94
101
|
"@apply text-muted-800 dark:text-muted-200": {}
|
95
102
|
},
|
96
|
-
|
103
|
+
[`.${prefix}-text-900`]: {
|
97
104
|
"@apply text-muted-900 dark:text-muted-100": {}
|
98
105
|
},
|
99
|
-
|
106
|
+
[`.${prefix}-text-black`]: {
|
100
107
|
"@apply text-black dark:text-white": {}
|
101
108
|
}
|
102
109
|
});
|
103
110
|
addComponents({
|
104
|
-
|
111
|
+
[`.${prefix}-bg-white`]: {
|
105
112
|
"@apply bg-white dark:bg-muted-900": {}
|
106
113
|
},
|
107
|
-
|
114
|
+
[`.${prefix}-bg-50`]: {
|
108
115
|
"@apply bg-muted-50 dark:bg-muted-900": {}
|
109
116
|
},
|
110
|
-
|
117
|
+
[`.${prefix}-bg-100`]: {
|
111
118
|
"@apply bg-muted-100 dark:bg-muted-900": {}
|
112
119
|
},
|
113
|
-
|
120
|
+
[`.${prefix}-bg-200`]: {
|
114
121
|
"@apply bg-muted-200 dark:bg-muted-800": {}
|
115
122
|
},
|
116
|
-
|
123
|
+
[`.${prefix}-bg-300`]: {
|
117
124
|
"@apply bg-muted-300 dark:bg-muted-700": {}
|
118
125
|
},
|
119
|
-
|
126
|
+
[`.${prefix}-bg-400`]: {
|
120
127
|
"@apply bg-muted-400 dark:bg-muted-600": {}
|
121
128
|
},
|
122
|
-
|
129
|
+
[`.${prefix}-bg-500`]: {
|
123
130
|
"@apply bg-muted-500 dark:bg-muted-500": {}
|
124
131
|
},
|
125
|
-
|
132
|
+
[`.${prefix}-bg-600`]: {
|
126
133
|
"@apply bg-muted-600 dark:bg-muted-400": {}
|
127
134
|
},
|
128
|
-
|
135
|
+
[`.${prefix}-bg-700`]: {
|
129
136
|
"@apply bg-muted-700 dark:bg-muted-300": {}
|
130
137
|
},
|
131
|
-
|
138
|
+
[`.${prefix}-bg-800`]: {
|
132
139
|
"@apply bg-muted-800 dark:bg-muted-200": {}
|
133
140
|
},
|
134
|
-
|
141
|
+
[`.${prefix}-bg-900`]: {
|
135
142
|
"@apply bg-muted-900 dark:bg-muted-100": {}
|
136
143
|
},
|
137
|
-
|
144
|
+
[`.${prefix}-bg-black`]: {
|
138
145
|
"@apply bg-muted-900 dark:bg-white": {}
|
139
146
|
}
|
140
147
|
});
|
141
148
|
addComponents({
|
142
|
-
|
149
|
+
[`.${prefix}-label`]: {
|
143
150
|
"@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80": {}
|
144
151
|
}
|
145
152
|
});
|
146
153
|
addComponents({
|
147
|
-
|
154
|
+
[`.${prefix}-dropdown-divider`]: {
|
148
155
|
"@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600": {}
|
149
156
|
}
|
150
157
|
});
|
151
158
|
addComponents({
|
152
|
-
|
159
|
+
[`.${prefix}-mark`]: {
|
153
160
|
"@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200": {}
|
154
161
|
}
|
155
162
|
});
|
156
163
|
};
|
157
164
|
},
|
158
165
|
function(options) {
|
159
|
-
return {
|
160
|
-
theme: {
|
161
|
-
nui: {}
|
162
|
-
}
|
163
|
-
};
|
166
|
+
return {};
|
164
167
|
}
|
165
168
|
);
|
166
169
|
|
@@ -170,10 +173,10 @@ const shurikenUIPreset = {
|
|
170
173
|
plugins: [typography__default, aspectRatio__default, shurikenUIComponents],
|
171
174
|
theme: {
|
172
175
|
fontFamily: {
|
173
|
-
sans:
|
174
|
-
heading:
|
175
|
-
alt:
|
176
|
-
mono:
|
176
|
+
sans: defaultTheme__default.fontFamily.sans,
|
177
|
+
heading: defaultTheme__default.fontFamily.sans,
|
178
|
+
alt: defaultTheme__default.fontFamily.sans,
|
179
|
+
mono: defaultTheme__default.fontFamily.mono
|
177
180
|
},
|
178
181
|
extend: {
|
179
182
|
colors: {
|
@@ -274,18 +277,18 @@ const shurikenUIPreset = {
|
|
274
277
|
}
|
275
278
|
}),
|
276
279
|
keyframes: {
|
277
|
-
indeterminate: {
|
280
|
+
"nui-indeterminate": {
|
278
281
|
"0%": { "margin-left": "-10%" },
|
279
282
|
"100%": { "margin-left": "100%" }
|
280
283
|
},
|
281
|
-
placeload: {
|
284
|
+
"nui-placeload": {
|
282
285
|
"0%": { "background-position": "-468px 0" },
|
283
286
|
"100%": { "background-position": "468px 0" }
|
284
287
|
}
|
285
288
|
},
|
286
289
|
animation: {
|
287
|
-
indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
|
288
|
-
placeload: "placeload 1s linear infinite forwards"
|
290
|
+
"nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
|
291
|
+
"nui-placeload": "nui-placeload 1s linear infinite forwards"
|
289
292
|
}
|
290
293
|
}
|
291
294
|
}
|
package/dist/preset.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import * as tailwindcss_types_config from 'tailwindcss/types/config';
|
2
|
+
import { P as PluginOption } from './components-cff79ff9.js';
|
2
3
|
import { Config } from 'tailwindcss';
|
3
4
|
import _tailwindcss_typography__default from '@tailwindcss/typography';
|
4
5
|
|
@@ -8,7 +9,7 @@ declare const _default: {
|
|
8
9
|
plugins: (typeof _tailwindcss_typography__default | {
|
9
10
|
handler: () => void;
|
10
11
|
} | {
|
11
|
-
(options:
|
12
|
+
(options: PluginOption): {
|
12
13
|
handler: tailwindcss_types_config.PluginCreator;
|
13
14
|
config?: Partial<Config> | undefined;
|
14
15
|
};
|
@@ -16,10 +17,10 @@ declare const _default: {
|
|
16
17
|
})[];
|
17
18
|
theme: {
|
18
19
|
fontFamily: {
|
19
|
-
sans: [
|
20
|
-
heading: [
|
21
|
-
alt: [
|
22
|
-
mono: [
|
20
|
+
sans: string[];
|
21
|
+
heading: string[];
|
22
|
+
alt: string[];
|
23
|
+
mono: string[];
|
23
24
|
};
|
24
25
|
extend: {
|
25
26
|
colors: {
|
@@ -194,7 +195,7 @@ declare const _default: {
|
|
194
195
|
};
|
195
196
|
};
|
196
197
|
keyframes: {
|
197
|
-
indeterminate: {
|
198
|
+
'nui-indeterminate': {
|
198
199
|
'0%': {
|
199
200
|
'margin-left': string;
|
200
201
|
};
|
@@ -202,7 +203,7 @@ declare const _default: {
|
|
202
203
|
'margin-left': string;
|
203
204
|
};
|
204
205
|
};
|
205
|
-
placeload: {
|
206
|
+
'nui-placeload': {
|
206
207
|
'0%': {
|
207
208
|
'background-position': string;
|
208
209
|
};
|
@@ -212,8 +213,8 @@ declare const _default: {
|
|
212
213
|
};
|
213
214
|
};
|
214
215
|
animation: {
|
215
|
-
indeterminate: string;
|
216
|
-
placeload: string;
|
216
|
+
'nui-indeterminate': string;
|
217
|
+
'nui-placeload': string;
|
217
218
|
};
|
218
219
|
};
|
219
220
|
};
|
package/dist/preset.mjs
CHANGED
@@ -1,25 +1,31 @@
|
|
1
|
+
import defaultTheme from 'tailwindcss/defaultTheme';
|
1
2
|
import colors from 'tailwindcss/colors';
|
2
3
|
import typography from '@tailwindcss/typography';
|
3
4
|
import aspectRatio from '@tailwindcss/aspect-ratio';
|
4
5
|
import plugin from 'tailwindcss/plugin';
|
6
|
+
import { defu } from 'defu';
|
5
7
|
|
8
|
+
const defaultPluginOptions = {
|
9
|
+
prefix: "nui"
|
10
|
+
};
|
6
11
|
const shurikenUIComponents = plugin.withOptions(
|
7
|
-
function(options
|
12
|
+
function(options) {
|
13
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
8
14
|
return function({ addComponents }) {
|
9
15
|
addComponents({
|
10
|
-
|
16
|
+
[`.${prefix}-placeload`]: {
|
11
17
|
position: "relative",
|
12
18
|
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
13
19
|
backgroundSize: "1200px 104px"
|
14
20
|
},
|
15
|
-
|
21
|
+
[`.dark .${prefix}-placeload`]: {
|
16
22
|
position: "relative",
|
17
23
|
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
18
24
|
backgroundSize: "1200px 104px"
|
19
25
|
}
|
20
26
|
});
|
21
27
|
addComponents({
|
22
|
-
|
28
|
+
[`.${prefix}-focus`]: {
|
23
29
|
"@apply outline-1 outline-dashed outline-offset-2": {},
|
24
30
|
"@apply outline-transparent": {},
|
25
31
|
"&:focus-within": {
|
@@ -32,126 +38,122 @@ const shurikenUIComponents = plugin.withOptions(
|
|
32
38
|
}
|
33
39
|
});
|
34
40
|
addComponents({
|
35
|
-
|
41
|
+
[`.${prefix}-mask`]: {
|
36
42
|
"mask-size": "contain",
|
37
43
|
"mask-repeat": "no-repeat",
|
38
44
|
"mask-position": "center"
|
39
45
|
},
|
40
|
-
|
46
|
+
[`.${prefix}-mask-hex`]: {
|
41
47
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
|
42
48
|
},
|
43
|
-
|
49
|
+
[`.${prefix}-mask-hexed`]: {
|
44
50
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
|
45
51
|
},
|
46
|
-
|
52
|
+
[`.${prefix}-mask-deca`]: {
|
47
53
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
|
48
54
|
},
|
49
|
-
|
55
|
+
[`.${prefix}-mask-blob`]: {
|
50
56
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
|
51
57
|
},
|
52
|
-
|
58
|
+
[`.${prefix}-mask-diamond`]: {
|
53
59
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
|
54
60
|
}
|
55
61
|
});
|
56
62
|
addComponents({
|
57
|
-
|
63
|
+
[`.${prefix}-text-white`]: {
|
58
64
|
"@apply text-white dark:text-black": {}
|
59
65
|
},
|
60
|
-
|
66
|
+
[`.${prefix}-text-50`]: {
|
61
67
|
"@apply text-muted-50 dark:text-muted-900": {}
|
62
68
|
},
|
63
|
-
|
69
|
+
[`.${prefix}-text-100`]: {
|
64
70
|
"@apply text-muted-100 dark:text-muted-900": {}
|
65
71
|
},
|
66
|
-
|
72
|
+
[`.${prefix}-text-200`]: {
|
67
73
|
"@apply text-muted-200 dark:text-muted-800": {}
|
68
74
|
},
|
69
|
-
|
75
|
+
[`.${prefix}-text-300`]: {
|
70
76
|
"@apply text-muted-300 dark:text-muted-700": {}
|
71
77
|
},
|
72
|
-
|
78
|
+
[`.${prefix}-text-400`]: {
|
73
79
|
"@apply text-muted-400 dark:text-muted-600": {}
|
74
80
|
},
|
75
|
-
|
81
|
+
[`.${prefix}-text-500`]: {
|
76
82
|
"@apply text-muted-500 dark:text-muted-500": {}
|
77
83
|
},
|
78
|
-
|
84
|
+
[`.${prefix}-text-600`]: {
|
79
85
|
"@apply text-muted-600 dark:text-muted-400": {}
|
80
86
|
},
|
81
|
-
|
87
|
+
[`.${prefix}-text-700`]: {
|
82
88
|
"@apply text-muted-700 dark:text-muted-300": {}
|
83
89
|
},
|
84
|
-
|
90
|
+
[`.${prefix}-text-800`]: {
|
85
91
|
"@apply text-muted-800 dark:text-muted-200": {}
|
86
92
|
},
|
87
|
-
|
93
|
+
[`.${prefix}-text-900`]: {
|
88
94
|
"@apply text-muted-900 dark:text-muted-100": {}
|
89
95
|
},
|
90
|
-
|
96
|
+
[`.${prefix}-text-black`]: {
|
91
97
|
"@apply text-black dark:text-white": {}
|
92
98
|
}
|
93
99
|
});
|
94
100
|
addComponents({
|
95
|
-
|
101
|
+
[`.${prefix}-bg-white`]: {
|
96
102
|
"@apply bg-white dark:bg-muted-900": {}
|
97
103
|
},
|
98
|
-
|
104
|
+
[`.${prefix}-bg-50`]: {
|
99
105
|
"@apply bg-muted-50 dark:bg-muted-900": {}
|
100
106
|
},
|
101
|
-
|
107
|
+
[`.${prefix}-bg-100`]: {
|
102
108
|
"@apply bg-muted-100 dark:bg-muted-900": {}
|
103
109
|
},
|
104
|
-
|
110
|
+
[`.${prefix}-bg-200`]: {
|
105
111
|
"@apply bg-muted-200 dark:bg-muted-800": {}
|
106
112
|
},
|
107
|
-
|
113
|
+
[`.${prefix}-bg-300`]: {
|
108
114
|
"@apply bg-muted-300 dark:bg-muted-700": {}
|
109
115
|
},
|
110
|
-
|
116
|
+
[`.${prefix}-bg-400`]: {
|
111
117
|
"@apply bg-muted-400 dark:bg-muted-600": {}
|
112
118
|
},
|
113
|
-
|
119
|
+
[`.${prefix}-bg-500`]: {
|
114
120
|
"@apply bg-muted-500 dark:bg-muted-500": {}
|
115
121
|
},
|
116
|
-
|
122
|
+
[`.${prefix}-bg-600`]: {
|
117
123
|
"@apply bg-muted-600 dark:bg-muted-400": {}
|
118
124
|
},
|
119
|
-
|
125
|
+
[`.${prefix}-bg-700`]: {
|
120
126
|
"@apply bg-muted-700 dark:bg-muted-300": {}
|
121
127
|
},
|
122
|
-
|
128
|
+
[`.${prefix}-bg-800`]: {
|
123
129
|
"@apply bg-muted-800 dark:bg-muted-200": {}
|
124
130
|
},
|
125
|
-
|
131
|
+
[`.${prefix}-bg-900`]: {
|
126
132
|
"@apply bg-muted-900 dark:bg-muted-100": {}
|
127
133
|
},
|
128
|
-
|
134
|
+
[`.${prefix}-bg-black`]: {
|
129
135
|
"@apply bg-muted-900 dark:bg-white": {}
|
130
136
|
}
|
131
137
|
});
|
132
138
|
addComponents({
|
133
|
-
|
139
|
+
[`.${prefix}-label`]: {
|
134
140
|
"@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80": {}
|
135
141
|
}
|
136
142
|
});
|
137
143
|
addComponents({
|
138
|
-
|
144
|
+
[`.${prefix}-dropdown-divider`]: {
|
139
145
|
"@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600": {}
|
140
146
|
}
|
141
147
|
});
|
142
148
|
addComponents({
|
143
|
-
|
149
|
+
[`.${prefix}-mark`]: {
|
144
150
|
"@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200": {}
|
145
151
|
}
|
146
152
|
});
|
147
153
|
};
|
148
154
|
},
|
149
155
|
function(options) {
|
150
|
-
return {
|
151
|
-
theme: {
|
152
|
-
nui: {}
|
153
|
-
}
|
154
|
-
};
|
156
|
+
return {};
|
155
157
|
}
|
156
158
|
);
|
157
159
|
|
@@ -161,10 +163,10 @@ const shurikenUIPreset = {
|
|
161
163
|
plugins: [typography, aspectRatio, shurikenUIComponents],
|
162
164
|
theme: {
|
163
165
|
fontFamily: {
|
164
|
-
sans:
|
165
|
-
heading:
|
166
|
-
alt:
|
167
|
-
mono:
|
166
|
+
sans: defaultTheme.fontFamily.sans,
|
167
|
+
heading: defaultTheme.fontFamily.sans,
|
168
|
+
alt: defaultTheme.fontFamily.sans,
|
169
|
+
mono: defaultTheme.fontFamily.mono
|
168
170
|
},
|
169
171
|
extend: {
|
170
172
|
colors: {
|
@@ -265,18 +267,18 @@ const shurikenUIPreset = {
|
|
265
267
|
}
|
266
268
|
}),
|
267
269
|
keyframes: {
|
268
|
-
indeterminate: {
|
270
|
+
"nui-indeterminate": {
|
269
271
|
"0%": { "margin-left": "-10%" },
|
270
272
|
"100%": { "margin-left": "100%" }
|
271
273
|
},
|
272
|
-
placeload: {
|
274
|
+
"nui-placeload": {
|
273
275
|
"0%": { "background-position": "-468px 0" },
|
274
276
|
"100%": { "background-position": "468px 0" }
|
275
277
|
}
|
276
278
|
},
|
277
279
|
animation: {
|
278
|
-
indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
|
279
|
-
placeload: "placeload 1s linear infinite forwards"
|
280
|
+
"nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
|
281
|
+
"nui-placeload": "nui-placeload 1s linear infinite forwards"
|
280
282
|
}
|
281
283
|
}
|
282
284
|
}
|