@7onic-ui/react 0.2.0 → 0.2.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/README.md +15 -3
- package/llms.txt +1721 -243
- package/package.json +9 -2
package/llms.txt
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# 7onic Design System — AI Guide (
|
|
1
|
+
# 7onic Design System — AI Guide (Full)
|
|
2
2
|
|
|
3
3
|
## What is 7onic?
|
|
4
4
|
|
|
5
|
-
Token-driven design system
|
|
6
|
-
|
|
5
|
+
Token-driven React design system with 38 components on Radix UI.
|
|
6
|
+
Single source of truth — design tokens to code. Use this to build any React service.
|
|
7
7
|
|
|
8
8
|
- Documentation: https://7onic.design
|
|
9
|
-
- npm: `@7onic-ui/tokens` (design tokens)
|
|
10
|
-
- For
|
|
9
|
+
- npm: `@7onic-ui/react` (components) + `@7onic-ui/tokens` (design tokens)
|
|
10
|
+
- For tokens-only guide, see: https://7onic.design/llms.txt
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
# ═══ SECTION 1: PROJECT SETUP ═══
|
|
14
|
+
# ═══ SECTION 1: PROJECT SETUP & AI RULES ═══
|
|
15
15
|
|
|
16
16
|
## How to Start
|
|
17
17
|
|
|
@@ -23,18 +23,19 @@ Before writing any code, present this checklist and wait for answers:
|
|
|
23
23
|
2. **Dark mode** — Yes or no?
|
|
24
24
|
3. **Font** — Use default, or custom font? If custom, which font?
|
|
25
25
|
4. **Locale** — Which language(s)? (for CJK font loading)
|
|
26
|
+
5. **What are you building?** — Describe the project
|
|
26
27
|
|
|
27
|
-
**If the user answers in natural language
|
|
28
|
+
**If the user answers in natural language** (e.g., "Make me a dashboard with dark mode, English only"), extract the answers from their message. **If any item is missing, ask a follow-up question for the missing items only.** Do not proceed until all 5 items are answered.
|
|
28
29
|
|
|
29
30
|
### Step 2: Execute full setup (all at once, do not skip any)
|
|
30
31
|
|
|
31
32
|
After receiving answers, execute ALL of the following in order. Every step is mandatory.
|
|
32
33
|
|
|
33
|
-
**2-1. Install
|
|
34
|
+
**2-1. Install packages (skip if already installed):**
|
|
34
35
|
```bash
|
|
35
|
-
npm install @7onic-ui/tokens
|
|
36
|
+
npm install @7onic-ui/react @7onic-ui/tokens lucide-react
|
|
36
37
|
```
|
|
37
|
-
> Check package.json first. If already listed in dependencies, skip this step.
|
|
38
|
+
> Check package.json first. If packages are already listed in dependencies, skip this step.
|
|
38
39
|
|
|
39
40
|
**2-2. Create or update globals.css with token imports:**
|
|
40
41
|
|
|
@@ -67,7 +68,10 @@ npm install @7onic-ui/tokens
|
|
|
67
68
|
const preset = require('@7onic-ui/tokens/tailwind/v3-preset')
|
|
68
69
|
module.exports = {
|
|
69
70
|
presets: [preset],
|
|
70
|
-
content: [
|
|
71
|
+
content: [
|
|
72
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
73
|
+
'./node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
|
|
74
|
+
],
|
|
71
75
|
}
|
|
72
76
|
```
|
|
73
77
|
|
|
@@ -84,7 +88,7 @@ module.exports = {
|
|
|
84
88
|
- Locale includes Korean → load Noto Sans KR font
|
|
85
89
|
|
|
86
90
|
**2-5. Verify setup is complete before writing any UI code:**
|
|
87
|
-
- [ ]
|
|
91
|
+
- [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
|
|
88
92
|
- [ ] globals.css has ALL required imports in correct order
|
|
89
93
|
- [ ] Body has `bg-background text-foreground`
|
|
90
94
|
- [ ] Dark mode toggle (if selected)
|
|
@@ -102,28 +106,48 @@ import { Search, Settings, ChevronDown, X } from 'lucide-react'
|
|
|
102
106
|
// ❌ Legacy alias — avoid
|
|
103
107
|
import { SearchIcon, SettingsIcon } from 'lucide-react'
|
|
104
108
|
|
|
105
|
-
// ⚠️ Name collision with
|
|
109
|
+
// ⚠️ Name collision with 7onic component — use alias
|
|
110
|
+
import { Badge } from '@7onic-ui/react'
|
|
106
111
|
import { Badge as BadgeIcon } from 'lucide-react'
|
|
107
112
|
```
|
|
108
113
|
|
|
109
|
-
### Step 3:
|
|
114
|
+
### Step 3: Add Toaster to root layout (if using Toast)
|
|
110
115
|
|
|
111
|
-
|
|
116
|
+
Place `<Toaster />` once in your root layout file. Without this, `toast()` calls will not render.
|
|
112
117
|
|
|
113
|
-
|
|
118
|
+
```tsx
|
|
119
|
+
import { Toaster } from '@7onic-ui/react'
|
|
120
|
+
|
|
121
|
+
// In your root layout (e.g., app/layout.tsx)
|
|
122
|
+
<body className="bg-background text-foreground">
|
|
123
|
+
{children}
|
|
124
|
+
<Toaster position="bottom-right" />
|
|
125
|
+
</body>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Step 4: Start building
|
|
129
|
+
|
|
130
|
+
Design freely based on user's project description. Always use 7onic components + tokens.
|
|
131
|
+
|
|
132
|
+
### Component Dependencies (auto-install during development)
|
|
133
|
+
|
|
134
|
+
| Component | Additional Package | When to install |
|
|
135
|
+
|---|---|---|
|
|
136
|
+
| Chart (Bar, Line, Area, Pie) | `recharts` | `npm install recharts` — import from `@7onic-ui/react/chart` (separate entry point) |
|
|
114
137
|
|
|
115
|
-
|
|
138
|
+
---
|
|
116
139
|
|
|
117
|
-
## ⛔
|
|
140
|
+
## ⛔ AI Rules — Whitelist System
|
|
118
141
|
|
|
119
|
-
|
|
142
|
+
### Core Principle
|
|
120
143
|
|
|
121
|
-
|
|
144
|
+
**Token values are user-defined.** Every project has different brand colors and design decisions. The token NAMES are the API — never assume or hardcode specific values.
|
|
122
145
|
|
|
123
|
-
|
|
146
|
+
### Whitelist — ONLY These Are Allowed
|
|
124
147
|
|
|
125
|
-
1. **
|
|
126
|
-
2. **
|
|
148
|
+
1. **7onic components + Props** — always prefer components over raw HTML
|
|
149
|
+
2. **Token classes** — colors, spacing, typography, radius, shadows, z-index, icon sizes, duration, easing, opacity, scale
|
|
150
|
+
3. **Tailwind structural utilities** — layout, positioning, display, overflow, sizing, and more:
|
|
127
151
|
- Layout: flex, grid, block, inline, hidden, container
|
|
128
152
|
- Position: relative, absolute, fixed, sticky, top-0, inset-0
|
|
129
153
|
- Flex/Grid: items-center, justify-between, gap-4, col-span-2
|
|
@@ -140,15 +164,15 @@ When writing any code, you may ONLY use:
|
|
|
140
164
|
- ⚠️ Utilities that implicitly use color (divide, border) must be paired with a token color:
|
|
141
165
|
`divide-y divide-border` ✅ / `divide-y` alone ❌ (may not adapt to dark mode)
|
|
142
166
|
`border border-border` ✅ / `border` alone ❌
|
|
143
|
-
|
|
167
|
+
4. **Tailwind visual utilities using token values** — gradients, transforms, transitions:
|
|
144
168
|
- Gradient: bg-gradient-to-r, from-primary, to-secondary (token colors only)
|
|
145
169
|
- Transform: rotate-45, translate-x-1
|
|
146
170
|
- Transition: transition-all, transition-colors (with token durations)
|
|
147
171
|
- Backdrop: backdrop-blur, backdrop-blur-sm
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
172
|
+
5. **Responsive prefixes** — sm:, md:, lg:, xl:, 2xl: (on allowed classes only)
|
|
173
|
+
6. **State prefixes** — hover:, focus:, active:, disabled: (on allowed classes only, token values only)
|
|
174
|
+
7. **Layout dimension arbitrary values** — height and width ONLY: h-[300px], max-w-[1200px] (when no token fits)
|
|
175
|
+
8. **Opacity modifier** — append `/0-100` to any token color for transparency:
|
|
152
176
|
- `bg-primary/50`, `text-foreground/70`, `border-border/30`
|
|
153
177
|
- Do NOT use `opacity-*` utility as a workaround — it affects the entire element including children
|
|
154
178
|
- `bg-primary/10` ✅ (only background is transparent) / `bg-primary opacity-10` ❌ (children also become transparent)
|
|
@@ -157,21 +181,61 @@ When writing any code, you may ONLY use:
|
|
|
157
181
|
|
|
158
182
|
⚠️ **Gradient/visual utilities must use token colors only:** `from-primary to-secondary` ✅ / `from-blue-500 to-purple-600` ❌
|
|
159
183
|
|
|
160
|
-
|
|
184
|
+
### Decision Tree — For Every UI Element
|
|
161
185
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
186
|
+
```
|
|
187
|
+
Step 1: Does a 7onic component exist for this?
|
|
188
|
+
→ YES: Use the component. Style via Props (variant/size/color).
|
|
189
|
+
className ONLY for layout (margin, width, flex positioning).
|
|
190
|
+
→ NO: Step 2
|
|
191
|
+
|
|
192
|
+
Step 2: Is this a layout/structural element? (flex container, grid, section wrapper)
|
|
193
|
+
→ YES: Use div/section + token classes only.
|
|
194
|
+
→ NO: Step 3
|
|
195
|
+
|
|
196
|
+
Step 3: Re-check the 38 components. Most UI can be built with component combinations.
|
|
197
|
+
→ Still no match: Use div + token classes only.
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### ❌ Forbidden Patterns
|
|
201
|
+
|
|
202
|
+
```tsx
|
|
203
|
+
// ❌ HTML instead of components
|
|
204
|
+
<button className="bg-primary rounded-lg px-4 py-2"> → <Button>
|
|
205
|
+
<input className="border rounded-lg px-3 h-10"> → <Input>
|
|
206
|
+
<div className="border rounded-xl p-6 shadow-sm"> → <Card>
|
|
207
|
+
<table className="w-full"> → <Table>
|
|
208
|
+
|
|
209
|
+
// ❌ className overriding component styles
|
|
210
|
+
<Button className="bg-blue-500 text-white"> → <Button color="primary">
|
|
211
|
+
<Badge className="bg-red-100 text-red-700"> → <Badge color="error">
|
|
212
|
+
|
|
213
|
+
// ❌ Raw Tailwind colors
|
|
214
|
+
bg-blue-500, text-gray-700, bg-white, border-gray-200
|
|
215
|
+
|
|
216
|
+
// ❌ Dark mode prefix
|
|
217
|
+
dark:bg-gray-900, dark:text-white
|
|
218
|
+
|
|
219
|
+
// ❌ Arbitrary values (except layout dimensions)
|
|
220
|
+
p-[17px], text-[13px], rounded-[7px], z-[999]
|
|
221
|
+
|
|
222
|
+
// ❌ Inline styles
|
|
223
|
+
style={{ color: '#333', padding: '20px' }}
|
|
224
|
+
|
|
225
|
+
// ❌ @apply with raw values
|
|
226
|
+
@apply bg-blue-500
|
|
227
|
+
|
|
228
|
+
// ❌ Icon sizing with w/h
|
|
229
|
+
w-4 h-4, w-5 h-5 → icon-sm, icon-md
|
|
230
|
+
|
|
231
|
+
// ❌ Radix direct import
|
|
232
|
+
import * as Dialog from '@radix-ui/react-dialog' → import { Modal } from '@7onic-ui/react'
|
|
233
|
+
|
|
234
|
+
// ❌ Unnecessary component wrappers
|
|
235
|
+
function MyButton(props) { return <Button {...props} /> } → Use Button directly
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### When User Requests Custom Values
|
|
175
239
|
|
|
176
240
|
If the user explicitly asks for a value outside the token system:
|
|
177
241
|
|
|
@@ -186,22 +250,64 @@ User: "Apply it"
|
|
|
186
250
|
AI: → Apply the custom value
|
|
187
251
|
```
|
|
188
252
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
253
|
+
| Situation | AI Behavior |
|
|
254
|
+
|---|---|
|
|
255
|
+
| User request within token range | Execute immediately |
|
|
256
|
+
| User request outside token range | Ask "bypass tokens?" → execute after confirmation |
|
|
257
|
+
| AI writing code on its own | Token system ONLY — never bypass |
|
|
258
|
+
|
|
259
|
+
### Third-Party Libraries
|
|
260
|
+
|
|
261
|
+
When a feature is needed that no 7onic component covers (map, video player, rich text editor, etc.):
|
|
262
|
+
|
|
263
|
+
- **Do NOT install any library without asking the user first**
|
|
264
|
+
- Ask: "Which library would you like to use for [feature]?"
|
|
265
|
+
- Install and use only after user's choice
|
|
266
|
+
|
|
267
|
+
### Token Customization Is the User's Responsibility
|
|
268
|
+
|
|
269
|
+
The token system covers all UI needs out of the box. As AI, use existing tokens only.
|
|
270
|
+
|
|
271
|
+
If the user needs custom values beyond existing tokens, they will handle it separately.
|
|
272
|
+
Customization guide: https://7onic.design/components/theming
|
|
273
|
+
|
|
274
|
+
**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
|
|
275
|
+
|
|
276
|
+
### Self-Check (after writing ANY code)
|
|
277
|
+
|
|
278
|
+
Before presenting code to the user, scan your own output for violations:
|
|
279
|
+
|
|
280
|
+
- [ ] Any raw color class? (`bg-blue-*`, `text-gray-*`, `bg-white`, `border-gray-*`)
|
|
281
|
+
- [ ] Any arbitrary value? (`p-[*]`, `text-[*]`, `rounded-[*]`, `z-[*]`)
|
|
282
|
+
- [ ] Any inline style? (`style={{ }}`)
|
|
283
|
+
- [ ] Any `dark:` prefix?
|
|
284
|
+
- [ ] Any `w-N h-N` for icons instead of `icon-*`?
|
|
285
|
+
- [ ] Any `<button>`, `<input>`, `<table>` instead of 7onic components?
|
|
286
|
+
- [ ] Any Radix direct import?
|
|
287
|
+
- [ ] Any className overriding component visual styles?
|
|
288
|
+
- [ ] Any `divide-*` or `border` without a token color? (`divide-y` alone → `divide-y divide-border`)
|
|
289
|
+
- [ ] Any `opacity-*` on element instead of color modifier? (`bg-primary opacity-10` → `bg-primary/10`)
|
|
290
|
+
|
|
291
|
+
**If ANY violation is found → fix it before showing code to the user.**
|
|
292
|
+
**Do NOT present code with violations. Fix first, then present.**
|
|
193
293
|
|
|
194
294
|
---
|
|
195
295
|
|
|
196
|
-
|
|
296
|
+
**When in doubt, check the documentation** — if component Props, token usage, or patterns are unclear, refer to the official docs before guessing:
|
|
297
|
+
- Component pages: `https://7onic.design/components/{name}` (e.g., `/components/button`, `/components/navigation-menu`)
|
|
298
|
+
- Token pages: `https://7onic.design/design-tokens/{name}` (e.g., `/design-tokens/colors`, `/design-tokens/spacing`)
|
|
299
|
+
- Do not guess — verify from documentation first
|
|
197
300
|
|
|
198
|
-
|
|
301
|
+
---
|
|
302
|
+
|
|
303
|
+
## Dark Mode — Automatic
|
|
304
|
+
|
|
305
|
+
Dark mode works automatically when using semantic tokens. No `dark:` prefix needed.
|
|
199
306
|
|
|
200
307
|
| ❌ NEVER | ✅ CORRECT |
|
|
201
308
|
|---|---|
|
|
202
309
|
| `bg-white dark:bg-gray-900` | `bg-background` |
|
|
203
310
|
| `text-gray-900 dark:text-gray-100` | `text-foreground` |
|
|
204
|
-
| `text-gray-500 dark:text-gray-400` | `text-muted` |
|
|
205
311
|
| `border-gray-200 dark:border-gray-700` | `border-border` |
|
|
206
312
|
|
|
207
313
|
### Dark Mode Toggle Implementation
|
|
@@ -225,243 +331,1615 @@ Strategy: `dark` class on `<html>` element.
|
|
|
225
331
|
|
|
226
332
|
---
|
|
227
333
|
|
|
228
|
-
|
|
334
|
+
## Token Reference (Quick)
|
|
229
335
|
|
|
230
|
-
> Token values depend on the user's project configuration.
|
|
231
|
-
> The names below are the API. Never assume specific hex values.
|
|
336
|
+
> Token values depend on the user's project configuration. Never assume specific hex values.
|
|
232
337
|
|
|
233
|
-
|
|
338
|
+
**Semantic Colors (theme-aware):**
|
|
339
|
+
- Background: `background`, `background-paper`, `background-elevated`, `background-muted`
|
|
340
|
+
- Text: `foreground`, `text-muted`, `text-subtle`, `text-link`, `text-primary`
|
|
341
|
+
- Status text: `text-info`, `text-success`, `text-error`, `text-warning`
|
|
342
|
+
- Intent (×6): `{intent}`, `{intent}-hover`, `{intent}-active`, `{intent}-tint`, `{intent}-foreground` — where intent = primary, secondary, success, warning, error, info
|
|
343
|
+
- Border: `border`, `border-subtle`, `border-strong`
|
|
344
|
+
- State: `disabled`, `disabled-text`, `focus-ring`, `focus-ring-error`
|
|
234
345
|
|
|
235
|
-
**
|
|
236
|
-
- `background` — main page background
|
|
237
|
-
- `background-paper` — card/surface background
|
|
238
|
-
- `background-elevated` — elevated surface (above paper)
|
|
239
|
-
- `background-muted` — subtle/subdued background
|
|
346
|
+
**Spacing:** 0, 0.5(2px), 1(4px), 1.5(6px), 2(8px), 2.5(10px), 3(12px), 4(16px), 5(20px), 6(24px), 7(28px), 8(32px), 10(40px), 12(48px), 14(56px), 16(64px), 20(80px), 24(96px)
|
|
240
347
|
|
|
241
|
-
**
|
|
242
|
-
-
|
|
243
|
-
-
|
|
244
|
-
- `text-subtle` — tertiary text, lowest emphasis
|
|
245
|
-
- `text-link` — link color
|
|
246
|
-
- `text-primary` — brand-colored text
|
|
348
|
+
**Font:** `font-sans` (user-defined), `font-mono` (user-defined)
|
|
349
|
+
**Font Sizes:** text-2xs(11px), text-xs(12px), text-sm(13px), text-md(14px), text-base(16px), text-lg(18px), text-xl(20px), text-2xl(24px), text-3xl(30px), text-4xl(36px), text-5xl(48px)
|
|
350
|
+
**Font Weights:** font-normal(400), font-semibold(600), font-bold(700)
|
|
247
351
|
|
|
248
|
-
**
|
|
249
|
-
- `text-info` / `text-success` / `text-error` / `text-warning`
|
|
352
|
+
**Radius:** rounded-none(0), rounded-sm(2), rounded-base(4), rounded-md(6), rounded-lg(8), rounded-xl(12), rounded-2xl(16), rounded-3xl(24), rounded-full(9999)
|
|
250
353
|
|
|
251
|
-
**
|
|
252
|
-
- `primary` / `primary-hover` / `primary-active` / `primary-tint` / `primary-foreground`
|
|
253
|
-
- `secondary` / `secondary-hover` / `secondary-active` / `secondary-tint` / `secondary-foreground`
|
|
254
|
-
- `success` / `success-hover` / `success-active` / `success-tint` / `success-foreground`
|
|
255
|
-
- `warning` / `warning-hover` / `warning-active` / `warning-tint` / `warning-foreground`
|
|
256
|
-
- `error` / `error-hover` / `error-active` / `error-tint` / `error-foreground`
|
|
257
|
-
- `info` / `info-hover` / `info-active` / `info-tint` / `info-foreground`
|
|
354
|
+
**Shadows:** shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl
|
|
258
355
|
|
|
259
|
-
**
|
|
260
|
-
- `border` — default border
|
|
261
|
-
- `border-subtle` — lighter/softer border
|
|
262
|
-
- `border-strong` — stronger/darker border
|
|
356
|
+
**Z-Index:** z-sticky(100), z-dropdown(1000), z-overlay(1100), z-modal(2000), z-popover(2100), z-tooltip(2200), z-toast(3000)
|
|
263
357
|
|
|
264
|
-
**
|
|
265
|
-
- `disabled` — disabled background
|
|
266
|
-
- `disabled-text` — disabled text
|
|
267
|
-
- `focus-ring` — focus indicator
|
|
268
|
-
- `focus-ring-error` — error focus indicator
|
|
358
|
+
**Icon Sizes:** icon-2xs(12px), icon-xs(14px), icon-sm(16px), icon-md(20px), icon-lg(24px), icon-xl(32px)
|
|
269
359
|
|
|
270
|
-
|
|
360
|
+
**Duration:** duration-instant(0), duration-fast(100), duration-micro(150), duration-normal(200), duration-slow(300), duration-slower(400), duration-slowest(500), duration-spin(1000)
|
|
271
361
|
|
|
272
|
-
|
|
273
|
-
`gray`, `primary`, `secondary`, `blue`, `green`, `red`, `yellow`
|
|
362
|
+
**Easing:** ease-linear, ease-ease, ease-ease-in, ease-ease-out, ease-ease-in-out
|
|
274
363
|
|
|
275
|
-
|
|
276
|
-
**Prefer semantic tokens over primitives** — primitives don't auto-adapt to dark mode.
|
|
277
|
-
**Note:** The actual colors of each palette depend on the user's token configuration.
|
|
364
|
+
**Opacity:** opacity-0 to opacity-100 (5% increments)
|
|
278
365
|
|
|
279
|
-
|
|
366
|
+
**Scale:** scale-50, scale-75, scale-95, scale-pressed(0.98)
|
|
280
367
|
|
|
281
|
-
|
|
282
|
-
|---|---|---|
|
|
283
|
-
| `0` | 0 | Reset |
|
|
284
|
-
| `0.5` | 2px | Micro gap |
|
|
285
|
-
| `1` | 4px | Tight gap |
|
|
286
|
-
| `1.5` | 6px | Small gap |
|
|
287
|
-
| `2` | 8px | Default gap |
|
|
288
|
-
| `2.5` | 10px | — |
|
|
289
|
-
| `3` | 12px | Section gap |
|
|
290
|
-
| `4` | 16px | Card padding |
|
|
291
|
-
| `5` | 20px | — |
|
|
292
|
-
| `6` | 24px | Section padding |
|
|
293
|
-
| `7` | 28px | — |
|
|
294
|
-
| `8` | 32px | Large padding |
|
|
295
|
-
| `10` | 40px | — |
|
|
296
|
-
| `12` | 48px | — |
|
|
297
|
-
| `14` | 56px | — |
|
|
298
|
-
| `16` | 64px | Page margin |
|
|
299
|
-
| `20` | 80px | — |
|
|
300
|
-
| `24` | 96px | Hero spacing |
|
|
301
|
-
|
|
302
|
-
## Typography
|
|
303
|
-
|
|
304
|
-
**Font Families:**
|
|
305
|
-
- `font-sans` — sans-serif body font (user-defined)
|
|
306
|
-
- `font-mono` — monospace code font (user-defined)
|
|
307
|
-
|
|
308
|
-
**Font Sizes:**
|
|
309
|
-
|
|
310
|
-
| Class | Size | Line Height | Use Case |
|
|
311
|
-
|---|---|---|---|
|
|
312
|
-
| `text-2xs` | 11px | 16px | Fine print |
|
|
313
|
-
| `text-xs` | 12px | 18px | Caption, badge |
|
|
314
|
-
| `text-sm` | 13px | 20px | Body small, table |
|
|
315
|
-
| `text-md` | 14px | 22px | Body default |
|
|
316
|
-
| `text-base` | 16px | 26px | Body large |
|
|
317
|
-
| `text-lg` | 18px | 28px | Subtitle |
|
|
318
|
-
| `text-xl` | 20px | 30px | Title |
|
|
319
|
-
| `text-2xl` | 24px | 34px | Heading |
|
|
320
|
-
| `text-3xl` | 30px | 40px | Hero subtitle |
|
|
321
|
-
| `text-4xl` | 36px | 46px | Hero title |
|
|
322
|
-
| `text-5xl` | 48px | 58px | Display |
|
|
323
|
-
|
|
324
|
-
**Font Weights:**
|
|
325
|
-
- `font-normal` (400) — body text
|
|
326
|
-
- `font-semibold` (600) — labels, emphasis
|
|
327
|
-
- `font-bold` (700) — headings
|
|
328
|
-
|
|
329
|
-
## Border Radius
|
|
330
|
-
|
|
331
|
-
| Class | Value | Use Case |
|
|
332
|
-
|---|---|---|
|
|
333
|
-
| `rounded-none` | 0px | Square |
|
|
334
|
-
| `rounded-sm` | 2px | Subtle |
|
|
335
|
-
| `rounded-base` | 4px | Default (checkbox) |
|
|
336
|
-
| `rounded-md` | 6px | Default (button) |
|
|
337
|
-
| `rounded-lg` | 8px | Card, input |
|
|
338
|
-
| `rounded-xl` | 12px | Large card |
|
|
339
|
-
| `rounded-2xl` | 16px | Modal |
|
|
340
|
-
| `rounded-3xl` | 24px | Pill shape |
|
|
341
|
-
| `rounded-full` | 9999px | Circle, pill button |
|
|
342
|
-
|
|
343
|
-
## Shadows
|
|
344
|
-
|
|
345
|
-
| Class | Description |
|
|
346
|
-
|---|---|
|
|
347
|
-
| `shadow-xs` | Barely visible — subtle elevation |
|
|
348
|
-
| `shadow-sm` | Default card shadow |
|
|
349
|
-
| `shadow-md` | Dropdown, popover |
|
|
350
|
-
| `shadow-lg` | Modal, drawer |
|
|
351
|
-
| `shadow-xl` | Floating action |
|
|
368
|
+
**Breakpoints:** sm(640), md(768), lg(1024), xl(1280), 2xl(1536)
|
|
352
369
|
|
|
353
|
-
|
|
370
|
+
For detailed token reference, see: https://7onic.design/llms.txt
|
|
354
371
|
|
|
355
|
-
|
|
372
|
+
---
|
|
356
373
|
|
|
357
|
-
|
|
358
|
-
|---|---|---|
|
|
359
|
-
| `z-0` | 0 | Default |
|
|
360
|
-
| `z-10`–`z-50` | 10–50 | Layout layers |
|
|
361
|
-
| `z-sticky` | 100 | Sticky header |
|
|
362
|
-
| `z-dropdown` | 1000 | Dropdown menu |
|
|
363
|
-
| `z-overlay` | 1100 | Overlay/backdrop |
|
|
364
|
-
| `z-modal` | 2000 | Modal dialog |
|
|
365
|
-
| `z-popover` | 2100 | Popover |
|
|
366
|
-
| `z-tooltip` | 2200 | Tooltip |
|
|
367
|
-
| `z-toast` | 3000 | Toast notification |
|
|
374
|
+
# ═══ SECTION 2: COMPONENT IMPORT PATTERNS ═══
|
|
368
375
|
|
|
369
|
-
|
|
376
|
+
## Import
|
|
370
377
|
|
|
371
|
-
|
|
378
|
+
```tsx
|
|
379
|
+
// All components from single package
|
|
380
|
+
import { Button, Card, Input, Toast } from '@7onic-ui/react'
|
|
381
|
+
```
|
|
372
382
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
| `icon-xs` | 14px | xs/sm button icon, tag |
|
|
377
|
-
| `icon-sm` | 16px | Default button icon, form element |
|
|
378
|
-
| `icon-md` | 20px | Navigation, default icon button |
|
|
379
|
-
| `icon-lg` | 24px | Large icon button, card |
|
|
380
|
-
| `icon-xl` | 32px | Hero, feature icon |
|
|
383
|
+
## Namespace Pattern (Compound Components)
|
|
384
|
+
|
|
385
|
+
21 compound components use namespace imports. Access sub-components via dot notation:
|
|
381
386
|
|
|
382
|
-
|
|
387
|
+
```tsx
|
|
388
|
+
import { Card } from '@7onic-ui/react'
|
|
389
|
+
|
|
390
|
+
// ✅ Namespace usage (preferred)
|
|
391
|
+
<Card>
|
|
392
|
+
<Card.Header>
|
|
393
|
+
<Card.Title>Title</Card.Title>
|
|
394
|
+
<Card.Description>Description</Card.Description>
|
|
395
|
+
</Card.Header>
|
|
396
|
+
<Card.Content>Content</Card.Content>
|
|
397
|
+
<Card.Footer>Footer</Card.Footer>
|
|
398
|
+
</Card>
|
|
399
|
+
|
|
400
|
+
// ✅ Named exports also work (backwards compatible)
|
|
401
|
+
import { Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
|
|
402
|
+
```
|
|
383
403
|
|
|
384
|
-
|
|
404
|
+
### Compound Components List (21)
|
|
385
405
|
|
|
386
|
-
|
|
387
|
-
|---|---|---|
|
|
388
|
-
| `duration-instant` | 0ms | No animation |
|
|
389
|
-
| `duration-fast` | 100ms | Micro interactions |
|
|
390
|
-
| `duration-micro` | 150ms | Button press, toggle |
|
|
391
|
-
| `duration-normal` | 200ms | Default transition |
|
|
392
|
-
| `duration-slow` | 300ms | Panel slide |
|
|
393
|
-
| `duration-slower` | 400ms | Page transition |
|
|
394
|
-
| `duration-slowest` | 500ms | Complex animation |
|
|
395
|
-
| `duration-spin` | 1000ms | Spinner rotation |
|
|
406
|
+
Accordion, Alert, Avatar, Breadcrumb, Card, Chart, Drawer, DropdownMenu, Field, MetricCard, Modal, NavigationMenu, Pagination, Popover, RadioGroup, Segmented, Select, Table, Tabs, ToggleGroup, Tooltip
|
|
396
407
|
|
|
397
|
-
|
|
408
|
+
### Standalone Components (15)
|
|
398
409
|
|
|
399
|
-
|
|
400
|
-
- `ease-ease` — natural acceleration/deceleration
|
|
401
|
-
- `ease-ease-in` — slow start
|
|
402
|
-
- `ease-ease-out` — slow end
|
|
403
|
-
- `ease-ease-in-out` — slow start and end
|
|
410
|
+
Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skeleton, Slider, Spinner, Switch, Textarea, Toast, Toggle
|
|
404
411
|
|
|
405
|
-
|
|
412
|
+
---
|
|
406
413
|
|
|
407
|
-
|
|
408
|
-
Each 5% increment. Values: 0, 0.05, 0.10 ... 0.95, 1.0
|
|
414
|
+
# ═══ SECTION 3: ALL COMPONENTS (38) ═══
|
|
409
415
|
|
|
410
|
-
|
|
416
|
+
---
|
|
411
417
|
|
|
412
|
-
|
|
413
|
-
|---|---|---|
|
|
414
|
-
| `scale-50` | 0.5 | Half size |
|
|
415
|
-
| `scale-75` | 0.75 | Reduced |
|
|
416
|
-
| `scale-95` | 0.95 | Hover shrink |
|
|
417
|
-
| `scale-pressed` | 0.98 | Button press effect |
|
|
418
|
+
## Forms
|
|
418
419
|
|
|
419
|
-
|
|
420
|
+
### Button
|
|
420
421
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
422
|
+
```tsx
|
|
423
|
+
import { Button } from '@7onic-ui/react'
|
|
424
|
+
|
|
425
|
+
<Button variant="solid" color="primary" size="default">Submit</Button>
|
|
426
|
+
<Button variant="outline" color="default" leftIcon={<Icon />}>Cancel</Button>
|
|
427
|
+
<Button loading>Processing...</Button>
|
|
428
|
+
<Button variant="link" color="primary">Learn more</Button>
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
| Prop | Type | Default | Description |
|
|
432
|
+
|---|---|---|---|
|
|
433
|
+
| variant | `'solid' \| 'outline' \| 'ghost' \| 'link'` | `'solid'` | Visual style |
|
|
434
|
+
| color | `'default' \| 'primary' \| 'secondary' \| 'destructive'` | `'default'` | Color scheme |
|
|
435
|
+
| size | `'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Height: 28/32/36/40/48px |
|
|
436
|
+
| radius | `'none' \| 'sm' \| 'base' \| 'default' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'default'` | Border radius |
|
|
437
|
+
| loading | `boolean` | `false` | Shows spinner, disables button |
|
|
438
|
+
| leftIcon | `ReactNode` | — | Icon before label |
|
|
439
|
+
| rightIcon | `ReactNode` | — | Icon after label |
|
|
440
|
+
| fullWidth | `boolean` | `false` | `w-full` |
|
|
441
|
+
| selected | `boolean` | — | Selected state (outline/ghost) |
|
|
442
|
+
| fontWeight | `'normal' \| 'semibold'` | per variant | Override font weight |
|
|
443
|
+
| pressEffect | `boolean` | `true` | Scale-down on press |
|
|
444
|
+
| asChild | `boolean` | `false` | Render as child element (Slot) |
|
|
445
|
+
| disabled | `boolean` | `false` | Disabled state |
|
|
446
|
+
|
|
447
|
+
**Icon sizing by button size:** xs/sm → icon-xs(14px), md/default/lg → icon-sm(16px)
|
|
428
448
|
|
|
429
449
|
---
|
|
430
450
|
|
|
431
|
-
|
|
451
|
+
### IconButton
|
|
432
452
|
|
|
433
|
-
|
|
453
|
+
```tsx
|
|
454
|
+
import { IconButton } from '@7onic-ui/react'
|
|
434
455
|
|
|
435
|
-
|
|
456
|
+
<IconButton variant="ghost" size="default" aria-label="Settings">
|
|
457
|
+
<SettingsIcon />
|
|
458
|
+
</IconButton>
|
|
459
|
+
```
|
|
436
460
|
|
|
437
|
-
|
|
461
|
+
| Prop | Type | Default | Description |
|
|
462
|
+
|---|---|---|---|
|
|
463
|
+
| variant | `'solid' \| 'outline' \| 'ghost' \| 'subtle'` | `'solid'` | Visual style |
|
|
464
|
+
| color | `'default' \| 'primary' \| 'secondary' \| 'destructive'` | `'default'` | Color scheme |
|
|
465
|
+
| size | `'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | 28/32/36/40/48px (square) |
|
|
466
|
+
| radius | Same as Button | `'default'` | Border radius |
|
|
467
|
+
| loading | `boolean` | `false` | Shows spinner |
|
|
468
|
+
| pressEffect | `boolean` | `true` | Scale-down on press |
|
|
469
|
+
| asChild | `boolean` | `false` | Slot pattern |
|
|
438
470
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
- **Never add CSS variables, hex values, or arbitrary Tailwind values**
|
|
442
|
-
- **Token customization is the user's responsibility** — if the user needs custom values, they will handle it separately. See: https://7onic.design/components/theming
|
|
443
|
-
- **Never modify generated token files** — the following files are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from these files: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
|
|
471
|
+
**Icon sizing:** xs → icon-xs(14px), sm/md → icon-sm(16px), default → icon-md(20px), lg → icon-lg(24px)
|
|
472
|
+
**Always provide `aria-label`** — no visible text.
|
|
444
473
|
|
|
445
|
-
|
|
474
|
+
---
|
|
446
475
|
|
|
447
|
-
|
|
476
|
+
### ButtonGroup
|
|
448
477
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
- [ ] Any inline style? (`style={{ }}`)
|
|
452
|
-
- [ ] Any `dark:` prefix?
|
|
453
|
-
- [ ] Any `w-N h-N` for icons instead of `icon-*`?
|
|
454
|
-
- [ ] Any `divide-*` or `border` without a token color? (`divide-y` alone → `divide-y divide-border`)
|
|
455
|
-
- [ ] Any `opacity-*` on element instead of color modifier? (`bg-primary opacity-10` → `bg-primary/10`)
|
|
478
|
+
```tsx
|
|
479
|
+
import { Button, ButtonGroup } from '@7onic-ui/react'
|
|
456
480
|
|
|
457
|
-
|
|
458
|
-
|
|
481
|
+
<ButtonGroup variant="outline" size="default" attached>
|
|
482
|
+
<Button>Left</Button>
|
|
483
|
+
<Button>Center</Button>
|
|
484
|
+
<Button>Right</Button>
|
|
485
|
+
</ButtonGroup>
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
| Prop | Type | Default | Description |
|
|
489
|
+
|---|---|---|---|
|
|
490
|
+
| variant | `'outline' \| 'ghost'` | — | Applied to all children |
|
|
491
|
+
| size | Button sizes | — | Applied to all children |
|
|
492
|
+
| radius | Button radius values | — | Applied to all children |
|
|
493
|
+
| fontWeight | `'normal' \| 'semibold'` | — | Applied to all children |
|
|
494
|
+
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
|
|
495
|
+
| attached | `boolean` | `false` | Overlapping borders |
|
|
496
|
+
| disabled | `boolean` | `false` | Disable all children |
|
|
497
|
+
|
|
498
|
+
Provides context — child Buttons inherit variant/size/radius automatically.
|
|
499
|
+
|
|
500
|
+
---
|
|
501
|
+
|
|
502
|
+
### Input
|
|
503
|
+
|
|
504
|
+
```tsx
|
|
505
|
+
import { Input } from '@7onic-ui/react'
|
|
506
|
+
|
|
507
|
+
<Input placeholder="Email" size="default" />
|
|
508
|
+
<Input variant="filled" leftIcon={<SearchIcon />} />
|
|
509
|
+
<Input error rightIcon={<AlertIcon />} />
|
|
510
|
+
```
|
|
511
|
+
|
|
512
|
+
| Prop | Type | Default | Description |
|
|
513
|
+
|---|---|---|---|
|
|
514
|
+
| variant | `'default' \| 'filled'` | `'default'` | Border or filled background |
|
|
515
|
+
| size | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` | Height: 36/40/44/48/56px |
|
|
516
|
+
| radius | `'none' \| 'sm' \| 'base' \| 'default' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'default'` | Border radius |
|
|
517
|
+
| error | `boolean` | `false` | Error border state |
|
|
518
|
+
| focusRing | `boolean` | `false` | Explicit focus ring (vs keyboard-only) |
|
|
519
|
+
| leftIcon | `ReactNode` | — | Left icon |
|
|
520
|
+
| rightIcon | `ReactNode` | — | Right icon |
|
|
521
|
+
|
|
522
|
+
**Works with Field wrapper** for label, error, char count. See Field section.
|
|
523
|
+
|
|
524
|
+
---
|
|
525
|
+
|
|
526
|
+
### Textarea
|
|
527
|
+
|
|
528
|
+
```tsx
|
|
529
|
+
import { Textarea } from '@7onic-ui/react'
|
|
530
|
+
|
|
531
|
+
<Textarea placeholder="Message" rows={4} resize="vertical" />
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
| Prop | Type | Default | Description |
|
|
535
|
+
|---|---|---|---|
|
|
536
|
+
| variant | `'default' \| 'filled'` | `'default'` | Border or filled |
|
|
537
|
+
| size | `'compact' \| 'default'` | `'default'` | Padding density |
|
|
538
|
+
| radius | Same as Input | `'default'` | Border radius |
|
|
539
|
+
| resize | `'none' \| 'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Resize handle |
|
|
540
|
+
| error | `boolean` | `false` | Error state |
|
|
541
|
+
| focusRing | `boolean` | `false` | Explicit focus ring |
|
|
542
|
+
|
|
543
|
+
---
|
|
544
|
+
|
|
545
|
+
### Select
|
|
546
|
+
|
|
547
|
+
```tsx
|
|
548
|
+
import { Select } from '@7onic-ui/react'
|
|
549
|
+
|
|
550
|
+
<Select>
|
|
551
|
+
<Select.Trigger>
|
|
552
|
+
<Select.Value placeholder="Choose option" />
|
|
553
|
+
</Select.Trigger>
|
|
554
|
+
<Select.Content>
|
|
555
|
+
<Select.Item value="a">Option A</Select.Item>
|
|
556
|
+
<Select.Item value="b">Option B</Select.Item>
|
|
557
|
+
<Select.Group>
|
|
558
|
+
<Select.Label>Group</Select.Label>
|
|
559
|
+
<Select.Item value="c">Option C</Select.Item>
|
|
560
|
+
</Select.Group>
|
|
561
|
+
</Select.Content>
|
|
562
|
+
</Select>
|
|
563
|
+
```
|
|
564
|
+
|
|
565
|
+
| Prop (Root) | Type | Default | Description |
|
|
566
|
+
|---|---|---|---|
|
|
567
|
+
| size | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` | Trigger height |
|
|
568
|
+
| radius | Same as Input | `'default'` | Border radius |
|
|
569
|
+
| value | `string` | — | Controlled value |
|
|
570
|
+
| defaultValue | `string` | — | Uncontrolled default |
|
|
571
|
+
| onValueChange | `(value: string) => void` | — | Change handler |
|
|
572
|
+
|
|
573
|
+
**Sub-components:** Select.Trigger, Select.Value, Select.Content, Select.Item, Select.Group, Select.Label, Select.Separator
|
|
574
|
+
|
|
575
|
+
---
|
|
576
|
+
|
|
577
|
+
### DropdownMenu
|
|
578
|
+
|
|
579
|
+
```tsx
|
|
580
|
+
import { DropdownMenu } from '@7onic-ui/react'
|
|
581
|
+
|
|
582
|
+
<DropdownMenu>
|
|
583
|
+
<DropdownMenu.Trigger asChild>
|
|
584
|
+
<Button variant="outline">Options</Button>
|
|
585
|
+
</DropdownMenu.Trigger>
|
|
586
|
+
<DropdownMenu.Content>
|
|
587
|
+
<DropdownMenu.Item>Edit</DropdownMenu.Item>
|
|
588
|
+
<DropdownMenu.Item>Duplicate</DropdownMenu.Item>
|
|
589
|
+
<DropdownMenu.Separator />
|
|
590
|
+
<DropdownMenu.Item className="text-error">Delete</DropdownMenu.Item>
|
|
591
|
+
</DropdownMenu.Content>
|
|
592
|
+
</DropdownMenu>
|
|
593
|
+
```
|
|
594
|
+
|
|
595
|
+
| Prop (Content) | Type | Default | Description |
|
|
596
|
+
|---|---|---|---|
|
|
597
|
+
| radius | `'md' \| 'lg' \| 'xl'` | `'lg'` | Border radius |
|
|
598
|
+
| size | `'sm' \| 'md' \| 'lg'` | `'md'` | Item density |
|
|
599
|
+
| flush | `boolean` | `false` | Full-width items (no padding) |
|
|
600
|
+
| sideOffset | `number` | `4` | Gap from trigger |
|
|
601
|
+
|
|
602
|
+
**Sub-components:** DropdownMenu.Trigger, DropdownMenu.Content, DropdownMenu.Item, DropdownMenu.CheckboxItem, DropdownMenu.RadioItem, DropdownMenu.Label, DropdownMenu.Separator, DropdownMenu.Group, DropdownMenu.Sub, DropdownMenu.SubTrigger, DropdownMenu.SubContent, DropdownMenu.Shortcut
|
|
603
|
+
|
|
604
|
+
---
|
|
605
|
+
|
|
606
|
+
### Checkbox
|
|
607
|
+
|
|
608
|
+
```tsx
|
|
609
|
+
import { Checkbox } from '@7onic-ui/react'
|
|
610
|
+
|
|
611
|
+
<Checkbox label="Accept terms" />
|
|
612
|
+
<Checkbox size="lg" color="primary" checked />
|
|
613
|
+
<Checkbox checked="indeterminate" />
|
|
614
|
+
```
|
|
615
|
+
|
|
616
|
+
| Prop | Type | Default | Description |
|
|
617
|
+
|---|---|---|---|
|
|
618
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Checkbox size |
|
|
619
|
+
| radius | `'none' \| 'sm' \| 'md'` | `'sm'` | Border radius |
|
|
620
|
+
| weight | `'thin' \| 'bold'` | `'bold'` | Checkmark thickness |
|
|
621
|
+
| color | `'default' \| 'primary'` | `'default'` | Checked color |
|
|
622
|
+
| label | `string` | — | Label text |
|
|
623
|
+
| checked | `boolean \| 'indeterminate'` | — | Controlled state |
|
|
624
|
+
| defaultChecked | `boolean` | — | Uncontrolled default |
|
|
625
|
+
| onCheckedChange | `(checked: boolean \| 'indeterminate') => void` | — | Change handler |
|
|
626
|
+
| disabled | `boolean` | `false` | Disabled state |
|
|
627
|
+
|
|
628
|
+
---
|
|
629
|
+
|
|
630
|
+
### RadioGroup
|
|
631
|
+
|
|
632
|
+
```tsx
|
|
633
|
+
import { RadioGroup } from '@7onic-ui/react'
|
|
634
|
+
|
|
635
|
+
<RadioGroup defaultValue="a">
|
|
636
|
+
<RadioGroup.Item value="a" label="Option A" />
|
|
637
|
+
<RadioGroup.Item value="b" label="Option B" />
|
|
638
|
+
<RadioGroup.Item value="c" label="Option C" disabled />
|
|
639
|
+
</RadioGroup>
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
| Prop (Root) | Type | Default | Description |
|
|
643
|
+
|---|---|---|---|
|
|
644
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Radio size |
|
|
645
|
+
| weight | `'thin' \| 'bold'` | `'bold'` | Indicator thickness |
|
|
646
|
+
| color | `'default' \| 'primary'` | `'default'` | Selected color |
|
|
647
|
+
| orientation | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction |
|
|
648
|
+
| value | `string` | — | Controlled value |
|
|
649
|
+
| defaultValue | `string` | — | Uncontrolled default |
|
|
650
|
+
| onValueChange | `(value: string) => void` | — | Change handler |
|
|
651
|
+
|
|
652
|
+
**Sub-components:** RadioGroup.Item (with `label` prop)
|
|
653
|
+
|
|
654
|
+
---
|
|
655
|
+
|
|
656
|
+
### Switch
|
|
657
|
+
|
|
658
|
+
```tsx
|
|
659
|
+
import { Switch } from '@7onic-ui/react'
|
|
660
|
+
|
|
661
|
+
<Switch label="Notifications" />
|
|
662
|
+
<Switch size="lg" color="primary" defaultChecked />
|
|
663
|
+
<Switch startLabel="Off" endLabel="On" />
|
|
664
|
+
```
|
|
665
|
+
|
|
666
|
+
| Prop | Type | Default | Description |
|
|
667
|
+
|---|---|---|---|
|
|
668
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Track size |
|
|
669
|
+
| color | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error'` | `'default'` | Active track color |
|
|
670
|
+
| label | `string` | — | Label text |
|
|
671
|
+
| labelPosition | `'start' \| 'end' \| 'top' \| 'bottom'` | `'end'` | Label placement |
|
|
672
|
+
| startLabel | `string` | — | Left label (off state) |
|
|
673
|
+
| endLabel | `string` | — | Right label (on state) |
|
|
674
|
+
| checkedIcon | `ReactNode` | — | Icon when checked |
|
|
675
|
+
| uncheckedIcon | `ReactNode` | — | Icon when unchecked |
|
|
676
|
+
| checked | `boolean` | — | Controlled state |
|
|
677
|
+
| defaultChecked | `boolean` | — | Uncontrolled default |
|
|
678
|
+
| onCheckedChange | `(checked: boolean) => void` | — | Change handler |
|
|
679
|
+
| disabled | `boolean` | `false` | Disabled state |
|
|
680
|
+
|
|
681
|
+
---
|
|
682
|
+
|
|
683
|
+
### Toggle
|
|
684
|
+
|
|
685
|
+
```tsx
|
|
686
|
+
import { Toggle } from '@7onic-ui/react'
|
|
687
|
+
|
|
688
|
+
<Toggle variant="default" aria-label="Bold">
|
|
689
|
+
<BoldIcon />
|
|
690
|
+
</Toggle>
|
|
691
|
+
<Toggle variant="outline" pressed>Active</Toggle>
|
|
692
|
+
```
|
|
693
|
+
|
|
694
|
+
| Prop | Type | Default | Description |
|
|
695
|
+
|---|---|---|---|
|
|
696
|
+
| variant | `'default' \| 'outline' \| 'ghost' \| 'outline-ghost'` | `'default'` | Visual style |
|
|
697
|
+
| size | `'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | 28/32/36/40/48px |
|
|
698
|
+
| radius | Same as Button | `'default'` | Border radius |
|
|
699
|
+
| fontWeight | `'normal' \| 'semibold'` | per variant | Font weight |
|
|
700
|
+
| iconOnly | `boolean` | `false` | Square mode (no text padding) |
|
|
701
|
+
| pressEffect | `boolean` | `true` | Scale-down on press |
|
|
702
|
+
| pressed | `boolean` | — | Controlled state |
|
|
703
|
+
| defaultPressed | `boolean` | — | Uncontrolled default |
|
|
704
|
+
| onPressedChange | `(pressed: boolean) => void` | — | Change handler |
|
|
705
|
+
|
|
706
|
+
---
|
|
707
|
+
|
|
708
|
+
### ToggleGroup
|
|
709
|
+
|
|
710
|
+
```tsx
|
|
711
|
+
import { ToggleGroup } from '@7onic-ui/react'
|
|
712
|
+
|
|
713
|
+
<ToggleGroup type="single" defaultValue="center">
|
|
714
|
+
<ToggleGroup.Item value="left"><AlignLeftIcon /></ToggleGroup.Item>
|
|
715
|
+
<ToggleGroup.Item value="center"><AlignCenterIcon /></ToggleGroup.Item>
|
|
716
|
+
<ToggleGroup.Item value="right"><AlignRightIcon /></ToggleGroup.Item>
|
|
717
|
+
</ToggleGroup>
|
|
718
|
+
```
|
|
719
|
+
|
|
720
|
+
| Prop (Root) | Type | Default | Description |
|
|
721
|
+
|---|---|---|---|
|
|
722
|
+
| type | `'single' \| 'multiple'` | required | Selection mode |
|
|
723
|
+
| variant | `'default' \| 'outline'` | `'default'` | Visual style |
|
|
724
|
+
| size | `'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Item size |
|
|
725
|
+
| radius | Same as Button | `'default'` | Border radius |
|
|
726
|
+
| fontWeight | `'normal' \| 'semibold'` | per variant | Font weight |
|
|
727
|
+
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
|
|
728
|
+
| value | `string \| string[]` | — | Controlled value |
|
|
729
|
+
| defaultValue | `string \| string[]` | — | Uncontrolled default |
|
|
730
|
+
| onValueChange | `(value) => void` | — | Change handler |
|
|
731
|
+
|
|
732
|
+
**Sub-components:** ToggleGroup.Item
|
|
733
|
+
|
|
734
|
+
---
|
|
735
|
+
|
|
736
|
+
### Segmented
|
|
737
|
+
|
|
738
|
+
```tsx
|
|
739
|
+
import { Segmented } from '@7onic-ui/react'
|
|
740
|
+
|
|
741
|
+
<Segmented defaultValue="all">
|
|
742
|
+
<Segmented.Item value="all">All</Segmented.Item>
|
|
743
|
+
<Segmented.Item value="active">Active</Segmented.Item>
|
|
744
|
+
<Segmented.Item value="inactive">Inactive</Segmented.Item>
|
|
745
|
+
</Segmented>
|
|
746
|
+
```
|
|
747
|
+
|
|
748
|
+
| Prop (Root) | Type | Default | Description |
|
|
749
|
+
|---|---|---|---|
|
|
750
|
+
| variant | `'default' \| 'outline' \| 'underline' \| 'ghost'` | `'default'` | Visual style |
|
|
751
|
+
| size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | 32/36/40/48px (no xs) |
|
|
752
|
+
| radius | Same as Button (excl. none) | `'default'` | Border radius |
|
|
753
|
+
| fontWeight | `'normal' \| 'semibold'` | per variant | Font weight |
|
|
754
|
+
| value | `string` | — | Controlled value |
|
|
755
|
+
| defaultValue | `string` | — | Uncontrolled default |
|
|
756
|
+
| onValueChange | `(value: string) => void` | — | Change handler |
|
|
757
|
+
|
|
758
|
+
**Sub-components:** Segmented.Item
|
|
759
|
+
**Note:** Only 4 sizes (no xs) — intentional design decision.
|
|
760
|
+
|
|
761
|
+
---
|
|
762
|
+
|
|
763
|
+
### Slider
|
|
764
|
+
|
|
765
|
+
```tsx
|
|
766
|
+
import { Slider } from '@7onic-ui/react'
|
|
767
|
+
|
|
768
|
+
<Slider defaultValue={[50]} showTooltip="auto" />
|
|
769
|
+
<Slider defaultValue={[20, 80]} color="primary" />
|
|
770
|
+
```
|
|
771
|
+
|
|
772
|
+
| Prop | Type | Default | Description |
|
|
773
|
+
|---|---|---|---|
|
|
774
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Track/thumb size |
|
|
775
|
+
| color | `'default' \| 'primary'` | `'default'` | Active track color |
|
|
776
|
+
| showTooltip | `'auto' \| 'always' \| 'never'` | `'auto'` | Tooltip display |
|
|
777
|
+
| formatLabel | `(value: number) => string` | — | Tooltip value formatter |
|
|
778
|
+
| startContent | `ReactNode` | — | Left content (label/icon) |
|
|
779
|
+
| endContent | `ReactNode` | — | Right content (label/icon) |
|
|
780
|
+
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction |
|
|
781
|
+
| value | `number[]` | — | Controlled value(s) |
|
|
782
|
+
| defaultValue | `number[]` | — | Uncontrolled default |
|
|
783
|
+
| onValueChange | `(value: number[]) => void` | — | Change handler |
|
|
784
|
+
| min | `number` | `0` | Minimum value |
|
|
785
|
+
| max | `number` | `100` | Maximum value |
|
|
786
|
+
| step | `number` | `1` | Step increment |
|
|
787
|
+
|
|
788
|
+
---
|
|
789
|
+
|
|
790
|
+
### Field (Form Wrapper)
|
|
791
|
+
|
|
792
|
+
```tsx
|
|
793
|
+
import { Field, Input, Textarea } from '@7onic-ui/react'
|
|
794
|
+
|
|
795
|
+
<Field error="Invalid email">
|
|
796
|
+
<Field.Label required>Email</Field.Label>
|
|
797
|
+
<Input placeholder="you@example.com" />
|
|
798
|
+
<Field.Error />
|
|
799
|
+
</Field>
|
|
800
|
+
|
|
801
|
+
<Field>
|
|
802
|
+
<Field.Label>Bio</Field.Label>
|
|
803
|
+
<Textarea placeholder="Tell us about yourself" maxLength={200} />
|
|
804
|
+
<Field.CharCount />
|
|
805
|
+
</Field>
|
|
806
|
+
```
|
|
807
|
+
|
|
808
|
+
| Prop (Root) | Type | Default | Description |
|
|
809
|
+
|---|---|---|---|
|
|
810
|
+
| gap | `'none' \| 'xs' \| 'sm' \| 'default' \| 'lg'` | `'default'` | Gap between elements |
|
|
811
|
+
| error | `string \| boolean` | — | Error message (passed to children via context) |
|
|
812
|
+
| disabled | `boolean` | `false` | Disabled state (passed to children via context) |
|
|
813
|
+
|
|
814
|
+
**Sub-components:** Field.Label (with `required` prop), Field.Error, Field.CharCount
|
|
815
|
+
**Context:** Input, Textarea, Checkbox, RadioGroup, Select auto-detect Field context for error/disabled/id.
|
|
816
|
+
|
|
817
|
+
---
|
|
818
|
+
|
|
819
|
+
## Data Display
|
|
820
|
+
|
|
821
|
+
### Avatar
|
|
822
|
+
|
|
823
|
+
```tsx
|
|
824
|
+
import { Avatar } from '@7onic-ui/react'
|
|
825
|
+
|
|
826
|
+
<Avatar size="default">
|
|
827
|
+
<Avatar.Image src="/photo.jpg" alt="User" />
|
|
828
|
+
<Avatar.Fallback name="John Doe" colorized />
|
|
829
|
+
</Avatar>
|
|
830
|
+
|
|
831
|
+
<Avatar.Group max={3}>
|
|
832
|
+
<Avatar><Avatar.Image src="/a.jpg" /><Avatar.Fallback>A</Avatar.Fallback></Avatar>
|
|
833
|
+
<Avatar><Avatar.Image src="/b.jpg" /><Avatar.Fallback>B</Avatar.Fallback></Avatar>
|
|
834
|
+
<Avatar><Avatar.Image src="/c.jpg" /><Avatar.Fallback>C</Avatar.Fallback></Avatar>
|
|
835
|
+
<Avatar><Avatar.Fallback>+2</Avatar.Fallback></Avatar>
|
|
836
|
+
</Avatar.Group>
|
|
837
|
+
```
|
|
838
|
+
|
|
839
|
+
| Prop (Root) | Type | Default | Description |
|
|
840
|
+
|---|---|---|---|
|
|
841
|
+
| size | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| '2xl'` | `'default'` | Avatar size |
|
|
842
|
+
| shape | `'circle' \| 'square'` | `'circle'` | Avatar shape |
|
|
843
|
+
| status | `'online' \| 'offline' \| 'busy' \| 'away'` | — | Status indicator dot |
|
|
844
|
+
|
|
845
|
+
| Prop (Fallback) | Type | Default | Description |
|
|
846
|
+
|---|---|---|---|
|
|
847
|
+
| name | `string` | — | Auto-generates initials |
|
|
848
|
+
| colorized | `boolean` | `false` | Deterministic color from name hash |
|
|
849
|
+
| colorVariant | `'vivid' \| 'soft'` | `'vivid'` | Color intensity |
|
|
850
|
+
|
|
851
|
+
| Prop (Group) | Type | Default | Description |
|
|
852
|
+
|---|---|---|---|
|
|
853
|
+
| max | `number` | — | Max visible avatars |
|
|
854
|
+
| size | Same as Root | — | Override all children |
|
|
855
|
+
| shape | Same as Root | — | Override all children |
|
|
856
|
+
|
|
857
|
+
**Sub-components:** Avatar.Image, Avatar.Fallback, Avatar.Group
|
|
858
|
+
|
|
859
|
+
---
|
|
860
|
+
|
|
861
|
+
### Badge
|
|
862
|
+
|
|
863
|
+
```tsx
|
|
864
|
+
import { Badge } from '@7onic-ui/react'
|
|
865
|
+
|
|
866
|
+
<Badge variant="solid" color="primary">New</Badge>
|
|
867
|
+
<Badge variant="subtle" color="success" dot>Active</Badge>
|
|
868
|
+
<Badge variant="outline" removable onRemove={() => {}}>Tag</Badge>
|
|
869
|
+
```
|
|
870
|
+
|
|
871
|
+
| Prop | Type | Default | Description |
|
|
872
|
+
|---|---|---|---|
|
|
873
|
+
| variant | `'solid' \| 'subtle' \| 'outline'` | `'subtle'` | Visual style |
|
|
874
|
+
| color | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'default'` | Color scheme |
|
|
875
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Badge size |
|
|
876
|
+
| radius | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'full'` | Border radius |
|
|
877
|
+
| icon | `ReactNode` | — | Leading icon |
|
|
878
|
+
| dot | `boolean` | `false` | Status dot indicator |
|
|
879
|
+
| removable | `boolean` | `false` | Shows remove button |
|
|
880
|
+
| onRemove | `() => void` | — | Remove handler |
|
|
881
|
+
| asChild | `boolean` | `false` | Slot pattern |
|
|
882
|
+
|
|
883
|
+
---
|
|
884
|
+
|
|
885
|
+
### Card
|
|
886
|
+
|
|
887
|
+
```tsx
|
|
888
|
+
import { Card } from '@7onic-ui/react'
|
|
889
|
+
|
|
890
|
+
<Card variant="default" interactive>
|
|
891
|
+
<Card.Image src="/cover.jpg" overlay overlayOpacity={40} />
|
|
892
|
+
<Card.Header>
|
|
893
|
+
<Card.Title icon={<StarIcon />}>Featured</Card.Title>
|
|
894
|
+
<Card.Description>Card description</Card.Description>
|
|
895
|
+
<Card.Action><IconButton variant="ghost"><MoreIcon /></IconButton></Card.Action>
|
|
896
|
+
</Card.Header>
|
|
897
|
+
<Card.Content>Main content</Card.Content>
|
|
898
|
+
<Card.Footer>Footer actions</Card.Footer>
|
|
899
|
+
</Card>
|
|
900
|
+
```
|
|
901
|
+
|
|
902
|
+
| Prop (Root) | Type | Default | Description |
|
|
903
|
+
|---|---|---|---|
|
|
904
|
+
| variant | `'default' \| 'outline' \| 'ghost'` | `'default'` | Visual style |
|
|
905
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
|
|
906
|
+
| radius | `'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'xl'` | Border radius |
|
|
907
|
+
| direction | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction |
|
|
908
|
+
| interactive | `boolean` | `false` | Hover shadow + lift |
|
|
909
|
+
| asChild | `boolean` | `false` | Slot pattern |
|
|
910
|
+
|
|
911
|
+
| Prop (Image) | Type | Default | Description |
|
|
912
|
+
|---|---|---|---|
|
|
913
|
+
| overlay | `boolean` | `false` | Gradient overlay |
|
|
914
|
+
| overlayOpacity | `10-90` | `60` | Overlay darkness |
|
|
915
|
+
|
|
916
|
+
**Sub-components:** Card.Image, Card.Header, Card.Title (with `icon`), Card.Description, Card.Action, Card.Content, Card.Footer
|
|
917
|
+
|
|
918
|
+
---
|
|
919
|
+
|
|
920
|
+
### Table
|
|
921
|
+
|
|
922
|
+
```tsx
|
|
923
|
+
import { Table } from '@7onic-ui/react'
|
|
924
|
+
|
|
925
|
+
<Table variant="default" stickyHeader>
|
|
926
|
+
<Table.Header>
|
|
927
|
+
<Table.Row>
|
|
928
|
+
<Table.Head sortable sortDirection="asc" onSort={() => {}}>Name</Table.Head>
|
|
929
|
+
<Table.Head align="right">Amount</Table.Head>
|
|
930
|
+
</Table.Row>
|
|
931
|
+
</Table.Header>
|
|
932
|
+
<Table.Body>
|
|
933
|
+
<Table.Row interactive>
|
|
934
|
+
<Table.Cell>John</Table.Cell>
|
|
935
|
+
<Table.Cell align="right">$100</Table.Cell>
|
|
936
|
+
</Table.Row>
|
|
937
|
+
</Table.Body>
|
|
938
|
+
</Table>
|
|
939
|
+
```
|
|
940
|
+
|
|
941
|
+
| Prop (Root) | Type | Default | Description |
|
|
942
|
+
|---|---|---|---|
|
|
943
|
+
| variant | `'default' \| 'bordered' \| 'striped'` | `'default'` | Visual style |
|
|
944
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Cell padding |
|
|
945
|
+
| stickyHeader | `boolean` | `false` | Sticky header row |
|
|
946
|
+
|
|
947
|
+
| Prop (Head) | Type | Default | Description |
|
|
948
|
+
|---|---|---|---|
|
|
949
|
+
| align | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
|
|
950
|
+
| sortable | `boolean` | `false` | Shows sort indicator |
|
|
951
|
+
| sortDirection | `'asc' \| 'desc' \| null` | — | Current sort state |
|
|
952
|
+
| onSort | `() => void` | — | Sort handler |
|
|
953
|
+
|
|
954
|
+
| Prop (Row) | Type | Default | Description |
|
|
955
|
+
|---|---|---|---|
|
|
956
|
+
| interactive | `boolean` | `false` | Hover highlight |
|
|
957
|
+
| selected | `boolean` | `false` | Selected state |
|
|
958
|
+
|
|
959
|
+
**Sub-components:** Table.Header, Table.Body, Table.Footer, Table.Row, Table.Head, Table.Cell, Table.Caption
|
|
960
|
+
|
|
961
|
+
---
|
|
962
|
+
|
|
963
|
+
## Layout
|
|
964
|
+
|
|
965
|
+
### Tabs
|
|
966
|
+
|
|
967
|
+
```tsx
|
|
968
|
+
import { Tabs } from '@7onic-ui/react'
|
|
969
|
+
|
|
970
|
+
<Tabs defaultValue="tab1">
|
|
971
|
+
<Tabs.List variant="line" size="default">
|
|
972
|
+
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
|
973
|
+
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
|
|
974
|
+
</Tabs.List>
|
|
975
|
+
<Tabs.Content value="tab1">Content 1</Tabs.Content>
|
|
976
|
+
<Tabs.Content value="tab2">Content 2</Tabs.Content>
|
|
977
|
+
</Tabs>
|
|
978
|
+
```
|
|
979
|
+
|
|
980
|
+
| Prop (List) | Type | Default | Description |
|
|
981
|
+
|---|---|---|---|
|
|
982
|
+
| variant | `'line' \| 'enclosed' \| 'pill'` | `'line'` | Tab style |
|
|
983
|
+
| size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Tab size |
|
|
984
|
+
| fitted | `boolean` | `false` | Full width tabs |
|
|
985
|
+
| color | `'default' \| 'primary'` | `'default'` | Active tab color |
|
|
986
|
+
| radius | `'none' \| 'sm' \| 'md' \| 'default' \| 'lg' \| 'full'` | `'default'` | Border radius (enclosed/pill) |
|
|
987
|
+
|
|
988
|
+
**Sub-components:** Tabs.List, Tabs.Trigger, Tabs.Content
|
|
989
|
+
|
|
990
|
+
---
|
|
991
|
+
|
|
992
|
+
### Accordion
|
|
993
|
+
|
|
994
|
+
```tsx
|
|
995
|
+
import { Accordion } from '@7onic-ui/react'
|
|
996
|
+
|
|
997
|
+
<Accordion type="single" collapsible defaultValue="item-1">
|
|
998
|
+
<Accordion.Item value="item-1">
|
|
999
|
+
<Accordion.Trigger>Section 1</Accordion.Trigger>
|
|
1000
|
+
<Accordion.Content>Content 1</Accordion.Content>
|
|
1001
|
+
</Accordion.Item>
|
|
1002
|
+
<Accordion.Item value="item-2">
|
|
1003
|
+
<Accordion.Trigger>Section 2</Accordion.Trigger>
|
|
1004
|
+
<Accordion.Content>Content 2</Accordion.Content>
|
|
1005
|
+
</Accordion.Item>
|
|
1006
|
+
</Accordion>
|
|
1007
|
+
```
|
|
1008
|
+
|
|
1009
|
+
| Prop (Root) | Type | Default | Description |
|
|
1010
|
+
|---|---|---|---|
|
|
1011
|
+
| type | `'single' \| 'multiple'` | required | Expansion mode |
|
|
1012
|
+
| variant | `'default' \| 'bordered' \| 'splitted'` | `'default'` | Visual style |
|
|
1013
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
|
|
1014
|
+
| iconPosition | `'left' \| 'right'` | `'right'` | Chevron placement |
|
|
1015
|
+
| collapsible | `boolean` | `false` | Allow all closed (single only) |
|
|
1016
|
+
|
|
1017
|
+
**Sub-components:** Accordion.Item, Accordion.Trigger (with `icon` prop), Accordion.Content
|
|
1018
|
+
|
|
1019
|
+
---
|
|
1020
|
+
|
|
1021
|
+
### Divider
|
|
1022
|
+
|
|
1023
|
+
```tsx
|
|
1024
|
+
import { Divider } from '@7onic-ui/react'
|
|
1025
|
+
|
|
1026
|
+
<Divider />
|
|
1027
|
+
<Divider variant="dashed" color="muted" />
|
|
1028
|
+
<Divider label="OR" labelPosition="center" />
|
|
1029
|
+
<Divider orientation="vertical" />
|
|
1030
|
+
```
|
|
1031
|
+
|
|
1032
|
+
| Prop | Type | Default | Description |
|
|
1033
|
+
|---|---|---|---|
|
|
1034
|
+
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction |
|
|
1035
|
+
| variant | `'solid' \| 'dashed' \| 'dotted'` | `'solid'` | Line style |
|
|
1036
|
+
| color | `'default' \| 'muted' \| 'strong'` | `'default'` | Line color |
|
|
1037
|
+
| spacing | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Margin around line |
|
|
1038
|
+
| label | `string` | — | Center label text |
|
|
1039
|
+
| labelPosition | `'left' \| 'center' \| 'right'` | `'center'` | Label placement |
|
|
1040
|
+
|
|
1041
|
+
---
|
|
1042
|
+
|
|
1043
|
+
## Overlay
|
|
1044
|
+
|
|
1045
|
+
### Modal
|
|
1046
|
+
|
|
1047
|
+
```tsx
|
|
1048
|
+
import { Modal, Button } from '@7onic-ui/react'
|
|
1049
|
+
|
|
1050
|
+
<Modal>
|
|
1051
|
+
<Modal.Trigger asChild>
|
|
1052
|
+
<Button>Open Modal</Button>
|
|
1053
|
+
</Modal.Trigger>
|
|
1054
|
+
<Modal.Portal>
|
|
1055
|
+
<Modal.Overlay />
|
|
1056
|
+
<Modal.Content size="md">
|
|
1057
|
+
<Modal.Header>
|
|
1058
|
+
<Modal.Title>Confirm</Modal.Title>
|
|
1059
|
+
<Modal.Description>Are you sure?</Modal.Description>
|
|
1060
|
+
</Modal.Header>
|
|
1061
|
+
<Modal.Body>Modal body content</Modal.Body>
|
|
1062
|
+
<Modal.Footer>
|
|
1063
|
+
<Modal.Close asChild><Button variant="outline">Cancel</Button></Modal.Close>
|
|
1064
|
+
<Button color="primary">Confirm</Button>
|
|
1065
|
+
</Modal.Footer>
|
|
1066
|
+
</Modal.Content>
|
|
1067
|
+
</Modal.Portal>
|
|
1068
|
+
</Modal>
|
|
1069
|
+
```
|
|
1070
|
+
|
|
1071
|
+
| Prop (Content) | Type | Default | Description |
|
|
1072
|
+
|---|---|---|---|
|
|
1073
|
+
| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Modal width |
|
|
1074
|
+
| scrollBehavior | `'inside' \| 'outside'` | `'inside'` | Scroll target |
|
|
1075
|
+
| showCloseButton | `boolean` | `true` | Show X button |
|
|
1076
|
+
|
|
1077
|
+
**Sub-components:** Modal.Trigger, Modal.Portal, Modal.Overlay, Modal.Content, Modal.Header, Modal.Title, Modal.Description, Modal.Body, Modal.Footer, Modal.Close
|
|
1078
|
+
|
|
1079
|
+
**Required structure:** Portal → Overlay + Content. Don't forget Portal and Overlay.
|
|
1080
|
+
|
|
1081
|
+
---
|
|
1082
|
+
|
|
1083
|
+
### Drawer
|
|
1084
|
+
|
|
1085
|
+
```tsx
|
|
1086
|
+
import { Drawer, Button } from '@7onic-ui/react'
|
|
1087
|
+
|
|
1088
|
+
<Drawer>
|
|
1089
|
+
<Drawer.Trigger asChild>
|
|
1090
|
+
<Button>Open Drawer</Button>
|
|
1091
|
+
</Drawer.Trigger>
|
|
1092
|
+
<Drawer.Portal>
|
|
1093
|
+
<Drawer.Overlay />
|
|
1094
|
+
<Drawer.Content side="right" size="md">
|
|
1095
|
+
<Drawer.Header>
|
|
1096
|
+
<Drawer.Title>Settings</Drawer.Title>
|
|
1097
|
+
</Drawer.Header>
|
|
1098
|
+
<Drawer.Body>Content</Drawer.Body>
|
|
1099
|
+
<Drawer.Footer>
|
|
1100
|
+
<Drawer.Close asChild><Button variant="outline">Close</Button></Drawer.Close>
|
|
1101
|
+
</Drawer.Footer>
|
|
1102
|
+
</Drawer.Content>
|
|
1103
|
+
</Drawer.Portal>
|
|
1104
|
+
</Drawer>
|
|
1105
|
+
```
|
|
1106
|
+
|
|
1107
|
+
| Prop (Content) | Type | Default | Description |
|
|
1108
|
+
|---|---|---|---|
|
|
1109
|
+
| side | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Slide direction |
|
|
1110
|
+
| size | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Width/height |
|
|
1111
|
+
| showCloseButton | `boolean` | `true` | Show X button |
|
|
1112
|
+
|
|
1113
|
+
**Sub-components:** Drawer.Trigger, Drawer.Portal, Drawer.Overlay, Drawer.Content, Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer, Drawer.Close
|
|
1114
|
+
|
|
1115
|
+
---
|
|
1116
|
+
|
|
1117
|
+
### Tooltip
|
|
1118
|
+
|
|
1119
|
+
```tsx
|
|
1120
|
+
import { Tooltip } from '@7onic-ui/react'
|
|
1121
|
+
|
|
1122
|
+
<Tooltip.Provider>
|
|
1123
|
+
<Tooltip>
|
|
1124
|
+
<Tooltip.Trigger asChild>
|
|
1125
|
+
<Button>Hover me</Button>
|
|
1126
|
+
</Tooltip.Trigger>
|
|
1127
|
+
<Tooltip.Portal>
|
|
1128
|
+
<Tooltip.Content side="top" showArrow>
|
|
1129
|
+
Tooltip text
|
|
1130
|
+
<Tooltip.Arrow />
|
|
1131
|
+
</Tooltip.Content>
|
|
1132
|
+
</Tooltip.Portal>
|
|
1133
|
+
</Tooltip>
|
|
1134
|
+
</Tooltip.Provider>
|
|
1135
|
+
```
|
|
1136
|
+
|
|
1137
|
+
| Prop (Root) | Type | Default | Description |
|
|
1138
|
+
|---|---|---|---|
|
|
1139
|
+
| delayDuration | `number` | `200` | Hover delay (ms) |
|
|
1140
|
+
|
|
1141
|
+
| Prop (Content) | Type | Default | Description |
|
|
1142
|
+
|---|---|---|---|
|
|
1143
|
+
| variant | `'default' \| 'inverted'` | `'default'` | Dark/light bg |
|
|
1144
|
+
| size | `'sm' \| 'default'` | `'default'` | Padding scale |
|
|
1145
|
+
| side | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | Placement |
|
|
1146
|
+
| showArrow | `boolean` | `false` | Show arrow |
|
|
1147
|
+
| sideOffset | `number` | `4` | Gap from trigger |
|
|
1148
|
+
|
|
1149
|
+
**⚠️ Tooltip.Provider is required** — wrap your app or section with it.
|
|
1150
|
+
**Sub-components:** Tooltip.Provider, Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow, Tooltip.Portal
|
|
1151
|
+
|
|
1152
|
+
---
|
|
1153
|
+
|
|
1154
|
+
### Popover
|
|
1155
|
+
|
|
1156
|
+
```tsx
|
|
1157
|
+
import { Popover, Button } from '@7onic-ui/react'
|
|
1158
|
+
|
|
1159
|
+
<Popover>
|
|
1160
|
+
<Popover.Trigger asChild>
|
|
1161
|
+
<Button variant="outline">Open</Button>
|
|
1162
|
+
</Popover.Trigger>
|
|
1163
|
+
<Popover.Portal>
|
|
1164
|
+
<Popover.Content side="bottom" showArrow showClose>
|
|
1165
|
+
<Popover.Arrow />
|
|
1166
|
+
<p>Popover content</p>
|
|
1167
|
+
</Popover.Content>
|
|
1168
|
+
</Popover.Portal>
|
|
1169
|
+
</Popover>
|
|
1170
|
+
```
|
|
1171
|
+
|
|
1172
|
+
| Prop (Content) | Type | Default | Description |
|
|
1173
|
+
|---|---|---|---|
|
|
1174
|
+
| variant | `'default' \| 'elevated'` | `'default'` | Shadow style |
|
|
1175
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
|
|
1176
|
+
| side | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Placement |
|
|
1177
|
+
| showArrow | `boolean` | `false` | Show arrow |
|
|
1178
|
+
| showClose | `boolean` | `false` | Show X button |
|
|
1179
|
+
|
|
1180
|
+
**Sub-components:** Popover.Trigger, Popover.Content, Popover.Arrow, Popover.Close, Popover.Anchor, Popover.Portal
|
|
1181
|
+
|
|
1182
|
+
---
|
|
1183
|
+
|
|
1184
|
+
## Feedback
|
|
1185
|
+
|
|
1186
|
+
### Alert
|
|
1187
|
+
|
|
1188
|
+
```tsx
|
|
1189
|
+
import { Alert } from '@7onic-ui/react'
|
|
1190
|
+
|
|
1191
|
+
<Alert color="success" closable onClose={() => {}}>
|
|
1192
|
+
<Alert.Title>Success</Alert.Title>
|
|
1193
|
+
<Alert.Description>Operation completed.</Alert.Description>
|
|
1194
|
+
</Alert>
|
|
1195
|
+
|
|
1196
|
+
<Alert variant="filled" color="error" icon={<ErrorIcon />}>
|
|
1197
|
+
<Alert.Title>Error</Alert.Title>
|
|
1198
|
+
</Alert>
|
|
1199
|
+
```
|
|
1200
|
+
|
|
1201
|
+
| Prop (Root) | Type | Default | Description |
|
|
1202
|
+
|---|---|---|---|
|
|
1203
|
+
| variant | `'default' \| 'outline' \| 'filled'` | `'default'` | Visual style |
|
|
1204
|
+
| color | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Color scheme |
|
|
1205
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
|
|
1206
|
+
| radius | Same as Card | `'lg'` | Border radius |
|
|
1207
|
+
| closable | `boolean` | `false` | Show close button |
|
|
1208
|
+
| onClose | `() => void` | — | Close handler |
|
|
1209
|
+
| icon | `ReactNode` | auto | Custom icon (auto-selects by color) |
|
|
1210
|
+
| hideIcon | `boolean` | `false` | Hide icon |
|
|
1211
|
+
|
|
1212
|
+
**Sub-components:** Alert.Title, Alert.Description
|
|
1213
|
+
|
|
1214
|
+
---
|
|
1215
|
+
|
|
1216
|
+
### Toast (Imperative API)
|
|
1217
|
+
|
|
1218
|
+
```tsx
|
|
1219
|
+
import { Toaster, toast } from '@7onic-ui/react'
|
|
1220
|
+
|
|
1221
|
+
// 1. Add Toaster provider to your app layout (once)
|
|
1222
|
+
<Toaster position="bottom-right" />
|
|
1223
|
+
|
|
1224
|
+
// 2. Call toast() anywhere
|
|
1225
|
+
toast('Default notification')
|
|
1226
|
+
toast.success('Saved successfully')
|
|
1227
|
+
toast.error('Something went wrong')
|
|
1228
|
+
toast.warning('Please check your input')
|
|
1229
|
+
toast.info('New update available')
|
|
1230
|
+
toast.loading('Processing...')
|
|
1231
|
+
|
|
1232
|
+
// With options
|
|
1233
|
+
toast.success('Saved', {
|
|
1234
|
+
description: 'Your changes have been saved.',
|
|
1235
|
+
duration: 5000,
|
|
1236
|
+
action: { label: 'Undo', onClick: () => {} },
|
|
1237
|
+
})
|
|
1238
|
+
|
|
1239
|
+
// Promise
|
|
1240
|
+
toast.promise(fetchData(), {
|
|
1241
|
+
loading: 'Loading...',
|
|
1242
|
+
success: 'Data loaded',
|
|
1243
|
+
error: 'Failed to load',
|
|
1244
|
+
})
|
|
1245
|
+
|
|
1246
|
+
// Dismiss
|
|
1247
|
+
const id = toast('Message')
|
|
1248
|
+
toast.dismiss(id) // Dismiss specific
|
|
1249
|
+
toast.dismiss() // Dismiss all
|
|
1250
|
+
```
|
|
1251
|
+
|
|
1252
|
+
| Prop (Toaster) | Type | Default | Description |
|
|
1253
|
+
|---|---|---|---|
|
|
1254
|
+
| position | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | Toast position |
|
|
1255
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Toast size |
|
|
1256
|
+
| duration | `number` | `4000` | Auto-dismiss ms (0 = persistent) |
|
|
1257
|
+
| closeButton | `boolean` | `false` | Show close button |
|
|
1258
|
+
| richColors | `boolean` | `false` | Filled color backgrounds |
|
|
1259
|
+
| expand | `boolean` | `false` | Show all toasts expanded |
|
|
1260
|
+
| visibleToasts | `number` | `3` | Max visible at once |
|
|
1261
|
+
|
|
1262
|
+
**⚠️ No Portal needed.** Just place `<Toaster />` in your root layout. Call `toast()` from anywhere.
|
|
1263
|
+
|
|
1264
|
+
---
|
|
1265
|
+
|
|
1266
|
+
### Progress
|
|
1267
|
+
|
|
1268
|
+
```tsx
|
|
1269
|
+
import { Progress } from '@7onic-ui/react'
|
|
1270
|
+
|
|
1271
|
+
<Progress value={65} showValue />
|
|
1272
|
+
<Progress type="circular" value={75} color="primary" />
|
|
1273
|
+
<Progress variant="striped" animated value={50} />
|
|
1274
|
+
```
|
|
1275
|
+
|
|
1276
|
+
| Prop | Type | Default | Description |
|
|
1277
|
+
|---|---|---|---|
|
|
1278
|
+
| type | `'linear' \| 'circular'` | `'linear'` | Shape |
|
|
1279
|
+
| value | `number` | `0` | Current value |
|
|
1280
|
+
| max | `number` | `100` | Maximum value |
|
|
1281
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Bar/circle size |
|
|
1282
|
+
| variant | `'default' \| 'striped'` | `'default'` | Bar fill style |
|
|
1283
|
+
| color | `'default' \| 'primary'` | `'default'` | Fill color |
|
|
1284
|
+
| showValue | `boolean` | `false` | Show percentage text |
|
|
1285
|
+
| formatLabel | `(value: number, max: number) => string` | — | Custom label |
|
|
1286
|
+
| animated | `boolean` | `false` | Animate stripes |
|
|
1287
|
+
|
|
1288
|
+
---
|
|
1289
|
+
|
|
1290
|
+
### Spinner
|
|
1291
|
+
|
|
1292
|
+
```tsx
|
|
1293
|
+
import { Spinner } from '@7onic-ui/react'
|
|
1294
|
+
|
|
1295
|
+
<Spinner />
|
|
1296
|
+
<Spinner variant="dots" size="lg" color="primary" />
|
|
1297
|
+
<Spinner variant="bars" speed="slow" />
|
|
1298
|
+
<Spinner variant="orbit" orbitStyle="morph" />
|
|
1299
|
+
```
|
|
1300
|
+
|
|
1301
|
+
| Prop | Type | Default | Description |
|
|
1302
|
+
|---|---|---|---|
|
|
1303
|
+
| variant | `'ring' \| 'dots' \| 'bars' \| 'orbit'` | `'ring'` | Animation style |
|
|
1304
|
+
| orbitStyle | `'ring' \| 'dots' \| 'cube' \| 'flip' \| 'morph'` | `'ring'` | Orbit sub-variant |
|
|
1305
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Spinner size |
|
|
1306
|
+
| color | `'default' \| 'primary' \| 'current'` | `'default'` | Color |
|
|
1307
|
+
| speed | `'slow' \| 'default' \| 'fast'` | `'default'` | Animation speed |
|
|
1308
|
+
| label | `string` | `'Loading'` | aria-label text |
|
|
1309
|
+
|
|
1310
|
+
---
|
|
1311
|
+
|
|
1312
|
+
### Skeleton
|
|
1313
|
+
|
|
1314
|
+
```tsx
|
|
1315
|
+
import { Skeleton } from '@7onic-ui/react'
|
|
1316
|
+
|
|
1317
|
+
<Skeleton variant="text" count={3} />
|
|
1318
|
+
<Skeleton variant="circular" width={48} height={48} />
|
|
1319
|
+
<Skeleton variant="rectangular" width="100%" height={200} />
|
|
1320
|
+
|
|
1321
|
+
{/* Conditional rendering */}
|
|
1322
|
+
<Skeleton loading={isLoading}>
|
|
1323
|
+
<ActualContent />
|
|
1324
|
+
</Skeleton>
|
|
1325
|
+
```
|
|
1326
|
+
|
|
1327
|
+
| Prop | Type | Default | Description |
|
|
1328
|
+
|---|---|---|---|
|
|
1329
|
+
| variant | `'text' \| 'circular' \| 'rectangular'` | `'text'` | Shape |
|
|
1330
|
+
| animation | `'pulse' \| 'wave' \| false` | `'pulse'` | Animation style |
|
|
1331
|
+
| width | `number \| string` | — | Width (px or CSS) |
|
|
1332
|
+
| height | `number \| string` | — | Height (px or CSS) |
|
|
1333
|
+
| radius | `number \| string` | — | Border radius |
|
|
1334
|
+
| count | `number` | `1` | Multi-line count |
|
|
1335
|
+
| loading | `boolean` | `true` | Show skeleton vs children |
|
|
1336
|
+
| children | `ReactNode` | — | Content (shown when loading=false) |
|
|
1337
|
+
|
|
1338
|
+
---
|
|
1339
|
+
|
|
1340
|
+
## Navigation
|
|
1341
|
+
|
|
1342
|
+
### Breadcrumb
|
|
1343
|
+
|
|
1344
|
+
```tsx
|
|
1345
|
+
import { Breadcrumb } from '@7onic-ui/react'
|
|
1346
|
+
|
|
1347
|
+
<Breadcrumb>
|
|
1348
|
+
<Breadcrumb.List>
|
|
1349
|
+
<Breadcrumb.Item>
|
|
1350
|
+
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
|
|
1351
|
+
</Breadcrumb.Item>
|
|
1352
|
+
<Breadcrumb.Separator />
|
|
1353
|
+
<Breadcrumb.Item>
|
|
1354
|
+
<Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
|
|
1355
|
+
</Breadcrumb.Item>
|
|
1356
|
+
<Breadcrumb.Separator />
|
|
1357
|
+
<Breadcrumb.Item>
|
|
1358
|
+
<Breadcrumb.Page>Current</Breadcrumb.Page>
|
|
1359
|
+
</Breadcrumb.Item>
|
|
1360
|
+
</Breadcrumb.List>
|
|
1361
|
+
</Breadcrumb>
|
|
1362
|
+
```
|
|
1363
|
+
|
|
1364
|
+
| Prop (Root) | Type | Default | Description |
|
|
1365
|
+
|---|---|---|---|
|
|
1366
|
+
| separator | `ReactNode` | `'/'` | Custom separator |
|
|
1367
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Text size |
|
|
1368
|
+
| maxItems | `number` | — | Collapse threshold |
|
|
1369
|
+
| itemsBeforeCollapse | `number` | `1` | Items before ellipsis |
|
|
1370
|
+
| itemsAfterCollapse | `number` | `1` | Items after ellipsis |
|
|
1371
|
+
|
|
1372
|
+
**Sub-components:** Breadcrumb.List, Breadcrumb.Item, Breadcrumb.Link (with `asChild`), Breadcrumb.Page, Breadcrumb.Separator, Breadcrumb.Ellipsis
|
|
1373
|
+
|
|
1374
|
+
---
|
|
1375
|
+
|
|
1376
|
+
### Pagination
|
|
1377
|
+
|
|
1378
|
+
```tsx
|
|
1379
|
+
import { Pagination } from '@7onic-ui/react'
|
|
1380
|
+
|
|
1381
|
+
{/* Quick mode */}
|
|
1382
|
+
<Pagination total={10} defaultValue={1} />
|
|
1383
|
+
|
|
1384
|
+
{/* Compound mode */}
|
|
1385
|
+
<Pagination total={20} value={page} onChange={setPage}>
|
|
1386
|
+
<Pagination.Content>
|
|
1387
|
+
<Pagination.Previous />
|
|
1388
|
+
<Pagination.Items />
|
|
1389
|
+
<Pagination.Next />
|
|
1390
|
+
</Pagination.Content>
|
|
1391
|
+
</Pagination>
|
|
1392
|
+
```
|
|
1393
|
+
|
|
1394
|
+
| Prop (Root) | Type | Default | Description |
|
|
1395
|
+
|---|---|---|---|
|
|
1396
|
+
| total | `number` | required | Total pages |
|
|
1397
|
+
| value | `number` | — | Controlled page |
|
|
1398
|
+
| defaultValue | `number` | `1` | Uncontrolled default |
|
|
1399
|
+
| onChange | `(page: number) => void` | — | Change handler |
|
|
1400
|
+
| siblings | `number` | `1` | Pages beside current |
|
|
1401
|
+
| boundaries | `number` | `1` | Pages at start/end |
|
|
1402
|
+
| variant | `'default' \| 'outline' \| 'ghost'` | `'default'` | Visual style |
|
|
1403
|
+
| color | `'default' \| 'primary'` | `'default'` | Active page color |
|
|
1404
|
+
| size | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` | Button size |
|
|
1405
|
+
| radius | `'none' \| 'sm' \| 'md' \| 'default' \| 'lg' \| 'full'` | `'default'` | Border radius |
|
|
1406
|
+
| loop | `boolean` | `false` | Wrap around |
|
|
1407
|
+
| disabled | `boolean` | `false` | Disabled state |
|
|
1408
|
+
|
|
1409
|
+
**Sub-components:** Pagination.Content, Pagination.Item, Pagination.Link, Pagination.Previous, Pagination.Next, Pagination.First, Pagination.Last, Pagination.Ellipsis, Pagination.Items
|
|
1410
|
+
|
|
1411
|
+
---
|
|
1412
|
+
|
|
1413
|
+
### NavigationMenu
|
|
1414
|
+
|
|
1415
|
+
```tsx
|
|
1416
|
+
import { NavigationMenu } from '@7onic-ui/react'
|
|
1417
|
+
|
|
1418
|
+
{/* Horizontal (header) */}
|
|
1419
|
+
<NavigationMenu orientation="horizontal">
|
|
1420
|
+
<NavigationMenu.List>
|
|
1421
|
+
<NavigationMenu.Item>
|
|
1422
|
+
<NavigationMenu.Link href="/" active>Home</NavigationMenu.Link>
|
|
1423
|
+
</NavigationMenu.Item>
|
|
1424
|
+
<NavigationMenu.Item>
|
|
1425
|
+
<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
|
|
1426
|
+
<NavigationMenu.Content>
|
|
1427
|
+
<NavigationMenu.Link href="/product-a">Product A</NavigationMenu.Link>
|
|
1428
|
+
<NavigationMenu.Link href="/product-b">Product B</NavigationMenu.Link>
|
|
1429
|
+
</NavigationMenu.Content>
|
|
1430
|
+
</NavigationMenu.Item>
|
|
1431
|
+
</NavigationMenu.List>
|
|
1432
|
+
<NavigationMenu.Viewport />
|
|
1433
|
+
</NavigationMenu>
|
|
1434
|
+
|
|
1435
|
+
{/* Vertical (sidebar) */}
|
|
1436
|
+
<NavigationMenu orientation="vertical" size="default">
|
|
1437
|
+
<NavigationMenu.List>
|
|
1438
|
+
<NavigationMenu.Group label="Main">
|
|
1439
|
+
<NavigationMenu.Item>
|
|
1440
|
+
<NavigationMenu.Link href="/" icon={<HomeIcon />} active>Dashboard</NavigationMenu.Link>
|
|
1441
|
+
</NavigationMenu.Item>
|
|
1442
|
+
</NavigationMenu.Group>
|
|
1443
|
+
</NavigationMenu.List>
|
|
1444
|
+
</NavigationMenu>
|
|
1445
|
+
```
|
|
1446
|
+
|
|
1447
|
+
| Prop (Root) | Type | Default | Description |
|
|
1448
|
+
|---|---|---|---|
|
|
1449
|
+
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout mode |
|
|
1450
|
+
| size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Item size |
|
|
1451
|
+
| collapsed | `boolean` | `false` | Icon-only mode (vertical) |
|
|
1452
|
+
| radius | Same as Button | `'default'` | Border radius |
|
|
1453
|
+
| fontWeight | `'normal' \| 'semibold'` | `'normal'` | Font weight |
|
|
1454
|
+
|
|
1455
|
+
| Prop (Link) | Type | Default | Description |
|
|
1456
|
+
|---|---|---|---|
|
|
1457
|
+
| active | `boolean` | `false` | Current page indicator |
|
|
1458
|
+
| icon | `ReactNode` | — | Leading icon |
|
|
1459
|
+
| asChild | `boolean` | `false` | Slot pattern |
|
|
1460
|
+
|
|
1461
|
+
**Sub-components:** NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, NavigationMenu.Content, NavigationMenu.Link, NavigationMenu.Group (vertical only, with `label`), NavigationMenu.Indicator (horizontal only), NavigationMenu.Viewport
|
|
1462
|
+
|
|
1463
|
+
---
|
|
1464
|
+
|
|
1465
|
+
## Charts
|
|
1466
|
+
|
|
1467
|
+
### Chart (Container + Sub-components)
|
|
1468
|
+
|
|
1469
|
+
All chart types use the Chart namespace:
|
|
1470
|
+
|
|
1471
|
+
```tsx
|
|
1472
|
+
import { Chart } from '@7onic-ui/react/chart'
|
|
1473
|
+
|
|
1474
|
+
const chartConfig = {
|
|
1475
|
+
revenue: { label: 'Revenue', color: 'var(--color-chart-1)' },
|
|
1476
|
+
profit: { label: 'Profit', color: 'var(--color-chart-2)' },
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
{/* Line Chart */}
|
|
1480
|
+
<Chart config={chartConfig} className="h-[300px]">
|
|
1481
|
+
<Chart.XAxis dataKey="month" />
|
|
1482
|
+
<Chart.YAxis />
|
|
1483
|
+
<Chart.Tooltip content={<Chart.TooltipContent />} />
|
|
1484
|
+
<Chart.Legend content={<Chart.LegendContent />} />
|
|
1485
|
+
<Chart.Line dataKey="revenue" type="monotone" />
|
|
1486
|
+
<Chart.Line dataKey="profit" type="monotone" variant="dashed" />
|
|
1487
|
+
</Chart>
|
|
1488
|
+
|
|
1489
|
+
{/* Bar Chart */}
|
|
1490
|
+
<Chart config={chartConfig} className="h-[300px]" hoverFade>
|
|
1491
|
+
<Chart.XAxis dataKey="month" />
|
|
1492
|
+
<Chart.YAxis />
|
|
1493
|
+
<Chart.Tooltip content={<Chart.TooltipContent />} />
|
|
1494
|
+
<Chart.Bar dataKey="revenue" radius="md" />
|
|
1495
|
+
<Chart.Bar dataKey="profit" radius="md" />
|
|
1496
|
+
</Chart>
|
|
1497
|
+
|
|
1498
|
+
{/* Area Chart */}
|
|
1499
|
+
<Chart config={chartConfig} className="h-[300px]">
|
|
1500
|
+
<Chart.XAxis dataKey="month" />
|
|
1501
|
+
<Chart.YAxis />
|
|
1502
|
+
<Chart.Tooltip content={<Chart.TooltipContent />} />
|
|
1503
|
+
<Chart.Area dataKey="revenue" type="monotone" variant="gradient" />
|
|
1504
|
+
</Chart>
|
|
1505
|
+
|
|
1506
|
+
{/* Pie Chart */}
|
|
1507
|
+
<Chart config={chartConfig} className="h-[300px]">
|
|
1508
|
+
<Chart.Tooltip content={<Chart.TooltipContent />} />
|
|
1509
|
+
<Chart.Pie data={data} dataKey="value" nameKey="name" variant="donut" label="outside" />
|
|
1510
|
+
</Chart>
|
|
1511
|
+
```
|
|
1512
|
+
|
|
1513
|
+
**⚠️ chartConfig is REQUIRED.** It maps data keys to labels and colors.
|
|
1514
|
+
|
|
1515
|
+
| Prop (Container) | Type | Default | Description |
|
|
1516
|
+
|---|---|---|---|
|
|
1517
|
+
| config | `ChartConfig` | required | Data key → label/color mapping |
|
|
1518
|
+
| hoverFade | `boolean` | `false` | Fade non-hovered elements |
|
|
1519
|
+
|
|
1520
|
+
| Prop (Bar) | Type | Default | Description |
|
|
1521
|
+
|---|---|---|---|
|
|
1522
|
+
| radius | `'none' \| 'sm' \| 'base' \| 'md' \| 'lg'` | `'none'` | Bar corner radius |
|
|
1523
|
+
| layout | `'vertical' \| 'horizontal'` | `'vertical'` | Bar direction |
|
|
1524
|
+
| variant | `'solid' \| 'outline'` | `'solid'` | Fill style |
|
|
1525
|
+
| stackPosition | `'top' \| 'bottom'` | `'top'` | Stack position |
|
|
1526
|
+
|
|
1527
|
+
| Prop (Line) | Type | Default | Description |
|
|
1528
|
+
|---|---|---|---|
|
|
1529
|
+
| type | `'linear' \| 'monotone' \| 'step' \| 'natural'` | `'monotone'` | Curve type |
|
|
1530
|
+
| variant | `'solid' \| 'dashed'` | `'solid'` | Line style |
|
|
1531
|
+
| dot | `boolean` | `true` | Show data points |
|
|
1532
|
+
| activeDot | `boolean` | `true` | Show active point |
|
|
1533
|
+
|
|
1534
|
+
| Prop (Area) | Type | Default | Description |
|
|
1535
|
+
|---|---|---|---|
|
|
1536
|
+
| type | `'linear' \| 'monotone' \| 'step' \| 'natural'` | `'monotone'` | Curve type |
|
|
1537
|
+
| variant | `'solid' \| 'gradient'` | `'solid'` | Fill style |
|
|
1538
|
+
| fillOpacity | `number` | `0.4` | Fill opacity (0-1) |
|
|
1539
|
+
|
|
1540
|
+
| Prop (Pie) | Type | Default | Description |
|
|
1541
|
+
|---|---|---|---|
|
|
1542
|
+
| variant | `'pie' \| 'donut'` | `'pie'` | Pie or donut |
|
|
1543
|
+
| label | `'none' \| 'outside' \| 'inside'` | `'none'` | Label display |
|
|
1544
|
+
| labelContent | `'value' \| 'percent'` | `'value'` | Label format |
|
|
1545
|
+
| activeShape | `boolean` | `true` | Expand on hover |
|
|
1546
|
+
|
|
1547
|
+
**Chart Colors (CSS variables):**
|
|
1548
|
+
`--color-chart-1` (blue), `--color-chart-2` (pink), `--color-chart-3` (lavender), `--color-chart-4` (sky), `--color-chart-5` (rose)
|
|
1549
|
+
Each has light/dark theme variants.
|
|
1550
|
+
|
|
1551
|
+
**ChartConfig format:**
|
|
1552
|
+
```tsx
|
|
1553
|
+
type ChartConfig = {
|
|
1554
|
+
[dataKey: string]: {
|
|
1555
|
+
label?: ReactNode
|
|
1556
|
+
icon?: ComponentType
|
|
1557
|
+
color?: string // CSS color or variable
|
|
1558
|
+
// OR theme-specific:
|
|
1559
|
+
theme?: { light: string, dark: string }
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
```
|
|
1563
|
+
|
|
1564
|
+
---
|
|
1565
|
+
|
|
1566
|
+
### MetricCard
|
|
1567
|
+
|
|
1568
|
+
```tsx
|
|
1569
|
+
import { MetricCard } from '@7onic-ui/react'
|
|
1570
|
+
|
|
1571
|
+
<MetricCard>
|
|
1572
|
+
<MetricCard.Header>
|
|
1573
|
+
<MetricCard.Title>Revenue</MetricCard.Title>
|
|
1574
|
+
<MetricCard.Symbol><DollarIcon /></MetricCard.Symbol>
|
|
1575
|
+
</MetricCard.Header>
|
|
1576
|
+
<MetricCard.Value animated>$12,450</MetricCard.Value>
|
|
1577
|
+
<MetricCard.Trend direction="up">+12.5%</MetricCard.Trend>
|
|
1578
|
+
<MetricCard.Description>vs. last month</MetricCard.Description>
|
|
1579
|
+
</MetricCard>
|
|
1580
|
+
```
|
|
1581
|
+
|
|
1582
|
+
| Prop (Root) | Type | Default | Description |
|
|
1583
|
+
|---|---|---|---|
|
|
1584
|
+
| variant | `'default' \| 'elevated' \| 'ghost'` | `'default'` | Visual style |
|
|
1585
|
+
| size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
|
|
1586
|
+
| radius | Same as Card + `'none'` | `'xl'` | Border radius |
|
|
1587
|
+
|
|
1588
|
+
| Prop (Value) | Type | Default | Description |
|
|
1589
|
+
|---|---|---|---|
|
|
1590
|
+
| animated | `boolean` | `false` | Number count-up animation |
|
|
1591
|
+
|
|
1592
|
+
| Prop (Trend) | Type | Default | Description |
|
|
1593
|
+
|---|---|---|---|
|
|
1594
|
+
| direction | `'up' \| 'down' \| 'neutral'` | — | Trend arrow + color |
|
|
1595
|
+
|
|
1596
|
+
**Sub-components:** MetricCard.Header, MetricCard.Title, MetricCard.Value, MetricCard.Trend, MetricCard.Description, MetricCard.Symbol
|
|
1597
|
+
|
|
1598
|
+
---
|
|
1599
|
+
|
|
1600
|
+
# ═══ SECTION 4: COMPONENT USAGE GUIDE ═══
|
|
1601
|
+
|
|
1602
|
+
## Component Selection
|
|
1603
|
+
|
|
1604
|
+
Before creating custom UI, check if 7onic already has it:
|
|
1605
|
+
|
|
1606
|
+
| Need | Use This Component |
|
|
1607
|
+
|---|---|
|
|
1608
|
+
| Action trigger | Button, IconButton |
|
|
1609
|
+
| Text input | Input (single line), Textarea (multi line) |
|
|
1610
|
+
| Selection (one) | RadioGroup, Select, Segmented |
|
|
1611
|
+
| Selection (many) | Checkbox, ToggleGroup |
|
|
1612
|
+
| Boolean toggle | Switch, Toggle, Checkbox |
|
|
1613
|
+
| Container | Card |
|
|
1614
|
+
| Data table | Table |
|
|
1615
|
+
| Tabs | Tabs |
|
|
1616
|
+
| Collapsible | Accordion |
|
|
1617
|
+
| Dialog | Modal |
|
|
1618
|
+
| Side panel | Drawer |
|
|
1619
|
+
| Hint text | Tooltip |
|
|
1620
|
+
| Rich hint | Popover |
|
|
1621
|
+
| Notification | Toast (imperative), Alert (inline) |
|
|
1622
|
+
| Loading | Spinner (indeterminate), Progress (determinate), Skeleton (placeholder) |
|
|
1623
|
+
| Navigation | Breadcrumb, Pagination, NavigationMenu |
|
|
1624
|
+
| Data visualization | Chart (Line/Area/Bar/Pie), MetricCard |
|
|
1625
|
+
| Metric display | MetricCard |
|
|
1626
|
+
| Tag / chip | Badge (with `removable`) |
|
|
1627
|
+
| Avatar | Avatar |
|
|
1628
|
+
| Separator | Divider |
|
|
1629
|
+
|
|
1630
|
+
**If the component exists, use it.** Don't build custom versions with HTML + classes.
|
|
1631
|
+
|
|
1632
|
+
---
|
|
1633
|
+
|
|
1634
|
+
## Import Pattern
|
|
1635
|
+
|
|
1636
|
+
```tsx
|
|
1637
|
+
// ✅ Single import path
|
|
1638
|
+
import { Button, Card, Input, toast } from '@7onic-ui/react'
|
|
1639
|
+
|
|
1640
|
+
// ✅ Chart components use a separate entry point (recharts is optional)
|
|
1641
|
+
import { Chart } from '@7onic-ui/react/chart'
|
|
1642
|
+
|
|
1643
|
+
// ❌ Never import from internal paths
|
|
1644
|
+
import { Button } from '@7onic-ui/react/components/button' // WRONG
|
|
1645
|
+
|
|
1646
|
+
// ❌ Never import Radix directly
|
|
1647
|
+
import * as Dialog from '@radix-ui/react-dialog' // WRONG → use Modal
|
|
1648
|
+
```
|
|
1649
|
+
|
|
1650
|
+
---
|
|
1651
|
+
|
|
1652
|
+
## Compound Component Structure
|
|
1653
|
+
|
|
1654
|
+
Compound components have **required sub-components**. Missing them causes errors or broken UI.
|
|
1655
|
+
|
|
1656
|
+
**Modal — required structure:**
|
|
1657
|
+
```tsx
|
|
1658
|
+
<Modal>
|
|
1659
|
+
<Modal.Trigger>...</Modal.Trigger>
|
|
1660
|
+
<Modal.Portal> {/* ← Required for correct z-index */}
|
|
1661
|
+
<Modal.Overlay /> {/* ← Required for backdrop */}
|
|
1662
|
+
<Modal.Content>
|
|
1663
|
+
<Modal.Header>
|
|
1664
|
+
<Modal.Title>...</Modal.Title>
|
|
1665
|
+
</Modal.Header>
|
|
1666
|
+
<Modal.Body>...</Modal.Body>
|
|
1667
|
+
</Modal.Content>
|
|
1668
|
+
</Modal.Portal>
|
|
1669
|
+
</Modal>
|
|
1670
|
+
```
|
|
1671
|
+
|
|
1672
|
+
**Drawer — same pattern as Modal** (Portal + Overlay + Content required)
|
|
1673
|
+
|
|
1674
|
+
**Tooltip — Provider required:**
|
|
1675
|
+
```tsx
|
|
1676
|
+
<Tooltip.Provider> {/* ← Required, wrap app once */}
|
|
1677
|
+
<Tooltip>
|
|
1678
|
+
<Tooltip.Trigger>...</Tooltip.Trigger>
|
|
1679
|
+
<Tooltip.Portal>
|
|
1680
|
+
<Tooltip.Content>...</Tooltip.Content>
|
|
1681
|
+
</Tooltip.Portal>
|
|
1682
|
+
</Tooltip>
|
|
1683
|
+
</Tooltip.Provider>
|
|
1684
|
+
```
|
|
1685
|
+
|
|
1686
|
+
**Toast — imperative API, no compound structure:**
|
|
1687
|
+
```tsx
|
|
1688
|
+
// Place Toaster once in layout
|
|
1689
|
+
<Toaster />
|
|
1690
|
+
// Call toast() anywhere
|
|
1691
|
+
toast.success('Done')
|
|
1692
|
+
```
|
|
1693
|
+
|
|
1694
|
+
---
|
|
1695
|
+
|
|
1696
|
+
## asChild Pattern (Slot)
|
|
1697
|
+
|
|
1698
|
+
`asChild` replaces the component's DOM element with its child, keeping styles and behavior:
|
|
1699
|
+
|
|
1700
|
+
```tsx
|
|
1701
|
+
// ❌ Double <a> — broken HTML
|
|
1702
|
+
<Link href="/about">
|
|
1703
|
+
<Button>About</Button>
|
|
1704
|
+
</Link>
|
|
1705
|
+
|
|
1706
|
+
// ✅ Button renders as <a> with Button styles
|
|
1707
|
+
<Button asChild>
|
|
1708
|
+
<Link href="/about">About</Link>
|
|
1709
|
+
</Button>
|
|
1710
|
+
|
|
1711
|
+
// ✅ DropdownMenu item as link
|
|
1712
|
+
<DropdownMenu.Item asChild>
|
|
1713
|
+
<Link href="/settings">Settings</Link>
|
|
1714
|
+
</DropdownMenu.Item>
|
|
1715
|
+
|
|
1716
|
+
// ✅ Breadcrumb as Next.js Link
|
|
1717
|
+
<Breadcrumb.Link asChild>
|
|
1718
|
+
<Link href="/">Home</Link>
|
|
1719
|
+
</Breadcrumb.Link>
|
|
1720
|
+
```
|
|
1721
|
+
|
|
1722
|
+
**Use `asChild` when combining 7onic components with routing `<Link>`.**
|
|
1723
|
+
Components that support `asChild`: Button, IconButton, Badge, Card, Modal.Trigger, Modal.Close, Drawer.Trigger, Drawer.Close, DropdownMenu.Item, Breadcrumb.Link, NavigationMenu.Link, Tooltip.Trigger, Popover.Trigger
|
|
1724
|
+
|
|
1725
|
+
---
|
|
1726
|
+
|
|
1727
|
+
## Props Usage
|
|
1728
|
+
|
|
1729
|
+
**Always use allowed values.** Don't pass arbitrary strings to variant/size/color props.
|
|
1730
|
+
|
|
1731
|
+
```tsx
|
|
1732
|
+
// ✅ Correct
|
|
1733
|
+
<Button variant="solid" size="default" color="primary" />
|
|
1734
|
+
|
|
1735
|
+
// ❌ Wrong — invalid values
|
|
1736
|
+
<Button variant="primary" /> // 'primary' is a color, not a variant
|
|
1737
|
+
<Button size="medium" /> // Use 'md' or 'default', not 'medium'
|
|
1738
|
+
<Button color="blue" /> // Use 'primary', not raw color names
|
|
1739
|
+
```
|
|
1740
|
+
|
|
1741
|
+
**`className` on components = layout ONLY** (margin, width, flex positioning). All visual styling (color, size, radius, variant) must use Props.
|
|
1742
|
+
|
|
1743
|
+
**Style via Props, not className:**
|
|
1744
|
+
```tsx
|
|
1745
|
+
// ✅ Use Props
|
|
1746
|
+
<Button color="primary" size="lg" />
|
|
1747
|
+
<Badge color="error" variant="subtle" />
|
|
1748
|
+
|
|
1749
|
+
// ❌ Don't override with className
|
|
1750
|
+
<Button className="bg-blue-500 text-white" />
|
|
1751
|
+
<Badge className="bg-red-100" />
|
|
1752
|
+
```
|
|
1753
|
+
|
|
1754
|
+
---
|
|
1755
|
+
|
|
1756
|
+
## Form Patterns
|
|
1757
|
+
|
|
1758
|
+
**Use Field wrapper** for labeled form elements with validation:
|
|
1759
|
+
|
|
1760
|
+
```tsx
|
|
1761
|
+
import { Field, Input, Textarea, Checkbox } from '@7onic-ui/react'
|
|
1762
|
+
|
|
1763
|
+
{/* Text input with label + error */}
|
|
1764
|
+
<Field error={errors.email}>
|
|
1765
|
+
<Field.Label required>Email</Field.Label>
|
|
1766
|
+
<Input placeholder="you@example.com" />
|
|
1767
|
+
<Field.Error />
|
|
1768
|
+
</Field>
|
|
1769
|
+
|
|
1770
|
+
{/* Textarea with character count */}
|
|
1771
|
+
<Field>
|
|
1772
|
+
<Field.Label>Bio</Field.Label>
|
|
1773
|
+
<Textarea maxLength={200} />
|
|
1774
|
+
<Field.CharCount />
|
|
1775
|
+
</Field>
|
|
1776
|
+
```
|
|
1777
|
+
|
|
1778
|
+
**Field context auto-connects** to Input, Textarea, Select, Checkbox, RadioGroup:
|
|
1779
|
+
- Passes `error` state
|
|
1780
|
+
- Passes `disabled` state
|
|
1781
|
+
- Auto-generates matching `id` / `htmlFor` / `aria-describedby`
|
|
1782
|
+
|
|
1783
|
+
---
|
|
1784
|
+
|
|
1785
|
+
## Chart Patterns
|
|
1786
|
+
|
|
1787
|
+
**⚠️ recharts is required.** Auto-install when using any Chart component:
|
|
1788
|
+
```bash
|
|
1789
|
+
npm install recharts
|
|
1790
|
+
```
|
|
1791
|
+
|
|
1792
|
+
**Always provide chartConfig:**
|
|
1793
|
+
```tsx
|
|
1794
|
+
const chartConfig = {
|
|
1795
|
+
revenue: { label: 'Revenue', color: 'var(--color-chart-1)' },
|
|
1796
|
+
expenses: { label: 'Expenses', color: 'var(--color-chart-2)' },
|
|
1797
|
+
}
|
|
1798
|
+
```
|
|
1799
|
+
|
|
1800
|
+
**Available chart colors (CSS variables, auto-adapt to light/dark):**
|
|
1801
|
+
- `var(--color-chart-1)` — blue
|
|
1802
|
+
- `var(--color-chart-2)` — pink
|
|
1803
|
+
- `var(--color-chart-3)` — lavender
|
|
1804
|
+
- `var(--color-chart-4)` — sky
|
|
1805
|
+
- `var(--color-chart-5)` — rose
|
|
1806
|
+
|
|
1807
|
+
**Container height is required (layout arbitrary value — allowed):**
|
|
1808
|
+
```tsx
|
|
1809
|
+
<Chart config={chartConfig} className="h-[300px]">
|
|
1810
|
+
```
|
|
1811
|
+
|
|
1812
|
+
---
|
|
1813
|
+
|
|
1814
|
+
## Overlay Patterns
|
|
1815
|
+
|
|
1816
|
+
**All overlays use Portal for correct stacking:**
|
|
1817
|
+
```tsx
|
|
1818
|
+
<Modal.Portal>
|
|
1819
|
+
<Modal.Overlay />
|
|
1820
|
+
<Modal.Content>...</Modal.Content>
|
|
1821
|
+
</Modal.Portal>
|
|
1822
|
+
```
|
|
1823
|
+
|
|
1824
|
+
**Z-index hierarchy (automatic via tokens) — never set custom z-index:**
|
|
1825
|
+
1. `z-dropdown` (1000) — Dropdown, Select
|
|
1826
|
+
2. `z-overlay` (1100) — Modal/Drawer overlay
|
|
1827
|
+
3. `z-modal` (2000) — Modal/Drawer content
|
|
1828
|
+
4. `z-popover` (2100) — Popover
|
|
1829
|
+
5. `z-tooltip` (2200) — Tooltip
|
|
1830
|
+
6. `z-toast` (3000) — Toast
|
|
1831
|
+
|
|
1832
|
+
---
|
|
1833
|
+
|
|
1834
|
+
## Accessibility
|
|
1835
|
+
|
|
1836
|
+
**Built-in (via Radix UI):** keyboard navigation, focus trap, ARIA attributes, screen reader.
|
|
1837
|
+
|
|
1838
|
+
**Do NOT override:**
|
|
1839
|
+
```tsx
|
|
1840
|
+
// ❌ Never remove focus ring
|
|
1841
|
+
<Button className="outline-none focus:outline-none" />
|
|
1842
|
+
|
|
1843
|
+
// ✅ Focus ring is managed by the design system
|
|
1844
|
+
<Button />
|
|
1845
|
+
```
|
|
1846
|
+
|
|
1847
|
+
**Always provide labels:**
|
|
1848
|
+
```tsx
|
|
1849
|
+
<IconButton aria-label="Close"><XIcon /></IconButton>
|
|
1850
|
+
|
|
1851
|
+
<Field>
|
|
1852
|
+
<Field.Label>Email</Field.Label>
|
|
1853
|
+
<Input />
|
|
1854
|
+
</Field>
|
|
1855
|
+
```
|
|
1856
|
+
|
|
1857
|
+
---
|
|
1858
|
+
|
|
1859
|
+
## Responsive Layout
|
|
1860
|
+
|
|
1861
|
+
**Mobile-first with token breakpoints:**
|
|
1862
|
+
```tsx
|
|
1863
|
+
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
|
|
1864
|
+
<Card className="w-full md:w-1/2">...</Card>
|
|
1865
|
+
<Card className="w-full md:w-1/2">...</Card>
|
|
1866
|
+
</div>
|
|
1867
|
+
```
|
|
1868
|
+
|
|
1869
|
+
**Use component Props for sizing, not className overrides:**
|
|
1870
|
+
```tsx
|
|
1871
|
+
// ✅ Correct
|
|
1872
|
+
<Button size="default" />
|
|
1873
|
+
|
|
1874
|
+
// ❌ Wrong
|
|
1875
|
+
<Button size="sm" className="md:h-10 md:px-4" />
|
|
1876
|
+
```
|
|
1877
|
+
|
|
1878
|
+
---
|
|
1879
|
+
|
|
1880
|
+
## Performance
|
|
1881
|
+
|
|
1882
|
+
**Tree-shaking works automatically:**
|
|
1883
|
+
```tsx
|
|
1884
|
+
import { Button, Card, Input } from '@7onic-ui/react'
|
|
1885
|
+
```
|
|
1886
|
+
|
|
1887
|
+
**Don't wrap components unnecessarily:**
|
|
1888
|
+
```tsx
|
|
1889
|
+
// ❌ Unnecessary
|
|
1890
|
+
function MyButton(props) { return <Button {...props} /> }
|
|
1891
|
+
|
|
1892
|
+
// ✅ Use directly
|
|
1893
|
+
<Button variant="solid" color="primary">Submit</Button>
|
|
1894
|
+
```
|
|
1895
|
+
|
|
1896
|
+
**Next.js App Router:** 7onic components have `'use client'` internally — they render in Server Components.
|
|
1897
|
+
But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`onClick`, `onChange`), add `'use client'` at the top of your file. When in doubt, add `'use client'` — it's always safe.
|
|
459
1898
|
|
|
460
1899
|
---
|
|
461
1900
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
1901
|
+
# ═══ SECTION 5: COMPLETE COMPONENT SUMMARY ═══
|
|
1902
|
+
|
|
1903
|
+
## Quick Reference Table
|
|
1904
|
+
|
|
1905
|
+
| Component | Type | Variants | Sizes | Colors | Key Feature |
|
|
1906
|
+
|---|---|---|---|---|---|
|
|
1907
|
+
| Button | Standalone | solid/outline/ghost/link | xs/sm/md/default/lg | default/primary/secondary/destructive | loading, icons, press effect |
|
|
1908
|
+
| IconButton | Standalone | solid/outline/ghost/subtle | xs/sm/md/default/lg | default/primary/secondary/destructive | Square, icon-only |
|
|
1909
|
+
| ButtonGroup | Container | outline/ghost | (inherits) | (inherits) | Context provider, attached |
|
|
1910
|
+
| Input | Standalone | default/filled | xs/sm/default/lg/xl | — | leftIcon/rightIcon, error |
|
|
1911
|
+
| Textarea | Standalone | default/filled | compact/default | — | resize options |
|
|
1912
|
+
| Select | Compound | — | xs/sm/default/lg/xl | — | Trigger + Content + Item |
|
|
1913
|
+
| DropdownMenu | Compound | — | sm/md/lg | — | CheckboxItem, RadioItem, Sub |
|
|
1914
|
+
| Checkbox | Standalone | — | sm/default/lg | default/primary | indeterminate, label |
|
|
1915
|
+
| RadioGroup | Compound | — | sm/default/lg | default/primary | Item with label |
|
|
1916
|
+
| Switch | Standalone | — | sm/default/lg | 5 colors | label positions, icons |
|
|
1917
|
+
| Toggle | Standalone | default/outline/ghost/outline-ghost | xs/sm/md/default/lg | — | pressed state |
|
|
1918
|
+
| ToggleGroup | Compound | default/outline | xs/sm/md/default/lg | — | single/multiple |
|
|
1919
|
+
| Segmented | Compound | default/outline/underline/ghost | sm/md/default/lg | — | Tab-like selection |
|
|
1920
|
+
| Slider | Standalone | — | sm/default/lg | default/primary | tooltip, range |
|
|
1921
|
+
| Field | Compound | — | — | — | Label, Error, CharCount |
|
|
1922
|
+
| Avatar | Compound | — | xs/sm/default/lg/xl/2xl | — | colorized fallback, Group |
|
|
1923
|
+
| Badge | Standalone | solid/subtle/outline | sm/default/lg | default/primary/success/warning/error/info | dot, removable |
|
|
1924
|
+
| Card | Compound | default/outline/ghost | sm/default/lg | — | Image overlay, interactive |
|
|
1925
|
+
| Table | Compound | default/bordered/striped | sm/default/lg | — | stickyHeader, sortable |
|
|
1926
|
+
| Tabs | Compound | line/enclosed/pill | sm/md/default/lg | default/primary | fitted |
|
|
1927
|
+
| Accordion | Compound | default/bordered/splitted | sm/default/lg | — | single/multiple |
|
|
1928
|
+
| Divider | Standalone | solid/dashed/dotted | — | default/muted/strong | label |
|
|
1929
|
+
| Modal | Compound | — | xs/sm/md/lg/xl/full | — | scrollBehavior |
|
|
1930
|
+
| Drawer | Compound | — | sm/md/lg/xl/full | — | 4 sides |
|
|
1931
|
+
| Tooltip | Compound | default/inverted | sm/default | — | Provider required |
|
|
1932
|
+
| Popover | Compound | default/elevated | sm/default/lg | — | arrow, close button |
|
|
1933
|
+
| Alert | Compound | default/outline/filled | sm/default/lg | info/success/warning/error | closable |
|
|
1934
|
+
| Toast | Imperative | — | sm/default/lg | 6 types | promise, action |
|
|
1935
|
+
| Progress | Standalone | default/striped | sm/default/lg | default/primary | linear/circular |
|
|
1936
|
+
| Spinner | Standalone | ring/dots/bars/orbit | sm/default/lg | default/primary/current | 5 orbit styles |
|
|
1937
|
+
| Skeleton | Standalone | text/circular/rectangular | — | — | pulse/wave, count |
|
|
1938
|
+
| Breadcrumb | Compound | — | sm/default/lg | — | maxItems collapse |
|
|
1939
|
+
| Pagination | Compound | default/outline/ghost | xs/sm/default/lg/xl | default/primary | compound or auto |
|
|
1940
|
+
| NavigationMenu | Compound | — | sm/md/default/lg | — | horizontal/vertical, collapsed |
|
|
1941
|
+
| Chart | Compound | — | — | chart colors | Bar/Line/Area/Pie |
|
|
1942
|
+
| MetricCard | Compound | default/elevated/ghost | sm/default/lg | — | animated value, trend |
|
|
465
1943
|
|
|
466
1944
|
---
|
|
467
1945
|
|
|
@@ -471,4 +1949,4 @@ Before presenting code to the user, scan your own output for violations:
|
|
|
471
1949
|
- npm (tokens): https://npmjs.com/package/@7onic-ui/tokens
|
|
472
1950
|
- npm (react): https://npmjs.com/package/@7onic-ui/react
|
|
473
1951
|
- GitHub: https://github.com/itonys/7onic
|
|
474
|
-
-
|
|
1952
|
+
- Tokens-only AI guide: https://7onic.design/llms.txt
|