@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 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
+ ```
@@ -0,0 +1,5 @@
1
+ interface PluginOption {
2
+ prefix?: string;
3
+ }
4
+
5
+ export { PluginOption as P };
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: unknown): {
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: [string, string];
22
- heading: [string, string];
23
- alt: [string, string];
24
- mono: [string, string];
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
@@ -3,6 +3,7 @@
3
3
  const defu = require('defu');
4
4
  const config = require('./config.cjs');
5
5
  require('./preset.cjs');
6
+ require('tailwindcss/defaultTheme');
6
7
  require('tailwindcss/colors');
7
8
  require('@tailwindcss/typography');
8
9
  require('@tailwindcss/aspect-ratio');
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: unknown): {
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: [string, string];
22
- heading: [string, string];
23
- alt: [string, string];
24
- mono: [string, string];
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: unknown): {
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: [string, string];
239
- heading: [string, string];
240
- alt: [string, string];
241
- mono: [string, string];
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: unknown): {
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: [string, string];
454
- heading: [string, string];
455
- alt: [string, string];
456
- mono: [string, string];
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
@@ -1,6 +1,7 @@
1
1
  import { defu } from 'defu';
2
2
  import config from './config.mjs';
3
3
  import './preset.mjs';
4
+ import 'tailwindcss/defaultTheme';
4
5
  import 'tailwindcss/colors';
5
6
  import '@tailwindcss/typography';
6
7
  import '@tailwindcss/aspect-ratio';
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
- ".placeload": {
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
- ".dark .placeload": {
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
- ".nui-focus": {
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
- ".nui-mask": {
51
+ [`.${prefix}-mask`]: {
45
52
  "mask-size": "contain",
46
53
  "mask-repeat": "no-repeat",
47
54
  "mask-position": "center"
48
55
  },
49
- ".nui-mask-hex": {
56
+ [`.${prefix}-mask-hex`]: {
50
57
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
51
58
  },
52
- ".nui-mask-hexed": {
59
+ [`.${prefix}-mask-hexed`]: {
53
60
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
54
61
  },
55
- ".nui-mask-deca": {
62
+ [`.${prefix}-mask-deca`]: {
56
63
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
57
64
  },
58
- ".nui-mask-blob": {
65
+ [`.${prefix}-mask-blob`]: {
59
66
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
60
67
  },
61
- ".nui-mask-diamond": {
68
+ [`.${prefix}-mask-diamond`]: {
62
69
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
63
70
  }
64
71
  });
65
72
  addComponents({
66
- ".nui-text-white": {
73
+ [`.${prefix}-text-white`]: {
67
74
  "@apply text-white dark:text-black": {}
68
75
  },
69
- ".nui-text-50": {
76
+ [`.${prefix}-text-50`]: {
70
77
  "@apply text-muted-50 dark:text-muted-900": {}
71
78
  },
72
- ".nui-text-100": {
79
+ [`.${prefix}-text-100`]: {
73
80
  "@apply text-muted-100 dark:text-muted-900": {}
74
81
  },
75
- ".nui-text-200": {
82
+ [`.${prefix}-text-200`]: {
76
83
  "@apply text-muted-200 dark:text-muted-800": {}
77
84
  },
78
- ".nui-text-300": {
85
+ [`.${prefix}-text-300`]: {
79
86
  "@apply text-muted-300 dark:text-muted-700": {}
80
87
  },
81
- ".nui-text-400": {
88
+ [`.${prefix}-text-400`]: {
82
89
  "@apply text-muted-400 dark:text-muted-600": {}
83
90
  },
84
- ".nui-text-500": {
91
+ [`.${prefix}-text-500`]: {
85
92
  "@apply text-muted-500 dark:text-muted-500": {}
86
93
  },
87
- ".nui-text-600": {
94
+ [`.${prefix}-text-600`]: {
88
95
  "@apply text-muted-600 dark:text-muted-400": {}
89
96
  },
90
- ".nui-text-700": {
97
+ [`.${prefix}-text-700`]: {
91
98
  "@apply text-muted-700 dark:text-muted-300": {}
92
99
  },
93
- ".nui-text-800": {
100
+ [`.${prefix}-text-800`]: {
94
101
  "@apply text-muted-800 dark:text-muted-200": {}
95
102
  },
96
- ".nui-text-900": {
103
+ [`.${prefix}-text-900`]: {
97
104
  "@apply text-muted-900 dark:text-muted-100": {}
98
105
  },
99
- ".nui-text-black": {
106
+ [`.${prefix}-text-black`]: {
100
107
  "@apply text-black dark:text-white": {}
101
108
  }
102
109
  });
103
110
  addComponents({
104
- ".nui-bg-white": {
111
+ [`.${prefix}-bg-white`]: {
105
112
  "@apply bg-white dark:bg-muted-900": {}
106
113
  },
107
- ".nui-bg-50": {
114
+ [`.${prefix}-bg-50`]: {
108
115
  "@apply bg-muted-50 dark:bg-muted-900": {}
109
116
  },
110
- ".nui-bg-100": {
117
+ [`.${prefix}-bg-100`]: {
111
118
  "@apply bg-muted-100 dark:bg-muted-900": {}
112
119
  },
113
- ".nui-bg-200": {
120
+ [`.${prefix}-bg-200`]: {
114
121
  "@apply bg-muted-200 dark:bg-muted-800": {}
115
122
  },
116
- ".nui-bg-300": {
123
+ [`.${prefix}-bg-300`]: {
117
124
  "@apply bg-muted-300 dark:bg-muted-700": {}
118
125
  },
119
- ".nui-bg-400": {
126
+ [`.${prefix}-bg-400`]: {
120
127
  "@apply bg-muted-400 dark:bg-muted-600": {}
121
128
  },
122
- ".nui-bg-500": {
129
+ [`.${prefix}-bg-500`]: {
123
130
  "@apply bg-muted-500 dark:bg-muted-500": {}
124
131
  },
125
- ".nui-bg-600": {
132
+ [`.${prefix}-bg-600`]: {
126
133
  "@apply bg-muted-600 dark:bg-muted-400": {}
127
134
  },
128
- ".nui-bg-700": {
135
+ [`.${prefix}-bg-700`]: {
129
136
  "@apply bg-muted-700 dark:bg-muted-300": {}
130
137
  },
131
- ".nui-bg-800": {
138
+ [`.${prefix}-bg-800`]: {
132
139
  "@apply bg-muted-800 dark:bg-muted-200": {}
133
140
  },
134
- ".nui-bg-900": {
141
+ [`.${prefix}-bg-900`]: {
135
142
  "@apply bg-muted-900 dark:bg-muted-100": {}
136
143
  },
137
- ".nui-bg-black": {
144
+ [`.${prefix}-bg-black`]: {
138
145
  "@apply bg-muted-900 dark:bg-white": {}
139
146
  }
140
147
  });
141
148
  addComponents({
142
- ".nui-label": {
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
- ".nui-dropdown-divider": {
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
- ".nui-mark": {
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: ["Roboto Flex", "sans-serif"],
174
- heading: ["Inter", "sans-serif"],
175
- alt: ["Karla", "sans-serif"],
176
- mono: ["ui-monospace", "monospace"]
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: unknown): {
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: [string, string];
20
- heading: [string, string];
21
- alt: [string, string];
22
- mono: [string, string];
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
- ".placeload": {
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
- ".dark .placeload": {
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
- ".nui-focus": {
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
- ".nui-mask": {
41
+ [`.${prefix}-mask`]: {
36
42
  "mask-size": "contain",
37
43
  "mask-repeat": "no-repeat",
38
44
  "mask-position": "center"
39
45
  },
40
- ".nui-mask-hex": {
46
+ [`.${prefix}-mask-hex`]: {
41
47
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
42
48
  },
43
- ".nui-mask-hexed": {
49
+ [`.${prefix}-mask-hexed`]: {
44
50
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
45
51
  },
46
- ".nui-mask-deca": {
52
+ [`.${prefix}-mask-deca`]: {
47
53
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
48
54
  },
49
- ".nui-mask-blob": {
55
+ [`.${prefix}-mask-blob`]: {
50
56
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
51
57
  },
52
- ".nui-mask-diamond": {
58
+ [`.${prefix}-mask-diamond`]: {
53
59
  "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
54
60
  }
55
61
  });
56
62
  addComponents({
57
- ".nui-text-white": {
63
+ [`.${prefix}-text-white`]: {
58
64
  "@apply text-white dark:text-black": {}
59
65
  },
60
- ".nui-text-50": {
66
+ [`.${prefix}-text-50`]: {
61
67
  "@apply text-muted-50 dark:text-muted-900": {}
62
68
  },
63
- ".nui-text-100": {
69
+ [`.${prefix}-text-100`]: {
64
70
  "@apply text-muted-100 dark:text-muted-900": {}
65
71
  },
66
- ".nui-text-200": {
72
+ [`.${prefix}-text-200`]: {
67
73
  "@apply text-muted-200 dark:text-muted-800": {}
68
74
  },
69
- ".nui-text-300": {
75
+ [`.${prefix}-text-300`]: {
70
76
  "@apply text-muted-300 dark:text-muted-700": {}
71
77
  },
72
- ".nui-text-400": {
78
+ [`.${prefix}-text-400`]: {
73
79
  "@apply text-muted-400 dark:text-muted-600": {}
74
80
  },
75
- ".nui-text-500": {
81
+ [`.${prefix}-text-500`]: {
76
82
  "@apply text-muted-500 dark:text-muted-500": {}
77
83
  },
78
- ".nui-text-600": {
84
+ [`.${prefix}-text-600`]: {
79
85
  "@apply text-muted-600 dark:text-muted-400": {}
80
86
  },
81
- ".nui-text-700": {
87
+ [`.${prefix}-text-700`]: {
82
88
  "@apply text-muted-700 dark:text-muted-300": {}
83
89
  },
84
- ".nui-text-800": {
90
+ [`.${prefix}-text-800`]: {
85
91
  "@apply text-muted-800 dark:text-muted-200": {}
86
92
  },
87
- ".nui-text-900": {
93
+ [`.${prefix}-text-900`]: {
88
94
  "@apply text-muted-900 dark:text-muted-100": {}
89
95
  },
90
- ".nui-text-black": {
96
+ [`.${prefix}-text-black`]: {
91
97
  "@apply text-black dark:text-white": {}
92
98
  }
93
99
  });
94
100
  addComponents({
95
- ".nui-bg-white": {
101
+ [`.${prefix}-bg-white`]: {
96
102
  "@apply bg-white dark:bg-muted-900": {}
97
103
  },
98
- ".nui-bg-50": {
104
+ [`.${prefix}-bg-50`]: {
99
105
  "@apply bg-muted-50 dark:bg-muted-900": {}
100
106
  },
101
- ".nui-bg-100": {
107
+ [`.${prefix}-bg-100`]: {
102
108
  "@apply bg-muted-100 dark:bg-muted-900": {}
103
109
  },
104
- ".nui-bg-200": {
110
+ [`.${prefix}-bg-200`]: {
105
111
  "@apply bg-muted-200 dark:bg-muted-800": {}
106
112
  },
107
- ".nui-bg-300": {
113
+ [`.${prefix}-bg-300`]: {
108
114
  "@apply bg-muted-300 dark:bg-muted-700": {}
109
115
  },
110
- ".nui-bg-400": {
116
+ [`.${prefix}-bg-400`]: {
111
117
  "@apply bg-muted-400 dark:bg-muted-600": {}
112
118
  },
113
- ".nui-bg-500": {
119
+ [`.${prefix}-bg-500`]: {
114
120
  "@apply bg-muted-500 dark:bg-muted-500": {}
115
121
  },
116
- ".nui-bg-600": {
122
+ [`.${prefix}-bg-600`]: {
117
123
  "@apply bg-muted-600 dark:bg-muted-400": {}
118
124
  },
119
- ".nui-bg-700": {
125
+ [`.${prefix}-bg-700`]: {
120
126
  "@apply bg-muted-700 dark:bg-muted-300": {}
121
127
  },
122
- ".nui-bg-800": {
128
+ [`.${prefix}-bg-800`]: {
123
129
  "@apply bg-muted-800 dark:bg-muted-200": {}
124
130
  },
125
- ".nui-bg-900": {
131
+ [`.${prefix}-bg-900`]: {
126
132
  "@apply bg-muted-900 dark:bg-muted-100": {}
127
133
  },
128
- ".nui-bg-black": {
134
+ [`.${prefix}-bg-black`]: {
129
135
  "@apply bg-muted-900 dark:bg-white": {}
130
136
  }
131
137
  });
132
138
  addComponents({
133
- ".nui-label": {
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
- ".nui-dropdown-divider": {
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
- ".nui-mark": {
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: ["Roboto Flex", "sans-serif"],
165
- heading: ["Inter", "sans-serif"],
166
- alt: ["Karla", "sans-serif"],
167
- mono: ["ui-monospace", "monospace"]
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuriken-ui/tailwind",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "license": "MIT",
5
5
  "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
6
6
  "repository": "shuriken-ui/tailwind",