@shuriken-ui/tailwind 0.0.1 → 0.0.3

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.
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;