@shuriken-ui/tailwind 1.0.0-beta.7 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,393 @@
1
+ import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
+ import { Config } from 'tailwindcss';
3
+ import typography__default from '@tailwindcss/typography';
4
+
5
+ interface PluginOption {
6
+ prefix?: string;
7
+ }
8
+
9
+ declare function hasPreset(config: Config): boolean;
10
+ declare function createPreset(options?: PluginOption): {
11
+ darkMode: "class";
12
+ content: never[];
13
+ plugins: (typeof typography__default | {
14
+ handler: () => void;
15
+ } | {
16
+ handler: tailwindcss_types_config.PluginCreator;
17
+ config?: Partial<Config> | undefined;
18
+ })[];
19
+ theme: {
20
+ fontFamily: {
21
+ sans: string[];
22
+ heading: string[];
23
+ alt: string[];
24
+ mono: string[];
25
+ };
26
+ extend: {
27
+ colors: {
28
+ muted: {
29
+ '50': "#f8fafc";
30
+ '100': "#f1f5f9";
31
+ '200': "#e2e8f0";
32
+ '300': "#cbd5e1";
33
+ '400': "#94a3b8";
34
+ '500': "#64748b";
35
+ '600': "#475569";
36
+ '700': "#334155";
37
+ '800': "#1e293b";
38
+ '900': "#0f172a";
39
+ '950': "#020617";
40
+ };
41
+ primary: {
42
+ '50': "#f5f3ff";
43
+ '100': "#ede9fe";
44
+ '200': "#ddd6fe";
45
+ '300': "#c4b5fd";
46
+ '400': "#a78bfa";
47
+ '500': "#8b5cf6";
48
+ '600': "#7c3aed";
49
+ '700': "#6d28d9";
50
+ '800': "#5b21b6";
51
+ '900': "#4c1d95";
52
+ '950': "#2e1065";
53
+ };
54
+ info: {
55
+ '50': "#f0f9ff";
56
+ '100': "#e0f2fe";
57
+ '200': "#bae6fd";
58
+ '300': "#7dd3fc";
59
+ '400': "#38bdf8";
60
+ '500': "#0ea5e9";
61
+ '600': "#0284c7";
62
+ '700': "#0369a1";
63
+ '800': "#075985";
64
+ '900': "#0c4a6e";
65
+ '950': "#082f49";
66
+ };
67
+ success: {
68
+ '50': "#f0fdfa";
69
+ '100': "#ccfbf1";
70
+ '200': "#99f6e4";
71
+ '300': "#5eead4";
72
+ '400': "#2dd4bf";
73
+ '500': "#14b8a6";
74
+ '600': "#0d9488";
75
+ '700': "#0f766e";
76
+ '800': "#115e59";
77
+ '900': "#134e4a";
78
+ '950': "#042f2e";
79
+ };
80
+ warning: {
81
+ '50': "#fffbeb";
82
+ '100': "#fef3c7";
83
+ '200': "#fde68a";
84
+ '300': "#fcd34d";
85
+ '400': "#fbbf24";
86
+ '500': "#f59e0b";
87
+ '600': "#d97706";
88
+ '700': "#b45309";
89
+ '800': "#92400e";
90
+ '900': "#78350f";
91
+ '950': "#451a03";
92
+ };
93
+ danger: {
94
+ '50': "#fff1f2";
95
+ '100': "#ffe4e6";
96
+ '200': "#fecdd3";
97
+ '300': "#fda4af";
98
+ '400': "#fb7185";
99
+ '500': "#f43f5e";
100
+ '600': "#e11d48";
101
+ '700': "#be123c";
102
+ '800': "#9f1239";
103
+ '900': "#881337";
104
+ '950': "#4c0519";
105
+ };
106
+ };
107
+ screens: {
108
+ xs: {
109
+ max: string;
110
+ };
111
+ lg: string;
112
+ ptablet: {
113
+ raw: string;
114
+ };
115
+ ltablet: {
116
+ raw: string;
117
+ };
118
+ };
119
+ typography: ({ theme }: any) => {
120
+ primary: {
121
+ css: {
122
+ '--tw-prose-links': any;
123
+ '--tw-prose-quote-borders': any;
124
+ '--tw-prose-invert-links': any;
125
+ '--tw-prose-invert-quote-borders': any;
126
+ };
127
+ };
128
+ muted: {
129
+ css: {
130
+ '--tw-prose-body': any;
131
+ '--tw-prose-headings': any;
132
+ '--tw-prose-lead': any;
133
+ '--tw-prose-bold': any;
134
+ '--tw-prose-counters': any;
135
+ '--tw-prose-bullets': any;
136
+ '--tw-prose-hr': any;
137
+ '--tw-prose-quotes': any;
138
+ '--tw-prose-captions': any;
139
+ '--tw-prose-code': any;
140
+ '--tw-prose-pre-code': any;
141
+ '--tw-prose-pre-bg': any;
142
+ '--tw-prose-th-borders': any;
143
+ '--tw-prose-td-borders': any;
144
+ '--tw-prose-invert-body': any;
145
+ '--tw-prose-invert-headings': any;
146
+ '--tw-prose-invert-lead': any;
147
+ '--tw-prose-invert-bold': any;
148
+ '--tw-prose-invert-counters': any;
149
+ '--tw-prose-invert-bullets': any;
150
+ '--tw-prose-invert-hr': any;
151
+ '--tw-prose-invert-quotes': any;
152
+ '--tw-prose-invert-captions': any;
153
+ '--tw-prose-invert-code': any;
154
+ '--tw-prose-invert-pre-code': any;
155
+ '--tw-prose-invert-pre-bg': any;
156
+ '--tw-prose-invert-th-borders': any;
157
+ '--tw-prose-invert-td-borders': any;
158
+ };
159
+ };
160
+ css: {
161
+ h1: {
162
+ fontWeight: number;
163
+ };
164
+ h2: {
165
+ fontWeight: number;
166
+ };
167
+ h3: {
168
+ fontWeight: number;
169
+ };
170
+ h4: {
171
+ fontWeight: number;
172
+ };
173
+ li: {
174
+ fontSize: string;
175
+ padding: string;
176
+ };
177
+ em: {
178
+ fontSize: string;
179
+ lineHeight: number;
180
+ };
181
+ blockquote: {
182
+ fontSize: string;
183
+ lineHeight: number;
184
+ fontWeight: number;
185
+ padding: string;
186
+ };
187
+ pre: {
188
+ fontFamily: any;
189
+ };
190
+ code: {
191
+ fontFamily: any;
192
+ padding: string;
193
+ fontWeight: number;
194
+ fontSize: string;
195
+ };
196
+ };
197
+ };
198
+ };
199
+ };
200
+ };
201
+ declare const preset: {
202
+ darkMode: "class";
203
+ content: never[];
204
+ plugins: (typeof typography__default | {
205
+ handler: () => void;
206
+ } | {
207
+ handler: tailwindcss_types_config.PluginCreator;
208
+ config?: Partial<Config> | undefined;
209
+ })[];
210
+ theme: {
211
+ fontFamily: {
212
+ sans: string[];
213
+ heading: string[];
214
+ alt: string[];
215
+ mono: string[];
216
+ };
217
+ extend: {
218
+ colors: {
219
+ muted: {
220
+ '50': "#f8fafc";
221
+ '100': "#f1f5f9";
222
+ '200': "#e2e8f0";
223
+ '300': "#cbd5e1";
224
+ '400': "#94a3b8";
225
+ '500': "#64748b";
226
+ '600': "#475569";
227
+ '700': "#334155";
228
+ '800': "#1e293b";
229
+ '900': "#0f172a";
230
+ '950': "#020617";
231
+ };
232
+ primary: {
233
+ '50': "#f5f3ff";
234
+ '100': "#ede9fe";
235
+ '200': "#ddd6fe";
236
+ '300': "#c4b5fd";
237
+ '400': "#a78bfa";
238
+ '500': "#8b5cf6";
239
+ '600': "#7c3aed";
240
+ '700': "#6d28d9";
241
+ '800': "#5b21b6";
242
+ '900': "#4c1d95";
243
+ '950': "#2e1065";
244
+ };
245
+ info: {
246
+ '50': "#f0f9ff";
247
+ '100': "#e0f2fe";
248
+ '200': "#bae6fd";
249
+ '300': "#7dd3fc";
250
+ '400': "#38bdf8";
251
+ '500': "#0ea5e9";
252
+ '600': "#0284c7";
253
+ '700': "#0369a1";
254
+ '800': "#075985";
255
+ '900': "#0c4a6e";
256
+ '950': "#082f49";
257
+ };
258
+ success: {
259
+ '50': "#f0fdfa";
260
+ '100': "#ccfbf1";
261
+ '200': "#99f6e4";
262
+ '300': "#5eead4";
263
+ '400': "#2dd4bf";
264
+ '500': "#14b8a6";
265
+ '600': "#0d9488";
266
+ '700': "#0f766e";
267
+ '800': "#115e59";
268
+ '900': "#134e4a";
269
+ '950': "#042f2e";
270
+ };
271
+ warning: {
272
+ '50': "#fffbeb";
273
+ '100': "#fef3c7";
274
+ '200': "#fde68a";
275
+ '300': "#fcd34d";
276
+ '400': "#fbbf24";
277
+ '500': "#f59e0b";
278
+ '600': "#d97706";
279
+ '700': "#b45309";
280
+ '800': "#92400e";
281
+ '900': "#78350f";
282
+ '950': "#451a03";
283
+ };
284
+ danger: {
285
+ '50': "#fff1f2";
286
+ '100': "#ffe4e6";
287
+ '200': "#fecdd3";
288
+ '300': "#fda4af";
289
+ '400': "#fb7185";
290
+ '500': "#f43f5e";
291
+ '600': "#e11d48";
292
+ '700': "#be123c";
293
+ '800': "#9f1239";
294
+ '900': "#881337";
295
+ '950': "#4c0519";
296
+ };
297
+ };
298
+ screens: {
299
+ xs: {
300
+ max: string;
301
+ };
302
+ lg: string;
303
+ ptablet: {
304
+ raw: string;
305
+ };
306
+ ltablet: {
307
+ raw: string;
308
+ };
309
+ };
310
+ typography: ({ theme }: any) => {
311
+ primary: {
312
+ css: {
313
+ '--tw-prose-links': any;
314
+ '--tw-prose-quote-borders': any;
315
+ '--tw-prose-invert-links': any;
316
+ '--tw-prose-invert-quote-borders': any;
317
+ };
318
+ };
319
+ muted: {
320
+ css: {
321
+ '--tw-prose-body': any;
322
+ '--tw-prose-headings': any;
323
+ '--tw-prose-lead': any;
324
+ '--tw-prose-bold': any;
325
+ '--tw-prose-counters': any;
326
+ '--tw-prose-bullets': any;
327
+ '--tw-prose-hr': any;
328
+ '--tw-prose-quotes': any;
329
+ '--tw-prose-captions': any;
330
+ '--tw-prose-code': any;
331
+ '--tw-prose-pre-code': any;
332
+ '--tw-prose-pre-bg': any;
333
+ '--tw-prose-th-borders': any;
334
+ '--tw-prose-td-borders': any;
335
+ '--tw-prose-invert-body': any;
336
+ '--tw-prose-invert-headings': any;
337
+ '--tw-prose-invert-lead': any;
338
+ '--tw-prose-invert-bold': any;
339
+ '--tw-prose-invert-counters': any;
340
+ '--tw-prose-invert-bullets': any;
341
+ '--tw-prose-invert-hr': any;
342
+ '--tw-prose-invert-quotes': any;
343
+ '--tw-prose-invert-captions': any;
344
+ '--tw-prose-invert-code': any;
345
+ '--tw-prose-invert-pre-code': any;
346
+ '--tw-prose-invert-pre-bg': any;
347
+ '--tw-prose-invert-th-borders': any;
348
+ '--tw-prose-invert-td-borders': any;
349
+ };
350
+ };
351
+ css: {
352
+ h1: {
353
+ fontWeight: number;
354
+ };
355
+ h2: {
356
+ fontWeight: number;
357
+ };
358
+ h3: {
359
+ fontWeight: number;
360
+ };
361
+ h4: {
362
+ fontWeight: number;
363
+ };
364
+ li: {
365
+ fontSize: string;
366
+ padding: string;
367
+ };
368
+ em: {
369
+ fontSize: string;
370
+ lineHeight: number;
371
+ };
372
+ blockquote: {
373
+ fontSize: string;
374
+ lineHeight: number;
375
+ fontWeight: number;
376
+ padding: string;
377
+ };
378
+ pre: {
379
+ fontFamily: any;
380
+ };
381
+ code: {
382
+ fontFamily: any;
383
+ padding: string;
384
+ fontWeight: number;
385
+ fontSize: string;
386
+ };
387
+ };
388
+ };
389
+ };
390
+ };
391
+ };
392
+
393
+ export { createPreset, hasPreset, preset };
package/dist/preset.d.ts CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
2
  import { Config } from 'tailwindcss';
