@juxtui/ui 0.8.0 → 0.8.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/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Julius K.
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Julius K.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,216 +1,216 @@
1
- # juxt.ui
2
-
3
- **Thoughtfully crafted, accessible components for Nuxt & Vue.**
4
-
5
- [Documentation](https://juliuss3722.github.io/juxt-library/) · [Playground](https://juliuss3722.github.io/juxt-library/playground/)
6
-
7
- Build with JuxtUI, customize every component in the browser, and copy the generated Vue snippet directly into your project.
8
-
9
- **44 components. One token system. One motion language.**
10
-
11
- ```vue
12
- <JButton>
13
- Save changes
14
- </JButton>
15
- ```
16
-
17
- ## Why juxt.ui?
18
-
19
- juxt.ui is a small, polished component library for **Nuxt and Vue 3**.
20
-
21
- It focuses on the details that make an interface feel good: predictable focus behavior, subtle motion, accessible interactions, consistent tokens, and APIs that stay small.
22
-
23
- * **Nuxt-first** — automatic components, composables and styles
24
- * **Accessible by construction** — keyboard navigation, focus management and ARIA patterns
25
- * **SSR-safe** — designed for Nuxt SSR
26
- * **Light & dark themes** — built in
27
- * **Reduced motion** — respects user preferences
28
- * **Small APIs** — consistent props and `v-model` state
29
- * **Token-based** — colors, spacing, typography, radius, motion and layering
30
- * **Tailwind CSS v4 support** — JuxtUI tokens map to utilities
31
- * **Tree-shakable** — import what you use
32
- * **MIT licensed**
33
-
34
- ## Installation
35
-
36
- ```bash
37
- pnpm add @juxtui/ui
38
- ```
39
-
40
- ### Nuxt
41
-
42
- Add the JuxtUI module to your `nuxt.config.ts`:
43
-
44
- ```ts
45
- export default defineNuxtConfig({
46
- modules: ['@juxtui/ui/nuxt'],
47
- })
48
- ```
49
-
50
- Components, composables and styles are wired up automatically.
51
-
52
- ```vue
53
- <JButton>
54
- Save changes
55
- </JButton>
56
- ```
57
-
58
- ### Vue
59
-
60
- Import the stylesheet once and import the components you use:
61
-
62
- ```ts
63
- import '@juxtui/ui/style.css'
64
-
65
- import { JButton, toast } from '@juxtui/ui'
66
- ```
67
-
68
- ## Playground
69
-
70
- ### Build it. Customize it. Copy the code.
71
-
72
- The JuxtUI Playground lets you experiment with every component directly in the browser.
73
-
74
- Change props, variants and content, see the result instantly, and copy the generated Vue snippet into your project.
75
-
76
- **[Open the JuxtUI Playground →](https://juliuss3722.github.io/juxt-library/playground/)**
77
-
78
- ## Documentation
79
-
80
- Explore every component, its API, keyboard interactions, accessibility behavior and examples in the full documentation.
81
-
82
- **[Read the documentation →](https://juliuss3722.github.io/juxt-library/)**
83
-
84
- ## Tailwind CSS v4
85
-
86
- Using Tailwind CSS v4?
87
-
88
- Import the JuxtUI Tailwind entrypoint:
89
-
90
- ```css
91
- @import '@juxtui/ui/tailwind.css';
92
- ```
93
-
94
- JuxtUI maps its design tokens onto utilities such as:
95
-
96
- ```text
97
- bg-surface
98
- text-fg-muted
99
- rounded-md
100
- duration-fast
101
- ```
102
-
103
- JuxtUI styles live in their own `juxt` cascade layer, so your application classes can override them naturally.
104
-
105
- ## Components
106
-
107
- | Category | Components |
108
- | -------------- | ------------------------------------------------------------------------------------ |
109
- | **Actions** | Button |
110
- | **Forms** | Input · Textarea · Checkbox · Switch · Select |
111
- | **Overlays** | Dialog · Dropdown Menu · Tooltip · Command Palette |
112
- | **Feedback** | Toast · Badge |
113
- | **Display** | Avatar · Card |
114
- | **Navigation** | Tabs |
115
- | **Layout** | Navbar · Burger · Footer · Sidebar |
116
- | **Editor** | Rich text editor with toolbar, selection menu, slash commands and Markdown shortcuts |
117
-
118
- Every component is designed with:
119
-
120
- * Light and dark themes
121
- * Keyboard interaction
122
- * Reduced-motion support
123
- * SSR compatibility
124
- * Accessible focus management
125
-
126
- See the documentation for component-specific keyboard shortcuts, ARIA behavior and examples.
127
-
128
- ## Design philosophy
129
-
130
- ### Quiet until it matters
131
-
132
- The interface is primarily grayscale. Green `#079D6B` is reserved for state: focus, checked, success and context.
133
-
134
- Primary actions use ink rather than turning the entire interface green.
135
-
136
- ### Motion is feedback
137
-
138
- JuxtUI uses four durations (80–240ms) and three motion curves.
139
-
140
- Only `transform` and `opacity` are animated where possible. Entrances are slower than exits, and reduced-motion preferences are respected.
141
-
142
- ### Accessible by construction
143
-
144
- Overlays trap focus, restore it when they close, and stack predictably.
145
-
146
- When multiple layers are open, Escape and outside clicks affect only the top-most layer.
147
-
148
- ### Small APIs
149
-
150
- Props describe what components do, and stateful components consistently use `v-model`.
151
-
152
- If you know one JuxtUI component, the others should feel familiar.
153
-
154
- ### Tokens all the way down
155
-
156
- Color, typography, spacing, radius, elevation, motion and layering are exposed as CSS custom properties.
157
-
158
- Change a token such as `--juxt-accent` and the system follows.
159
-
160
- ## Editor
161
-
162
- JuxtUI also includes a rich text editor with:
163
-
164
- * Toolbar
165
- * Selection menu
166
- * Slash commands
167
- * Markdown shortcuts
168
- * Customizable extensions
169
-
170
- Import it separately:
171
-
172
- ```ts
173
- import { JuxtEditor } from '@juxtui/ui/editor'
174
- ```
175
-
176
- ## Browser support
177
-
178
- JuxtUI is built for modern browsers and Vue 3 applications.
179
-
180
- Components are designed to work with both client-side Vue applications and Nuxt SSR.
181
-
182
- ## Development
183
-
184
- Clone the repository and install dependencies:
185
-
186
- ```bash
187
- pnpm install
188
- ```
189
-
190
- Run the documentation locally:
191
-
192
- ```bash
193
- pnpm dev
194
- ```
195
-
196
- Run tests:
197
-
198
- ```bash
199
- pnpm test
200
- ```
201
-
202
- Build the package:
203
-
204
- ```bash
205
- pnpm build
206
- ```
207
-
208
- ## Philosophy
209
-
210
- juxt.ui intentionally favors **fewer, more polished components** over a large collection of loosely connected primitives.
211
-
212
- Every component should feel like it belongs to the same system.
213
-
214
- ## License
215
-
216
- MIT
1
+ # juxt.ui
2
+
3
+ **Thoughtfully crafted, accessible components for Nuxt & Vue.**
4
+
5
+ [Documentation](https://juliuss3722.github.io/juxt-library/) · [Playground](https://juliuss3722.github.io/juxt-library/playground/)
6
+
7
+ Build with JuxtUI, customize every component in the browser, and copy the generated Vue snippet directly into your project.
8
+
9
+ **44 components. One token system. One motion language.**
10
+
11
+ ```vue
12
+ <JButton>
13
+ Save changes
14
+ </JButton>
15
+ ```
16
+
17
+ ## Why juxt.ui?
18
+
19
+ juxt.ui is a small, polished component library for **Nuxt and Vue 3**.
20
+
21
+ It focuses on the details that make an interface feel good: predictable focus behavior, subtle motion, accessible interactions, consistent tokens, and APIs that stay small.
22
+
23
+ * **Nuxt-first** — automatic components, composables and styles
24
+ * **Accessible by construction** — keyboard navigation, focus management and ARIA patterns
25
+ * **SSR-safe** — designed for Nuxt SSR
26
+ * **Light & dark themes** — built in
27
+ * **Reduced motion** — respects user preferences
28
+ * **Small APIs** — consistent props and `v-model` state
29
+ * **Token-based** — colors, spacing, typography, radius, motion and layering
30
+ * **Tailwind CSS v4 support** — JuxtUI tokens map to utilities
31
+ * **Tree-shakable** — import what you use
32
+ * **MIT licensed**
33
+
34
+ ## Installation
35
+
36
+ ```bash
37
+ pnpm add @juxtui/ui
38
+ ```
39
+
40
+ ### Nuxt
41
+
42
+ Add the JuxtUI module to your `nuxt.config.ts`:
43
+
44
+ ```ts
45
+ export default defineNuxtConfig({
46
+ modules: ['@juxtui/ui/nuxt'],
47
+ })
48
+ ```
49
+
50
+ Components, composables and styles are wired up automatically.
51
+
52
+ ```vue
53
+ <JButton>
54
+ Save changes
55
+ </JButton>
56
+ ```
57
+
58
+ ### Vue
59
+
60
+ Import the stylesheet once and import the components you use:
61
+
62
+ ```ts
63
+ import '@juxtui/ui/style.css'
64
+
65
+ import { JButton, toast } from '@juxtui/ui'
66
+ ```
67
+
68
+ ## Playground
69
+
70
+ ### Build it. Customize it. Copy the code.
71
+
72
+ The JuxtUI Playground lets you experiment with every component directly in the browser.
73
+
74
+ Change props, variants and content, see the result instantly, and copy the generated Vue snippet into your project.
75
+
76
+ **[Open the JuxtUI Playground →](https://juliuss3722.github.io/juxt-library/playground/)**
77
+
78
+ ## Documentation
79
+
80
+ Explore every component, its API, keyboard interactions, accessibility behavior and examples in the full documentation.
81
+
82
+ **[Read the documentation →](https://juliuss3722.github.io/juxt-library/)**
83
+
84
+ ## Tailwind CSS v4
85
+
86
+ Using Tailwind CSS v4?
87
+
88
+ Import the JuxtUI Tailwind entrypoint:
89
+
90
+ ```css
91
+ @import '@juxtui/ui/tailwind.css';
92
+ ```
93
+
94
+ JuxtUI maps its design tokens onto utilities such as:
95
+
96
+ ```text
97
+ bg-surface
98
+ text-fg-muted
99
+ rounded-md
100
+ duration-fast
101
+ ```
102
+
103
+ JuxtUI styles live in their own `juxt` cascade layer, so your application classes can override them naturally.
104
+
105
+ ## Components
106
+
107
+ | Category | Components |
108
+ | -------------- | ------------------------------------------------------------------------------------ |
109
+ | **Actions** | Button |
110
+ | **Forms** | Input · Textarea · Checkbox · Switch · Select |
111
+ | **Overlays** | Dialog · Dropdown Menu · Tooltip · Command Palette |
112
+ | **Feedback** | Toast · Badge |
113
+ | **Display** | Avatar · Card |
114
+ | **Navigation** | Tabs |
115
+ | **Layout** | Navbar · Burger · Footer · Sidebar |
116
+ | **Editor** | Rich text editor with toolbar, selection menu, slash commands and Markdown shortcuts |
117
+
118
+ Every component is designed with:
119
+
120
+ * Light and dark themes
121
+ * Keyboard interaction
122
+ * Reduced-motion support
123
+ * SSR compatibility
124
+ * Accessible focus management
125
+
126
+ See the documentation for component-specific keyboard shortcuts, ARIA behavior and examples.
127
+
128
+ ## Design philosophy
129
+
130
+ ### Quiet until it matters
131
+
132
+ The interface is primarily grayscale. Green `#079D6B` is reserved for state: focus, checked, success and context.
133
+
134
+ Primary actions use ink rather than turning the entire interface green.
135
+
136
+ ### Motion is feedback
137
+
138
+ JuxtUI uses four durations (80–240ms) and three motion curves.
139
+
140
+ Only `transform` and `opacity` are animated where possible. Entrances are slower than exits, and reduced-motion preferences are respected.
141
+
142
+ ### Accessible by construction
143
+
144
+ Overlays trap focus, restore it when they close, and stack predictably.
145
+
146
+ When multiple layers are open, Escape and outside clicks affect only the top-most layer.
147
+
148
+ ### Small APIs
149
+
150
+ Props describe what components do, and stateful components consistently use `v-model`.
151
+
152
+ If you know one JuxtUI component, the others should feel familiar.
153
+
154
+ ### Tokens all the way down
155
+
156
+ Color, typography, spacing, radius, elevation, motion and layering are exposed as CSS custom properties.
157
+
158
+ Change a token such as `--juxt-accent` and the system follows.
159
+
160
+ ## Editor
161
+
162
+ JuxtUI also includes a rich text editor with:
163
+
164
+ * Toolbar
165
+ * Selection menu
166
+ * Slash commands
167
+ * Markdown shortcuts
168
+ * Customizable extensions
169
+
170
+ Import it separately:
171
+
172
+ ```ts
173
+ import { JuxtEditor } from '@juxtui/ui/editor'
174
+ ```
175
+
176
+ ## Browser support
177
+
178
+ JuxtUI is built for modern browsers and Vue 3 applications.
179
+
180
+ Components are designed to work with both client-side Vue applications and Nuxt SSR.
181
+
182
+ ## Development
183
+
184
+ Clone the repository and install dependencies:
185
+
186
+ ```bash
187
+ pnpm install
188
+ ```
189
+
190
+ Run the documentation locally:
191
+
192
+ ```bash
193
+ pnpm dev
194
+ ```
195
+
196
+ Run tests:
197
+
198
+ ```bash
199
+ pnpm test
200
+ ```
201
+
202
+ Build the package:
203
+
204
+ ```bash
205
+ pnpm build
206
+ ```
207
+
208
+ ## Philosophy
209
+
210
+ juxt.ui intentionally favors **fewer, more polished components** over a large collection of loosely connected primitives.
211
+
212
+ Every component should feel like it belongs to the same system.
213
+
214
+ ## License
215
+
216
+ MIT