@mdigital_ui/ui 0.1.4 → 0.2.0
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/README.md +16 -50
- package/dist/index.js +1 -1
- package/package.json +18 -66
package/README.md
CHANGED
|
@@ -16,47 +16,19 @@ Modern React component library built with Tailwind CSS v4, designed for multi-br
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
npm install @
|
|
19
|
+
npm install @mdigital_ui/ui
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
**That's it!** All dependencies are included. Tree-shaking ensures only the components you import end up in your production bundle.
|
|
23
|
+
|
|
22
24
|
### Peer Dependencies
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
You need to have these in your project:
|
|
25
27
|
|
|
26
28
|
```bash
|
|
27
29
|
npm install react react-dom tailwindcss
|
|
28
30
|
```
|
|
29
31
|
|
|
30
|
-
Optional dependencies (install only what you need based on components you use):
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
# For advanced components (Modal, Tooltip, Dropdown, Popover)
|
|
34
|
-
npm install @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip
|
|
35
|
-
|
|
36
|
-
# For icons
|
|
37
|
-
npm install lucide-react
|
|
38
|
-
|
|
39
|
-
# For DatePicker
|
|
40
|
-
npm install react-datepicker dayjs
|
|
41
|
-
|
|
42
|
-
# For Table
|
|
43
|
-
npm install @tanstack/react-table @tanstack/react-virtual
|
|
44
|
-
|
|
45
|
-
# For Carousel
|
|
46
|
-
npm install swiper
|
|
47
|
-
|
|
48
|
-
# For Command
|
|
49
|
-
npm install cmdk
|
|
50
|
-
|
|
51
|
-
# For Charts
|
|
52
|
-
npm install recharts
|
|
53
|
-
|
|
54
|
-
# For Drawer
|
|
55
|
-
npm install vaul
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed information on optimizing your bundle.
|
|
59
|
-
|
|
60
32
|
## Quick Start
|
|
61
33
|
|
|
62
34
|
### 1. Configure Tailwind
|
|
@@ -104,39 +76,33 @@ function App() {
|
|
|
104
76
|
|
|
105
77
|
## Import Patterns
|
|
106
78
|
|
|
107
|
-
### Subpath Imports (Recommended
|
|
108
|
-
|
|
109
|
-
For optimal bundle size and to avoid installing unnecessary dependencies:
|
|
79
|
+
### Subpath Imports (Recommended)
|
|
110
80
|
|
|
111
81
|
```tsx
|
|
112
|
-
import Button from '@
|
|
113
|
-
import Input from '@
|
|
114
|
-
import
|
|
82
|
+
import Button from '@mdigital_ui/ui/button'
|
|
83
|
+
import Input from '@mdigital_ui/ui/input'
|
|
84
|
+
import Table from '@mdigital_ui/ui/table'
|
|
115
85
|
```
|
|
116
86
|
|
|
117
|
-
**
|
|
118
|
-
- Only
|
|
119
|
-
-
|
|
120
|
-
-
|
|
87
|
+
**Tree-shaking works automatically:**
|
|
88
|
+
- Import only `Button`? Only Button code ends up in your bundle
|
|
89
|
+
- Import `Table`? Table + @tanstack/react-table are bundled
|
|
90
|
+
- Don't import `Carousel`? Swiper never touches your bundle
|
|
121
91
|
|
|
122
|
-
### Named Imports
|
|
123
|
-
|
|
124
|
-
If you've installed all optional peer dependencies, you can use named imports:
|
|
92
|
+
### Named Imports
|
|
125
93
|
|
|
126
94
|
```tsx
|
|
127
|
-
import { Button, Input, Select
|
|
95
|
+
import { Button, Input, Select } from '@mdigital_ui/ui'
|
|
128
96
|
```
|
|
129
97
|
|
|
130
|
-
|
|
98
|
+
Both import styles work identically. Use whichever you prefer.
|
|
131
99
|
|
|
132
100
|
### Type Imports
|
|
133
101
|
|
|
134
102
|
```tsx
|
|
135
|
-
import type { ButtonProps, InputProps } from '@
|
|
103
|
+
import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
|
|
136
104
|
```
|
|
137
105
|
|
|
138
|
-
**See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed import strategies.**
|
|
139
|
-
|
|
140
106
|
## Theming
|
|
141
107
|
|
|
142
108
|
### CSS Variable Overrides
|
package/dist/index.js
CHANGED
|
@@ -29,8 +29,8 @@ export { descriptions_default as Descriptions } from './chunk-S5XJXU52.js';
|
|
|
29
29
|
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-AWPKZYHT.js';
|
|
30
30
|
export { empty_default as Empty } from './chunk-ROR4E6IE.js';
|
|
31
31
|
export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
|
|
32
|
-
export { image_default as Image } from './chunk-XMAH5PDW.js';
|
|
33
32
|
export { grid_default as Grid } from './chunk-7PKVBUGL.js';
|
|
33
|
+
export { image_default as Image } from './chunk-XMAH5PDW.js';
|
|
34
34
|
export { input_default as Input } from './chunk-2JGAYDZR.js';
|
|
35
35
|
export { cascader_default as Cascader } from './chunk-SERJ3TZE.js';
|
|
36
36
|
export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mdigital_ui/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Modern React component library built with Tailwind CSS v4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -86,89 +86,41 @@
|
|
|
86
86
|
"dependencies": {
|
|
87
87
|
"class-variance-authority": "^0.7.0",
|
|
88
88
|
"clsx": "^2.1.0",
|
|
89
|
-
"tailwind-merge": "^2.2.0"
|
|
89
|
+
"tailwind-merge": "^2.2.0",
|
|
90
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
91
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
92
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
93
|
+
"@tanstack/react-table": "^8.21.3",
|
|
94
|
+
"@tanstack/react-virtual": "^3.13.12",
|
|
95
|
+
"cmdk": "^1.1.1",
|
|
96
|
+
"dayjs": "^1.11.19",
|
|
97
|
+
"lucide-react": "^0.552.0",
|
|
98
|
+
"react-datepicker": "^8.8.0",
|
|
99
|
+
"recharts": "^3.3.0",
|
|
100
|
+
"swiper": "^12.0.3",
|
|
101
|
+
"vaul": "^1.1.2"
|
|
90
102
|
},
|
|
91
103
|
"peerDependencies": {
|
|
92
104
|
"react": "^18.0.0 || ^19.0.0",
|
|
93
105
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
94
|
-
"tailwindcss": "^4.0.0"
|
|
95
|
-
"@radix-ui/react-dialog": "^1.0.0",
|
|
96
|
-
"@radix-ui/react-popover": "^1.0.0",
|
|
97
|
-
"@radix-ui/react-tooltip": "^1.0.0",
|
|
98
|
-
"@tanstack/react-table": "^8.0.0",
|
|
99
|
-
"@tanstack/react-virtual": "^3.0.0",
|
|
100
|
-
"cmdk": "^1.0.0",
|
|
101
|
-
"dayjs": "^1.11.0",
|
|
102
|
-
"lucide-react": "^0.400.0",
|
|
103
|
-
"react-datepicker": "^6.0.0 || ^7.0.0 || ^8.0.0",
|
|
104
|
-
"recharts": "^2.0.0 || ^3.0.0",
|
|
105
|
-
"swiper": "^11.0.0 || ^12.0.0",
|
|
106
|
-
"vaul": "^0.9.0 || ^1.0.0"
|
|
107
|
-
},
|
|
108
|
-
"peerDependenciesMeta": {
|
|
109
|
-
"@radix-ui/react-dialog": {
|
|
110
|
-
"optional": true
|
|
111
|
-
},
|
|
112
|
-
"@radix-ui/react-popover": {
|
|
113
|
-
"optional": true
|
|
114
|
-
},
|
|
115
|
-
"@radix-ui/react-tooltip": {
|
|
116
|
-
"optional": true
|
|
117
|
-
},
|
|
118
|
-
"@tanstack/react-table": {
|
|
119
|
-
"optional": true
|
|
120
|
-
},
|
|
121
|
-
"@tanstack/react-virtual": {
|
|
122
|
-
"optional": true
|
|
123
|
-
},
|
|
124
|
-
"cmdk": {
|
|
125
|
-
"optional": true
|
|
126
|
-
},
|
|
127
|
-
"dayjs": {
|
|
128
|
-
"optional": true
|
|
129
|
-
},
|
|
130
|
-
"lucide-react": {
|
|
131
|
-
"optional": true
|
|
132
|
-
},
|
|
133
|
-
"react-datepicker": {
|
|
134
|
-
"optional": true
|
|
135
|
-
},
|
|
136
|
-
"recharts": {
|
|
137
|
-
"optional": true
|
|
138
|
-
},
|
|
139
|
-
"swiper": {
|
|
140
|
-
"optional": true
|
|
141
|
-
},
|
|
142
|
-
"vaul": {
|
|
143
|
-
"optional": true
|
|
144
|
-
}
|
|
106
|
+
"tailwindcss": "^4.0.0"
|
|
145
107
|
},
|
|
146
108
|
"devDependencies": {
|
|
147
|
-
"@radix-ui/react-dialog": "^1.1.15",
|
|
148
|
-
"@radix-ui/react-popover": "^1.1.15",
|
|
149
|
-
"@radix-ui/react-tooltip": "^1.2.8",
|
|
150
109
|
"@storybook/addon-a11y": "^8.0.0",
|
|
151
110
|
"@storybook/addon-essentials": "^8.0.0",
|
|
152
111
|
"@storybook/addon-themes": "^8.0.0",
|
|
153
112
|
"@storybook/react": "^8.0.0",
|
|
154
113
|
"@storybook/react-vite": "^8.0.0",
|
|
155
114
|
"@tailwindcss/postcss": "^4.1.13",
|
|
156
|
-
"@tanstack/react-table": "^8.21.3",
|
|
157
|
-
"@tanstack/react-virtual": "^3.13.12",
|
|
158
115
|
"@types/react": "^19.0.0",
|
|
159
116
|
"@types/react-datepicker": "^6.2.0",
|
|
160
117
|
"@types/react-dom": "^19.0.0",
|
|
161
|
-
"
|
|
162
|
-
"
|
|
163
|
-
"lucide-react": "^0.552.0",
|
|
164
|
-
"react-datepicker": "^8.8.0",
|
|
165
|
-
"recharts": "^3.3.0",
|
|
118
|
+
"react": "^19.0.0",
|
|
119
|
+
"react-dom": "^19.0.0",
|
|
166
120
|
"storybook": "^8.0.0",
|
|
167
|
-
"swiper": "^12.0.3",
|
|
168
121
|
"tailwindcss": "^4.0.0",
|
|
169
122
|
"tsup": "^8.0.0",
|
|
170
|
-
"typescript": "^5.0.0"
|
|
171
|
-
"vaul": "^1.1.2"
|
|
123
|
+
"typescript": "^5.0.0"
|
|
172
124
|
},
|
|
173
125
|
"keywords": [
|
|
174
126
|
"react",
|