3
- import _tailwindcss_typography__default from '@tailwindcss/typography';
3
+ import typography__default from '@tailwindcss/typography';
4
4
 
5
5
  interface PluginOption {
6
6
  prefix?: string;
7
7
  }
8
8
 
9
+ declare function hasPreset(config: Config): boolean;
9
10
  declare function createPreset(options?: PluginOption): {
10
11
  darkMode: "class";
11
12
  content: never[];
12
- plugins: (typeof _tailwindcss_typography__default | {
13
+ plugins: (typeof typography__default | {
13
14
  handler: () => void;
14
15
  } | {
15
16
  handler: tailwindcss_types_config.PluginCreator;
@@ -194,26 +195,13 @@ declare function createPreset(options?: PluginOption): {
194
195
  };
195
196
  };
196
197
  };
197
- keyframes: {
198
- 'nui-indeterminate': {
199
- '0%': {
200
- 'margin-left': string;
201
- };
202
- '100%': {
203
- 'margin-left': string;
204
- };
205
- };
206
- };
207
- animation: {
208
- 'nui-indeterminate': string;
209
- };
210
198
  };
211
199
  };
212
200
  };
213
- declare const _default: {
201
+ declare const preset: {
214
202
  darkMode: "class";
215
203
  content: never[];
216
- plugins: (typeof _tailwindcss_typography__default | {
204
+ plugins: (typeof typography__default | {
217
205
  handler: () => void;
218
206
  } | {
219
207
  handler: tailwindcss_types_config.PluginCreator;
@@ -398,21 +386,8 @@ declare const _default: {
398
386
  };
399
387
  };
400
388
  };
401
- keyframes: {
402
- 'nui-indeterminate': {
403
- '0%': {
404
- 'margin-left': string;
405
- };
406
- '100%': {
407
- 'margin-left': string;
408
- };
409
- };
410
- };
411
- animation: {
412
- 'nui-indeterminate': string;
413
- };
414
389
  };
415
390
  };
416
391
  };
417
392
 
418
- export { createPreset, _default as default };
393
+ export { createPreset, hasPreset, preset };
package/dist/preset.mjs CHANGED
@@ -496,7 +496,7 @@ const autocomplete = plugin.withOptions(
496
496
  }
497
497
  },
