@tanishraj/ui-kit 1.1.0 → 1.1.1
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/dist/colors/base.css +292 -0
- package/dist/globals.css +1 -2
- package/dist/index.cjs.js +1 -0
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +1 -0
- package/dist/index.es.js.map +1 -1
- package/package.json +6 -6
- package/readme.md +23 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanishraj/ui-kit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
|
|
5
5
|
"author": "Tanishraj",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"require": "./dist/globals.css",
|
|
28
28
|
"default": "./dist/globals.css"
|
|
29
29
|
},
|
|
30
|
-
"./
|
|
31
|
-
"import": "./dist/
|
|
32
|
-
"require": "./dist/
|
|
33
|
-
"default": "./dist/
|
|
30
|
+
"./base.css": {
|
|
31
|
+
"import": "./dist/colors/base.css",
|
|
32
|
+
"require": "./dist/colors/base.css",
|
|
33
|
+
"default": "./dist/colors/base.css"
|
|
34
34
|
},
|
|
35
35
|
"./theme-secondary.css": {
|
|
36
36
|
"import": "./dist/themes/secondary.css",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
],
|
|
52
52
|
"scripts": {
|
|
53
53
|
"build": "rm -rf dist && vite build && npm run copy:theme && rm -rf dist/src",
|
|
54
|
-
"copy:theme": "mkdir -p dist/themes && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css &&
|
|
54
|
+
"copy:theme": "mkdir -p dist/themes dist/colors && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css && perl -pe \"s#(\\@import '../themes/primary\\.css';)#\\@import './themes/primary.css';#\" src/styles/globals.css > dist/globals.css && cp src/styles/colors/base.css dist/colors/base.css",
|
|
55
55
|
"prepublishOnly": "npm run build",
|
|
56
56
|
"test": "vitest",
|
|
57
57
|
"test:watch": "vitest --watch",
|
package/readme.md
CHANGED
|
@@ -62,8 +62,6 @@ import {
|
|
|
62
62
|
Avatar,
|
|
63
63
|
AvatarGroup,
|
|
64
64
|
} from '@tanishraj/ui-kit';
|
|
65
|
-
import '@tanishraj/ui-kit/globals.css';
|
|
66
|
-
import '@tanishraj/ui-kit/theme-primary.css';
|
|
67
65
|
|
|
68
66
|
export function Demo() {
|
|
69
67
|
return <Button variant="primary">Get Started</Button>;
|
|
@@ -80,14 +78,9 @@ The library is built to be consumed like a standard React UI package:
|
|
|
80
78
|
npm install @tanishraj/ui-kit
|
|
81
79
|
```
|
|
82
80
|
|
|
83
|
-
2.
|
|
81
|
+
2. Use components (styles are included automatically on package import):
|
|
84
82
|
|
|
85
|
-
|
|
86
|
-
import '@tanishraj/ui-kit/globals.css';
|
|
87
|
-
import '@tanishraj/ui-kit/theme-primary.css'; // or theme-secondary.css
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
3. Use component APIs directly from the package.
|
|
83
|
+
Use component APIs directly from the package.
|
|
91
84
|
|
|
92
85
|
```tsx
|
|
93
86
|
import { Button, Avatar } from '@tanishraj/ui-kit';
|
|
@@ -107,15 +100,33 @@ export default function Demo() {
|
|
|
107
100
|
### Theme file options
|
|
108
101
|
|
|
109
102
|
```ts
|
|
110
|
-
import
|
|
111
|
-
// Optional: use another packaged theme
|
|
103
|
+
// Optional: import this only when you want secondary theme
|
|
112
104
|
import '@tanishraj/ui-kit/theme-secondary.css';
|
|
113
105
|
```
|
|
114
106
|
|
|
107
|
+
### Adding new themes (for maintainers)
|
|
108
|
+
|
|
109
|
+
To add a new packaged theme later:
|
|
110
|
+
|
|
111
|
+
1. Add `src/themes/<theme-name>.css`.
|
|
112
|
+
2. Add a package export in `package.json`:
|
|
113
|
+
- `./theme-<theme-name>.css` -> `./dist/themes/<theme-name>.css`
|
|
114
|
+
3. Update the `copy:theme` script to include the new file.
|
|
115
|
+
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
116
|
+
|
|
117
|
+
### Adding new themes (for maintainers)
|
|
118
|
+
|
|
119
|
+
To add a new packaged theme later:
|
|
120
|
+
|
|
121
|
+
1. Add `src/themes/<theme-name>.css`.
|
|
122
|
+
2. Add a package export in `package.json`:
|
|
123
|
+
- `./theme-<theme-name>.css` -> `./dist/themes/<theme-name>.css`
|
|
124
|
+
3. Update the `copy:theme` script to include the new file.
|
|
125
|
+
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
126
|
+
|
|
115
127
|
You can also import through:
|
|
116
128
|
|
|
117
129
|
```ts
|
|
118
|
-
import '@tanishraj/ui-kit/themes/primary.css';
|
|
119
130
|
import '@tanishraj/ui-kit/themes/secondary.css';
|
|
120
131
|
```
|
|
121
132
|
|
|
@@ -140,7 +151,6 @@ If your app uses a custom design token strategy, import one packaged theme and o
|
|
|
140
151
|
|
|
141
152
|
- Component style variants are centralized with CVA + Tailwind utility patterns.
|
|
142
153
|
- Theme tokens are built in and theme files are exported from package entry points:
|
|
143
|
-
- `theme-primary.css`
|
|
144
154
|
- `theme-secondary.css`
|
|
145
155
|
- `globals.css`
|
|
146
156
|
|