@shuriken-ui/tailwind 0.0.1 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. package/README.md +53 -0
  2. package/dist/colors.cjs +2 -0
  3. package/dist/colors.d.ts +2 -0
  4. package/dist/colors.mjs +1 -0
  5. package/dist/config.cjs +14 -0
  6. package/dist/config.d.ts +225 -0
  7. package/dist/config.mjs +12 -0
  8. package/dist/index.cjs +15 -0
  9. package/dist/index.d.ts +667 -0
  10. package/dist/index.mjs +13 -0
  11. package/dist/preset.cjs +320 -0
  12. package/dist/preset.d.ts +222 -0
  13. package/dist/preset.mjs +311 -0
  14. package/package.json +28 -7
  15. package/src/colors.ts +0 -1
  16. package/src/index.ts +0 -7
  17. package/src/plugins/components.ts +0 -170
  18. package/src/preset/index.ts +0 -135
  19. package/src/tailwind.config.ts +0 -7
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/colors.cjs ADDED
@@ -0,0 +1,2 @@
1
+ 'use strict';
2
+
package/dist/colors.d.ts ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/dist/colors.mjs ADDED
@@ -0,0 +1 @@
1
+
package/dist/config.cjs ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ const preset = require('./preset.cjs');
4
+ require('tailwindcss/colors');
5
+ require('@tailwindcss/typography');
6
+ require('@tailwindcss/aspect-ratio');
7
+ require('tailwindcss/plugin');
8
+
9
+ const config = {
10
+ content: [],
11
+ presets: [preset]
12
+ };
13
+
14
+ module.exports = config;
package/dist/config.d.ts ADDED
@@ -0,0 +1,225 @@
1
+ import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
+ import * as _tailwindcss_typography from '@tailwindcss/typography';
3
+ import { Config } from 'tailwindcss';
4
+
5
+ declare const _default: {
6
+ content: never[];
7
+ presets: {
8
+ darkMode: "class";
9
+ content: never[];
10
+ plugins: (typeof _tailwindcss_typography | {
11
+ handler: () => void;
12
+ } | {
13
+ (options: unknown): {
14
+ handler: tailwindcss_types_config.PluginCreator;
15
+ config?: Partial<Config> | undefined;
16
+ };
17
+ __isOptionsFunction: true;
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
+ keyframes: {
199
+ indeterminate: {
200
+ '0%': {
201
+ 'margin-left': string;
202
+ };
203
+ '100%': {
204
+ 'margin-left': string;
205
+ };
206
+ };
207
+ placeload: {
208
+ '0%': {
209
+ 'background-position': string;
210
+ };
211
+ '100%': {
212
+ 'background-position': string;
213
+ };
214
+ };
215
+ };
216
+ animation: {
217
+ indeterminate: string;
218
+ placeload: string;
219
+ };
220
+ };
221
+ };
222
+ }[];
223
+ };
224
+
225
+ export { _default as default };
package/dist/config.mjs ADDED
@@ -0,0 +1,12 @@
1
+ import shurikenUIPreset from './preset.mjs';
2
+ import 'tailwindcss/colors';
3
+ import '@tailwindcss/typography';
4
+ import '@tailwindcss/aspect-ratio';
5
+ import 'tailwindcss/plugin';
6
+
7
+ const config = {
8
+ content: [],
9
+ presets: [shurikenUIPreset]
10
+ };
11
+
12
+ export { config as default };
package/dist/index.cjs ADDED
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ const defu = require('defu');
4
+ const config = require('./config.cjs');
5
+ require('./preset.cjs');
6
+ require('tailwindcss/colors');
7
+ require('@tailwindcss/typography');
8
+ require('@tailwindcss/aspect-ratio');
9
+ require('tailwindcss/plugin');
10
+
11
+ function withShurikenUI(userConfig) {
12
+ return defu.defu(userConfig, config);
13
+ }
14
+
15
+ exports.withShurikenUI = withShurikenUI;