@shuriken-ui/tailwind 0.0.3 → 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.
@@ -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
  };
@@ -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
  };
@@ -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
  };
@@ -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
  };
@@ -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,165 +48,135 @@ 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
 
167
- const sansSystemFont = [
168
- "ui-sans-serif",
169
- "system-ui",
170
- "-apple-system",
171
- "BlinkMacSystemFont",
172
- '"Segoe UI"',
173
- "Roboto",
174
- '"Helvetica Neue"',
175
- "Arial",
176
- '"Noto Sans"',
177
- "sans-serif",
178
- '"Apple Color Emoji"',
179
- '"Segoe UI Emoji"',
180
- '"Segoe UI Symbol"',
181
- '"Noto Color Emoji"'
182
- ];
183
- const monoSystemFont = [
184
- "ui-monospace",
185
- "SFMono-Regular",
186
- "Menlo",
187
- "Monaco",
188
- "Consolas",
189
- '"Liberation Mono"',
190
- '"Courier New"',
191
- "monospace"
192
- ];
193
170
  const shurikenUIPreset = {
194
171
  darkMode: "class",
195
172
  content: [],
196
173
  plugins: [typography__default, aspectRatio__default, shurikenUIComponents],
197
174
  theme: {
198
175
  fontFamily: {
199
- sans: sansSystemFont,
200
- heading: sansSystemFont,
201
- alt: sansSystemFont,
202
- mono: monoSystemFont
176
+ sans: defaultTheme__default.fontFamily.sans,
177
+ heading: defaultTheme__default.fontFamily.sans,
178
+ alt: defaultTheme__default.fontFamily.sans,
179
+ mono: defaultTheme__default.fontFamily.mono
203
180
  },
204
181
  extend: {
205
182
  colors: {
@@ -300,18 +277,18 @@ const shurikenUIPreset = {
300
277
  }
301
278
  }),
302
279
  keyframes: {
303
- indeterminate: {
280
+ "nui-indeterminate": {
304
281
  "0%": { "margin-left": "-10%" },
305
282
  "100%": { "margin-left": "100%" }
306
283
  },
307
- placeload: {
284
+ "nui-placeload": {
308
285
  "0%": { "background-position": "-468px 0" },
309
286
  "100%": { "background-position": "468px 0" }
310
287
  }
311
288
  },
312
289
  animation: {
313
- indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
314
- 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"
315
292
  }
316
293
  }
317
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
  };
@@ -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,165 +38,135 @@ 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
 
158
- const sansSystemFont = [
159
- "ui-sans-serif",
160
- "system-ui",
161
- "-apple-system",
162
- "BlinkMacSystemFont",
163
- '"Segoe UI"',
164
- "Roboto",
165
- '"Helvetica Neue"',
166
- "Arial",
167
- '"Noto Sans"',
168
- "sans-serif",
169
- '"Apple Color Emoji"',
170
- '"Segoe UI Emoji"',
171
- '"Segoe UI Symbol"',
172
- '"Noto Color Emoji"'
173
- ];
174
- const monoSystemFont = [
175
- "ui-monospace",
176
- "SFMono-Regular",
177
- "Menlo",
178
- "Monaco",
179
- "Consolas",
180
- '"Liberation Mono"',
181
- '"Courier New"',
182
- "monospace"
183
- ];
184
160
  const shurikenUIPreset = {
185
161
  darkMode: "class",
186
162
  content: [],
187
163
  plugins: [typography, aspectRatio, shurikenUIComponents],
188
164
  theme: {
189
165
  fontFamily: {
190
- sans: sansSystemFont,
191
- heading: sansSystemFont,
192
- alt: sansSystemFont,
193
- mono: monoSystemFont
166
+ sans: defaultTheme.fontFamily.sans,
167
+ heading: defaultTheme.fontFamily.sans,
168
+ alt: defaultTheme.fontFamily.sans,
169
+ mono: defaultTheme.fontFamily.mono
194
170
  },
195
171
  extend: {
196
172
  colors: {
@@ -291,18 +267,18 @@ const shurikenUIPreset = {
291
267
  }
292
268
  }),
293
269
  keyframes: {
294
- indeterminate: {
270
+ "nui-indeterminate": {
295
271
  "0%": { "margin-left": "-10%" },
296
272
  "100%": { "margin-left": "100%" }
297
273
  },
298
- placeload: {
274
+ "nui-placeload": {
299
275
  "0%": { "background-position": "-468px 0" },
300
276
  "100%": { "background-position": "468px 0" }
301
277
  }
302
278
  },
303
279
  animation: {
304
- indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
305
- 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"
306
282
  }
307
283
  }
308
284
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuriken-ui/tailwind",
3
- "version": "0.0.3",
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",