498
498
  [`.${prefix}autocomplete-clear`]: {
499
- [`@apply text-${config.clear.text} hover:text-${config.clear.textHover} dark:hover:text-${config.clear.textHoverDark} absolute end-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.clear.duration} cursor-pointer`]: {},
499
+ [`@apply text-${config.clear.text} hover:text-${config.clear.textHover} dark:hover:text-${config.clear.textHoverDark} absolute end-0 top-0 z-auto flex items-center justify-center transition-colors duration-${config.clear.duration} cursor-pointer`]: {},
500
500
  [`.${prefix}autocomplete-clear-inner`]: {
501
501
  [`@apply w-${config.clear.inner.size} h-${config.clear.inner.size}`]: {}
502
502
  }
@@ -688,7 +688,7 @@ const autocomplete = plugin.withOptions(
688
688
  [`@apply text-transparent`]: {}
689
689
  },
690
690
  [`.${prefix}autocomplete-icon`]: {
691
- [`@apply opacity-0`]: {}
691
+ [`@apply opacity-50`]: {}
692
692
  }
693
693
  },
694
694
  [`&.${prefix}autocomplete-label-float`]: {
@@ -1760,13 +1760,13 @@ const defaultButtonActionConfig = {
1760
1760
  muted: {
1761
1761
  text: "muted-500",
1762
1762
  textDark: "white",
1763
- bg: "white",
1763
+ bg: "muted-200",
1764
1764
  bgDark: "muted-700/40",
1765
1765
  bgHoverEnabled: "muted-100",
1766
1766
  bgHoverEnabledDark: "muted-700/60",
1767
1767
  bgActiveEnabled: "muted-200/50",
1768
1768
  bgActiveEnabledDark: "muted-800",
1769
- border: "muted-300",
1769
+ border: "muted-200",
1770
1770
  borderDark: "muted-700/40",
1771
1771
  borderActiveEnabledDark: "muted-800"
1772
1772
  },
@@ -4215,13 +4215,19 @@ const inputFileRegular = plugin.withOptions(
4215
4215
  }
4216
4216
  },
4217
4217
  [`&.${prefix}input-sm:not(.${prefix}has-icon)`]: {
4218
- [`@apply h-8 py-2 text-${config.hasNotIcon.sm} leading-4 gap-1`]: {},
4218
+ [`@apply text-${config.hasNotIcon.sm} leading-4`]: {},
4219
+ [`.${prefix}input-file-inner`]: {
4220
+ [`@apply h-8 py-2 gap-1`]: {}
4221
+ },
4219
4222
  [`.${prefix}input-file-addon`]: {
4220
4223
  [`@apply h-8 px-2`]: {}
4221
4224
  }
4222
4225
  },
4223
4226
  [`&.${prefix}input-sm.${prefix}has-icon`]: {
4224
- [`@apply h-8 py-2 text-${config.hasIcon.sm.text} leading-4 pe-3`]: {},
4227
+ [`@apply text-${config.hasIcon.sm.text} leading-4`]: {},
4228
+ [`.${prefix}input-file-inner`]: {
4229
+ [`@apply h-8 py-2 pe-3`]: {}
4230
+ },
4225
4231
  [`.${prefix}input-file-addon`]: {
4226
4232
  [`@apply h-8 px-2`]: {}
4227
4233
  },
@@ -4230,13 +4236,19 @@ const inputFileRegular = plugin.withOptions(
4230
4236
  }
4231
4237
  },
4232
4238
  [`&.${prefix}input-md:not(.${prefix}has-icon)`]: {
4233
- [`@apply h-10 text-${config.hasNotIcon.md} leading-5 gap-2`]: {},
4239
+ [`@apply text-${config.hasNotIcon.md} leading-5`]: {},
4240
+ [`.${prefix}input-file-inner`]: {
4241
+ [`@apply h-10 gap-2`]: {}
4242
+ },
4234
4243
  [`.${prefix}input-file-addon`]: {
4235
4244
  [`@apply h-10 px-3`]: {}
4236
4245
  }
4237
4246
  },
4238
4247
  [`&.${prefix}input-md.${prefix}has-icon`]: {
4239
- [`@apply h-10 text-${config.hasIcon.md.text} leading-5 pe-4`]: {},
4248
+ [`@apply text-${config.hasIcon.md.text} leading-5`]: {},
4249
+ [`.${prefix}input-file-inner`]: {
4250
+ [`@apply h-10 pe-4`]: {}
4251
+ },
4240
4252
  [`.${prefix}input-file-addon`]: {
4241
4253
  [`@apply h-10 px-3`]: {}
4242
4254
  },
@@ -4245,13 +4257,19 @@ const inputFileRegular = plugin.withOptions(
4245
4257
  }
4246
4258
  },
4247
4259
  [`&.${prefix}input-lg:not(.${prefix}has-icon)`]: {
4248
- [`@apply h-12 text-${config.hasNotIcon.lg} leading-5 gap-2`]: {},
4260
+ [`@apply text-${config.hasNotIcon.lg} leading-5`]: {},
4261
+ [`.${prefix}input-file-inner`]: {
4262
+ [`@apply h-12 gap-2`]: {}
4263
+ },
4249
4264
  [`.${prefix}input-file-addon`]: {
4250
4265
  [`@apply h-12 px-4`]: {}
4251
4266
  }
4252
4267
  },
4253
4268
  [`&.${prefix}input-lg.${prefix}has-icon`]: {
4254
- [`@apply h-12 text-${config.hasIcon.lg.text} leading-5 pe-4`]: {},
4269
+ [`@apply text-${config.hasIcon.lg.text} leading-5`]: {},
4270
+ [`.${prefix}input-file-inner`]: {
4271
+ [`@apply h-12 pe-4`]: {}
4272
+ },
4255
4273
  [`.${prefix}input-file-addon`]: {
4256
4274
  [`@apply h-12 px-4`]: {}
4257
4275
  },
@@ -4732,6 +4750,11 @@ const input = plugin.withOptions(
4732
4750
  [`.${prefix}input-action`]: {
4733
4751
  [`@apply text-${config.input.action.text} absolute end-0 top-0 flex items-center justify-center transition-colors duration-${config.input.action.duration}`]: {}
4734
4752
  },
4753
+ [`&.${prefix}input-focus`]: {
4754
+ [`.${prefix}input`]: {
4755
+ [`@apply focus:border-primary-500 dark:focus:border-primary-500`]: {}
4756
+ }
4757
+ },
4735
4758
  [`&.${prefix}input-rounded`]: {
4736
4759
  [`.${prefix}input`]: {
4737
4760
  [`@apply rounded-${config.input.rounded.default}`]: {}
@@ -6957,11 +6980,27 @@ const progress = plugin.withOptions(
6957
6980
  });
6958
6981
  };
6959
6982
  },
6960
- function() {
6983
+ function(options) {
6984
+ let { prefix } = defu(options, defaultPluginOptions);
6985
+ if (prefix) {
6986
+ prefix = `${prefix}-`;
6987
+ }
6961
6988
  return {
6962
6989
  theme: {
6963
6990
  shurikenUi: {
6964
6991
  progress: defaultProgressConfig
6992
+ },
6993
+ extend: {
6994
+ keyframes: {
6995
+ [`${prefix}progress-indeterminate`]: {
6996
+ "0%": { "margin-left": "-100%" },
6997
+ "60%": { "margin-left": "100%" },
6998
+ "100%": { "margin-left": "-100%" }
6999
+ }
7000
+ },
7001
+ animation: {
7002
+ [`${prefix}progress-indeterminate`]: `${prefix}progress-indeterminate 3s linear infinite forwards`
7003
+ }
6965
7004
  }
6966
7005
  }
6967
7006
  };
@@ -9868,8 +9907,15 @@ const shurikenUIUtilities = plugin.withOptions(
9868
9907
  }
9869
9908
  );
9870
9909
 
9910
+ const ShurikenUISymbol = "__is_shuriken_ui";
9911
+ function hasPreset(config) {
9912
+ if (config.presets && Array.isArray(config.presets)) {
9913
+ return config.presets.some((preset2) => preset2 && ShurikenUISymbol in preset2);
9914
+ }
9915
+ return false;
9916
+ }
9871
9917
  function createPreset(options = {}) {
9872
- return {
9918
+ const config = {
9873
9919
  darkMode: "class",
9874
9920
  content: [],
9875
9921
  plugins: [
@@ -9984,20 +10030,17 @@ function createPreset(options = {}) {
9984
10030
  fontSize: "0.95rem !important"
9985
10031
  }
9986
10032
  }
9987
- }),
9988
- keyframes: {
9989
- "nui-indeterminate": {
9990
- "0%": { "margin-left": "-10%" },
9991
- "100%": { "margin-left": "100%" }
9992
- }
9993
- },
9994
- animation: {
9995
- "nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite"
9996
- }
10033
+ })
9997
10034
  }
9998
10035
  }
9999
10036
  };
10037
+ Object.defineProperty(config, ShurikenUISymbol, {
10038
+ value: true,
10039
+ enumerable: false,
10040
+ writable: false
10041
+ });
10042
+ return config;
10000
10043
  }
10001
- const shurikenUIPreset = createPreset();
10044
+ const preset = createPreset();
10002
10045
 
10003
- export { createPreset, shurikenUIPreset as default };
10046
+ export { createPreset, hasPreset, preset };