@j3m-quantum/ui 0.7.3 → 0.7.6
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 +23 -47
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +8 -40
package/README.md
CHANGED
|
@@ -4,12 +4,12 @@ J3M Quantum UI - A themed component library based on shadcn/ui with J3M design t
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
7
|
+
- **J3M Design Tokens** - Orange primary, neutral grays, pill-shaped buttons
|
|
8
|
+
- **Dark Mode** - Full dark theme support via `.dark` class
|
|
9
|
+
- **Glass Mode** - Frosted glass effects via `.theme-glass` class
|
|
10
|
+
- **55+ Components** - All shadcn/ui components with J3M styling
|
|
11
|
+
- **All-in-One** - Everything bundled, just install and use
|
|
12
|
+
- **Smooth Animations** - Powered by tw-animate-css
|
|
13
13
|
|
|
14
14
|
## Installation
|
|
15
15
|
|
|
@@ -17,31 +17,7 @@ J3M Quantum UI - A themed component library based on shadcn/ui with J3M design t
|
|
|
17
17
|
npm install @j3m-quantum/ui tw-animate-css
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
The package requires these peer dependencies:
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install react react-dom tailwindcss lucide-react
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Plus Radix UI primitives for each component you use:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
# Core components
|
|
32
|
-
npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select
|
|
33
|
-
|
|
34
|
-
# All Radix packages (if using all components)
|
|
35
|
-
npm install @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-avatar \
|
|
36
|
-
@radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu \
|
|
37
|
-
@radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card \
|
|
38
|
-
@radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu \
|
|
39
|
-
@radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
|
|
40
|
-
@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator \
|
|
41
|
-
@radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch \
|
|
42
|
-
@radix-ui/react-tabs @radix-ui/react-toggle @radix-ui/react-toggle-group \
|
|
43
|
-
@radix-ui/react-tooltip
|
|
44
|
-
```
|
|
20
|
+
That's it! All dependencies (Radix UI, lucide-react, etc.) are bundled with the package.
|
|
45
21
|
|
|
46
22
|
## Quick Start
|
|
47
23
|
|
|
@@ -76,7 +52,7 @@ export default defineConfig({
|
|
|
76
52
|
@import "@j3m-quantum/ui/styles"; /* J3M theme and tokens */
|
|
77
53
|
```
|
|
78
54
|
|
|
79
|
-
|
|
55
|
+
**Order matters!** Import `tw-animate-css` before `@j3m-quantum/ui/styles` to ensure animations work correctly on Dialog, Sheet, Select, Popover, and other overlay components.
|
|
80
56
|
|
|
81
57
|
### 4. Use Components
|
|
82
58
|
|
|
@@ -141,21 +117,21 @@ Combine with dark mode:
|
|
|
141
117
|
| `--destructive` | #FB3748 | #D00416 |
|
|
142
118
|
| `--radius` | 12px | 12px |
|
|
143
119
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
120
|
+
## Included Dependencies
|
|
121
|
+
|
|
122
|
+
All of these are bundled and ready to use:
|
|
123
|
+
|
|
124
|
+
- All Radix UI primitives
|
|
125
|
+
- lucide-react (icons)
|
|
126
|
+
- cmdk (Command palette)
|
|
127
|
+
- vaul (Drawer)
|
|
128
|
+
- sonner (Toast notifications)
|
|
129
|
+
- recharts (Charts)
|
|
130
|
+
- react-day-picker + date-fns (Calendar)
|
|
131
|
+
- embla-carousel-react (Carousel)
|
|
132
|
+
- input-otp (OTP input)
|
|
133
|
+
- react-resizable-panels (Resizable)
|
|
134
|
+
- react-hook-form (Form handling)
|
|
159
135
|
|
|
160
136
|
## Exports
|
|
161
137
|
|
package/dist/index.cjs
CHANGED
|
@@ -2670,7 +2670,7 @@ function Progress({
|
|
|
2670
2670
|
{
|
|
2671
2671
|
"data-slot": "progress",
|
|
2672
2672
|
className: cn(
|
|
2673
|
-
"bg-
|
|
2673
|
+
"bg-secondary relative h-4 w-full overflow-hidden rounded-full",
|
|
2674
2674
|
className
|
|
2675
2675
|
),
|
|
2676
2676
|
...props,
|