wimui 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/WimProvider.cjs +1 -1
- package/dist/WimProvider.d.ts +9 -2
- package/dist/WimProvider.js +27 -21
- package/dist/components/layout/Footer/Footer.cjs +1 -1
- package/dist/components/layout/Footer/Footer.d.ts +2 -0
- package/dist/components/layout/Footer/Footer.js +5 -5
- package/dist/components/layout/Footer/footer.module.cjs +1 -1
- package/dist/components/layout/Footer/footer.module.js +7 -6
- package/dist/components/layout/Header/Header.cjs +1 -1
- package/dist/components/layout/Header/Header.d.ts +2 -0
- package/dist/components/layout/Header/Header.js +5 -5
- package/dist/components/layout/Header/header.module.cjs +1 -1
- package/dist/components/layout/Header/header.module.js +10 -9
- package/dist/components/layout/Navbar/Navbar.cjs +1 -1
- package/dist/components/layout/Navbar/Navbar.d.ts +2 -0
- package/dist/components/layout/Navbar/Navbar.js +7 -7
- package/dist/components/layout/Navbar/navbar.module.cjs +1 -1
- package/dist/components/layout/Navbar/navbar.module.js +15 -14
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -2
- package/dist/llms-full.txt +2941 -0
- package/dist/llms.txt +415 -0
- package/dist/preset.cjs +2 -0
- package/dist/preset.d.ts +11 -0
- package/dist/preset.js +16 -0
- package/dist/styles.css +2 -2
- package/dist/tokens/generated/presets.cjs +2 -0
- package/dist/tokens/generated/presets.d.ts +19 -0
- package/dist/tokens/generated/presets.js +21 -0
- package/dist/wimui.umd.css +1 -1
- package/dist/wimui.umd.js +2 -2
- package/package.json +20 -17
|
@@ -0,0 +1,2941 @@
|
|
|
1
|
+
# WIM UI — LLM guide (llms-full.txt)
|
|
2
|
+
|
|
3
|
+
> Machine-readable map of the wimui React component library for coding agents. Read this before generating any UI with wimui: it defines the required CSS/setup, the correct import paths, the full component list, and the composition rules that keep screens from looking AI-generated.
|
|
4
|
+
|
|
5
|
+
## What this is
|
|
6
|
+
|
|
7
|
+
**wimui** v0.4.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
|
|
8
|
+
|
|
9
|
+
## Install & required setup
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i wimui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
// 1. CSS contract — styles.css is REQUIRED (design tokens + component styles).
|
|
17
|
+
import "wimui/styles.css";
|
|
18
|
+
import "wimui/reset.css"; // optional base reset
|
|
19
|
+
|
|
20
|
+
// 2. Components — import from the root barrel or a category subpath (tree-shakeable).
|
|
21
|
+
import { Button, Card } from "wimui";
|
|
22
|
+
import { Stack, Grid } from "wimui/layout";
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
- **Theme**: wrap the app in `WimProvider` (recommended) or set `data-theme="light|dark"` on `<html>` (omit to follow OS).
|
|
26
|
+
- **Density**: `data-density="comfortable|compact"`, or `WimProvider` / `setWimDensity()`.
|
|
27
|
+
- **Never hardcode** colors / spacing / sizes in consumer code — use the `--wim-*` CSS custom properties (tokens) that styles.css defines.
|
|
28
|
+
- **Form + RHF** helpers live in `wimui/rhf` (react-hook-form + zod), not the root barrel.
|
|
29
|
+
|
|
30
|
+
## Import paths
|
|
31
|
+
|
|
32
|
+
Every component works from the root barrel `"wimui"`. For smaller bundles, import from its category subpath instead:
|
|
33
|
+
|
|
34
|
+
- `wimui/layout`
|
|
35
|
+
- `wimui/form`
|
|
36
|
+
- `wimui/feedback`
|
|
37
|
+
- `wimui/navigation`
|
|
38
|
+
- `wimui/data-display`
|
|
39
|
+
- `wimui/overlay`
|
|
40
|
+
- `wimui/typography`
|
|
41
|
+
- `wimui/media`
|
|
42
|
+
- `wimui/charts`
|
|
43
|
+
- `wimui/ai`
|
|
44
|
+
|
|
45
|
+
## Composition rules — build screens that don't look AI-generated
|
|
46
|
+
|
|
47
|
+
Single components are judged by state/a11y/token compliance. **Composed screens** are judged by hierarchy, rhythm, asymmetry and real-feeling content. Apply these whenever combining components into a screen, page, pattern or demo.
|
|
48
|
+
|
|
49
|
+
**Before laying out**: pick exactly ONE visual protagonist for the screen. If every element has the same volume, it reads as AI-generated.
|
|
50
|
+
|
|
51
|
+
**Banned patterns (the "AI signature" — do not emit):**
|
|
52
|
+
- `linear-gradient(135deg, …)` hero backgrounds → use surface-hierarchy tokens (`surface` / `surface-raised`) to separate planes.
|
|
53
|
+
- The stock hero (badge → big heading → subtext → two solid/outline buttons) → asymmetric composition led by one protagonist.
|
|
54
|
+
- "Rule of three" equal feature cards (icon + short heading + one line, ×3) → let the count follow content (2 or 5 is fine); vary card size and copy length.
|
|
55
|
+
- Emoji used as UI icons (☰ ★ ✓) → use `src/icon/` components. (Emoji as functional markers in docs/README is fine; as UI icons it is not.)
|
|
56
|
+
- Skeleton used as anything but loading (fake screenshots) → real-looking content or an actual mini UI.
|
|
57
|
+
- Every section center-aligned → default to left-aligned; at most one centered section per page.
|
|
58
|
+
- Round numbers ("1000+", "99%") + generic copy ("Get started", "seamless/powerful/effortless") → jagged realistic numbers (4,281) and product-specific voice.
|
|
59
|
+
- Sequential/alphabetical dummy names (Alice/Bob/Charlie, User 1/2) → culturally diverse, unordered, real-feeling names.
|
|
60
|
+
- Rainbow color-per-category → color carries state only (success/warning/danger); everything else neutral.
|
|
61
|
+
- Perfectly even grids (2×2, 3×3 all same size) → break the grid (span the protagonist cell, size differences, hero+sidebar asymmetry).
|
|
62
|
+
- Filling every slot / uniform gaps everywhere → leave whitespace; group by proximity (tight within a group, loose between groups).
|
|
63
|
+
|
|
64
|
+
**Must rules:**
|
|
65
|
+
1. One visual protagonist per screen (jump in size/weight/color creates the entry point).
|
|
66
|
+
2. Contrast density: hero/showcase sparse, data regions (tables/lists) dense. Uniform "medium density" reads as AI.
|
|
67
|
+
3. Never override a component's defaults via inline `style` (`padding:0`, `borderRadius:0`). Add a prop/token instead.
|
|
68
|
+
4. Never hardcode gap/padding/size — use `--wim-spacing-*` tokens.
|
|
69
|
+
5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily.
|
|
70
|
+
6. Limit accent color: primary surfaces (solid buttons, emphasis backgrounds) 1–2 per view.
|
|
71
|
+
7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
|
|
72
|
+
8. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
|
|
73
|
+
|
|
74
|
+
## Recipes — copy-paste starting points
|
|
75
|
+
|
|
76
|
+
### 1. Required setup (the contract)
|
|
77
|
+
|
|
78
|
+
Without `styles.css` nothing is styled — this is the one step Storybook hides from you. Import it once at the app entry, wrap the tree in `WimProvider`, then build screens inside.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
// main.tsx — app entry
|
|
82
|
+
import { createRoot } from "react-dom/client";
|
|
83
|
+
import "wimui/styles.css"; // REQUIRED: design tokens + component styles
|
|
84
|
+
import "wimui/reset.css"; // optional base reset
|
|
85
|
+
import { WimProvider } from "wimui";
|
|
86
|
+
import { App } from "./App";
|
|
87
|
+
|
|
88
|
+
// theme: "light" | "dark" | "system" (default). density: "comfortable" | "compact".
|
|
89
|
+
createRoot(document.getElementById("root")!).render(
|
|
90
|
+
<WimProvider theme="system" density="comfortable">
|
|
91
|
+
<App />
|
|
92
|
+
</WimProvider>,
|
|
93
|
+
);
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
// App.tsx — app frame. AppShell wires header/sidebar; page content is children.
|
|
98
|
+
import { AppShell, Header, Sidebar, Stack, Title, Text, Button } from "wimui";
|
|
99
|
+
|
|
100
|
+
export function App() {
|
|
101
|
+
return (
|
|
102
|
+
<AppShell
|
|
103
|
+
header={<Header sticky bordered><Title tag="h1" size="md">Larkfield</Title></Header>}
|
|
104
|
+
sidebar={
|
|
105
|
+
<Sidebar width={240}>
|
|
106
|
+
<Stack gap="2xs" p="md">
|
|
107
|
+
<Button variant="ghost" justify="start" fullWidth>Overview</Button>
|
|
108
|
+
<Button variant="ghost" justify="start" fullWidth>Customers</Button>
|
|
109
|
+
<Button variant="ghost" justify="start" fullWidth>Settings</Button>
|
|
110
|
+
</Stack>
|
|
111
|
+
</Sidebar>
|
|
112
|
+
}
|
|
113
|
+
>
|
|
114
|
+
<Stack gap="lg">
|
|
115
|
+
<Title tag="h2" size="lg">Overview</Title>
|
|
116
|
+
<Text color="secondary">Spacing/size/color come from --wim-* tokens via props — never hardcode px/hex.</Text>
|
|
117
|
+
</Stack>
|
|
118
|
+
</AppShell>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 2. A composed content screen
|
|
124
|
+
|
|
125
|
+
One protagonist (the KPI row), a dense table below, tokens via props, jagged real data, and one deliberately incomplete row. Note the compound components (`Stats.Value`, `Table.Head`) and that `Grid` uses `cols` (not `columns`).
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { Stack, Grid, Card, Stats, Table, Badge, Title, Text } from "wimui";
|
|
129
|
+
|
|
130
|
+
const rows = [
|
|
131
|
+
{ id: "in_9f2a", name: "Marisol Okonkwo", plan: "Scale", amount: "$4,610.50", status: "paid" },
|
|
132
|
+
{ id: "in_7b41", name: "Dmitri Sørensen", plan: "Enterprise", amount: "$12,199.00", status: "failed" },
|
|
133
|
+
{ id: "in_2a90", name: "Thomas O'Reilly", plan: null, amount: "$89.00", status: "pending" }, // incomplete row
|
|
134
|
+
];
|
|
135
|
+
const intent = { paid: "success", failed: "danger", pending: undefined } as const;
|
|
136
|
+
|
|
137
|
+
export function BillingOverview() {
|
|
138
|
+
return (
|
|
139
|
+
<Stack gap="lg">
|
|
140
|
+
<Title tag="h2" size="lg">Billing</Title>
|
|
141
|
+
|
|
142
|
+
{/* Protagonist: KPI row. Uneven content per tile — not three clones. */}
|
|
143
|
+
<Grid cols={{ base: 1, sm: 2, lg: 3 }} gap="md">
|
|
144
|
+
<Stats><Stats.Label>MRR</Stats.Label><Stats.Value>$48,210</Stats.Value><Stats.Trend>+6.4%</Stats.Trend></Stats>
|
|
145
|
+
<Stats><Stats.Label>Active workspaces</Stats.Label><Stats.Value>1,204</Stats.Value><Stats.Description>176 idle over 30 days</Stats.Description></Stats>
|
|
146
|
+
<Stats><Stats.Label>Failed webhooks</Stats.Label><Stats.Value>137</Stats.Value><Stats.Trend>+23 today</Stats.Trend></Stats>
|
|
147
|
+
</Grid>
|
|
148
|
+
|
|
149
|
+
{/* Dense data region */}
|
|
150
|
+
<Card padding="none">
|
|
151
|
+
<Table hoverable fullWidth>
|
|
152
|
+
<Table.Header>
|
|
153
|
+
<Table.Row>
|
|
154
|
+
<Table.Head>Customer</Table.Head><Table.Head>Plan</Table.Head>
|
|
155
|
+
<Table.Head>Amount</Table.Head><Table.Head>Status</Table.Head>
|
|
156
|
+
</Table.Row>
|
|
157
|
+
</Table.Header>
|
|
158
|
+
<Table.Body>
|
|
159
|
+
{rows.map((r) => (
|
|
160
|
+
<Table.Row key={r.id}>
|
|
161
|
+
<Table.Cell>{r.name}</Table.Cell>
|
|
162
|
+
<Table.Cell>{r.plan ?? <Text color="tertiary">—</Text>}</Table.Cell>
|
|
163
|
+
<Table.Cell>{r.amount}</Table.Cell>
|
|
164
|
+
<Table.Cell><Badge variant="subtle" intent={intent[r.status]}>{r.status}</Badge></Table.Cell>
|
|
165
|
+
</Table.Row>
|
|
166
|
+
))}
|
|
167
|
+
</Table.Body>
|
|
168
|
+
</Table>
|
|
169
|
+
</Card>
|
|
170
|
+
</Stack>
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### 3. Auth — sign-in screen
|
|
176
|
+
|
|
177
|
+
A focused single-protagonist screen: one centered card, a left-aligned form. Not the generic badge→heading→two-buttons hero. Real product context in the copy.
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
import { Center, Card, Stack, Group, Title, Text, Input, PasswordInput, Checkbox, Button, Link } from "wimui";
|
|
181
|
+
|
|
182
|
+
export function SignIn() {
|
|
183
|
+
return (
|
|
184
|
+
<Center h="100dvh" p="lg">
|
|
185
|
+
<Card padding="lg" style={{ width: "min(380px, 100%)" }}>
|
|
186
|
+
<Stack gap="lg">
|
|
187
|
+
<Stack gap="2xs">
|
|
188
|
+
<Title tag="h1" size="lg">Sign in to Larkfield</Title>
|
|
189
|
+
<Text color="secondary">Use your work email — SSO is enabled for Enterprise workspaces.</Text>
|
|
190
|
+
</Stack>
|
|
191
|
+
<form onSubmit={(e) => e.preventDefault()}>
|
|
192
|
+
<Stack gap="md">
|
|
193
|
+
<Input label="Work email" type="email" placeholder="you@company.com" fullWidth />
|
|
194
|
+
<PasswordInput label="Password" fullWidth />
|
|
195
|
+
<Group justify="between" align="center">
|
|
196
|
+
<Checkbox>Keep me signed in</Checkbox>
|
|
197
|
+
<Link href="#" priority="secondary">Forgot password?</Link>
|
|
198
|
+
</Group>
|
|
199
|
+
<Button type="submit" variant="solid" fullWidth>Sign in</Button>
|
|
200
|
+
</Stack>
|
|
201
|
+
</form>
|
|
202
|
+
<Text size="sm" color="tertiary">No account? <Link href="#">Start a 14-day trial</Link></Text>
|
|
203
|
+
</Stack>
|
|
204
|
+
</Card>
|
|
205
|
+
</Center>
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### 4. Settings — sectioned form
|
|
211
|
+
|
|
212
|
+
Dense label-left / control-right rows grouped in one card, separated by `Divider`. Density comes from token gaps, not hardcoded spacing. Actions right-aligned at the bottom.
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
import { Stack, Group, Title, Text, Card, Divider, Select, Switch, Button } from "wimui";
|
|
216
|
+
|
|
217
|
+
export function NotificationSettings() {
|
|
218
|
+
return (
|
|
219
|
+
<Stack gap="lg" style={{ maxWidth: 720 }}>
|
|
220
|
+
<Stack gap="2xs">
|
|
221
|
+
<Title tag="h1" size="lg">Notifications</Title>
|
|
222
|
+
<Text color="secondary">Control what Larkfield emails you about. Changes apply immediately.</Text>
|
|
223
|
+
</Stack>
|
|
224
|
+
|
|
225
|
+
<Card padding="lg">
|
|
226
|
+
<Stack gap="md">
|
|
227
|
+
<SettingRow label="Deliverability alerts" hint="Bounce-rate spikes and blocklist hits.">
|
|
228
|
+
<Switch defaultChecked />
|
|
229
|
+
</SettingRow>
|
|
230
|
+
<Divider />
|
|
231
|
+
<SettingRow label="Weekly summary" hint="Every Monday, 09:00 in your timezone.">
|
|
232
|
+
<Switch />
|
|
233
|
+
</SettingRow>
|
|
234
|
+
<Divider />
|
|
235
|
+
<SettingRow label="Digest timezone">
|
|
236
|
+
<Select
|
|
237
|
+
aria-label="Digest timezone"
|
|
238
|
+
value="jst"
|
|
239
|
+
options={[
|
|
240
|
+
{ label: "Asia/Tokyo (JST)", value: "jst" },
|
|
241
|
+
{ label: "Europe/Berlin (CET)", value: "cet" },
|
|
242
|
+
{ label: "UTC", value: "utc" },
|
|
243
|
+
]}
|
|
244
|
+
/>
|
|
245
|
+
</SettingRow>
|
|
246
|
+
</Stack>
|
|
247
|
+
</Card>
|
|
248
|
+
|
|
249
|
+
<Group justify="end" gap="sm">
|
|
250
|
+
<Button variant="ghost">Reset</Button>
|
|
251
|
+
<Button variant="solid">Save changes</Button>
|
|
252
|
+
</Group>
|
|
253
|
+
</Stack>
|
|
254
|
+
);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
// Local helper: label-left / control-right row. One protagonist per row = the control.
|
|
258
|
+
function SettingRow({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
|
259
|
+
return (
|
|
260
|
+
<Group justify="between" align="center" gap="md">
|
|
261
|
+
<Stack gap="3xs">
|
|
262
|
+
<Text weight="medium">{label}</Text>
|
|
263
|
+
{hint ? <Text size="sm" color="secondary">{hint}</Text> : null}
|
|
264
|
+
</Stack>
|
|
265
|
+
{children}
|
|
266
|
+
</Group>
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
### 5. Empty state — a real zero state, not a shrug
|
|
272
|
+
|
|
273
|
+
One protagonist (the primary action), calm copy that says *why* it's empty and what happens next. Reuse the `EmptyState` component instead of hand-rolling centered divs.
|
|
274
|
+
|
|
275
|
+
```tsx
|
|
276
|
+
import { Center, EmptyState, Button } from "wimui";
|
|
277
|
+
import { DocumentIcon } from "wimui/icons";
|
|
278
|
+
|
|
279
|
+
export function NoInvoices() {
|
|
280
|
+
return (
|
|
281
|
+
<Center h="60dvh" p="lg">
|
|
282
|
+
<EmptyState
|
|
283
|
+
icon={<DocumentIcon />}
|
|
284
|
+
title="No invoices yet"
|
|
285
|
+
description="Invoices show up here after your first billing cycle closes. Nothing is due today."
|
|
286
|
+
extra={<Button variant="solid">Create a manual invoice</Button>}
|
|
287
|
+
/>
|
|
288
|
+
</Center>
|
|
289
|
+
);
|
|
290
|
+
}
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### 6. Filtered data table — toolbar + table
|
|
294
|
+
|
|
295
|
+
A search/filter toolbar as the sparse region above a dense table. Filtering is client-side here; swap in your query. Note the deliberately jagged data: a failed row, a member with no team (incomplete), and a long name.
|
|
296
|
+
|
|
297
|
+
```tsx
|
|
298
|
+
import { Stack, Group, SearchInput, Select, Table, Badge, Text } from "wimui";
|
|
299
|
+
import { useMemo, useState } from "react";
|
|
300
|
+
|
|
301
|
+
const members = [
|
|
302
|
+
{ id: "u_1", name: "Marisol Okonkwo", team: "Growth", role: "admin", status: "active" },
|
|
303
|
+
{ id: "u_2", name: "Dmitri Sørensen", team: "Platform", role: "member", status: "invited" },
|
|
304
|
+
{ id: "u_3", name: "Aleksandra Wiśniewska-Nowak", team: null, role: "member", status: "active" }, // no team
|
|
305
|
+
{ id: "u_4", name: "Thomas O'Reilly", team: "Growth", role: "member", status: "suspended" }, // non-happy path
|
|
306
|
+
];
|
|
307
|
+
const roleIntent = { admin: "primary", member: undefined } as const;
|
|
308
|
+
const statusIntent = { active: "success", invited: undefined, suspended: "danger" } as const;
|
|
309
|
+
|
|
310
|
+
export function MembersTable() {
|
|
311
|
+
const [q, setQ] = useState("");
|
|
312
|
+
const [role, setRole] = useState("all");
|
|
313
|
+
|
|
314
|
+
const rows = useMemo(
|
|
315
|
+
() =>
|
|
316
|
+
members.filter(
|
|
317
|
+
(m) =>
|
|
318
|
+
(role === "all" || m.role === role) &&
|
|
319
|
+
m.name.toLowerCase().includes(q.trim().toLowerCase()),
|
|
320
|
+
),
|
|
321
|
+
[q, role],
|
|
322
|
+
);
|
|
323
|
+
|
|
324
|
+
return (
|
|
325
|
+
<Stack gap="md">
|
|
326
|
+
{/* Sparse toolbar */}
|
|
327
|
+
<Group justify="between" align="center" gap="md">
|
|
328
|
+
<SearchInput
|
|
329
|
+
placeholder="Search members"
|
|
330
|
+
value={q}
|
|
331
|
+
onChange={(e) => setQ(e.target.value)}
|
|
332
|
+
allowClear
|
|
333
|
+
width={280}
|
|
334
|
+
/>
|
|
335
|
+
<Select
|
|
336
|
+
aria-label="Filter by role"
|
|
337
|
+
value={role}
|
|
338
|
+
onChange={setRole}
|
|
339
|
+
options={[
|
|
340
|
+
{ label: "All roles", value: "all" },
|
|
341
|
+
{ label: "Admins", value: "admin" },
|
|
342
|
+
{ label: "Members", value: "member" },
|
|
343
|
+
]}
|
|
344
|
+
/>
|
|
345
|
+
</Group>
|
|
346
|
+
|
|
347
|
+
{/* Dense data region */}
|
|
348
|
+
<Table hoverable fullWidth>
|
|
349
|
+
<Table.Header>
|
|
350
|
+
<Table.Row>
|
|
351
|
+
<Table.Head>Member</Table.Head><Table.Head>Team</Table.Head>
|
|
352
|
+
<Table.Head>Role</Table.Head><Table.Head>Status</Table.Head>
|
|
353
|
+
</Table.Row>
|
|
354
|
+
</Table.Header>
|
|
355
|
+
<Table.Body>
|
|
356
|
+
{rows.map((m) => (
|
|
357
|
+
<Table.Row key={m.id}>
|
|
358
|
+
<Table.Cell>{m.name}</Table.Cell>
|
|
359
|
+
<Table.Cell>{m.team ?? <Text color="tertiary">No team</Text>}</Table.Cell>
|
|
360
|
+
<Table.Cell><Badge variant="subtle" intent={roleIntent[m.role]}>{m.role}</Badge></Table.Cell>
|
|
361
|
+
<Table.Cell><Badge variant="subtle" intent={statusIntent[m.status]}>{m.status}</Badge></Table.Cell>
|
|
362
|
+
</Table.Row>
|
|
363
|
+
))}
|
|
364
|
+
</Table.Body>
|
|
365
|
+
</Table>
|
|
366
|
+
</Stack>
|
|
367
|
+
);
|
|
368
|
+
}
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
### 7. Onboarding — a stepper flow
|
|
372
|
+
|
|
373
|
+
The `Stepper` shows where you are; the card is the single focused task for the current step. Starts mid-flow (step 1) so it reads like a real session, not a fresh render.
|
|
374
|
+
|
|
375
|
+
```tsx
|
|
376
|
+
import { Stack, Card, Stepper, Title, Text, Group, Button, Input } from "wimui";
|
|
377
|
+
import { useState } from "react";
|
|
378
|
+
|
|
379
|
+
const steps = [
|
|
380
|
+
{ title: "Account", description: "Your details" },
|
|
381
|
+
{ title: "Workspace", description: "Name & URL" },
|
|
382
|
+
{ title: "Invite", description: "Optional" },
|
|
383
|
+
];
|
|
384
|
+
|
|
385
|
+
export function Onboarding() {
|
|
386
|
+
const [current, setCurrent] = useState(1); // mid-flow
|
|
387
|
+
const back = () => setCurrent((c) => Math.max(0, c - 1));
|
|
388
|
+
const next = () => setCurrent((c) => Math.min(steps.length - 1, c + 1));
|
|
389
|
+
|
|
390
|
+
return (
|
|
391
|
+
<Stack gap="lg" style={{ maxWidth: 640 }}>
|
|
392
|
+
<Stepper steps={steps} current={current} onChange={setCurrent} />
|
|
393
|
+
|
|
394
|
+
<Card padding="lg">
|
|
395
|
+
<Stack gap="md">
|
|
396
|
+
<Stack gap="2xs">
|
|
397
|
+
<Title tag="h2" size="md">Name your workspace</Title>
|
|
398
|
+
<Text color="secondary">You can change this later in Settings — existing links keep working.</Text>
|
|
399
|
+
</Stack>
|
|
400
|
+
<Input label="Workspace name" placeholder="Acme Inc." fullWidth />
|
|
401
|
+
</Stack>
|
|
402
|
+
</Card>
|
|
403
|
+
|
|
404
|
+
<Group justify="between" align="center">
|
|
405
|
+
<Button variant="ghost" onClick={back} disabled={current === 0}>Back</Button>
|
|
406
|
+
<Button variant="solid" onClick={next}>Continue</Button>
|
|
407
|
+
</Group>
|
|
408
|
+
</Stack>
|
|
409
|
+
);
|
|
410
|
+
}
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
## Idioms — per-category minimal combinations
|
|
414
|
+
|
|
415
|
+
Smaller than the full-screen recipes above: the canonical way to wire one
|
|
416
|
+
category together. Same rules apply (tokens via props, real copy, show a
|
|
417
|
+
non-happy-path state).
|
|
418
|
+
|
|
419
|
+
### Form — field + validation + submit
|
|
420
|
+
|
|
421
|
+
The field owns its own label and error: pass `error` a **string** to render the message and the danger state together. No wrapper component needed.
|
|
422
|
+
|
|
423
|
+
```tsx
|
|
424
|
+
import { Stack, Input, Textarea, Button } from "wimui";
|
|
425
|
+
import { useState } from "react";
|
|
426
|
+
|
|
427
|
+
export function ContactForm() {
|
|
428
|
+
const [email, setEmail] = useState("");
|
|
429
|
+
const [error, setError] = useState<string>();
|
|
430
|
+
|
|
431
|
+
function submit(e: React.FormEvent) {
|
|
432
|
+
e.preventDefault();
|
|
433
|
+
setError(email.includes("@") ? undefined : "Enter a valid work email.");
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
return (
|
|
437
|
+
<form onSubmit={submit} noValidate>
|
|
438
|
+
<Stack gap="md" style={{ maxWidth: 420 }}>
|
|
439
|
+
<Input
|
|
440
|
+
label="Work email"
|
|
441
|
+
type="email"
|
|
442
|
+
required
|
|
443
|
+
value={email}
|
|
444
|
+
onChange={(e) => setEmail(e.target.value)}
|
|
445
|
+
error={error} // string → message + danger intent
|
|
446
|
+
fullWidth
|
|
447
|
+
/>
|
|
448
|
+
<Textarea label="What do you need help with?" fullWidth />
|
|
449
|
+
<Button type="submit" variant="solid">Send</Button>
|
|
450
|
+
</Stack>
|
|
451
|
+
</form>
|
|
452
|
+
);
|
|
453
|
+
}
|
|
454
|
+
```
|
|
455
|
+
|
|
456
|
+
### Navigation — sidebar (desktop) ⇄ tab bar (mobile)
|
|
457
|
+
|
|
458
|
+
Same destinations, two shells. `AppShell` takes a `sidebar` for wide viewports; `TabBar` (fixed, bottom) is the mobile equivalent — show/hide each with your breakpoint CSS. Active state is data, not duplicated markup.
|
|
459
|
+
|
|
460
|
+
```tsx
|
|
461
|
+
import { AppShell, Sidebar, Stack, Button, TabBar } from "wimui";
|
|
462
|
+
import { HomeIcon, UserIcon, SettingsIcon } from "wimui/icons";
|
|
463
|
+
|
|
464
|
+
const nav = [
|
|
465
|
+
{ id: "home", label: "Home", icon: <HomeIcon /> },
|
|
466
|
+
{ id: "people", label: "People", icon: <UserIcon /> },
|
|
467
|
+
{ id: "settings", label: "Settings", icon: <SettingsIcon /> },
|
|
468
|
+
];
|
|
469
|
+
|
|
470
|
+
export function Shell({
|
|
471
|
+
tab,
|
|
472
|
+
onTab,
|
|
473
|
+
children,
|
|
474
|
+
}: {
|
|
475
|
+
tab: string;
|
|
476
|
+
onTab: (id: string) => void;
|
|
477
|
+
children: React.ReactNode;
|
|
478
|
+
}) {
|
|
479
|
+
return (
|
|
480
|
+
<AppShell
|
|
481
|
+
sidebar={
|
|
482
|
+
<Sidebar width={240}>
|
|
483
|
+
<Stack gap="2xs" p="md">
|
|
484
|
+
{nav.map((n) => (
|
|
485
|
+
<Button
|
|
486
|
+
key={n.id}
|
|
487
|
+
variant={tab === n.id ? "solid" : "ghost"}
|
|
488
|
+
justify="start"
|
|
489
|
+
icon={n.icon}
|
|
490
|
+
fullWidth
|
|
491
|
+
onClick={() => onTab(n.id)}
|
|
492
|
+
>
|
|
493
|
+
{n.label}
|
|
494
|
+
</Button>
|
|
495
|
+
))}
|
|
496
|
+
</Stack>
|
|
497
|
+
</Sidebar>
|
|
498
|
+
}
|
|
499
|
+
>
|
|
500
|
+
{children}
|
|
501
|
+
{/* Mobile: same destinations as a fixed bottom bar */}
|
|
502
|
+
<TabBar>
|
|
503
|
+
{nav.map((n) => (
|
|
504
|
+
<TabBar.Item
|
|
505
|
+
key={n.id}
|
|
506
|
+
active={tab === n.id}
|
|
507
|
+
icon={n.icon}
|
|
508
|
+
label={n.label}
|
|
509
|
+
onClick={() => onTab(n.id)}
|
|
510
|
+
/>
|
|
511
|
+
))}
|
|
512
|
+
</TabBar>
|
|
513
|
+
</AppShell>
|
|
514
|
+
);
|
|
515
|
+
}
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
### Feedback — persistent Alert vs. transient toast
|
|
519
|
+
|
|
520
|
+
Use an inline `Alert` for state that stays true (a limit, an outage); use a toast (`useToast().show`) for a one-off confirmation. Wrap the app once in `ToastProvider`.
|
|
521
|
+
|
|
522
|
+
```tsx
|
|
523
|
+
import { ToastProvider, useToast, Alert, Button, Stack } from "wimui";
|
|
524
|
+
|
|
525
|
+
// once, at the app root
|
|
526
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
527
|
+
return <ToastProvider position="top-right">{children}</ToastProvider>;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
export function InvitePanel() {
|
|
531
|
+
const { show } = useToast();
|
|
532
|
+
return (
|
|
533
|
+
<Stack gap="md" style={{ maxWidth: 480 }}>
|
|
534
|
+
<Alert
|
|
535
|
+
intent="warning"
|
|
536
|
+
title="Seat limit reached"
|
|
537
|
+
description="Your plan includes 5 seats. Remove a member or upgrade to invite more."
|
|
538
|
+
/>
|
|
539
|
+
<Button
|
|
540
|
+
variant="solid"
|
|
541
|
+
onClick={() =>
|
|
542
|
+
show({
|
|
543
|
+
intent: "success",
|
|
544
|
+
title: "Invitation sent",
|
|
545
|
+
description: "We emailed marisol@okonkwo.dev.",
|
|
546
|
+
})
|
|
547
|
+
}
|
|
548
|
+
>
|
|
549
|
+
Resend invite
|
|
550
|
+
</Button>
|
|
551
|
+
</Stack>
|
|
552
|
+
);
|
|
553
|
+
}
|
|
554
|
+
```
|
|
555
|
+
|
|
556
|
+
### Overlay — Dialog wrapping a form
|
|
557
|
+
|
|
558
|
+
`Dialog` is compound: a `DialogTrigger asChild` around your own button, and `DialogClose asChild` around the cancel action so it dismisses without wiring state. Keep the form inside `DialogContent`.
|
|
559
|
+
|
|
560
|
+
```tsx
|
|
561
|
+
import {
|
|
562
|
+
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle,
|
|
563
|
+
DialogDescription, DialogFooter, DialogClose, Button, Stack, Input,
|
|
564
|
+
} from "wimui";
|
|
565
|
+
|
|
566
|
+
export function RenameWorkspace() {
|
|
567
|
+
return (
|
|
568
|
+
<Dialog>
|
|
569
|
+
<DialogTrigger asChild>
|
|
570
|
+
<Button variant="outline">Rename workspace</Button>
|
|
571
|
+
</DialogTrigger>
|
|
572
|
+
<DialogContent>
|
|
573
|
+
<DialogHeader>
|
|
574
|
+
<DialogTitle>Rename workspace</DialogTitle>
|
|
575
|
+
<DialogDescription>
|
|
576
|
+
This changes the URL. Existing links keep working via a redirect.
|
|
577
|
+
</DialogDescription>
|
|
578
|
+
</DialogHeader>
|
|
579
|
+
<form onSubmit={(e) => e.preventDefault()}>
|
|
580
|
+
<Stack gap="md" p="md">
|
|
581
|
+
<Input label="Workspace name" defaultValue="Larkfield" fullWidth />
|
|
582
|
+
</Stack>
|
|
583
|
+
<DialogFooter>
|
|
584
|
+
<DialogClose asChild>
|
|
585
|
+
<Button variant="ghost">Cancel</Button>
|
|
586
|
+
</DialogClose>
|
|
587
|
+
<Button type="submit" variant="solid">Save</Button>
|
|
588
|
+
</DialogFooter>
|
|
589
|
+
</form>
|
|
590
|
+
</DialogContent>
|
|
591
|
+
</Dialog>
|
|
592
|
+
);
|
|
593
|
+
}
|
|
594
|
+
```
|
|
595
|
+
|
|
596
|
+
## Components
|
|
597
|
+
|
|
598
|
+
### layout — `import { … } from "wimui/layout"`
|
|
599
|
+
|
|
600
|
+
- **AppShell** — Basic application shell layout
|
|
601
|
+
- `header: React.ReactNode` — Header component
|
|
602
|
+
- `sidebar: React.ReactNode` — Sidebar component
|
|
603
|
+
- `footer: React.ReactNode` — Footer component
|
|
604
|
+
- `navbar: React.ReactNode` — Navbar component (mobile bottom navigation)
|
|
605
|
+
- `padding: boolean` = true — Add padding to main content
|
|
606
|
+
- `centered: boolean` — Center main content horizontally
|
|
607
|
+
- `maxWidth: number | string` — Maximum width for centered content
|
|
608
|
+
- **AspectRatio** — Fixed ratio container
|
|
609
|
+
- `ratio: number` = 1 — Aspect ratio (e.g. 16 / 9, 1, 4 / 3)
|
|
610
|
+
- `children: React.ReactNode` (required) — Child content
|
|
611
|
+
- **BentoGrid** — Modern card grid
|
|
612
|
+
- `children: React.ReactNode` — Grid items (typically BentoGrid.Item elements)
|
|
613
|
+
- **Box** — Polymorphic box
|
|
614
|
+
- `as: C` — The component used for the root node. Either a string to use a HTML element or a component.
|
|
615
|
+
- `asChild: boolean` = false — If true, the box will be rendered as its child, merging its props onto that child.
|
|
616
|
+
- `p: number | WimSpacing` — Padding
|
|
617
|
+
- `pt: number | WimSpacing` — Padding top
|
|
618
|
+
- `pr: number | WimSpacing` — Padding right
|
|
619
|
+
- `pb: number | WimSpacing` — Padding bottom
|
|
620
|
+
- `pl: number | WimSpacing` — Padding left
|
|
621
|
+
- `px: number | WimSpacing` — Padding horizontal
|
|
622
|
+
- `py: number | WimSpacing` — Padding vertical
|
|
623
|
+
- `m: number | WimSpacing` — Margin
|
|
624
|
+
- `mt: number | WimSpacing` — Margin top
|
|
625
|
+
- `mr: number | WimSpacing` — Margin right
|
|
626
|
+
- `mb: number | WimSpacing` — Margin bottom
|
|
627
|
+
- `ml: number | WimSpacing` — Margin left
|
|
628
|
+
- `mx: number | WimSpacing` — Margin horizontal
|
|
629
|
+
- `my: number | WimSpacing` — Margin vertical
|
|
630
|
+
- `bg: T | (string & {})` — Background color
|
|
631
|
+
- `color: T | (string & {})` — Text color
|
|
632
|
+
- `w: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Width
|
|
633
|
+
- `h: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Height
|
|
634
|
+
- `radius: number | WimRadius` — Border radius
|
|
635
|
+
- `shadow: T | (string & {})` — Box shadow
|
|
636
|
+
- `display: React.CSSProperties["display"]` — Display
|
|
637
|
+
- `position: React.CSSProperties["position"]` — Position
|
|
638
|
+
- **Center** — Radial centering
|
|
639
|
+
- `inline: boolean` = false — Whether to use inline-flex
|
|
640
|
+
- `asChild: boolean` = false — If true, the box will be rendered as its child, merging its props onto that child.
|
|
641
|
+
- `p: number | WimSpacing` — Padding
|
|
642
|
+
- `pt: number | WimSpacing` — Padding top
|
|
643
|
+
- `pr: number | WimSpacing` — Padding right
|
|
644
|
+
- `pb: number | WimSpacing` — Padding bottom
|
|
645
|
+
- `pl: number | WimSpacing` — Padding left
|
|
646
|
+
- `px: number | WimSpacing` — Padding horizontal
|
|
647
|
+
- `py: number | WimSpacing` — Padding vertical
|
|
648
|
+
- `m: number | WimSpacing` — Margin
|
|
649
|
+
- `mt: number | WimSpacing` — Margin top
|
|
650
|
+
- `mr: number | WimSpacing` — Margin right
|
|
651
|
+
- `mb: number | WimSpacing` — Margin bottom
|
|
652
|
+
- `ml: number | WimSpacing` — Margin left
|
|
653
|
+
- `mx: number | WimSpacing` — Margin horizontal
|
|
654
|
+
- `my: number | WimSpacing` — Margin vertical
|
|
655
|
+
- `bg: T | (string & {})` — Background color
|
|
656
|
+
- `color: T | (string & {})` — Text color
|
|
657
|
+
- `w: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Width
|
|
658
|
+
- `h: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Height
|
|
659
|
+
- `radius: number | WimRadius` — Border radius
|
|
660
|
+
- `shadow: T | (string & {})` — Box shadow
|
|
661
|
+
- `display: React.CSSProperties["display"]` — Display
|
|
662
|
+
- `position: React.CSSProperties["position"]` — Position
|
|
663
|
+
- **Container** — Layout wrapper
|
|
664
|
+
- `size: "xs" | "sm" | "md" | "lg" | "xl" | number | string` = "lg" — Container max-width
|
|
665
|
+
- `fluid: boolean` = false — Whether the container should be fluid (100% width)
|
|
666
|
+
- `asChild: boolean` = false — If true, the box will be rendered as its child, merging its props onto that child.
|
|
667
|
+
- `p: number | WimSpacing` — Padding
|
|
668
|
+
- `pt: number | WimSpacing` — Padding top
|
|
669
|
+
- `pr: number | WimSpacing` — Padding right
|
|
670
|
+
- `pb: number | WimSpacing` — Padding bottom
|
|
671
|
+
- `pl: number | WimSpacing` — Padding left
|
|
672
|
+
- `px: number | WimSpacing` — Padding horizontal
|
|
673
|
+
- `py: number | WimSpacing` — Padding vertical
|
|
674
|
+
- `m: number | WimSpacing` — Margin
|
|
675
|
+
- `mt: number | WimSpacing` — Margin top
|
|
676
|
+
- `mr: number | WimSpacing` — Margin right
|
|
677
|
+
- `mb: number | WimSpacing` — Margin bottom
|
|
678
|
+
- `ml: number | WimSpacing` — Margin left
|
|
679
|
+
- `mx: number | WimSpacing` — Margin horizontal
|
|
680
|
+
- `my: number | WimSpacing` — Margin vertical
|
|
681
|
+
- `bg: T | (string & {})` — Background color
|
|
682
|
+
- `color: T | (string & {})` — Text color
|
|
683
|
+
- `w: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Width
|
|
684
|
+
- `h: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Height
|
|
685
|
+
- `radius: number | WimRadius` — Border radius
|
|
686
|
+
- `shadow: T | (string & {})` — Box shadow
|
|
687
|
+
- `display: React.CSSProperties["display"]` — Display
|
|
688
|
+
- `position: React.CSSProperties["position"]` — Position
|
|
689
|
+
- **Dashboard** — Arranges widgets in a configurable grid with an edit mode for adding, removing, and resizing them.
|
|
690
|
+
- `widgets: DashboardWidget[]` — Widget definitions to render.
|
|
691
|
+
- `editable: boolean` — Whether the dashboard is in edit mode (controlled).
|
|
692
|
+
- `defaultEditable: boolean` = false — Initial edit mode state (uncontrolled). Default: false.
|
|
693
|
+
- `onEditChange: (editable: boolean) => void` — Called when edit mode changes.
|
|
694
|
+
- `onRemove: (widgetId: string) => void` — Called when a widget is removed.
|
|
695
|
+
- `onAdd: () => void` — Called when the "Add Widget" button is clicked.
|
|
696
|
+
- `columns: number` = 3 — Number of columns. Default: 3.
|
|
697
|
+
- `gap: "xs" | "sm" | "md" | "lg" | "xl"` = "md" — Gap between widgets. Default: "md".
|
|
698
|
+
- `showEditToggle: boolean` = true — Show the edit toggle button in the header. Default: true.
|
|
699
|
+
- `label: string` — Dashboard heading label.
|
|
700
|
+
- **Divider** — Content separator
|
|
701
|
+
- `orientation: "horizontal" | "vertical"` = "horizontal" — Orientation of the divider
|
|
702
|
+
- `thickness: number` = 1 — Thickness of the line (px)
|
|
703
|
+
- **Flex** — Flexible layout
|
|
704
|
+
- `asChild: boolean` = false — If true, the flex will be rendered as its child, merging its props onto that child.
|
|
705
|
+
- `direction: "row" | "row-reverse" | "column" | "column-reverse"` = "row" — Flex direction
|
|
706
|
+
- `align: "start" | "center" | "end" | "stretch" | "baseline"` — Align-items
|
|
707
|
+
- `justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch"` — Justify-content
|
|
708
|
+
- `wrap: "nowrap" | "wrap" | "wrap-reverse"` — Flex-wrap
|
|
709
|
+
- `gap: number | WimSpacing` — Gap between children
|
|
710
|
+
- `inline: boolean` = false — Display inline-flex
|
|
711
|
+
- **Footer** — Lower navigation
|
|
712
|
+
- `bordered: boolean` — Border at the top
|
|
713
|
+
- `fluid: boolean` — Expand content to full width (disable the centered max-width container)
|
|
714
|
+
- `background: "primary" | "secondary" | "dark"` = "primary" — Background color
|
|
715
|
+
- **Grid** — Flexbox or CSS Grid system
|
|
716
|
+
- `asChild: boolean` = false — If true, the grid will be rendered as its child, merging its props onto that child.
|
|
717
|
+
The container-query wrapper div is preserved to maintain responsive column behaviour.
|
|
718
|
+
- `cols: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Number of columns (or a responsive object per breakpoint)
|
|
719
|
+
- `rows: number | string` — Number of rows or an explicit grid-template-rows value
|
|
720
|
+
- `gap: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Gap between cells (or a responsive object per breakpoint)
|
|
721
|
+
- `columnGap: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Gap between columns (or a responsive object per breakpoint)
|
|
722
|
+
- `rowGap: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Gap between rows (or a responsive object per breakpoint)
|
|
723
|
+
- `align: "start" | "center" | "end" | "stretch"` — Alignment of items along the block (vertical) axis
|
|
724
|
+
- `justify: "start" | "center" | "end" | "between" | "around" | "stretch"` — Justification of items along the inline (horizontal) axis
|
|
725
|
+
- `flow: "row" | "column" | "dense" | "row dense" | "column dense"` — Grid auto-flow direction
|
|
726
|
+
- `inline: boolean` = false — Whether to render as an inline grid
|
|
727
|
+
- **Group** — Flexible grouping
|
|
728
|
+
- `asChild: boolean` — If true, the group will be rendered as its child, merging its props onto that child.
|
|
729
|
+
- `align: "start" | "center" | "end" | "stretch" | "baseline"` = "center" — Vertical alignment
|
|
730
|
+
- `justify: "start" | "center" | "end" | "between" | "around" | "evenly"` = "start" — Horizontal alignment
|
|
731
|
+
- `gap: number | string` = 16 — Gap between elements
|
|
732
|
+
- `wrap: "nowrap" | "wrap" | "wrap-reverse"` = "wrap" — Whether to wrap children
|
|
733
|
+
- `grow: boolean` = false — Whether items should grow to fill available space
|
|
734
|
+
- **Header** — Upper navigation
|
|
735
|
+
- `fixed: boolean` — Fixed position at the top
|
|
736
|
+
- `sticky: boolean` — Sticky position at the top
|
|
737
|
+
- `bordered: boolean` — Border at the bottom
|
|
738
|
+
- `glass: boolean` — Glassmorphism effect
|
|
739
|
+
- `fluid: boolean` — Expand content to full width (disable the centered max-width container)
|
|
740
|
+
- `background: "primary" | "secondary" | "transparent"` = "primary" — Background color
|
|
741
|
+
- **InteractiveArea** — Interactive empty/drop zone area
|
|
742
|
+
- `title: ReactNode` — Area title
|
|
743
|
+
- `description: ReactNode` — Area description
|
|
744
|
+
- `icon: ReactNode` — Icon to display
|
|
745
|
+
- `actions: ReactNode` — Action elements (buttons, etc.)
|
|
746
|
+
- `variant: "dashed" | "solid" | "none"` = "dashed" — Border variant
|
|
747
|
+
- `bgVariant: "default" | "transparent" | "muted"` = "default" — Background variant
|
|
748
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size variation
|
|
749
|
+
- `isDragging: boolean` = false — Whether the area is currently in a dragging state (for dropzone)
|
|
750
|
+
- `isClickable: boolean` = false — Whether the area is clickable
|
|
751
|
+
- `disabled: boolean` = false — Whether the area is disabled
|
|
752
|
+
- `styles: { inner?: string; icon?: string; title?: string; description?: string; content?: string; actions?: string; }` — Custom styles for internal parts
|
|
753
|
+
- **Masonry** — Waterfall grid
|
|
754
|
+
- `columns: number` = 3 — Number of columns
|
|
755
|
+
- `spacing: number | string` = 16 — Spacing between items
|
|
756
|
+
- **Navbar** — Primary navigation
|
|
757
|
+
- `fixed: boolean` — Whether the navbar is fixed to the viewport
|
|
758
|
+
- `sticky: boolean` — Whether the navbar sticks to the top while scrolling
|
|
759
|
+
- `transparent: boolean` — Whether the navbar background is transparent
|
|
760
|
+
- `glass: boolean` — Whether to apply the frosted-glass effect
|
|
761
|
+
- `bordered: boolean` — Whether to show a bottom border
|
|
762
|
+
- `fluid: boolean` — Expand content to full width (disable the centered max-width container)
|
|
763
|
+
- `defaultMenuOpen: boolean` = false — Initial open state of the mobile menu (uncontrolled)
|
|
764
|
+
- `isMenuOpen: boolean` — Open state of the mobile menu (controlled)
|
|
765
|
+
- `onMenuOpenChange: (isOpen: boolean) => void` — Callback when the mobile menu open state changes
|
|
766
|
+
- **ScrollArea** — A custom scrollbar component that provides high-performance, cross-browser consistent themes while maintaining a native-like feel.
|
|
767
|
+
- `text: React.ReactNode` — Content to display (alternative to children)
|
|
768
|
+
- `children: React.ReactNode` — Content to display
|
|
769
|
+
- `scrollAxis: "x" | "y" | "both"` = "y" — Axis along which scrolling is allowed
|
|
770
|
+
- `maxHeight: string` — Maximum height before scrolling (a CSS value, so units other than px are supported)
|
|
771
|
+
- **Sidebar** — A collapsible navigation or informational panel on the side of the screen
|
|
772
|
+
- `fixed: boolean` — Fixed position
|
|
773
|
+
- `collapsed: boolean` — Collapsed state
|
|
774
|
+
- `width: number | string` = 260 — Width when expanded
|
|
775
|
+
- `bordered: boolean` = true — Border at the right
|
|
776
|
+
- `responsive: boolean` = true — Enable responsive behavior (mobile drawer)
|
|
777
|
+
- `mobileOpen: boolean` — Mobile drawer open state
|
|
778
|
+
- `onOverlayClick: () => void` — Callback when overlay is clicked
|
|
779
|
+
- **SimpleGrid** — Responsive fixed grid
|
|
780
|
+
- `cols: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` = 1 — Number of columns (or a responsive object per breakpoint)
|
|
781
|
+
- `spacing: number | string` = 16 — Spacing between cells
|
|
782
|
+
- `verticalSpacing: number | string` — Vertical spacing between rows (defaults to `spacing`)
|
|
783
|
+
- `minChildWidth: number | string` — Minimum width of each child; columns wrap automatically to fit
|
|
784
|
+
- **Splitter** — Split and resize panels
|
|
785
|
+
- `orientation: "horizontal" | "vertical"` = "horizontal" — The orientation of the splitter.
|
|
786
|
+
- `children: React.ReactNode` (required) — The components to render within the splitter. Usually a combination of `Splitter.Panel` and `Splitter.Handle`.
|
|
787
|
+
- **Stack** — Vertical/Horizontal alignment
|
|
788
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
789
|
+
- `gap: number | string` = "md" — Gap between children. Can be a number (px) or a spacing token (e.g., 'sm', 'md', 'lg').
|
|
790
|
+
- `direction: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` = "column" — Stack direction
|
|
791
|
+
- `align: "start" | "center" | "end" | "stretch" | "baseline" | ReactCSSProperties["alignItems"]` — Align-items
|
|
792
|
+
- `justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | ReactCSSProperties["justifyContent"]` — Justify-content
|
|
793
|
+
- `wrap: boolean | React.CSSProperties["flexWrap"]` — Whether children should wrap
|
|
794
|
+
- `p: number | WimSpacing` — Padding
|
|
795
|
+
- `pt: number | WimSpacing` — Padding top
|
|
796
|
+
- `pr: number | WimSpacing` — Padding right
|
|
797
|
+
- `pb: number | WimSpacing` — Padding bottom
|
|
798
|
+
- `pl: number | WimSpacing` — Padding left
|
|
799
|
+
- `px: number | WimSpacing` — Padding horizontal
|
|
800
|
+
- `py: number | WimSpacing` — Padding vertical
|
|
801
|
+
- `m: number | WimSpacing` — Margin
|
|
802
|
+
- `mt: number | WimSpacing` — Margin top
|
|
803
|
+
- `mr: number | WimSpacing` — Margin right
|
|
804
|
+
- `mb: number | WimSpacing` — Margin bottom
|
|
805
|
+
- `ml: number | WimSpacing` — Margin left
|
|
806
|
+
- `mx: number | WimSpacing` — Margin horizontal
|
|
807
|
+
- `my: number | WimSpacing` — Margin vertical
|
|
808
|
+
- `bg: T | (string & {})` — Background color
|
|
809
|
+
- `color: T | (string & {})` — Text color
|
|
810
|
+
- `w: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Width
|
|
811
|
+
- `h: T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; }` — Height
|
|
812
|
+
- `radius: number | WimRadius` — Border radius
|
|
813
|
+
- `shadow: T | (string & {})` — Box shadow
|
|
814
|
+
- `display: React.CSSProperties["display"]` — Display
|
|
815
|
+
- `position: React.CSSProperties["position"]` — Position
|
|
816
|
+
- **Toolbar** — Action strip for IconButton, ToggleGroup, and related controls with toolbar keyboard navigation.
|
|
817
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child, merging its props onto that child.
|
|
818
|
+
- `size: ComponentSizeBasic` = "md" — Visual density for padding and gap. Cascades to `--wim-toolbar-*` CSS variables.
|
|
819
|
+
@default "md"
|
|
820
|
+
- `orientation: "horizontal" | "vertical"` = "horizontal" — Layout axis of the toolbar.
|
|
821
|
+
@default "horizontal"
|
|
822
|
+
- **Transition** — Utilities for managing smooth enter and leave animations with CSS classes
|
|
823
|
+
- `show: boolean` (required) — Whether the content is shown (drives the enter/leave transitions)
|
|
824
|
+
- `children: React.ReactNode` (required) — Content to transition
|
|
825
|
+
- `preset: "fade" | "scale" | "slide-right" | "slide-left" | "slide-top" | "slide-bottom"` — Preset transition (fade, scale, slide-*)
|
|
826
|
+
- `enter: string` = "" — Class applied during the enter transition
|
|
827
|
+
- `enterFrom: string` = "" — Class applied at the start of the enter transition
|
|
828
|
+
- `enterTo: string` = "" — Class applied at the end of the enter transition
|
|
829
|
+
- `leave: string` = "" — Class applied during the leave transition
|
|
830
|
+
- `leaveFrom: string` = "" — Class applied at the start of the leave transition
|
|
831
|
+
- `leaveTo: string` = "" — Class applied at the end of the leave transition
|
|
832
|
+
- `unmount: boolean` = true — Whether to unmount the content when hidden
|
|
833
|
+
- `appear: boolean` = false — Whether to run the enter transition on initial mount
|
|
834
|
+
- `className: string` — Additional class names
|
|
835
|
+
- **VisuallyHidden** — Hide content visually while keeping it accessible to screen readers
|
|
836
|
+
- `children: React.ReactNode` (required) — Content that is visually hidden but still read out by screen readers.
|
|
837
|
+
- **Watermark** — Translucent text or images overlaid on content to indicate ownership or status
|
|
838
|
+
- `content: string | string[]` — Text content of the watermark (a string or multiple lines)
|
|
839
|
+
- `image: string` — Image URL used as the watermark instead of text
|
|
840
|
+
- `width: number` — Width of a single watermark tile (px)
|
|
841
|
+
- `height: number` — Height of a single watermark tile (px)
|
|
842
|
+
- `rotate: number` — Rotation angle of the watermark (degrees)
|
|
843
|
+
- `zIndex: number` — z-index of the watermark layer
|
|
844
|
+
- `opacity: number` — Opacity of the watermark
|
|
845
|
+
- `gap: [number, number]` — Gap between watermark tiles [x, y] (px)
|
|
846
|
+
- `offset: [number, number]` — Offset of the watermark pattern [x, y] (px)
|
|
847
|
+
- `children: React.ReactNode` — Content overlaid by the watermark
|
|
848
|
+
- `className: string` — Additional class names
|
|
849
|
+
|
|
850
|
+
### form — `import { … } from "wimui/form"`
|
|
851
|
+
|
|
852
|
+
- **Button** — Action triggers
|
|
853
|
+
- `asChild: boolean` = false — If true, the button will be rendered as its child, merging its props onto that child.
|
|
854
|
+
Useful for using the button styles with Link components (e.g. from React Router or Next.js).
|
|
855
|
+
- `backgroundColor: T | (string & {})` — Overrides the button background color with a design token. Usually the `variant` prop is enough; use this prop only as a last resort.
|
|
856
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
|
|
857
|
+
- `variant: "solid" | "outline" | "ghost"` = "outline" — Visual style variant of the button
|
|
858
|
+
- `intent: ButtonIntent` = "default" — Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute.
|
|
859
|
+
- `icon: React.ComponentProps<typeof Icon>["name"] | React.ReactNode` — Icon name or custom icon element
|
|
860
|
+
- `iconPosition: "left" | "right"` = "left" — Position of the icon relative to the label
|
|
861
|
+
- `loading: boolean` = false — Whether to show a loading indicator and disable interaction
|
|
862
|
+
- `justify: "start" | "center" | "end" | "between"` = "center" — Horizontal alignment of the button content
|
|
863
|
+
- `animateWidth: boolean` = false — Whether to animate the width change when label changes
|
|
864
|
+
- `fullWidth: boolean` = false — Whether the button should take up the full width of its container
|
|
865
|
+
- `styles: { root?: string; loader?: string; icon?: string; }` — Custom styles for internal parts
|
|
866
|
+
- `className: string` — Additional class names
|
|
867
|
+
- **ButtonGroup** — Group of buttons
|
|
868
|
+
- `children: React.ReactNode` (required) — Buttons to group
|
|
869
|
+
- `gap: string` = "8px" — Gap between buttons (ignored when joined)
|
|
870
|
+
- `className: string` — Additional class names
|
|
871
|
+
- `joined: boolean` = false — Whether to join the buttons into a single connected unit
|
|
872
|
+
- `variant: "solid" | "outline" | "ghost"` — Variant applied to all child buttons
|
|
873
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
874
|
+
- **Cascader** — Hierarchical selection
|
|
875
|
+
- `options: CascaderOption[]` = [] — Hierarchical options to select from
|
|
876
|
+
- `value: string[]` — Selected value path (controlled)
|
|
877
|
+
- `onChange: (value: string[], selectedOptions: CascaderOption[]) => void` — Callback when the selection changes
|
|
878
|
+
- `placeholder: React.ReactNode` — Placeholder shown when nothing is selected
|
|
879
|
+
- `label: React.ReactNode` — Field label
|
|
880
|
+
- `error: string` — Error message
|
|
881
|
+
- `required: boolean` — Whether to show the required indicator
|
|
882
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
883
|
+
- `className: string` — Additional class names
|
|
884
|
+
- `disabled: boolean` = false — Whether the field is disabled
|
|
885
|
+
- `defaultValue: string[]` — Initially selected value path (uncontrolled)
|
|
886
|
+
- `id: string` — Unique ID for the component
|
|
887
|
+
- `expandTrigger: "click" | "hover"` = "click" — Expand trigger mode
|
|
888
|
+
- `separator: string` = " / " — Custom separator for the display value
|
|
889
|
+
- `allowClear: boolean` = false — Whether to show a clear button when a value is selected
|
|
890
|
+
- `aria-label: string` — Accessible label for the trigger when no visible label is provided
|
|
891
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
892
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
893
|
+
- **Checkbox** — Multiple choice
|
|
894
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
895
|
+
- `children: React.ReactNode` — Label content rendered next to the checkbox
|
|
896
|
+
- `indeterminate: boolean` = false — Whether to show the indeterminate (mixed) state
|
|
897
|
+
- `error: boolean` = false — Whether to display as an error state (aria-invalid is applied)
|
|
898
|
+
- **CheckboxGroup** — Shared state checkboxes
|
|
899
|
+
- `options: Option[]` (required) — List of checkbox options
|
|
900
|
+
- `value: string[]` — Selected values (controlled)
|
|
901
|
+
- `defaultValue: string[]` = [] — Initially selected values (uncontrolled)
|
|
902
|
+
- `onChange: (value: string[]) => void` — Callback when the selected values change
|
|
903
|
+
- `direction: "vertical" | "horizontal"` = "vertical" — Layout direction of the checkboxes
|
|
904
|
+
- `name: string` — Name attribute shared by the checkbox inputs
|
|
905
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
906
|
+
- `label: string` — Group label
|
|
907
|
+
- `error: string` — Error message
|
|
908
|
+
- `required: boolean` — Whether to show the required indicator
|
|
909
|
+
- `disabled: boolean` — Whether the whole group is disabled
|
|
910
|
+
- **ColorInput** — Input with color preview
|
|
911
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
912
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
913
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
914
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
915
|
+
- `rightIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the right side
|
|
916
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
917
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
918
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
919
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
920
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
921
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
922
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
923
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
924
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
925
|
+
- `label: React.ReactNode` — Field label
|
|
926
|
+
- `error: string` — Error message
|
|
927
|
+
- `required: boolean` — Whether to show the required indicator
|
|
928
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
929
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
930
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
931
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
932
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
933
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
934
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
935
|
+
- **ColorPicker** — Color selection picker
|
|
936
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
937
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
938
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
939
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
940
|
+
- `rightIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the right side
|
|
941
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
942
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
943
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
944
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
945
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
946
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
947
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
948
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
949
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
950
|
+
- `label: React.ReactNode` — Field label
|
|
951
|
+
- `error: string` — Error message
|
|
952
|
+
- `required: boolean` — Whether to show the required indicator
|
|
953
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
954
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
955
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
956
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
957
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
958
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
959
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
960
|
+
- **Combobox** — Select with search
|
|
961
|
+
- `options: ComboboxOption[]` = [] — List of suggestion options
|
|
962
|
+
- `onChange: (option: ComboboxOption) => void` — Callback when an option is selected
|
|
963
|
+
- `placeholder: string` — Placeholder for the input
|
|
964
|
+
- `label: React.ReactNode` — Field label
|
|
965
|
+
- `error: string` — Error message
|
|
966
|
+
- `required: boolean` — Whether to show the required indicator
|
|
967
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
968
|
+
- `showSearchIcon: boolean` = true — Whether to show the search icon
|
|
969
|
+
- `allowClear: boolean` = true — Whether to show a clear button when value is present
|
|
970
|
+
- `defaultValue: string` = "" — Initial input value (uncontrolled)
|
|
971
|
+
- `className: string` — Additional class names
|
|
972
|
+
- `disabled: boolean` = false — Whether the field is disabled
|
|
973
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
974
|
+
- `id: string` — Unique ID for the component
|
|
975
|
+
- `labels: { noResults?: React.ReactNode; }` = {} — Labels for internationalization
|
|
976
|
+
- **CopyButton** — Copy to clipboard
|
|
977
|
+
- `value: string` (required) — Text copied to the clipboard
|
|
978
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
|
|
979
|
+
- `className: string` — Additional class names
|
|
980
|
+
- `aria-label: string` — Accessible label for the button
|
|
981
|
+
- `copyLabel: string` — Tooltip label before copying
|
|
982
|
+
- `copiedLabel: string` — Tooltip label after copying
|
|
983
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
984
|
+
- `children: React.ReactNode` — Trigger content when `asChild` is true
|
|
985
|
+
- **CounterTextarea** — Textarea with character count display
|
|
986
|
+
- `asChild: boolean` — If true, the textarea element will be rendered as its child, merging its props onto that child.
|
|
987
|
+
- `intent: FieldIntent` — Semantic intent of the field (e.g. error state)
|
|
988
|
+
- `variant: "outline" | "ghost"` — Visual style variant of the field
|
|
989
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
990
|
+
- `fieldSizing: "fixed" | "content"` — Sizing behavior: "fixed" keeps the height, "content" grows with the text
|
|
991
|
+
- `label: string` — Field label
|
|
992
|
+
- `error: string` — Error message
|
|
993
|
+
- `required: boolean` — Whether to show the required indicator
|
|
994
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
995
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
996
|
+
- `showCount: boolean` = true — Whether to show the character count.
|
|
997
|
+
@default true
|
|
998
|
+
- `counterPosition: "bottom" | "overlay"` = "bottom" — Position of the counter.
|
|
999
|
+
"bottom" (default) shows it below the textarea.
|
|
1000
|
+
"overlay" shows it inside the textarea (bottom-right).
|
|
1001
|
+
@default "bottom"
|
|
1002
|
+
- **CreditCardInput** — Payment card input with brand detection
|
|
1003
|
+
- `onBrandChange: (brand: CreditCardBrand) => void` — Callback when the card brand is detected.
|
|
1004
|
+
- `asChild: boolean` = false — Whether to render as a child component.
|
|
1005
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1006
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1007
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1008
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1009
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1010
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1011
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1012
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
1013
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
1014
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
1015
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1016
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1017
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1018
|
+
- `label: React.ReactNode` — Field label
|
|
1019
|
+
- `error: string` — Error message
|
|
1020
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1021
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1022
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1023
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1024
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1025
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1026
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1027
|
+
- **DatePicker** — Date selection
|
|
1028
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1029
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1030
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1031
|
+
- `value: Date | null` — Selected date value (`null` = cleared; omit/`undefined` = uncontrolled)
|
|
1032
|
+
- `defaultValue: Date | null` — Default date value (uncontrolled)
|
|
1033
|
+
- `onChange: (date: Date | null) => void` — Callback when date changes (`null` when cleared)
|
|
1034
|
+
- `format: string` = "YYYY-MM-DD" — Date format for display (default: 'YYYY-MM-DD')
|
|
1035
|
+
- `clearable: boolean` = true — Show clear button
|
|
1036
|
+
- `placeholder: string` — Placeholder text
|
|
1037
|
+
- `minDate: Date` — Minimum selectable date
|
|
1038
|
+
- `maxDate: Date` — Maximum selectable date
|
|
1039
|
+
- `disabledDates: Date[]` — Disabled dates
|
|
1040
|
+
- `label: string` — Field label
|
|
1041
|
+
- `error: string` — Error message
|
|
1042
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1043
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1044
|
+
- `labels: { placeholder?: string; }` — Labels for manual translation
|
|
1045
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1046
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1047
|
+
- **DateRangePicker** — Date range selection
|
|
1048
|
+
- `startProps: React.ComponentProps<typeof DatePicker>` — Props passed to the start-date DatePicker
|
|
1049
|
+
- `endProps: React.ComponentProps<typeof DatePicker>` — Props passed to the end-date DatePicker
|
|
1050
|
+
- `className: string` — Additional class names
|
|
1051
|
+
- `label: string` — Field label
|
|
1052
|
+
- `error: string` — Error message
|
|
1053
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1054
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1055
|
+
- **Dropzone** — Drag & drop files
|
|
1056
|
+
- `label: React.ReactNode` — Field label.
|
|
1057
|
+
- `description: React.ReactNode` — Description text shown in the drag-and-drop area.
|
|
1058
|
+
- `accept: string` — Accepted file types (e.g. ".jpg,.png").
|
|
1059
|
+
- `multiple: boolean` = false — Whether multiple files can be selected.
|
|
1060
|
+
- `disabled: boolean` = false — Whether the component is disabled.
|
|
1061
|
+
- `onChange: (files: FileList | null) => void` — Callback when files are selected.
|
|
1062
|
+
- `className: string` — Additional class names.
|
|
1063
|
+
- `iconName: React.ComponentProps<typeof Icon>["name"]` = "UploadIcon" — Icon name shown in the drop area.
|
|
1064
|
+
- `error: string` — Error message
|
|
1065
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1066
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1067
|
+
- `size: InteractiveAreaProps["size"]` = "md" — Size of the drop area
|
|
1068
|
+
- **FieldError** — Validation messages
|
|
1069
|
+
- `content: string` (required) — Error message text
|
|
1070
|
+
- `className: string` — Additional class names
|
|
1071
|
+
- `id: string` — ID of the error message element
|
|
1072
|
+
- **Fieldset** — Form grouping
|
|
1073
|
+
- `children: React.ReactNode` (required) — Form elements to group
|
|
1074
|
+
- `disabled: boolean` = false — Whether all contained form elements are disabled
|
|
1075
|
+
- `variant: "default" | "full-width"` = "default" — Visual variant of the fieldset
|
|
1076
|
+
- `className: string` — Additional class names
|
|
1077
|
+
- **FieldTemplate** — Standardizes label placement, required markings, and error message display for all form-related components.
|
|
1078
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1079
|
+
- `label: React.ReactNode` — Label text of the field
|
|
1080
|
+
- `error: string` — Error message
|
|
1081
|
+
- `children: React.ReactNode` (required) — Main content of the field
|
|
1082
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1083
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1084
|
+
@default "vertical"
|
|
1085
|
+
- `labelId: string` — ID of the label element for accessibility
|
|
1086
|
+
- `htmlFor: string` — ID of the element the label points to
|
|
1087
|
+
- `errorId: string` — ID of the error message element
|
|
1088
|
+
- `styles: { root?: string; labelWrapper?: string; label?: string; content?: string; error?: string; }` — Custom styles for internal parts
|
|
1089
|
+
- **FileUpload** — File selection
|
|
1090
|
+
- `label: React.ReactNode` — Field label
|
|
1091
|
+
- `buttonLabel: React.ReactNode` — Label of the file selection button
|
|
1092
|
+
- `noFileLabel: React.ReactNode` — Text shown when no file is selected
|
|
1093
|
+
- `accept: string` — Accepted file types (e.g. ".jpg,.png")
|
|
1094
|
+
- `multiple: boolean` = false — Whether multiple files can be selected
|
|
1095
|
+
- `disabled: boolean` = false — Whether the component is disabled
|
|
1096
|
+
- `onChange: (files: FileList | null) => void` — Callback when files are selected
|
|
1097
|
+
- `className: string` — Additional class names
|
|
1098
|
+
- `iconName: React.ComponentProps<typeof Icon>["name"]` — Icon name shown on the button
|
|
1099
|
+
- `iconPosition: "left" | "right"` — Position of the icon relative to the button label
|
|
1100
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
|
|
1101
|
+
- `error: string` — Error message
|
|
1102
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1103
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1104
|
+
- **FloatButton** — Floating action buttons
|
|
1105
|
+
- `asChild: boolean` = false — If true, the button will be rendered as its child, merging its props onto that child.
|
|
1106
|
+
- `iconName: "CircleIcon" | "SquareIcon" | "LoadingIcon" | "ExternalLinkIcon" | "ArrowUpIcon" | string` = "CircleIcon" — Icon name from the library
|
|
1107
|
+
- `variant: "default" | "primary" | "glass"` — Variant of the button
|
|
1108
|
+
- `intent: ButtonIntent` = "default" — Intent of the button (semantic meaning)
|
|
1109
|
+
- `shape: "circle" | "square"` = "circle" — Shape of the button
|
|
1110
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
|
|
1111
|
+
- `label: React.ReactNode` — Label text for extended FAB
|
|
1112
|
+
- `shrink: boolean` = false — Whether to shrink the extended FAB (hide label)
|
|
1113
|
+
- `position: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "static"` = "bottom-right" — Position of the button
|
|
1114
|
+
- `description: React.ReactNode` — Description for tooltip
|
|
1115
|
+
- `badge: number | boolean` — Badge content (number or dot)
|
|
1116
|
+
- `backTop: boolean` = false — If true, the button will scroll to the top of the page when clicked
|
|
1117
|
+
- `visibilityHeight: number` = 400 — Visibility threshold for backTop (in pixels)
|
|
1118
|
+
- `className: string` — Additional class names
|
|
1119
|
+
- `style: React.CSSProperties` — Style attribute
|
|
1120
|
+
- `aria-label: string` — Aria label for accessibility
|
|
1121
|
+
- **IconButton** — Icon-only button
|
|
1122
|
+
- `iconName: React.ComponentProps<typeof Icon>["name"]` (required) — Icon name to display
|
|
1123
|
+
- `aria-label: string` (required) — Accessible label for the icon-only button
|
|
1124
|
+
- **ImageCropper** — Front-end image crop and rotate tool
|
|
1125
|
+
- `src: string` — URL or data URL of the image to crop
|
|
1126
|
+
- `aspectRatio: number` = 1 — Aspect ratio (width / height); 1 produces a square
|
|
1127
|
+
- `circular: boolean` = false — Whether to display a circular crop area (for profile images)
|
|
1128
|
+
- `onCrop: (dataUrl: string) => void` — Callback when the crop result is finalized
|
|
1129
|
+
- `showRotation: boolean` = true — Whether to show the rotation button
|
|
1130
|
+
- `showZoom: boolean` = true — Whether to show the zoom slider
|
|
1131
|
+
- `showApplyButton: boolean` = true — Whether to show the apply button
|
|
1132
|
+
- `applyLabel: string` — Label of the apply button
|
|
1133
|
+
- `onApply: (dataUrl: string) => void` — Callback when the crop is applied (after confirming in the dialog)
|
|
1134
|
+
- **InlineEdit** — A component that allows users to switch between a view-only mode and an editable mode in-place.
|
|
1135
|
+
- `value: string` — Current text (controlled)
|
|
1136
|
+
- `defaultValue: string` — Initial text (uncontrolled)
|
|
1137
|
+
- `onChange: (value: string) => void` — Callback when the text changes while editing
|
|
1138
|
+
- `onSave: (value: string) => void` — Callback when the edit is confirmed
|
|
1139
|
+
- `onCancel: () => void` — Callback when the edit is cancelled
|
|
1140
|
+
- `onEdit: () => void` — Callback when editing starts
|
|
1141
|
+
- `placeholder: string` — Placeholder shown when the text is empty
|
|
1142
|
+
- `disabled: boolean` = false — Whether editing is disabled
|
|
1143
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1144
|
+
- `label: React.ReactNode` — Accessible label for the text and edit button
|
|
1145
|
+
- **Input** — Single-line input fields for text, numbers, or emails
|
|
1146
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1147
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1148
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1149
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1150
|
+
- `rightIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the right side
|
|
1151
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1152
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1153
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1154
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
1155
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
1156
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
1157
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1158
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1159
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1160
|
+
- `label: React.ReactNode` — Field label
|
|
1161
|
+
- `error: string` — Error message
|
|
1162
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1163
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1164
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1165
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1166
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1167
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1168
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1169
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1170
|
+
- **InputBase** — Standardizes the visual container, icon slots (Prefix/Suffix), and clear button behavior for text-based inputs.
|
|
1171
|
+
- `children: React.ReactNode` (required) — Inner form control element(s) wrapped by the shell
|
|
1172
|
+
- `intent: FieldIntent | WimIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1173
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1174
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1175
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1176
|
+
- `className: string` — Additional class names
|
|
1177
|
+
- `disabled: boolean` — Whether the field is disabled
|
|
1178
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1179
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1180
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1181
|
+
- `leftIconAriaLabel: string` — Aria label for the left icon button
|
|
1182
|
+
- `rightIcons: InputBaseIcon[]` = [] — Icons to display on the right side
|
|
1183
|
+
- `allowClear: boolean` — Whether to show a clear button when value is present
|
|
1184
|
+
- `hasValue: boolean` — Whether the field currently has a value (controls clear button visibility)
|
|
1185
|
+
- `onClear: () => void` — Callback when the clear button is clicked
|
|
1186
|
+
- `clearAriaLabel: string` — Aria label for the clear button
|
|
1187
|
+
- `styles: { root?: string; inner?: string; icon?: string; icons?: string; iconItem?: string; iconButton?: string; }` — Custom styles for internal parts
|
|
1188
|
+
- **InputGroup** — Inputs with icons/labels
|
|
1189
|
+
- `children: React.ReactNode` (required) — Inputs, buttons, and add-ons to combine into one unit
|
|
1190
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1191
|
+
- `className: string` — Additional class names
|
|
1192
|
+
- **InputMask** — Formatted inputs
|
|
1193
|
+
- `mask: string` (required) — Mask pattern ('9': digit, 'a': letter, '*': alphanumeric; other characters are shown as-is)
|
|
1194
|
+
- `maskChar: string` = "_" — Placeholder character for unfilled mask positions
|
|
1195
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1196
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1197
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1198
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1199
|
+
- `rightIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the right side
|
|
1200
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1201
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1202
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1203
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
1204
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
1205
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
1206
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1207
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1208
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1209
|
+
- `label: React.ReactNode` — Field label
|
|
1210
|
+
- `error: string` — Error message
|
|
1211
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1212
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1213
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1214
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1215
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1216
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1217
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1218
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1219
|
+
- **LinkButton** — Anchor styled as button
|
|
1220
|
+
- `iconPosition: "left" | "right"` = "left" — Position of the icon relative to the label
|
|
1221
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
|
|
1222
|
+
- `variant: "solid" | "outline" | "ghost"` = "outline" — Visual style variant of the button
|
|
1223
|
+
- `intent: ButtonIntent` = "default" — Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute.
|
|
1224
|
+
- `justify: "start" | "center" | "end" | "between"` = "center" — Horizontal alignment of the button content
|
|
1225
|
+
- `fullWidth: boolean` = false — Whether the button should take up the full width of its container
|
|
1226
|
+
- **Mentions** — @ / # suggestions
|
|
1227
|
+
- `options: MentionOption[]` (required) — Mention candidates to suggest
|
|
1228
|
+
- `trigger: string` = "@" — Character that triggers the suggestion list
|
|
1229
|
+
- `onSelect: (option: MentionOption) => void` — Callback when a suggestion is selected
|
|
1230
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1231
|
+
- **MultiSelect** — Multiple selection
|
|
1232
|
+
- `options: MultiSelectOption[]` = [] — List of options
|
|
1233
|
+
- `value: string[]` — Selected values (controlled)
|
|
1234
|
+
- `onChange: (value: string[]) => void` — Callback when the selection changes
|
|
1235
|
+
- `placeholder: string` — Placeholder shown when nothing is selected
|
|
1236
|
+
- `label: string` — Field label
|
|
1237
|
+
- `error: string` — Error message
|
|
1238
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1239
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1240
|
+
- `className: string` — Additional class names
|
|
1241
|
+
- `disabled: boolean` = false — Whether the field is disabled
|
|
1242
|
+
- `defaultValue: string[]` = [] — Initially selected values (uncontrolled)
|
|
1243
|
+
- `allowClear: boolean` = false — Whether to show a clear button to remove all selections
|
|
1244
|
+
- `id: string` — Unique ID for the component
|
|
1245
|
+
- `aria-label: string` — Accessible label for the trigger when no visible label is provided
|
|
1246
|
+
- `aria-labelledby: string` — ID of the element that labels the field
|
|
1247
|
+
- `aria-describedby: string` — ID of the element that describes the field
|
|
1248
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1249
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1250
|
+
- **NumberInput** — Input with step adjustments
|
|
1251
|
+
- `mode: "number" | "text"` = "number" — 'number': uses the native type="number" (e.g. quantity steppers)
|
|
1252
|
+
'text': uses type="text" + inputmode (e.g. card numbers or IDs where leading zeros must be kept)
|
|
1253
|
+
- `hideSpinButton: boolean` = true — Whether to hide the spin buttons
|
|
1254
|
+
- `allowDecimal: boolean` = false — Whether to allow decimal points (effective only when mode="number")
|
|
1255
|
+
- `allowNegative: boolean` = false — Whether to allow negative numbers (effective only when mode="number")
|
|
1256
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1257
|
+
- **OtpInput** — One-time password fields
|
|
1258
|
+
- `length: number` = 6 — Number of digits
|
|
1259
|
+
- `value: string` = "" — Current value (controlled)
|
|
1260
|
+
- `onChange: (value: string) => void` — Callback when the value changes
|
|
1261
|
+
- `disabled: boolean` = false — Whether the input is disabled
|
|
1262
|
+
- `error: string` — Error message
|
|
1263
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1264
|
+
- `label: React.ReactNode` — Field label
|
|
1265
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1266
|
+
- `labels: { digitAriaLabel?: (index: number) => string; }` = {} — Labels for internationalization
|
|
1267
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1268
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1269
|
+
- **PasswordInput** — Password with toggle
|
|
1270
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1271
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1272
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1273
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1274
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1275
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1276
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1277
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
1278
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1279
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1280
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1281
|
+
- `label: React.ReactNode` — Field label
|
|
1282
|
+
- `error: string` — Error message
|
|
1283
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1284
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1285
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1286
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1287
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1288
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1289
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1290
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1291
|
+
- **PasswordStrength** — Visual meter to indicate password security level
|
|
1292
|
+
- `password: string` = "" — Password string to evaluate
|
|
1293
|
+
- `score: 0 | 1 | 2 | 3 | 4` — Strength score (the default calculation is used when omitted)
|
|
1294
|
+
0: very weak, 1: weak, 2: fair, 3: strong, 4: very strong
|
|
1295
|
+
- `showLabel: boolean` = true — Whether to show the strength label
|
|
1296
|
+
- `calculateLevel: (password: string) => PasswordStrengthLevel` = (password: string): PasswordStrengthLevel => {
|
|
1297
|
+
if (!password) return 0;
|
|
1298
|
+
let score = 0;
|
|
1299
|
+
if (password.length >= 8) score++;
|
|
1300
|
+
if (/[A-Z]/.test(password)) score++;
|
|
1301
|
+
if (/[0-9]/.test(password)) score++;
|
|
1302
|
+
if (/[^A-Za-z0-9]/.test(password)) score++;
|
|
1303
|
+
return score as PasswordStrengthLevel;
|
|
1304
|
+
} — Custom strength calculation function
|
|
1305
|
+
- **PhoneInput** — International phone number input
|
|
1306
|
+
- `value: string` = "" — Phone number value (the number part, excluding the country dial code).
|
|
1307
|
+
- `onChange: (value: string) => void` — Callback when the phone number changes.
|
|
1308
|
+
- `countryCode: string` = "US" — Selected country code (e.g. "JP", "US").
|
|
1309
|
+
- `onCountryChange: (countryCode: string) => void` — Callback when the country code changes.
|
|
1310
|
+
- `placeholder: string` = "000-0000-0000" — Placeholder for the phone number input.
|
|
1311
|
+
- `disabled: boolean` = false — Whether the field is disabled.
|
|
1312
|
+
- `error: string` — Error message.
|
|
1313
|
+
- `required: boolean` = false — Whether to show the required indicator.
|
|
1314
|
+
- `label: string` — Field label.
|
|
1315
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field.
|
|
1316
|
+
- `className: string` — Additional class names.
|
|
1317
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent.
|
|
1318
|
+
- **QueryBuilder** — Visual builder for constructing complex search queries.
|
|
1319
|
+
- `fields: QueryField[]` (required) — Field definitions
|
|
1320
|
+
- `query: QueryGroup` — Current query state (controlled)
|
|
1321
|
+
- `defaultQuery: QueryGroup` — Default query state (uncontrolled)
|
|
1322
|
+
- `onChange: (query: QueryGroup) => void` — Callback when query changes
|
|
1323
|
+
- `maxDepth: number` = 3 — Maximum nesting depth
|
|
1324
|
+
- `className: string` — Additional class name
|
|
1325
|
+
- `id: string` — Unique ID for the component
|
|
1326
|
+
- `labels: QueryBuilderLabels` = {} — Labels for internationalization
|
|
1327
|
+
- **Radio** — Single choice
|
|
1328
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1329
|
+
- `children: React.ReactNode` — Label content rendered next to the radio
|
|
1330
|
+
- `error: boolean` = false — Whether to display as an error state (aria-invalid is not supported on the radio role, so it is applied on the RadioGroup side)
|
|
1331
|
+
- **RadioGroup** — Shared state radio buttons
|
|
1332
|
+
- `options: Option[]` (required) — List of radio options
|
|
1333
|
+
- `value: string` — Selected value (controlled)
|
|
1334
|
+
- `defaultValue: string` — Initially selected value (uncontrolled)
|
|
1335
|
+
- `onChange: (value: string) => void` — Callback when the selected value changes
|
|
1336
|
+
- `direction: "vertical" | "horizontal"` = "vertical" — Layout direction of the radio buttons
|
|
1337
|
+
- `name: string` — Name attribute shared by the radio inputs
|
|
1338
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1339
|
+
- `label: string` — Group label
|
|
1340
|
+
- `error: string` — Error message
|
|
1341
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1342
|
+
- `disabled: boolean` — Whether the whole group is disabled
|
|
1343
|
+
- **RangeSlider** — Range selection
|
|
1344
|
+
- `value: [number, number]` — Current value [min, max] (controlled)
|
|
1345
|
+
- `defaultValue: [number, number]` = [20, 80] — Default value [min, max] (uncontrolled)
|
|
1346
|
+
- `min: number` = 0 — Minimum value
|
|
1347
|
+
- `max: number` = 100 — Maximum value
|
|
1348
|
+
- `step: number` = 1 — Step value
|
|
1349
|
+
- `allowCross: boolean` = false — Whether both handles may hold the same value (they never cross)
|
|
1350
|
+
- `disabled: boolean` = false — Whether the slider is disabled
|
|
1351
|
+
- `onChange: (value: [number, number]) => void` — Callback when the value changes
|
|
1352
|
+
- `onAfterChange: (value: [number, number]) => void` — Callback when dragging ends
|
|
1353
|
+
- `className: string` — Additional class names
|
|
1354
|
+
- `name: string` — Name attribute
|
|
1355
|
+
- `label: string` — Accessible label
|
|
1356
|
+
- `error: string` — Error message
|
|
1357
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1358
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1359
|
+
- `id: string` — Custom ID
|
|
1360
|
+
- `aria-label: string` — Accessible label when no visible label is provided
|
|
1361
|
+
- `aria-labelledby: string` — ID of the element that labels the slider
|
|
1362
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1363
|
+
- **Rating** — Star rating
|
|
1364
|
+
- `value: number` — Current value (controlled)
|
|
1365
|
+
- `defaultValue: number` = 0 — Default value (uncontrolled)
|
|
1366
|
+
- `count: number` = 5 — Total number of stars
|
|
1367
|
+
- `allowHalf: boolean` = false — Whether to allow half stars
|
|
1368
|
+
- `disabled: boolean` = false — Whether the rating is disabled
|
|
1369
|
+
- `readOnly: boolean` = false — Read-only flag (display only; unlike disabled it is not grayed out)
|
|
1370
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the stars
|
|
1371
|
+
- `onChange: (value: number) => void` — Callback when the value changes
|
|
1372
|
+
- `className: string` — Additional class names
|
|
1373
|
+
- `label: React.ReactNode` — Accessible label
|
|
1374
|
+
- `error: string` — Error message
|
|
1375
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1376
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1377
|
+
- `labels: { star?: (count: number) => string; readonly?: (value: number, max: number) => string; }` = {} — Labels for internationalization
|
|
1378
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1379
|
+
- **RichTextEditor** — WYSIWYG rich text editor
|
|
1380
|
+
- `value: string` — HTML content (controlled)
|
|
1381
|
+
- `defaultValue: string` = "" — Initial HTML content (uncontrolled)
|
|
1382
|
+
- `onChange: (value: string) => void` — Callback when the content changes
|
|
1383
|
+
- `placeholder: string` — Placeholder shown when the editor is empty
|
|
1384
|
+
- `disabled: boolean` — Whether the editor is disabled
|
|
1385
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1386
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1387
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1388
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1389
|
+
- `minHeight: number | string` = 200 — Minimum height of the editing area
|
|
1390
|
+
- `label: React.ReactNode` — Field label
|
|
1391
|
+
- `error: string` — Error message
|
|
1392
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1393
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1394
|
+
- `className: string` — Additional class names
|
|
1395
|
+
- `id: string` — Unique ID for the component
|
|
1396
|
+
- `toolbar: RichTextEditorToolbarItem[]` = [
|
|
1397
|
+
"bold",
|
|
1398
|
+
"italic",
|
|
1399
|
+
"underline",
|
|
1400
|
+
"strikethrough",
|
|
1401
|
+
"separator",
|
|
1402
|
+
"h1",
|
|
1403
|
+
"h2",
|
|
1404
|
+
"h3",
|
|
1405
|
+
"separator",
|
|
1406
|
+
"ul",
|
|
1407
|
+
"ol",
|
|
1408
|
+
"separator",
|
|
1409
|
+
"link",
|
|
1410
|
+
"unlink",
|
|
1411
|
+
"separator",
|
|
1412
|
+
"removeFormat",
|
|
1413
|
+
] — Toolbar items to display, in order
|
|
1414
|
+
- `labels: { bold?: string; italic?: string; underline?: string; strikethrough?: string; h1?: string; h2?: string; h3?: string; ul?: string; ol?: string; link?: string; unlink?: string; removeFormat?: string; toolbar?: string; linkPrompt?: string; linkApply?: string; linkCancel?: string; }` = {} — Labels for internationalization
|
|
1415
|
+
- `aria-label: string` — Accessible label when no visible label is provided
|
|
1416
|
+
- `aria-labelledby: string` — ID of the element that labels the editor
|
|
1417
|
+
- **SearchInput** — Search with clear button
|
|
1418
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1419
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1420
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1421
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1422
|
+
- `rightIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the right side
|
|
1423
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1424
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1425
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1426
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
1427
|
+
- `allowClear: boolean` = false — Whether to show a clear button when value is present
|
|
1428
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
1429
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1430
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1431
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1432
|
+
- `label: React.ReactNode` — Field label
|
|
1433
|
+
- `error: string` — Error message
|
|
1434
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1435
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1436
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1437
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1438
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1439
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1440
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1441
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1442
|
+
- **SegmentedControl** — Button-style controls for switching between a small set of mutually exclusive options
|
|
1443
|
+
- `options: Option[]` (required) — List of segment options
|
|
1444
|
+
- `value: string` (required) — Selected value
|
|
1445
|
+
- `onChange: (value: string) => void` (required) — Callback when the selected value changes
|
|
1446
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the control
|
|
1447
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1448
|
+
- `className: string` — Additional class names
|
|
1449
|
+
- `label: string` — Accessible label
|
|
1450
|
+
- `error: string` — Error message
|
|
1451
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1452
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1453
|
+
- `disabled: boolean` = false — Whether the control is disabled
|
|
1454
|
+
- `asChild: boolean` = false — If true, merge radiogroup props onto the child element.
|
|
1455
|
+
- `children: React.ReactNode` — Optional children used when asChild is true
|
|
1456
|
+
- `id: string` — Unique ID for the component
|
|
1457
|
+
- `styles: { root?: string; item?: string; slider?: string; label?: string; }` — Custom styles for internal parts
|
|
1458
|
+
- **Select** — A dropdown menu for selecting one option from a predefined list
|
|
1459
|
+
- `options: SelectOption[] | SelectOptionGroup[]` = [] — List of options (flat or grouped)
|
|
1460
|
+
- `value: string` — Selected value (controlled)
|
|
1461
|
+
- `onChange: (value: string) => void` — Callback when the selected value changes
|
|
1462
|
+
- `placeholder: React.ReactNode` — Placeholder shown when nothing is selected
|
|
1463
|
+
- `label: string` — Field label
|
|
1464
|
+
- `disabled: boolean` = false — Whether the field is disabled
|
|
1465
|
+
- `defaultValue: string` — Initially selected value (uncontrolled)
|
|
1466
|
+
- `searchable: boolean` = false — Enable search/filtering functionality
|
|
1467
|
+
- `searchPlaceholder: string` — Placeholder text for search input
|
|
1468
|
+
- `filterOption: (option: SelectOption, searchValue: string) => boolean` — Custom filter function
|
|
1469
|
+
- `grouped: boolean` = false — Whether options are grouped
|
|
1470
|
+
- `allowClear: boolean` = false — Whether to show a clear button when a value is selected
|
|
1471
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1472
|
+
- `id: string` — Unique ID for the component
|
|
1473
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1474
|
+
- `error: string` — Error message
|
|
1475
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1476
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1477
|
+
- `noOptionsFoundLabel: string` — Label shown when no options match the search
|
|
1478
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1479
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1480
|
+
- `styles: { root?: string; trigger?: string; value?: string; dropdown?: string; list?: string; option?: string; search?: string; searchInput?: string; groupLabel?: string; separator?: string; empty?: string; inputBase?: React.ComponentProps<typeof InputBase>["styles"]; }` — Custom styles for internal parts
|
|
1481
|
+
- **SignaturePad** — Handwritten signature input
|
|
1482
|
+
- `width: number` = 400 — Width of the canvas
|
|
1483
|
+
- `height: number` = 200 — Height of the canvas
|
|
1484
|
+
- `penColor: string` = "var(--wim-color-text-primary)" — Color of the pen
|
|
1485
|
+
- `penWidth: number` = 2 — Width of the pen stroke
|
|
1486
|
+
- `onChange: (dataUrl: string | null) => void` — Callback when signature changes or is cleared
|
|
1487
|
+
- `clearLabel: React.ReactNode` — Custom label for the clear button
|
|
1488
|
+
- `disabled: boolean` = false — Whether the component is disabled
|
|
1489
|
+
- `className: string` — CSS class name
|
|
1490
|
+
- `style: React.CSSProperties` — Inline styles
|
|
1491
|
+
- `label: React.ReactNode` — Field label
|
|
1492
|
+
- `error: string` — Error message
|
|
1493
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1494
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1495
|
+
- `canvasAriaLabel: string` — Aria label for the canvas
|
|
1496
|
+
- **Slider** — An input to capture a numeric value from a specified range by dragging a knob
|
|
1497
|
+
- `value: number` — Current value (controlled)
|
|
1498
|
+
- `defaultValue: number` = 0 — Default value (uncontrolled)
|
|
1499
|
+
- `min: number` = 0 — Minimum value
|
|
1500
|
+
- `max: number` = 100 — Maximum value
|
|
1501
|
+
- `step: number` = 1 — Step value
|
|
1502
|
+
- `disabled: boolean` = false — Whether the slider is disabled
|
|
1503
|
+
- `onChange: (value: number) => void` — Callback when the value changes
|
|
1504
|
+
- `onAfterChange: (value: number) => void` — Callback when dragging ends
|
|
1505
|
+
- `name: string` — Name attribute
|
|
1506
|
+
- `label: React.ReactNode` — Accessible label
|
|
1507
|
+
- `error: string` — Error message
|
|
1508
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1509
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1510
|
+
- `id: string` — Custom ID
|
|
1511
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1512
|
+
- `styles: React.ComponentPropsWithoutRef<typeof FieldTemplate>["styles"]` — Custom styles for internal parts
|
|
1513
|
+
- **SmartSearchInput** — Smart search input enabling both traditional search and AI prompting.
|
|
1514
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1515
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1516
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1517
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1518
|
+
- `label: React.ReactNode` — Field label
|
|
1519
|
+
- `error: string` — Error message
|
|
1520
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1521
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1522
|
+
- `maxRows: number` = 8 — Maximum number of rows the input grows to before scrolling
|
|
1523
|
+
- `allowClear: boolean` = true — Whether to show a clear button when value is present
|
|
1524
|
+
- `onClear: () => void` — Callback when the clear button is clicked
|
|
1525
|
+
- `onSubmit: (value: string) => void` — Callback when the value is submitted with the Enter key
|
|
1526
|
+
- `onChange: (value: string) => void` — Callback when the value changes
|
|
1527
|
+
- `defaultValue: string` = "" — Initial value (uncontrolled)
|
|
1528
|
+
- `maxLength: number` — Maximum number of characters
|
|
1529
|
+
- **Switch** — A binary switch for instantly toggling settings between on and off states
|
|
1530
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child, merging its props onto that child.
|
|
1531
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the switch
|
|
1532
|
+
- `className: string` — Additional class names
|
|
1533
|
+
- `children: React.ReactNode` — Label content rendered next to the switch
|
|
1534
|
+
- `error: boolean` = false — Whether to display as an error state (aria-invalid is applied)
|
|
1535
|
+
- **SwitchGroup** — Shared state switches
|
|
1536
|
+
- `options: Option[]` (required) — List of switch options
|
|
1537
|
+
- `value: string[]` — Selected values (controlled)
|
|
1538
|
+
- `defaultValue: string[]` = [] — Initially selected values (uncontrolled)
|
|
1539
|
+
- `onChange: (value: string[]) => void` — Callback when the selected values change
|
|
1540
|
+
- `direction: "vertical" | "horizontal"` = "vertical" — Layout direction of the switches
|
|
1541
|
+
- `name: string` — Name attribute shared by the switch inputs
|
|
1542
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1543
|
+
- `label: string` — Group label
|
|
1544
|
+
- `error: string` — Error message
|
|
1545
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1546
|
+
- `disabled: boolean` — Whether the whole group is disabled
|
|
1547
|
+
- **TagInput** — Field for entering free-form text as tags
|
|
1548
|
+
- `value: string[]` — List of tags (controlled)
|
|
1549
|
+
- `defaultValue: string[]` = [] — Initial list of tags (uncontrolled)
|
|
1550
|
+
- `onChange: (tags: string[]) => void` — Callback when the tags change
|
|
1551
|
+
- `placeholder: string` — Placeholder for the input
|
|
1552
|
+
- `disabled: boolean` = false — Whether the input is disabled
|
|
1553
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1554
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1555
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1556
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1557
|
+
- `label: React.ReactNode` — Field label
|
|
1558
|
+
- `error: string` — Error message
|
|
1559
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1560
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1561
|
+
- `allowDelete: boolean` = true — Whether tags can be deleted
|
|
1562
|
+
- `maxTags: number` — Maximum number of tags that can be entered
|
|
1563
|
+
- **Textarea** — Multi-line input fields for longer text entries like descriptions or comments
|
|
1564
|
+
- `asChild: boolean` = false — If true, the textarea element will be rendered as its child, merging its props onto that child.
|
|
1565
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1566
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1567
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1568
|
+
- `fieldSizing: "fixed" | "content"` = "fixed" — Sizing behavior: "fixed" keeps the height, "content" grows with the text
|
|
1569
|
+
- `label: string` — Field label
|
|
1570
|
+
- `error: string` — Error message
|
|
1571
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1572
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1573
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1574
|
+
- **ThemeToggle** — Light / dark / system theme switcher
|
|
1575
|
+
- `value: "light" | "dark" | "system"` — Selected mode (controlled)
|
|
1576
|
+
- `defaultValue: "light" | "dark" | "system"` = "system" — Initially selected mode (uncontrolled)
|
|
1577
|
+
- `onChange: (mode: ThemeMode) => void` — Callback when the mode changes
|
|
1578
|
+
- `modes: ThemeMode[]` = ["light", "dark"] — Modes to offer, in cycle order
|
|
1579
|
+
- `variant: "icon" | "segmented"` = "icon" — "icon" cycles modes on a single button; "segmented" shows one button per mode
|
|
1580
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the control
|
|
1581
|
+
- `storageKey: string | null` = "wim-theme" — localStorage key used to persist the choice; pass null to disable persistence
|
|
1582
|
+
- `applyToDocument: boolean` = true — Whether to apply the selected mode to the document root as `data-theme`
|
|
1583
|
+
- `labels: { /** Label for the light mode */ light?: string; /** Label for the dark mode */ dark?: string; /** Label for the system (auto) mode */ system?: string; /** Accessible label / group label for the control */ toggle?: string; }` — Labels for internationalization
|
|
1584
|
+
- `className: string` — Additional class names
|
|
1585
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1586
|
+
- **TimePicker** — Time selection
|
|
1587
|
+
- `intent: FieldIntent` = "default" — Semantic intent of the field (e.g. error state)
|
|
1588
|
+
- `variant: "outline" | "ghost"` = "outline" — Visual style variant of the field
|
|
1589
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1590
|
+
- `allowClear: boolean` = true — Whether to show a clear button when value is present
|
|
1591
|
+
- `leftIcon: React.ComponentProps<typeof Icon>["name"]` — Icon name to display on the left side
|
|
1592
|
+
- `leftIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the left icon
|
|
1593
|
+
- `rightIconColor: React.ComponentProps<typeof Icon>["color"]` — Color of the right icon
|
|
1594
|
+
- `onLeftIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the left icon is clicked (renders the icon as a button)
|
|
1595
|
+
- `onRightIconClick: (e: React.MouseEvent<HTMLButtonElement>) => void` — Callback when the right icon is clicked (renders the icon as a button)
|
|
1596
|
+
- `showPasswordToggle: boolean` = true — Whether to show the visibility toggle when type is "password"
|
|
1597
|
+
- `rightIconClassName: string` — Additional class name for the right icon
|
|
1598
|
+
- `rightIconRotated: boolean` — Whether to rotate the right icon 180 degrees (e.g. for an open state)
|
|
1599
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1600
|
+
- `label: React.ReactNode` — Field label
|
|
1601
|
+
- `error: string` — Error message
|
|
1602
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1603
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1604
|
+
- `inputClassName: string` — Additional class name for the inner input element
|
|
1605
|
+
- `showPasswordAriaLabel: string` — Aria label for the show-password toggle
|
|
1606
|
+
- `hidePasswordAriaLabel: string` — Aria label for the hide-password toggle
|
|
1607
|
+
- `rightIconAriaLabel: string` — Aria label for the right icon button
|
|
1608
|
+
- `styles: React.ComponentProps<typeof InputBase>["styles"]` — Custom styles for internal parts
|
|
1609
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1610
|
+
- **ToggleGroup** — Toggleable buttons
|
|
1611
|
+
- `options: Option[]` (required) — List of toggle options
|
|
1612
|
+
- `value: string | string[]` — Selected value(s) (controlled)
|
|
1613
|
+
- `defaultValue: string | string[]` — Initially selected value(s) (uncontrolled)
|
|
1614
|
+
- `onChange: (value: string | string[]) => void` — Callback when the selection changes
|
|
1615
|
+
- `selectionMode: "single" | "multiple"` = "single" — Whether one or multiple options can be selected
|
|
1616
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the toggle buttons
|
|
1617
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1618
|
+
- `className: string` — Additional class names
|
|
1619
|
+
- `disabled: boolean` = false — Whether the group is disabled
|
|
1620
|
+
- `label: string` — Group label
|
|
1621
|
+
- `error: string` — Error message
|
|
1622
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1623
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1624
|
+
- `id: string` — Unique ID for the component
|
|
1625
|
+
- `asChild: boolean` = false — If true, merge group props onto the child element.
|
|
1626
|
+
- `children: React.ReactNode` — Optional children used when asChild is true
|
|
1627
|
+
- `aria-label: string` — Accessible label when no visible label is provided
|
|
1628
|
+
- `aria-labelledby: string` — ID of the element that labels the group
|
|
1629
|
+
- **Transfer** — Move items between lists
|
|
1630
|
+
- `dataSource: TransferItem[]` = [] — All items shown across the two lists
|
|
1631
|
+
- `targetKeys: string[]` — Keys of the items in the target (right) list
|
|
1632
|
+
- `onChange: ( targetKeys: string[], direction: "toLeft" | "toRight", moveKeys: string[], ) => void` — Callback when items are moved between the lists
|
|
1633
|
+
- `titles: [React.ReactNode, React.ReactNode]` = ["Source", "Target"] — Titles of the source and target lists
|
|
1634
|
+
- `className: string` — Additional class names
|
|
1635
|
+
- `style: React.CSSProperties` — Inline styles
|
|
1636
|
+
- `disabled: boolean` = false — Whether the component is disabled
|
|
1637
|
+
- `label: React.ReactNode` — Field label
|
|
1638
|
+
- `error: string` — Error message
|
|
1639
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1640
|
+
- `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
|
|
1641
|
+
- `labels: { noData?: React.ReactNode; moveToTarget?: string; moveToSource?: string; statusMovedToTarget?: (count: number) => string; statusMovedToSource?: (count: number) => string; }` = {} — Labels for internationalization
|
|
1642
|
+
- **TreeSelect** — Select from tree structure
|
|
1643
|
+
- `treeData: TreeSelectNode[]` = [] — Tree nodes to select from
|
|
1644
|
+
- `value: string | string[]` — Selected value(s) (controlled)
|
|
1645
|
+
- `onChange: (value: string | string[]) => void` — Callback when the selection changes
|
|
1646
|
+
- `placeholder: React.ReactNode` — Placeholder shown when nothing is selected
|
|
1647
|
+
- `label: React.ReactNode` — Field label
|
|
1648
|
+
- `error: string` — Error message
|
|
1649
|
+
- `required: boolean` — Whether to show the required indicator
|
|
1650
|
+
- `layout: "vertical" | "horizontal"` — Layout direction of label and field
|
|
1651
|
+
- `className: string` — Additional class names
|
|
1652
|
+
- `disabled: boolean` = false — Whether the field is disabled
|
|
1653
|
+
- `multiple: boolean` = false — Whether multiple nodes can be selected
|
|
1654
|
+
- `searchable: boolean` = false — Whether to show a search input for filtering nodes
|
|
1655
|
+
- `defaultExpandedKeys: string[]` = [] — Keys of the nodes expanded initially
|
|
1656
|
+
- `allowClear: boolean` = false — Whether to show a clear button when a value is selected
|
|
1657
|
+
- `checkStrategy: "cascade" | "exclusive"` = "cascade" — Check selection behavior (effective when multiple).
|
|
1658
|
+
- cascade: checking a parent selects all children; partially checked children make the parent indeterminate (default)
|
|
1659
|
+
- exclusive: parent and children are mutually exclusive (selecting a parent deselects children and vice versa)
|
|
1660
|
+
- `id: string` — Unique ID for the component
|
|
1661
|
+
- `asChild: boolean` = false — If true, merge root props onto the child element.
|
|
1662
|
+
- `children: React.ReactNode` — Optional children used when asChild is true
|
|
1663
|
+
- `aria-label: string` — Accessible label for the trigger when no visible label is provided
|
|
1664
|
+
- `aria-labelledby: string` — ID of the element that labels the field
|
|
1665
|
+
- `aria-describedby: string` — ID of the element that describes the field
|
|
1666
|
+
- `width: FieldWidth | string | number` — Fixed width of the field (width token, CSS value, or number in px)
|
|
1667
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
1668
|
+
|
|
1669
|
+
### feedback — `import { … } from "wimui/feedback"`
|
|
1670
|
+
|
|
1671
|
+
- **Alert** — Important messages
|
|
1672
|
+
- `title: React.ReactNode` — Title of the alert
|
|
1673
|
+
- `titleTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"` = "h4" — HTML tag used for the alert title
|
|
1674
|
+
@default "h4"
|
|
1675
|
+
- `description: React.ReactNode` — Description text of the alert
|
|
1676
|
+
- `intent: FeedbackIntent` = "info" — Intent (semantic state) of the alert
|
|
1677
|
+
@default "info"
|
|
1678
|
+
- `icon: React.ReactNode` — Custom icon. When omitted, a default icon matching the intent is displayed.
|
|
1679
|
+
- `onClose: () => void` — Called when the close button is clicked. Providing it shows the close button.
|
|
1680
|
+
- `className: string` — Additional CSS class name
|
|
1681
|
+
- `children: React.ReactNode` — Content of the alert (treated as the description)
|
|
1682
|
+
- **Autosave** — Inline status indicator for automatic save state
|
|
1683
|
+
- `status: "idle" | "saving" | "saved" | "error"` (required) — Save status
|
|
1684
|
+
- `savedAt: Date` — Time of the last save
|
|
1685
|
+
- `errorMessage: string` — Error message (a default message is used when omitted)
|
|
1686
|
+
- **Banner** — Top prominent messages
|
|
1687
|
+
- `title: React.ReactNode` — Title of the banner
|
|
1688
|
+
- `description: React.ReactNode` — Description text of the banner
|
|
1689
|
+
- `intent: FeedbackIntent` = "info" — Intent (semantic state) of the banner
|
|
1690
|
+
@default "info"
|
|
1691
|
+
- `icon: boolean | React.ReactNode` = true — Whether to show the icon, or a custom icon element
|
|
1692
|
+
@default true
|
|
1693
|
+
- `extra: React.ReactNode` — Action element (e.g. a Button component)
|
|
1694
|
+
- `onClose: () => void` — Called when the close button is clicked. Providing it shows the close button.
|
|
1695
|
+
- `className: string` — Additional CSS class name
|
|
1696
|
+
- `children: React.ReactNode` — Content of the banner
|
|
1697
|
+
- **ErrorBoundary** — Runtime error fallback
|
|
1698
|
+
- `fallback: ReactNode | unknown` — Component or element displayed when an error occurs.
|
|
1699
|
+
When a function is passed, it is called as (error, errorInfo, reset) => ReactNode.
|
|
1700
|
+
- `onError: (error: Error, errorInfo: ErrorInfo) => void` — Called when an error occurs.
|
|
1701
|
+
- `onReset: () => void` — Called when the error is reset.
|
|
1702
|
+
- `labels: { title?: string; retry?: string; showDetails?: string; hideDetails?: string; }` — Labels for manual translation overrides.
|
|
1703
|
+
- `children: ReactNode` (required) — Content the boundary protects.
|
|
1704
|
+
- **Indicator** — Small status dots
|
|
1705
|
+
- `children: React.ReactNode` — Element the indicator dot is attached to. If omitted, only the dot is rendered.
|
|
1706
|
+
- `color: T | (string & {})` = "primary" — Color of the dot. Accepts a design token color name or any CSS color value.
|
|
1707
|
+
@default "primary"
|
|
1708
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the dot.
|
|
1709
|
+
@default "md"
|
|
1710
|
+
- `position: "top-right" | "top-left" | "bottom-right" | "bottom-left"` = "top-right" — Corner of the children the dot is placed at.
|
|
1711
|
+
@default "top-right"
|
|
1712
|
+
- `pulse: boolean` = false — If true, the dot pulses to draw attention.
|
|
1713
|
+
@default false
|
|
1714
|
+
- `inline: boolean` = false — If true, renders the dot inline instead of positioning it on a corner.
|
|
1715
|
+
@default false
|
|
1716
|
+
- `className: string` — Additional CSS class name.
|
|
1717
|
+
- `style: React.CSSProperties` — Inline styles for the container.
|
|
1718
|
+
- **Loader** — Animated indicators to show that data is loading or processing
|
|
1719
|
+
- `variant: "bars" | "dots" | "pulse"` = "bars" — Animation style of the loader.
|
|
1720
|
+
@default "bars"
|
|
1721
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg" | "xl">` = "md" — Size of the loader.
|
|
1722
|
+
@default "md"
|
|
1723
|
+
- `color: "currentColor" | WimColor` = "primary" — Color of the loader. Accepts a design token color name or "currentColor".
|
|
1724
|
+
@default "primary"
|
|
1725
|
+
- **LoadingOverlay** — Overlay with loading indicator
|
|
1726
|
+
- `visible: boolean` = false — Whether the overlay is shown.
|
|
1727
|
+
@default false
|
|
1728
|
+
- `loaderType: "spinner" | "bars" | "dots" | "pulse"` = "spinner" — Type of the loading indicator.
|
|
1729
|
+
@default "spinner"
|
|
1730
|
+
- `loaderSize: "sm" | "md" | "lg" | "xl"` = "lg" — Size of the loading indicator.
|
|
1731
|
+
@default "lg"
|
|
1732
|
+
- `loaderColor: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "currentColor"` = "primary" — Color of the loading indicator.
|
|
1733
|
+
@default "primary"
|
|
1734
|
+
- `backdropVariant: "light" | "dark"` = "dark" — Background style of the overlay.
|
|
1735
|
+
@default "dark"
|
|
1736
|
+
- `blur: "none" | "sm" | "md" | "lg"` = "sm" — Strength of the backdrop blur effect.
|
|
1737
|
+
@default "sm"
|
|
1738
|
+
- `message: string` — Loading message displayed below the indicator.
|
|
1739
|
+
- `fixed: boolean` = false — Whether to use position: fixed (covers the whole screen).
|
|
1740
|
+
@default false
|
|
1741
|
+
- `zIndex: number` — z-index of the overlay.
|
|
1742
|
+
- `children: React.ReactNode` — Custom loading content, replacing the default indicator.
|
|
1743
|
+
- **Notification** — Rich notification card
|
|
1744
|
+
- `id: string` — The unique identifier of notification
|
|
1745
|
+
- `title: ReactNode` (required) — The title of notification
|
|
1746
|
+
- `description: ReactNode` — The description of notification
|
|
1747
|
+
- `icon: ReactNode` — The icon of notification
|
|
1748
|
+
- `intent: FeedbackIntent` — The intent of notification
|
|
1749
|
+
- `onClose: (id?: string) => void` — Callback when notification is closed
|
|
1750
|
+
- `closable: boolean` = true — Whether to show close button
|
|
1751
|
+
- `className: string` — Additional class name
|
|
1752
|
+
- **Progress** — Progress bar
|
|
1753
|
+
- `value: number` = 0 — Current value of the progress bar.
|
|
1754
|
+
@default 0
|
|
1755
|
+
- `max: number` = 100 — Maximum value of the progress bar.
|
|
1756
|
+
@default 100
|
|
1757
|
+
- `intent: IndicatorIntent` = "primary" — Intent (semantic color) of the bar.
|
|
1758
|
+
@default "primary"
|
|
1759
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the bar.
|
|
1760
|
+
@default "md"
|
|
1761
|
+
- `label: string` — Text label displayed above the bar.
|
|
1762
|
+
- `showValue: boolean` = false — Whether to display the current value as a percentage.
|
|
1763
|
+
@default false
|
|
1764
|
+
- `indeterminate: boolean` = false — If true, shows an indeterminate animation instead of a value.
|
|
1765
|
+
@default false
|
|
1766
|
+
- **Result** — Task status indicator
|
|
1767
|
+
- `intent: Extract<WimIntent, "success" | "danger" | "info" | "warning">` = "info" — Semantic intent — determines the icon and color.
|
|
1768
|
+
- `status: "404" | "403" | "500"` — HTTP error status — adds a status-specific CSS class and shows a neutral icon.
|
|
1769
|
+
Use for error pages (404, 403, 500).
|
|
1770
|
+
- `title: ReactNode` — The title
|
|
1771
|
+
- `description: ReactNode` — The description
|
|
1772
|
+
- `extra: ReactNode` — Operating area
|
|
1773
|
+
- `icon: ReactNode` — Custom icon
|
|
1774
|
+
- `className: string` — Custom class name
|
|
1775
|
+
- `children: ReactNode` — The children
|
|
1776
|
+
- **ScrollProgress** — Reading progress indicator
|
|
1777
|
+
- `color: "primary" | "secondary" | "success" | "warning" | "danger"` = "primary" — Color of the progress bar.
|
|
1778
|
+
@default "primary"
|
|
1779
|
+
- `target: React.RefObject<HTMLElement | null>` — Element whose scroll position is tracked. Defaults to `window`.
|
|
1780
|
+
- **Skeleton** — Placeholder for content loading states.
|
|
1781
|
+
- `variant: "text" | "rect" | "circle"` = "text" — Shape of the skeleton.
|
|
1782
|
+
- `text`: shaped like a line of text.
|
|
1783
|
+
- `rect`: rectangle.
|
|
1784
|
+
- `circle`: circle.
|
|
1785
|
+
@default "text"
|
|
1786
|
+
- `animation: "pulse" | "wave" | "none"` = "pulse" — Type of animation.
|
|
1787
|
+
- `pulse`: slow fade in and out.
|
|
1788
|
+
- `wave`: wave moving from left to right.
|
|
1789
|
+
- `none`: no animation.
|
|
1790
|
+
@default "pulse"
|
|
1791
|
+
- `width: string | number` — Width, including a CSS unit (px, %, rem, etc.).
|
|
1792
|
+
- `height: string | number` — Height, including a CSS unit (px, %, rem, etc.).
|
|
1793
|
+
- **Snackbar** — Bottom notifications
|
|
1794
|
+
- `message: string` (required) — Message displayed in the snackbar
|
|
1795
|
+
- `open: boolean` = false — Whether the snackbar is shown
|
|
1796
|
+
@default false
|
|
1797
|
+
- `intent: FeedbackIntent` = "info" — Intent (semantic state)
|
|
1798
|
+
@default "info"
|
|
1799
|
+
- `position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"` = "bottom-center" — Position on the screen
|
|
1800
|
+
@default "bottom-center"
|
|
1801
|
+
- `autoHideDuration: number` = 5000 — Time in milliseconds before the snackbar closes automatically. Set 0 to disable auto-close.
|
|
1802
|
+
@default 5000
|
|
1803
|
+
- `showCloseButton: boolean` = false — Whether to show a close button
|
|
1804
|
+
@default false
|
|
1805
|
+
- `actionLabel: string` — Label of the action button
|
|
1806
|
+
- `onAction: () => void` — Called when the action button is clicked
|
|
1807
|
+
- `onClose: () => void` — Called when the snackbar is closed
|
|
1808
|
+
- `className: string` — Additional CSS class name
|
|
1809
|
+
- **Spinner** — A rotating icon indicating background activity or data fetching
|
|
1810
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg" | "xl">` = "md" — Size of the spinner.
|
|
1811
|
+
@default "md"
|
|
1812
|
+
- `color: "currentColor" | WimColor` = "primary" — Color of the spinner. Accepts a design token color name or "currentColor".
|
|
1813
|
+
@default "primary"
|
|
1814
|
+
- `label: string` — Text label displayed next to the spinner.
|
|
1815
|
+
- `labelPosition: "right" | "bottom"` = "right" — Position of the label relative to the spinner.
|
|
1816
|
+
@default "right"
|
|
1817
|
+
- **Toast** — Non-intrusive floating messages that provide feedback on system operations
|
|
1818
|
+
- `id: string` — Identifier of the toast, passed to onClose. Used by ToastProvider to manage a stack.
|
|
1819
|
+
- `title: string` — Title of the toast.
|
|
1820
|
+
- `description: string` — Description text displayed below the title.
|
|
1821
|
+
- `intent: FeedbackIntent` = "info" — Intent (semantic state) of the toast.
|
|
1822
|
+
@default "info"
|
|
1823
|
+
- `duration: number` = 3000 — Time in milliseconds before the toast closes automatically. Set 0 to disable auto-close.
|
|
1824
|
+
@default 3000
|
|
1825
|
+
- `open: boolean` = true — Whether the toast is shown.
|
|
1826
|
+
@default true
|
|
1827
|
+
- `onClose: (id?: string) => void` — Called with the toast id when the toast is closed.
|
|
1828
|
+
- `className: string` — Additional CSS class name.
|
|
1829
|
+
- **Tour** — Sequential guided walkthroughs to onboard users or highlight features
|
|
1830
|
+
- `steps: TourStep[]` (required) — Steps of the tour. Each step targets an element via a CSS selector.
|
|
1831
|
+
- `open: boolean` (required) — Whether the tour is shown.
|
|
1832
|
+
- `onClose: () => void` (required) — Called when the tour is dismissed before completion.
|
|
1833
|
+
- `onFinish: () => void` — Called when the last step is completed.
|
|
1834
|
+
|
|
1835
|
+
### navigation — `import { … } from "wimui/navigation"`
|
|
1836
|
+
|
|
1837
|
+
- **Affix** — Sticky elements
|
|
1838
|
+
- `offsetTop: number` — Offset distance from the top of the window (in pixels)
|
|
1839
|
+
- `offsetBottom: number` — Offset distance from the bottom of the window (in pixels)
|
|
1840
|
+
- `onChange: (lastAffixed: boolean) => void` — Callback when the affix state changes
|
|
1841
|
+
- `target: () => HTMLElement | Window | null` = () => window — Target container that will be scrolled
|
|
1842
|
+
- `children: React.ReactNode` (required) — Children to be rendered inside the affix
|
|
1843
|
+
- `className: string` — Additional class names
|
|
1844
|
+
- `style: React.CSSProperties` — Style attribute
|
|
1845
|
+
- **Anchor** — Smooth scroll links
|
|
1846
|
+
- `items: AnchorLinkItem[]` = [] — Array of anchor link configurations
|
|
1847
|
+
- `bounds: number` = 5 — Bounding distance (in pixels) for triggering active state
|
|
1848
|
+
- `offset: number` = 0 — Offset (in pixels) from top when clicking to scroll
|
|
1849
|
+
- `direction: "vertical" | "horizontal"` = "vertical" — Orientation of the anchor links
|
|
1850
|
+
- `className: string` — Additional class names
|
|
1851
|
+
- `style: React.CSSProperties` — Style attribute
|
|
1852
|
+
- **BackTop** — Back to top button
|
|
1853
|
+
- `target: () => HTMLElement | Window | Document | null` = () => window — Target container that will be scrolled
|
|
1854
|
+
- `visibilityHeight: number` = 400 — Scroll height after which the button becomes visible
|
|
1855
|
+
- `onClick: (e: React.MouseEvent<HTMLDivElement>) => void` — Callback when clicked
|
|
1856
|
+
- `children: React.ReactNode` — Children to be rendered inside the button
|
|
1857
|
+
- `className: string` — Additional class names
|
|
1858
|
+
- `style: React.CSSProperties` — Style attribute
|
|
1859
|
+
- `aria-label: string` — Accessible label for the button
|
|
1860
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
1861
|
+
- **Breadcrumb** — Location trace
|
|
1862
|
+
- `items: BreadcrumbItem[]` (required) — Items to display, from the root to the current page.
|
|
1863
|
+
- `separator: React.ReactNode` — Separator displayed between items. Defaults to a chevron icon.
|
|
1864
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the breadcrumb.
|
|
1865
|
+
@default "md"
|
|
1866
|
+
- `className: string` — Additional CSS class name for the container.
|
|
1867
|
+
- `ariaLabel: string` — Accessible label of the navigation landmark. Defaults to a localized "breadcrumb" label.
|
|
1868
|
+
- `asChild: boolean` — If true, the breadcrumb will be rendered as its child, merging its props onto that child.
|
|
1869
|
+
- **CommandPalette** — Cmd+K search overlay
|
|
1870
|
+
- `children: ReactNode` (required) — Palette parts (CommandPaletteTrigger, CommandPaletteContent, etc.).
|
|
1871
|
+
- `open: boolean` — Controlled open state. Use together with onOpenChange.
|
|
1872
|
+
- `onOpenChange: (open: boolean) => void` — Called with the next state when the palette is opened or closed.
|
|
1873
|
+
- **HamburgerMenu** — Toggleable menu
|
|
1874
|
+
- `asChild: boolean` = false — If true, merge button props onto the child element.
|
|
1875
|
+
- `open: boolean` = false — Whether the menu is open
|
|
1876
|
+
- `onClick: React.MouseEventHandler<HTMLButtonElement>` — Callback function when the menu is toggled
|
|
1877
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the hamburger menu
|
|
1878
|
+
- `color: string` — Color of the bars
|
|
1879
|
+
- `visibleBelow: "xs" | "sm" | "md" | "lg" | "xl"` — Show only below the given breakpoint (e.g. "md" matches Sidebar's mobile drawer range)
|
|
1880
|
+
- `className: string` — Custom class name
|
|
1881
|
+
- **KeyboardShortcuts** — Display a structured list of keyboard shortcuts
|
|
1882
|
+
- `shortcuts: ShortcutItem[]` (required) — List of shortcuts to display
|
|
1883
|
+
- `title: string` — Section title
|
|
1884
|
+
- `separator: string` = "+" — Separator displayed between keys
|
|
1885
|
+
@default "+"
|
|
1886
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the list
|
|
1887
|
+
@default "md"
|
|
1888
|
+
- **Link** — Hyperlinks
|
|
1889
|
+
- `asChild: boolean` = false — If true, the link will be rendered as its child, merging its props onto that child.
|
|
1890
|
+
Useful for using the link styles with Link components from React Router or Next.js.
|
|
1891
|
+
- `label: React.ReactNode` — Link text or element. Alternative to children.
|
|
1892
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Font size of the link.
|
|
1893
|
+
@default "md"
|
|
1894
|
+
- `priority: "primary" | "secondary" | "tertiary"` = "primary" — Visual emphasis of the link.
|
|
1895
|
+
@default "primary"
|
|
1896
|
+
- `iconName: React.ComponentProps<typeof Icon>["name"]` — Name of the icon displayed alongside the label.
|
|
1897
|
+
- `iconPosition: "left" | "right"` = "left" — Position of the icon relative to the label.
|
|
1898
|
+
@default "left"
|
|
1899
|
+
- `external: boolean` = false — If true, opens the link in a new tab and shows an external-link icon.
|
|
1900
|
+
@default false
|
|
1901
|
+
- `styles: { root?: string; label?: string; inner?: string; externalIcon?: string; }` — Custom styles for internal parts
|
|
1902
|
+
- **Menubar** — Desktop-style application menu bar with floating File / Edit / View submenus.
|
|
1903
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child, merging its props onto that child.
|
|
1904
|
+
- **Pagination** — Multi-page navigation
|
|
1905
|
+
- `total: number` (required) — Total number of items
|
|
1906
|
+
- `pageSize: number` = 10 — Number of items per page
|
|
1907
|
+
- `current: number` = 1 — Current page number (1-indexed)
|
|
1908
|
+
- `onChange: (page: number, pageSize: number) => void` — Callback function when page changes
|
|
1909
|
+
- `onPageSizeChange: (pageSize: number) => void` — Callback function when page size changes
|
|
1910
|
+
- `siblingCount: number` = 1 — Number of sibling pages to show around the current page
|
|
1911
|
+
- `className: string` — Additional class names
|
|
1912
|
+
- `asChild: boolean` = false — If true, merge nav props onto the child element.
|
|
1913
|
+
- `children: React.ReactNode` — Optional child used when asChild is true
|
|
1914
|
+
- `renderPage: (page: number, props: PaginationPageRenderProps) => React.ReactNode` — Custom renderer for page number controls. Defaults to PaginationPage.
|
|
1915
|
+
Useful for URL-based pagination (e.g. wrap with a Link via PaginationPage asChild).
|
|
1916
|
+
- `simple: boolean` = false — Whether to show a simplified version
|
|
1917
|
+
- `hideOnSinglePage: boolean` = false — Whether to hide the pagination if there is only one page
|
|
1918
|
+
- `showSizeChanger: boolean` = false — Whether to show the page size changer
|
|
1919
|
+
- `pageSizeOptions: number[]` = [10, 20, 50, 100] — Page size options for the page size changer
|
|
1920
|
+
- `showTotal: (total: number, range: [number, number]) => React.ReactNode` — Function to display the total count
|
|
1921
|
+
- `showQuickJumper: boolean` = false — Whether to show quick jumper
|
|
1922
|
+
- `labels: { prevPage?: string; nextPage?: string; pageAriaLabel?: (page: number) => string; itemsPerPage?: string; goTo?: string; go?: string; pageSizeAriaLabel?: string; jumpToPageAriaLabel?: string; navAriaLabel?: string; totalLabel?: string; }` = {} — Labels for internationalization
|
|
1923
|
+
- **SpeedDial** — Floating action button that expands sub-actions on hover or click.
|
|
1924
|
+
- `actions: SpeedDialAction[]` (required) — Actions to display when SpeedDial is open
|
|
1925
|
+
- `icon: keyof typeof ALL_ICONS` = "PlusIcon" — Icon name for the main button when closed
|
|
1926
|
+
- `activeIcon: keyof typeof ALL_ICONS` = "CloseIcon" — Icon name for the main button when open
|
|
1927
|
+
- `direction: "up" | "down" | "left" | "right"` = "up" — Direction in which actions expand
|
|
1928
|
+
- `trigger: "hover" | "click"` = "hover" — Trigger mode to open the SpeedDial
|
|
1929
|
+
- `open: boolean` — Controlled open state
|
|
1930
|
+
- `onOpenChange: (open: boolean) => void` — Callback when open state changes
|
|
1931
|
+
- **Stepper** — Visual sequence steps
|
|
1932
|
+
- `steps: Step[]` = [] — Array of step configurations
|
|
1933
|
+
- `current: number` = 0 — Index of the current active step (0-indexed)
|
|
1934
|
+
- `direction: "horizontal" | "vertical"` = "horizontal" — Direction of the stepper
|
|
1935
|
+
- `labelPlacement: "horizontal" | "vertical"` = "horizontal" — Placement of the labels
|
|
1936
|
+
- `intent: "wait" | "process" | "finish" | "error"` = "process" — Workflow intent shown on the current active step (default: "process")
|
|
1937
|
+
- `className: string` — Additional class names
|
|
1938
|
+
- `ariaLabel: string` — Accessibility label for the navigation
|
|
1939
|
+
- `onChange: (current: number) => void` — Callback function when a step is clicked (if applicable)
|
|
1940
|
+
- `asChild: boolean` — Whether to use the Radix Slot pattern
|
|
1941
|
+
- **TabBar** — Mobile bottom navigation
|
|
1942
|
+
- `fixed: boolean` = true — Fixed position at the bottom of the screen
|
|
1943
|
+
- `bordered: boolean` = true — Show top border
|
|
1944
|
+
- `glass: boolean` = false — Glassmorphism effect
|
|
1945
|
+
- **TabNavigation** — Tab-based navigation
|
|
1946
|
+
- `variant: "underline" | "pill" | "contained"` = "underline" — Visual style of the tabs
|
|
1947
|
+
- `align: "start" | "center" | "end" | "justify"` = "start" — Alignment of the tabs
|
|
1948
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the tabs
|
|
1949
|
+
- **Tabs** — A container to organize related content into switchable view panels
|
|
1950
|
+
- `asChild: boolean` = false — If true, the tabs root will be rendered as its child, merging its props onto that child.
|
|
1951
|
+
- `defaultValue: string` — Value of the tab selected initially, for uncontrolled usage.
|
|
1952
|
+
- `value: string` — Controlled value of the selected tab. Use together with onChange.
|
|
1953
|
+
- `onChange: (value: string) => void` — Called with the value of the newly selected tab.
|
|
1954
|
+
- `orientation: "horizontal" | "vertical"` = "horizontal" — Orientation of the tab list, affecting layout and arrow-key navigation.
|
|
1955
|
+
@default "horizontal"
|
|
1956
|
+
|
|
1957
|
+
### data-display — `import { … } from "wimui/data-display"`
|
|
1958
|
+
|
|
1959
|
+
- **Accordion** — Collapsible panels
|
|
1960
|
+
- `type: "single" | "multiple"` = "single" — Whether one or multiple items can be open at a time
|
|
1961
|
+
- `defaultValue: string | string[]` — Initially open item value(s) (uncontrolled)
|
|
1962
|
+
- `value: string | string[]` — Open item value(s) (controlled)
|
|
1963
|
+
- `onChange: (value: string | string[]) => void` — Callback when the open items change
|
|
1964
|
+
- `collapsible: boolean` = true — Whether the open item can be collapsed (type="single")
|
|
1965
|
+
- `className: string` — Additional class names
|
|
1966
|
+
- `children: React.ReactNode` (required) — Accordion.Item elements
|
|
1967
|
+
- `id: string` — Unique ID for the component
|
|
1968
|
+
- `asChild: boolean` — Whether to render as a child element.
|
|
1969
|
+
- **Avatar** — Profile initials/pics
|
|
1970
|
+
- `src: string` — Image source URL
|
|
1971
|
+
- `alt: string` = "" — Alternative text for the image
|
|
1972
|
+
- `initials: string` — Initials shown as a fallback when no image is available
|
|
1973
|
+
- `icon: React.ReactNode` — Icon shown as a fallback when no image or initials are available
|
|
1974
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the avatar
|
|
1975
|
+
- `shape: "circle" | "rounded"` = "circle" — Shape of the avatar
|
|
1976
|
+
- `intent: IndicatorIntent` — Intent (semantic color) applied to the avatar
|
|
1977
|
+
- **AvatarGroup** — Stacked avatars
|
|
1978
|
+
- `children: React.ReactNode` (required) — Avatar elements to group
|
|
1979
|
+
- `max: number` — Maximum number of avatars to show before collapsing into a count
|
|
1980
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size applied to the avatars
|
|
1981
|
+
- `total: number` — Total number of avatars (used to compute the overflow count)
|
|
1982
|
+
- `className: string` — Additional class names
|
|
1983
|
+
- **Badge** — Indicators or counts
|
|
1984
|
+
- `asChild: boolean` — If true, the badge will be rendered as its child, merging its props onto that child.
|
|
1985
|
+
- `children: React.ReactNode` — Content to display
|
|
1986
|
+
- `content: React.ReactNode` — Content to display (alternative to children)
|
|
1987
|
+
- `icon: React.ReactNode` — Icon
|
|
1988
|
+
- `intent: IndicatorIntent` — Intent (semantic state)
|
|
1989
|
+
- `variant: "solid" | "outline" | "subtle"` — Visual style variant
|
|
1990
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` — Size
|
|
1991
|
+
- `interactive: boolean` = false — Whether to enable the interactive state
|
|
1992
|
+
- **Calendar** — Calendar view
|
|
1993
|
+
- `defaultValue: Date` — Default selected date (uncontrolled)
|
|
1994
|
+
- `value: Date` — Selected date (controlled)
|
|
1995
|
+
- `minDate: Date` — Earliest selectable date
|
|
1996
|
+
- `maxDate: Date` — Latest selectable date
|
|
1997
|
+
- `disabledDates: Date[]` — Dates that cannot be selected
|
|
1998
|
+
- `isDateDisabled: (date: Date) => boolean` — Function returning whether a given date is disabled
|
|
1999
|
+
- `weekStartsOn: 0 | 1` = 0 — First day of the week (0 = Sunday, 1 = Monday)
|
|
2000
|
+
- `className: string` — Additional class names
|
|
2001
|
+
- `disabled: boolean` = false — Whether the calendar is disabled
|
|
2002
|
+
- `onChange: (date: Date) => void` — Callback when a date is selected (single mode)
|
|
2003
|
+
- `rangeMode: boolean` = false — Whether to enable range selection mode
|
|
2004
|
+
- `range: { start: Date | null; end: Date | null; }` — Selected range (controlled, range mode)
|
|
2005
|
+
- `defaultRange: { start: Date | null; end: Date | null; }` — Default selected range (uncontrolled, range mode)
|
|
2006
|
+
- `onRangeChange: (range: CalendarRange) => void` — Callback when the range changes (range mode)
|
|
2007
|
+
- **CalendarHeatmap** — GitHub-style activity graph for visualizing continuity
|
|
2008
|
+
- `data: CalendarHeatmapData[]` = [] — Activity data array.
|
|
2009
|
+
- `year: number` = new Date().getFullYear() — The year to display.
|
|
2010
|
+
@default current year
|
|
2011
|
+
- `getColorLevel: (count: number) => 0 | 1 | 2 | 3 | 4` = (count) => {
|
|
2012
|
+
if (count === 0) return 0;
|
|
2013
|
+
if (count < 3) return 1;
|
|
2014
|
+
if (count < 6) return 2;
|
|
2015
|
+
if (count < 9) return 3;
|
|
2016
|
+
return 4;
|
|
2017
|
+
} — Function to map count to a level (0-4).
|
|
2018
|
+
- `className: string` — Custom class name for the root element.
|
|
2019
|
+
- `tooltipFormatter: (date: string, count: number) => React.ReactNode` — Custom tooltip formatter.
|
|
2020
|
+
- `asChild: boolean` = false — Whether to render as a child component.
|
|
2021
|
+
- `children: React.ReactNode` — Content to render inside.
|
|
2022
|
+
- **Card** — Information containers
|
|
2023
|
+
- `asChild: boolean` = false — If true, the card will be rendered as its child, merging its props onto that child.
|
|
2024
|
+
- `variant: "elevated" | "outline" | "flat" | "glass"` = "elevated" — Visual style variant of the card
|
|
2025
|
+
- `interactive: boolean` = false — Whether to enable hover animation and click effects
|
|
2026
|
+
- `padding: ComponentSize | "none"` = "md" — Padding size
|
|
2027
|
+
- `radius: ComponentSize | "none"` = "lg" — Corner radius size
|
|
2028
|
+
- **Carousel** — Content slideshow
|
|
2029
|
+
- `children: React.ReactNode` — Content of the carousel
|
|
2030
|
+
- `autoPlay: boolean` = false — Whether to auto-play
|
|
2031
|
+
- `interval: number` = 5000 — Auto-play interval (in milliseconds)
|
|
2032
|
+
- `showIndicators: boolean` = true — Whether to show the indicators
|
|
2033
|
+
- `showControls: boolean` = true — Whether to show the previous/next buttons
|
|
2034
|
+
- `loop: boolean` = true — Whether to loop infinitely (seamless transitions)
|
|
2035
|
+
- `slidesToShow: number | Breakpoints` = 1 — Number of slides to show at once. A number or an object per breakpoint.
|
|
2036
|
+
- `aspectRatio: string` — Aspect ratio (e.g. '16/9', '4/3', '1/1').
|
|
2037
|
+
- `objectFit: "fill" | "contain" | "cover" | "none" | "scale-down"` = "cover" — How the image fits. Effective when aspectRatio is set. (default: 'cover')
|
|
2038
|
+
- `labels: { slideLabel?: (number: number) => string; prevSlide?: string; nextSlide?: string; goToSlide?: (number: number) => string; }` — Labels for manual translation.
|
|
2039
|
+
- `className: string` — Additional class names
|
|
2040
|
+
- `asChild: boolean` — Whether to use the Radix Slot pattern
|
|
2041
|
+
- **Chip** — Filter/Selection tokens
|
|
2042
|
+
- `asChild: boolean` = false — If true, the chip will be rendered as its child, merging its props onto that child.
|
|
2043
|
+
- `children: React.ReactNode` — Content to display
|
|
2044
|
+
- `content: React.ReactNode` — Content to display (alternative to children)
|
|
2045
|
+
- `onClick: (e: React.MouseEvent<HTMLButtonElement | HTMLSpanElement>) => void` — Click event. When provided, the chip behaves as a button.
|
|
2046
|
+
- `onDelete: (e: React.SyntheticEvent) => void` — Delete event. When provided, a × button is shown.
|
|
2047
|
+
- `avatar: React.ReactNode` — Avatar (e.g. an image or initials)
|
|
2048
|
+
- `icon: React.ReactNode` — Icon
|
|
2049
|
+
- `selected: boolean` = false — Whether the chip is selected
|
|
2050
|
+
- `disabled: boolean` = false — Whether the chip is disabled
|
|
2051
|
+
- `intent: IndicatorIntent` = "primary" — Intent (semantic state)
|
|
2052
|
+
- `variant: "solid" | "outline" | "subtle"` = "solid" — Visual style variant
|
|
2053
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size
|
|
2054
|
+
- `deleteAriaLabel: string` — Accessible label for the delete button
|
|
2055
|
+
- `className: string` — Additional class names
|
|
2056
|
+
- **Countdown** — Display the remaining time until a target moment as a live ticking timer, for sale deadlines, OTP resend waits, and maintenance notices.
|
|
2057
|
+
- `target: Date | string | number` (required) — The moment the countdown ends, as a Date object, ISO 8601 string,
|
|
2058
|
+
or epoch milliseconds.
|
|
2059
|
+
- `baseDate: Date | string | number` — Reference point used as "now". When set, the countdown is frozen at
|
|
2060
|
+
that instant (useful for snapshots and tests).
|
|
2061
|
+
- `variant: "digital" | "units"` = "digital" — "digital" renders a compact colon-separated clock (04:12:33);
|
|
2062
|
+
"units" renders one labeled segment per unit (days / hours / min / sec).
|
|
2063
|
+
@default "digital"
|
|
2064
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the numbers and labels.
|
|
2065
|
+
@default "md"
|
|
2066
|
+
- `locale: string` — BCP 47 locale override for unit labels (e.g. "en", "ja", "pt-BR").
|
|
2067
|
+
@default current i18next language
|
|
2068
|
+
- `unitDisplay: "long" | "short" | "narrow"` = "short" — Length of the unit labels in the "units" variant.
|
|
2069
|
+
@default "short"
|
|
2070
|
+
- `paused: boolean` = false — Pauses the countdown while true. It resumes from the real remaining
|
|
2071
|
+
time (the target moment does not shift).
|
|
2072
|
+
@default false
|
|
2073
|
+
- `onComplete: () => void` — Called once when the remaining time reaches zero (also on mount if the
|
|
2074
|
+
target is already in the past). Not called when baseDate is set.
|
|
2075
|
+
- `completedContent: React.ReactNode` — Content shown instead of the zeroed digits once the countdown ends.
|
|
2076
|
+
- `fallback: React.ReactNode` — Content shown when the target cannot be parsed.
|
|
2077
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child, merging its props onto that child.
|
|
2078
|
+
- **DataGrid** — Advanced data table and manipulation
|
|
2079
|
+
- `columns: DataGridColumn<T>[]` (required) — Column definitions
|
|
2080
|
+
- `data: T[]` (required) — Row data
|
|
2081
|
+
- `rowKey: string | ((record: T) => string)` = "id" — Row key: a field name or a function that derives the key from a record
|
|
2082
|
+
- `loading: boolean` = false — Whether the grid is in a loading state
|
|
2083
|
+
- `striped: boolean` = false — Whether to show striped (zebra) rows
|
|
2084
|
+
- `bordered: boolean` = false — Whether to show borders between cells
|
|
2085
|
+
- `hoverable: boolean` = true — Whether rows highlight on hover
|
|
2086
|
+
- `stickyHeader: boolean` = true — Whether the header sticks to the top while scrolling
|
|
2087
|
+
- `height: string | number` — Height of the grid (enables vertical scrolling)
|
|
2088
|
+
- `maxHeight: string | number` — Maximum height of the grid (enables vertical scrolling)
|
|
2089
|
+
- `emptyMessage: React.ReactNode` — Message or element to display when data is empty
|
|
2090
|
+
- `mobileCard: boolean` = false — Enable mobile card layout
|
|
2091
|
+
- `selection: boolean | SelectionConfig<T>` — Row selection: a boolean shorthand or a full configuration object
|
|
2092
|
+
- `selectedRowKeys: string[]` — Selected row keys (used with boolean `selection`)
|
|
2093
|
+
- `onSelectionChange: (keys: string[], records: T[]) => void` — Selection change callback (used with boolean `selection`)
|
|
2094
|
+
- `sortConfig: { key: string; direction: "asc" | "desc" | "none"; }` — Current sort configuration
|
|
2095
|
+
- `onSortChange: (key: string, direction: "asc" | "desc" | "none") => void` — Callback when the sort configuration changes
|
|
2096
|
+
- `pagination: object | false` — Pagination configuration, or false to disable pagination
|
|
2097
|
+
- `infiniteScroll: { hasMore: boolean; onLoadMore: () => void; threshold?: number; }` — Infinite-scroll configuration for dynamic loading
|
|
2098
|
+
- `className: string` — Additional class names
|
|
2099
|
+
- `ariaLabel: string` — Accessibility label for the grid
|
|
2100
|
+
- **DescriptionList** — Key-value pairs
|
|
2101
|
+
- `children: React.ReactNode` (required) — DescriptionListItem elements
|
|
2102
|
+
- `className: string` — Additional class names
|
|
2103
|
+
- `layout: "horizontal" | "vertical" | "compact"` = "horizontal" — Layout of terms and descriptions
|
|
2104
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the text
|
|
2105
|
+
- `border: boolean` = false — Whether to show borders (alias of bordered)
|
|
2106
|
+
- `bordered: boolean` = false — Whether to show borders
|
|
2107
|
+
- **EmptyState** — Missing data placeholder
|
|
2108
|
+
- `title: React.ReactNode` (required) — Title to display.
|
|
2109
|
+
- `description: React.ReactNode` — Description text to display.
|
|
2110
|
+
- `icon: React.ReactNode` — Icon to display.
|
|
2111
|
+
- `extra: React.ReactNode` — Element shown as an action (e.g. a button).
|
|
2112
|
+
- `variant: "default" | "simple"` = "default" — Design variant.
|
|
2113
|
+
- **FAQSection** — Frequently Asked Questions section
|
|
2114
|
+
- `items: FAQItem[]` (required) — FAQ items.
|
|
2115
|
+
- `title: React.ReactNode` — Main title of the section.
|
|
2116
|
+
- `description: React.ReactNode` — Supplementary description shown below the title.
|
|
2117
|
+
- `layout: "top" | "left"` = "top" — Layout.
|
|
2118
|
+
- top: title and description above the accordion.
|
|
2119
|
+
- left: title and description on the left, accordion on the right (desktop and up).
|
|
2120
|
+
- `accordionProps: Omit<AccordionProps, "children">` — Props passed to the inner Accordion component.
|
|
2121
|
+
- `className: string` — Additional class names.
|
|
2122
|
+
- **InfiniteScroll** — Infinite scroll control
|
|
2123
|
+
- `children: React.ReactNode` (required) — Content to display.
|
|
2124
|
+
- `hasMore: boolean` = false — Whether there is more data to load.
|
|
2125
|
+
- `loading: boolean` = false — Whether data is currently loading.
|
|
2126
|
+
- `onLoadMore: () => void` (required) — Callback to load the next batch of data.
|
|
2127
|
+
- `loader: React.ReactNode` — Element shown while loading.
|
|
2128
|
+
- `threshold: number` = 250 — Scroll threshold (px). onLoadMore is called when the scroll position gets this close to the bottom.
|
|
2129
|
+
- `className: string` — Additional class names.
|
|
2130
|
+
- `container: React.RefObject<HTMLElement | null>` — Target whose scroll events are observed (defaults to window).
|
|
2131
|
+
- **JsonDiffViewer** — Compares two JSON values as a formatted side-by-side or unified diff, built on top of CodeDiffViewer.
|
|
2132
|
+
- `before: unknown` (required) — JSON value before the change
|
|
2133
|
+
- `after: unknown` (required) — JSON value after the change
|
|
2134
|
+
- `indent: number` = 2 — Indentation spaces for JSON.stringify (default: 2)
|
|
2135
|
+
- `view: "split" | "unified"` — Display mode inherited from CodeDiffViewer
|
|
2136
|
+
- **JsonViewer** — Recursive tree viewer and editor for JSON data.
|
|
2137
|
+
- `data: unknown` (required) — The JSON data to display
|
|
2138
|
+
- `expandDepth: number` = 1 — Initial depth to expand
|
|
2139
|
+
- `showCopy: boolean` = true — If true, show copy button
|
|
2140
|
+
- `showToolbar: boolean` = true — If true, show toolbar
|
|
2141
|
+
- `editable: boolean` = false — If true, the data can be edited inline
|
|
2142
|
+
- `onChange: (data: unknown) => void` — Callback when data changes
|
|
2143
|
+
- **Kanban** — Drag-and-drop board for visualizing workflow stages
|
|
2144
|
+
- `columns: KanbanColumnData[]` — Kanban column data (for prop-driven usage).
|
|
2145
|
+
- `onMove: (itemId: string, fromColumnId: string, toColumnId: string) => void` — Callback when a card is moved.
|
|
2146
|
+
- `onCardMove: (itemId: string, fromColumnId: string, toColumnId: string) => void` — Callback when a card is moved (legacy / alternative name).
|
|
2147
|
+
- `forceMobileUI: boolean` = false — Whether to force the touch-device UI.
|
|
2148
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
2149
|
+
- **Leaderboard** — Display a ranked list of entries with scores and medal highlights for the top three positions.
|
|
2150
|
+
- `entries: LeaderboardEntry[]` (required) — List of ranking entries
|
|
2151
|
+
- `unit: string` — Label for the score unit
|
|
2152
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size
|
|
2153
|
+
- **List** — Structurally organized items in bullet points or numbered formats
|
|
2154
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
2155
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the list items
|
|
2156
|
+
- `spacing: "tight" | "normal" | "loose"` = "normal" — Spacing between items
|
|
2157
|
+
- `bordered: boolean` = false — Whether to show borders between items
|
|
2158
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
2159
|
+
- `hoverable: boolean` = false — Whether items highlight on hover
|
|
2160
|
+
- **Markdown** — A component for safely rendering text in Markdown format.
|
|
2161
|
+
- `content: string` — Markdown string to render. Provide either `content` or `children`.
|
|
2162
|
+
- `children: string` — Markdown string to render (when passed as children).
|
|
2163
|
+
- `gfm: boolean` = true — Whether to enable GitHub Flavored Markdown (default: true).
|
|
2164
|
+
- `className: string` — Additional class names.
|
|
2165
|
+
- **Marquee** — Scrolling text animation
|
|
2166
|
+
- `duration: number` = 20 — Animation speed (in seconds). Defaults to `20`.
|
|
2167
|
+
- `reverse: boolean` = false — Whether to run the animation in reverse.
|
|
2168
|
+
- `pauseOnHover: boolean` = true — Whether to pause the animation on hover.
|
|
2169
|
+
- `vertical: boolean` = false — Whether to scroll vertically.
|
|
2170
|
+
- `repeat: number` = 2 — Number of times the content is repeated. May need adjusting for a seamless loop. Defaults to `2`.
|
|
2171
|
+
- **NodeGraph** — Interactive node-based flowchart and pipeline editor
|
|
2172
|
+
- `nodes: Node[]` (required) — Controlled nodes
|
|
2173
|
+
- `edges: Edge[]` (required) — Controlled edges
|
|
2174
|
+
- `onNodesChange: OnNodesChange` (required) — Called when nodes change (position, selection, removal)
|
|
2175
|
+
- `onEdgesChange: OnEdgesChange` (required) — Called when edges change
|
|
2176
|
+
- `onConnect: OnConnect` — Called when a new connection is made
|
|
2177
|
+
- `nodeTypes: NodeTypes` — Custom node type renderers
|
|
2178
|
+
- `edgeTypes: EdgeTypes` — Custom edge type renderers
|
|
2179
|
+
- `nodesDraggable: boolean` = true — Whether nodes can be dragged
|
|
2180
|
+
- `nodesConnectable: boolean` = true — Whether nodes can be connected
|
|
2181
|
+
- `deleteKeyCode: string | null` = "Backspace" — Whether elements can be deleted with Backspace/Delete
|
|
2182
|
+
- `showMiniMap: boolean` = false — Show the minimap panel
|
|
2183
|
+
- `showControls: boolean` = true — Show zoom/fit controls
|
|
2184
|
+
- `backgroundVariant: BackgroundVariant` = BackgroundVariant.Dots — Background grid style
|
|
2185
|
+
- `fitView: boolean` = true — Fit view options on mount
|
|
2186
|
+
- `fitViewOptions: FitViewOptions` — Options for the initial fit-view behavior
|
|
2187
|
+
- `defaultEdgeOptions: DefaultEdgeOptions` — Default options applied to new edges
|
|
2188
|
+
- `className: string` — Additional CSS class
|
|
2189
|
+
- `aria-label: string` = "Node graph" — Accessible label for the graph region
|
|
2190
|
+
- **PullToRefresh** — Pull-to-refresh utility for enhancing mobile user experience.
|
|
2191
|
+
- `onRefresh: () => Promise<void> | void` (required) — Callback when refresh is triggered. Should return a promise.
|
|
2192
|
+
- `refreshing: boolean` — Whether the refreshing is currently in progress (controlled)
|
|
2193
|
+
- `threshold: number` = 60 — Distance in pixels to pull before triggering refresh
|
|
2194
|
+
- `maxDistance: number` = 120 — Maximum distance in pixels the container can be pulled
|
|
2195
|
+
- `children: React.ReactNode` (required) — The content to be wrapped and pulled
|
|
2196
|
+
- `asChild: boolean` = false — If true, the content div will be rendered as its child
|
|
2197
|
+
- **QRCode** — QR generator
|
|
2198
|
+
- `value: string` (required) — Value encoded in the QR code
|
|
2199
|
+
- `size: number` = 128 — Size of the QR code in px
|
|
2200
|
+
- `level: "L" | "M" | "Q" | "H"` = "M" — Error correction level
|
|
2201
|
+
- `bgColor: string` = "var(--wim-color-surface)" — Background color
|
|
2202
|
+
- `fgColor: string` = "var(--wim-color-text-primary)" — Foreground (module) color
|
|
2203
|
+
- `marginSize: number` = 0 — Size of the quiet-zone margin, in modules
|
|
2204
|
+
- `renderAs: "svg" | "canvas"` = "svg" — Whether to render as an SVG or a canvas
|
|
2205
|
+
- `imageSettings: React.ComponentProps<typeof QRCodeSVG>["imageSettings"]` — Settings for an image embedded in the center of the QR code
|
|
2206
|
+
- `className: string` — Additional class names
|
|
2207
|
+
- `aria-label: string` — Accessible label describing what the QR code represents
|
|
2208
|
+
- **RangeCalendar** — Range calendar view
|
|
2209
|
+
- `value: [Date | null, Date | null]` — 現在選択されている範囲 [開始日, 終了日]。
|
|
2210
|
+
- `onChange: (value: RangeCalendarValue) => void` — 範囲が変更された時のコールバック。
|
|
2211
|
+
- `defaultValue: [Date | null, Date | null]` — 初期値。
|
|
2212
|
+
- `className: string` — 追加のクラス名。
|
|
2213
|
+
- `disabled: boolean` = false — 無効化。
|
|
2214
|
+
- `minDate: Date` — 選択可能な最小日付。
|
|
2215
|
+
- `maxDate: Date` — 選択可能な最大日付。
|
|
2216
|
+
- `disabledDates: Date[]` — 無効化する日付の配列。
|
|
2217
|
+
- `isDateDisabled: (date: Date) => boolean` — 特定の日付を無効化する関数。
|
|
2218
|
+
- `weekStartsOn: 0 | 1` — 週の開始曜日。0 = 日曜始まり、1 = 月曜始まり。デフォルトは 0。
|
|
2219
|
+
- **Reaction** — Display emoji reaction buttons with toggleable state and counts
|
|
2220
|
+
- `reactions: ReactionItem[]` (required) — List of reactions
|
|
2221
|
+
- `onReact: (emoji: string, active: boolean) => void` — Callback when a reaction is added or removed
|
|
2222
|
+
- `showAddButton: boolean` = false — Whether to show the add button
|
|
2223
|
+
- `onAdd: () => void` — Callback when the add button is clicked
|
|
2224
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size
|
|
2225
|
+
- `disabled: boolean` = false — Whether the component is disabled
|
|
2226
|
+
- **RelativeTime** — Display a timestamp as a localized relative phrase ("3 minutes ago", "yesterday") that updates automatically as time passes.
|
|
2227
|
+
- `date: Date | string | number` (required) — The date to display, as a Date object, ISO 8601 string, or epoch milliseconds.
|
|
2228
|
+
- `baseDate: Date | string | number` — Reference point used as "now". When set, live updates are disabled.
|
|
2229
|
+
@default current time
|
|
2230
|
+
- `locale: string` — BCP 47 locale override (e.g. "en", "ja", "pt-BR").
|
|
2231
|
+
@default current i18next language
|
|
2232
|
+
- `numeric: Intl.RelativeTimeFormatNumeric` = "auto" — "auto" allows idiomatic phrases like "yesterday"; "always" always uses numbers ("1 day ago").
|
|
2233
|
+
@default "auto"
|
|
2234
|
+
- `format: Intl.RelativeTimeFormatStyle` = "long" — Length of the formatted message ("long" | "short" | "narrow").
|
|
2235
|
+
@default "long"
|
|
2236
|
+
- `live: boolean` = true — Automatically re-render as time passes. Ignored when baseDate is set.
|
|
2237
|
+
@default true
|
|
2238
|
+
- `fallback: React.ReactNode` — Content shown when the date cannot be parsed.
|
|
2239
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child, merging its props onto that child.
|
|
2240
|
+
- **ScheduleView** — Time-grid calendar with drag-and-drop scheduling
|
|
2241
|
+
- `events: ScheduleViewEvent[]` = [] — List of calendar events
|
|
2242
|
+
- `initialView: "timeGridWeek" | "timeGridDay" | "dayGridMonth"` = "timeGridWeek" — Initial view mode
|
|
2243
|
+
- `editable: boolean` = true — Whether events can be dragged to new times
|
|
2244
|
+
- `selectable: boolean` = true — Whether date ranges can be selected by clicking/dragging
|
|
2245
|
+
- `onEventClick: (arg: EventClickArg) => void` — Called when an event is clicked
|
|
2246
|
+
- `onEventDrop: (arg: EventDropArg) => void` — Called when an event is dropped to a new time
|
|
2247
|
+
- `onEventChange: (arg: EventChangeArg) => void` — Called when an event is resized
|
|
2248
|
+
- `onDateSelect: (arg: DateSelectArg) => void` — Called when a date/time range is selected
|
|
2249
|
+
- `slotMinTime: string` = "08:00:00" — First hour displayed in the time grid (e.g. "08:00:00")
|
|
2250
|
+
- `slotMaxTime: string` = "20:00:00" — Last hour displayed in the time grid (e.g. "20:00:00")
|
|
2251
|
+
- `slotDuration: string` = "00:30:00" — Duration of each time slot, e.g. "00:30:00"
|
|
2252
|
+
- `locale: string` = "en" — Locale string, e.g. "ja", "pt"
|
|
2253
|
+
- `unselectAuto: boolean` = true — Whether clicking elsewhere on the page will clear the current selection
|
|
2254
|
+
- `className: string` — Additional CSS class
|
|
2255
|
+
- `aria-label: string` = "Schedule" — Accessible label for the schedule region
|
|
2256
|
+
- **SortableList** — Item rearrangement and reordering
|
|
2257
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child.
|
|
2258
|
+
- `onSortEnd: (oldIndex: number, newIndex: number) => void` — Callback called when reordering is completed.
|
|
2259
|
+
- `disabled: boolean` = false — Whether the entire list is disabled.
|
|
2260
|
+
- **Stats** — A component to highlight key performance indicators and metrics
|
|
2261
|
+
- `variant: React.ComponentProps<typeof Card>["variant"]` = "elevated" — Visual style variant of the card
|
|
2262
|
+
- `asChild: boolean` = false — If true, the card will be rendered as its child, merging its props onto that child.
|
|
2263
|
+
- `interactive: boolean` = false — Whether to enable hover animation and click effects
|
|
2264
|
+
- `padding: ComponentSize | "none"` = "md" — Padding size
|
|
2265
|
+
- `radius: ComponentSize | "none"` = "lg" — Corner radius size
|
|
2266
|
+
- **SwipeAction** — Mobile-friendly swipe actions (delete, archive) for list items.
|
|
2267
|
+
- `as: React.ElementType` = "div" — The element to render as the root container. Default is 'div'.
|
|
2268
|
+
- `leftActions: SwipeActionItem[]` = [] — Actions revealed when swiping from left to right
|
|
2269
|
+
- `rightActions: SwipeActionItem[]` = [] — Actions revealed when swiping from right to left
|
|
2270
|
+
- `children: React.ReactNode` (required) — The content to be wrapped and swiped
|
|
2271
|
+
- `asChild: boolean` = false — If true, the content div will be rendered as its child
|
|
2272
|
+
- `id: string` — Unique ID for the item. Automatically generated if not provided.
|
|
2273
|
+
- `closeOnAction: boolean` = true — Whether to automatically close the actions when an action is clicked. Default is true.
|
|
2274
|
+
- **Table** — Rows and columns for displaying structured data efficiently
|
|
2275
|
+
- `asChild: boolean` = false — Whether to render as a child element.
|
|
2276
|
+
- `striped: boolean` = false — Whether to show striped (zebra) rows
|
|
2277
|
+
- `bordered: boolean` = false — Whether to show borders between cells
|
|
2278
|
+
- `hoverable: boolean` = false — Whether rows highlight on hover
|
|
2279
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
2280
|
+
- `stickyHeader: boolean` = false — Whether the header sticks to the top while scrolling
|
|
2281
|
+
- `scrollbar: "default" | "subtle" | "hidden"` = "default" — Scrollbar style of the container
|
|
2282
|
+
- `mobileCard: boolean` = false — Mobile view: Switch to card layout
|
|
2283
|
+
- `height: string | number` — Height of the container (enables vertical scrolling)
|
|
2284
|
+
- `maxHeight: string | number` — Maximum height of the container (enables vertical scrolling)
|
|
2285
|
+
- `containerClassName: string` — Additional class name for the scroll container
|
|
2286
|
+
- `card: boolean` = false — Add outer border and border-radius to the container (DataGrid look)
|
|
2287
|
+
- **Tag** — Compact visual descriptors used for labeling or categorizing content
|
|
2288
|
+
- `asChild: boolean` — If true, the tag will be rendered as its child, merging its props onto that child.
|
|
2289
|
+
- `children: React.ReactNode` — Content to display
|
|
2290
|
+
- `content: React.ReactNode` — Content to display (alternative to children)
|
|
2291
|
+
- `intent: IndicatorIntent` — Intent (semantic state)
|
|
2292
|
+
- `variant: "solid" | "outline" | "subtle"` — Visual style variant
|
|
2293
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` — Size
|
|
2294
|
+
- `icon: React.ReactNode` — Icon
|
|
2295
|
+
- `onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void` — Delete event. When provided, a × button is shown.
|
|
2296
|
+
- `disabled: boolean` — Whether the tag is disabled
|
|
2297
|
+
- `interactive: boolean` = false — Whether to enable the interactive state
|
|
2298
|
+
- **Timeline** — A vertical list mapping events or history in chronological order
|
|
2299
|
+
- `children: React.ReactNode` (required) — Timeline items
|
|
2300
|
+
- `align: "left" | "right" | "alternate"` = "left" — Alignment of the items relative to the line
|
|
2301
|
+
- `className: string` — Additional class names
|
|
2302
|
+
- `asChild: boolean` — Whether to render as a child element.
|
|
2303
|
+
- **TreeView** — Hierarchical data
|
|
2304
|
+
- `children: React.ReactNode` — JSX-based items (children API). Use this when not using `nodes`.
|
|
2305
|
+
- `nodes: TreeViewNode[]` — Node array for data-driven mode.
|
|
2306
|
+
- `className: string` — Additional class names
|
|
2307
|
+
- `multiSelect: boolean` = false — Whether multiple nodes can be selected
|
|
2308
|
+
- `checkable: boolean` = false — Whether nodes show checkboxes
|
|
2309
|
+
- `checkStrategy: "cascade" | "exclusive"` = "cascade" — Check selection behavior.
|
|
2310
|
+
- cascade: checking a parent selects all children; partially checked children make the parent indeterminate
|
|
2311
|
+
- exclusive: parent and children are mutually exclusive
|
|
2312
|
+
- `searchable: boolean` = false — Whether to show a search input for filtering nodes
|
|
2313
|
+
- `defaultExpandedValues: string[]` = [] — Values of the nodes expanded initially
|
|
2314
|
+
- `defaultSelectedValues: string[]` = [] — Values of the nodes selected initially
|
|
2315
|
+
- `defaultCheckedValues: string[]` = [] — Values of the nodes checked initially
|
|
2316
|
+
- `onCheckedChange: (checked: string[]) => void` — Callback when the checked values change
|
|
2317
|
+
- `onSelectedChange: (selected: string[]) => void` — Callback when the selected values change
|
|
2318
|
+
- `width: string | number` — Width of the tree (CSS value or number in px)
|
|
2319
|
+
- `virtualThreshold: number` = 100 — Node count threshold at which virtualization kicks in.
|
|
2320
|
+
- `labels: { searchPlaceholder?: string; searchAriaLabel?: string; expandLabel?: (label: string) => string; collapseLabel?: (label: string) => string; treeAriaLabel?: string; }` = {} — Labels for internationalization
|
|
2321
|
+
- `labelId: string` — Accessibility label ID
|
|
2322
|
+
- `styles: { root?: string; item?: string; search?: string; searchInput?: string; labelContainer?: string; iconWrapper?: string; expandBtn?: string; checkbox?: string; icon?: string; }` — Custom styles for internal parts
|
|
2323
|
+
- **VirtualList** — Efficiently renders large lists by virtualizing off-screen items
|
|
2324
|
+
- `items: T[]` (required) — Array of items to display
|
|
2325
|
+
- `itemHeight: number` (required) — Height of each row (px)
|
|
2326
|
+
- `height: number | string` (required) — Total height of the list (px)
|
|
2327
|
+
- `renderItem: (item: T, index: number) => React.ReactNode` (required) — Render function for each item
|
|
2328
|
+
- `overscan: number` = 3 — Number of extra items to render outside the visible range
|
|
2329
|
+
- `className: string` — Additional class names
|
|
2330
|
+
- `itemRole: string` = "listitem" — Role of the element wrapping each item (for accessibility)
|
|
2331
|
+
- `role: string` = "list" — Role of the whole list (for accessibility)
|
|
2332
|
+
- `aria-label: string` — Accessible label
|
|
2333
|
+
- `aria-labelledby: string` — ID of the element that labels the list
|
|
2334
|
+
|
|
2335
|
+
### overlay — `import { … } from "wimui/overlay"`
|
|
2336
|
+
|
|
2337
|
+
- **BottomSheet** — Mobile bottom overlay
|
|
2338
|
+
- `children: React.ReactNode` (required) — Bottom sheet parts (BottomSheetTrigger, BottomSheetContent, etc.).
|
|
2339
|
+
- `open: boolean` — Controlled open state. Use together with onOpenChange.
|
|
2340
|
+
- `defaultOpen: boolean` = false — Initial open state for uncontrolled usage.
|
|
2341
|
+
@default false
|
|
2342
|
+
- `onOpenChange: (open: boolean) => void` — Called with the next state when the sheet is opened or closed.
|
|
2343
|
+
- **ContextMenu** — Right-click menus
|
|
2344
|
+
- `children: ReactNode` (required) — Element that opens the context menu on right-click.
|
|
2345
|
+
- `menu: ReactNode` (required) — Menu items to display in the context menu
|
|
2346
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2347
|
+
- `disabled: boolean` = false — Disable the context menu
|
|
2348
|
+
- `asChild: boolean` = false — If true, merge trigger props onto the child element.
|
|
2349
|
+
- **Dialog** — Focused task windows
|
|
2350
|
+
- `children: React.ReactNode` (required) — Dialog parts (Dialog.Trigger, Dialog.Content, etc.).
|
|
2351
|
+
- `open: boolean` — Controlled open state. Use together with onOpenChange.
|
|
2352
|
+
- `onOpenChange: (open: boolean) => void` — Called with the next state when the dialog is opened or closed.
|
|
2353
|
+
- `defaultOpen: boolean` = false — Initial open state for uncontrolled usage.
|
|
2354
|
+
@default false
|
|
2355
|
+
- `className: string` — Additional CSS class name.
|
|
2356
|
+
- `closeOnOverlayClick: boolean` = true — Whether clicking the overlay closes the dialog.
|
|
2357
|
+
@default true
|
|
2358
|
+
- **Drawer** — Slide-out detail panels
|
|
2359
|
+
- `children: React.ReactNode` (required) — Drawer parts (DrawerTrigger, DrawerContent, etc.).
|
|
2360
|
+
- `open: boolean` — Controlled open state. Use together with onOpenChange.
|
|
2361
|
+
- `onOpenChange: (open: boolean) => void` — Called with the next state when the drawer is opened or closed.
|
|
2362
|
+
- `defaultOpen: boolean` = false — Initial open state for uncontrolled usage.
|
|
2363
|
+
@default false
|
|
2364
|
+
- `side: "left" | "right" | "top" | "bottom"` = "right" — Edge of the screen the drawer slides in from.
|
|
2365
|
+
@default "right"
|
|
2366
|
+
- `slideIn: boolean` = true — Whether to animate the drawer when opening.
|
|
2367
|
+
@default true
|
|
2368
|
+
- `slideOut: boolean` = true — Whether to animate the drawer when closing.
|
|
2369
|
+
@default true
|
|
2370
|
+
- **Dropdown** — Overlay selection menu
|
|
2371
|
+
- `children: ReactNode` (required) — Dropdown parts (Dropdown.Trigger and Dropdown.Menu).
|
|
2372
|
+
- `asChild: boolean` = false — If true, the dropdown will be rendered as its child, merging its props onto that child.
|
|
2373
|
+
- **FocusTrap** — Focus management
|
|
2374
|
+
- `children: React.ReactNode` (required) — Content to trap focus within.
|
|
2375
|
+
- `active: boolean` = true — Whether the trap is active.
|
|
2376
|
+
@default true
|
|
2377
|
+
- `initialFocus: boolean` = true — Whether to focus the first focusable element on mount.
|
|
2378
|
+
- `className: string` — Additional CSS class name.
|
|
2379
|
+
- **HoverCard** — Rich content on hover
|
|
2380
|
+
- `children: ReactNode` (required) — Hover card parts (HoverCardTrigger and HoverCardContent).
|
|
2381
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2382
|
+
- `openDelay: number` = 700 — Delay before showing the hover card in ms.
|
|
2383
|
+
- `closeDelay: number` = 300 — Delay before hiding the hover card in ms.
|
|
2384
|
+
- `open: boolean` — If provided, controls the open state.
|
|
2385
|
+
- `onOpenChange: (open: boolean) => void` — Callback when open state changes.
|
|
2386
|
+
- **Menu** — General menus
|
|
2387
|
+
- `children: ReactNode` (required) — Menu items (MenuItem, MenuItemGroup, SubMenu, MenuDivider).
|
|
2388
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2389
|
+
- `asChild: boolean` = false — If true, the menu root will be rendered as its child, merging its props onto that child.
|
|
2390
|
+
- `mode: "vertical" | "horizontal" | "inline"` = "vertical" — Mode of the menu
|
|
2391
|
+
- `defaultSelectedKeys: string[]` — Default selected keys
|
|
2392
|
+
- `defaultOpenKeys: string[]` = [] — Default opened submenu keys
|
|
2393
|
+
- **Popconfirm** — Confirmation overlay
|
|
2394
|
+
- `title: ReactNode` (required) — The title of the confirmation box
|
|
2395
|
+
- `description: ReactNode` — The description of the confirmation box
|
|
2396
|
+
- `onConfirm: () => void` — Callback when the user clicks the confirm button
|
|
2397
|
+
- `onCancel: () => void` — Callback when the user clicks the cancel button
|
|
2398
|
+
- `okText: ReactNode` = "OK" — Text of the confirm button
|
|
2399
|
+
- `cancelText: ReactNode` = "Cancel" — Text of the cancel button
|
|
2400
|
+
- `okType: ButtonIntent` = "default" — Color role of the confirm button
|
|
2401
|
+
- `children: ReactNode` (required) — The target element which the Popconfirm will be attached to
|
|
2402
|
+
- `icon: ReactNode` — Customize the icon
|
|
2403
|
+
- `disabled: boolean` = false — Whether to show the popconfirm
|
|
2404
|
+
- **Popover** — Contextual overlay
|
|
2405
|
+
- `children: ReactNode` (required) — Popover parts (PopoverTrigger, PopoverContent, etc.).
|
|
2406
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2407
|
+
- `defaultOpen: boolean` = false — If true, the popover component will manage its own open state.
|
|
2408
|
+
- `open: boolean` — If provided, controls the open state.
|
|
2409
|
+
- `onOpenChange: (open: boolean) => void` — Callback when open state changes.
|
|
2410
|
+
- `placement: Placement` = "bottom-start" — Preferred placement of the popover.
|
|
2411
|
+
- `variant: "default" | "glass"` = "default" — The variant of the popover content.
|
|
2412
|
+
- **Portal** — Out-of-hierarchy render
|
|
2413
|
+
- `children: React.ReactNode` (required) — The content to be rendered in the portal
|
|
2414
|
+
- `container: HTMLElement | null` — The container where the portal will be rendered. Defaults to document.body
|
|
2415
|
+
- **Tooltip** — Information on hover
|
|
2416
|
+
- `children: ReactNode` (required) — Tooltip parts (TooltipTrigger and TooltipContent).
|
|
2417
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2418
|
+
- `delay: number` = 200 — Delay before showing the tooltip in ms.
|
|
2419
|
+
- `open: boolean` — If provided, controls the open state.
|
|
2420
|
+
- `onOpenChange: (open: boolean) => void` — Callback when open state changes.
|
|
2421
|
+
- `placement: Placement` = "top" — Preferred placement of the tooltip.
|
|
2422
|
+
- `variant: "default" | "glass"` = "default" — The variant of the tooltip content.
|
|
2423
|
+
|
|
2424
|
+
### typography — `import { … } from "wimui/typography"`
|
|
2425
|
+
|
|
2426
|
+
- **Blockquote** — Visually separates external quotes or text to be emphasized.
|
|
2427
|
+
- `asChild: boolean` = false — If true, the blockquote will be rendered as its child, merging its props onto that child.
|
|
2428
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Font size of the quote.
|
|
2429
|
+
@default "md"
|
|
2430
|
+
- `color: T | (string & {})` — Text color. Accepts a design token color name or any CSS color value.
|
|
2431
|
+
- `content: React.ReactNode` — Quoted content. Alternative to children.
|
|
2432
|
+
- `cite: React.ReactNode` — Source of the quote, rendered in a `<cite>` element.
|
|
2433
|
+
- `border: boolean` = true — Whether to show the left border.
|
|
2434
|
+
@default true
|
|
2435
|
+
- **Code** — Code snippets
|
|
2436
|
+
- `asChild: boolean` = false — If true, the code will be rendered as its child, merging its props onto that child.
|
|
2437
|
+
- `children: React.ReactNode` — Code to display. Ignored when `code` is set (unless asChild is true).
|
|
2438
|
+
- `code: string` — Code string to display. Takes precedence over children.
|
|
2439
|
+
- `block: boolean` = false — If true, renders as a block (`<pre>`) instead of inline.
|
|
2440
|
+
@default false
|
|
2441
|
+
- `language: string` — Language identifier appended as a `language-<lang>` class for syntax highlighters.
|
|
2442
|
+
- **Highlight** — Text highlighting
|
|
2443
|
+
- `children: React.ReactNode` (required) — The full text to highlight substrings in.
|
|
2444
|
+
- `highlight: string | string[]` (required) — Substring(s) to highlight.
|
|
2445
|
+
- `highlightClassName: string` — Custom class name for the highlighted `<mark>` element.
|
|
2446
|
+
- `highlightStyles: React.CSSProperties` — Custom styles for the highlighted `<mark>` element.
|
|
2447
|
+
- `as: React.ElementType` = "span" — The HTML tag or component to use for the container. Default is "span".
|
|
2448
|
+
- `asChild: boolean` = false — If true, the component will be rendered as its child.
|
|
2449
|
+
- **Kbd** — Keyboard shortcuts
|
|
2450
|
+
- `asChild: boolean` = false — If true, the Kbd will be rendered as its child, merging its props onto that child.
|
|
2451
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the key cap.
|
|
2452
|
+
@default "md"
|
|
2453
|
+
- `children: React.ReactNode` — Key label(s) to display.
|
|
2454
|
+
- **Label** — Descriptive text for input fields, including required/optional marks
|
|
2455
|
+
- `label: React.ReactNode` (required) — The main label text or element.
|
|
2456
|
+
- `required: boolean` = false — Whether the field is mandatory. If true, displays a required badge.
|
|
2457
|
+
- `requiredLabel: React.ReactNode` — Custom text or element for the required badge.
|
|
2458
|
+
Defaults to the localized `form.required` string.
|
|
2459
|
+
- `showOptional: boolean` = false — Whether to display an optional badge when `required` is false.
|
|
2460
|
+
@default false
|
|
2461
|
+
- `optionalLabel: React.ReactNode` — Custom text or element for the optional badge.
|
|
2462
|
+
Defaults to the localized `form.optional` string.
|
|
2463
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2464
|
+
- `asChild: boolean` = false — If true, the Label will be rendered as its child, merging its props onto that child.
|
|
2465
|
+
- **Legend** — Group title
|
|
2466
|
+
- `label: React.ReactNode` (required) — The main label text or element.
|
|
2467
|
+
- `required: boolean` — Whether the field is mandatory. If true, displays a required badge.
|
|
2468
|
+
- `requiredLabel: React.ReactNode` — Custom text or element for the required badge.
|
|
2469
|
+
Defaults to the localized `form.required` string.
|
|
2470
|
+
- `showOptional: boolean` — Whether to display an optional badge when `required` is false.
|
|
2471
|
+
@default false
|
|
2472
|
+
- `optionalLabel: React.ReactNode` — Custom text or element for the optional badge.
|
|
2473
|
+
Defaults to the localized `form.optional` string.
|
|
2474
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2475
|
+
- `asChild: boolean` = false — If true, the Legend will be rendered as its child, merging its props onto that child.
|
|
2476
|
+
- **Span** — Lightweight wrapper for inline text or short labels with icon support
|
|
2477
|
+
- `asChild: boolean` = false — If true, the span will be rendered as its child, merging its props onto that child.
|
|
2478
|
+
- `size: Extract<ComponentSize, "xs" | "sm" | "md" | "lg" | "xl">` = "md" — Font size of the text.
|
|
2479
|
+
@default "md"
|
|
2480
|
+
- `color: T | (string & {})` — Text color. Accepts a design token color name or any CSS color value.
|
|
2481
|
+
- `weight: WimFontWeightKey` = "normal" — Font weight.
|
|
2482
|
+
@default "normal"
|
|
2483
|
+
- `fontStyle: "normal" | "italic"` = "normal" — Font style.
|
|
2484
|
+
@default "normal"
|
|
2485
|
+
- `decoration: "line-through" | "underline" | "highlight" | "none"` = "none" — Visual decoration applied to the text.
|
|
2486
|
+
@default "none"
|
|
2487
|
+
- `content: React.ReactNode` — Content of the span. Alternative to children.
|
|
2488
|
+
- `iconName: React.ComponentProps<typeof Icon>["name"]` = undefined — Name of the icon displayed alongside the text.
|
|
2489
|
+
- `iconPosition: "left" | "right"` = "left" — Position of the icon relative to the text.
|
|
2490
|
+
@default "left"
|
|
2491
|
+
- **Spoiler** — Collapse long text such as reviews and comments to a fixed number of lines, with an accessible "show more" toggle that appears only when the text overflows.
|
|
2492
|
+
- `lines: number` = 3 — Number of text lines shown while collapsed.
|
|
2493
|
+
@default 3
|
|
2494
|
+
- `expanded: boolean` — Controlled expanded state. Use together with onExpandedChange.
|
|
2495
|
+
- `defaultExpanded: boolean` = false — Initial expanded state for uncontrolled usage.
|
|
2496
|
+
@default false
|
|
2497
|
+
- `onExpandedChange: (expanded: boolean) => void` — Called with the next state when the toggle is activated.
|
|
2498
|
+
- `showLabel: React.ReactNode` — Label of the toggle while collapsed.
|
|
2499
|
+
@default t("spoiler.show_more")
|
|
2500
|
+
- `hideLabel: React.ReactNode` — Label of the toggle while expanded.
|
|
2501
|
+
@default t("spoiler.show_less")
|
|
2502
|
+
- **Text** — Has appropriate line-height and spacing to ensure readability of long text.
|
|
2503
|
+
- `asChild: boolean` = false — If true, the text will be rendered as its child, merging its props onto that child.
|
|
2504
|
+
- `size: Extract<ComponentSize, "xs" | "sm" | "md" | "lg" | "xl">` = "md" — Font size of the text.
|
|
2505
|
+
@default "md"
|
|
2506
|
+
- `color: T | (string & {})` — Text color. Accepts a design token color name or any CSS color value.
|
|
2507
|
+
- `weight: WimFontWeightKey` = "normal" — Font weight.
|
|
2508
|
+
@default "normal"
|
|
2509
|
+
- `lineHeight: T | (string & {})` — Line height. Accepts a design token name or any CSS line-height value.
|
|
2510
|
+
- `fontStyle: "normal" | "italic"` = "normal" — Font style.
|
|
2511
|
+
@default "normal"
|
|
2512
|
+
- `decoration: "line-through" | "underline" | "highlight" | "none"` = "none" — Visual decoration applied to the text.
|
|
2513
|
+
@default "none"
|
|
2514
|
+
- `content: React.ReactNode` — Content of the text. Alternative to children (children take precedence only with asChild).
|
|
2515
|
+
- **Title** — Possesses visual weight (boldness/size) to indicate page structure.
|
|
2516
|
+
- `asChild: boolean` = false — If true, the heading will be rendered as its child, merging its props onto that child.
|
|
2517
|
+
- `tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"` = "h1" — The semantic HTML tag to use.
|
|
2518
|
+
- `size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"` = "xl" — The visual size of the title.
|
|
2519
|
+
- `color: T | (string & {})` — Text color.
|
|
2520
|
+
- `align: "left" | "center" | "right"` = "left" — Text alignment.
|
|
2521
|
+
- `decoration: "underline" | "highlight" | "none"` = "none" — Visual decoration applied to the heading text.
|
|
2522
|
+
@default "none"
|
|
2523
|
+
- `children: React.ReactNode` (required) — The heading content.
|
|
2524
|
+
|
|
2525
|
+
### media — `import { … } from "wimui/media"`
|
|
2526
|
+
|
|
2527
|
+
- **Audio** — Audio playback
|
|
2528
|
+
- `src: string | string[] | AudioTrack | AudioTrack[]` — Source: a URL, list of URLs, or track object(s)
|
|
2529
|
+
- `autoPlay: boolean` = false — Whether to start playing automatically
|
|
2530
|
+
- `loop: boolean` = false — Whether to loop playback
|
|
2531
|
+
- `muted: boolean` = false — Whether to start muted
|
|
2532
|
+
- `controls: boolean` = true — Whether to show playback controls
|
|
2533
|
+
- `preload: "auto" | "metadata" | "none"` — Preload behavior
|
|
2534
|
+
- `radius: "none" | "sm" | "md" | "lg" | "full"` = "none" — Corner radius size
|
|
2535
|
+
- `shadow: boolean` = false — Whether to show a shadow
|
|
2536
|
+
- `border: boolean` = false — Whether to show a border
|
|
2537
|
+
- `caption: React.ReactNode` — Caption shown below the player
|
|
2538
|
+
- `customControls: boolean` = false — Whether to use the custom control bar instead of native controls
|
|
2539
|
+
- `visualizer: boolean` = false — Whether to show the audio visualizer
|
|
2540
|
+
- `showMetadata: boolean` = false — Whether to show track metadata (title, artist, cover art)
|
|
2541
|
+
- `fadeIn: boolean | number` = false — Whether to fade in when playback starts (or the duration in seconds)
|
|
2542
|
+
- `fadeOut: boolean | number` = false — Whether to fade out when playback ends (or the duration in seconds)
|
|
2543
|
+
- `crossfade: boolean | number` = false — Whether to crossfade between tracks (or the duration in seconds)
|
|
2544
|
+
- `playbackRate: boolean` = false — Whether to show the playback-rate control
|
|
2545
|
+
- `hotkeys: boolean` = false — Whether to enable keyboard hotkeys
|
|
2546
|
+
- `presets: boolean` = false — Whether to show equalizer presets
|
|
2547
|
+
- `sleepTimer: boolean` = false — Whether to show the sleep timer
|
|
2548
|
+
- `loading: "eager" | "lazy"` = "lazy" — Loading behavior. With "lazy", an Intersection Observer is enabled.
|
|
2549
|
+
- `demoDelay: number` — Demo only: milliseconds to intentionally delay load completion
|
|
2550
|
+
- `labels: { seek?: string; mute?: string; unmute?: string; volume?: string; play?: string; pause?: string; next?: string; prev?: string; repeatMode0?: string; // Off repeatMode1?: string; // One repeatMode2?: string; // All shuffle?: string; playbackSpeed?: string; bassBoost?: string; sleepTimer?: string; unknownTitle?: string; unknownArtist?: string; }` = {} — Labels for manual translation
|
|
2551
|
+
- `tracks: React.ComponentPropsWithoutRef<"track">[]` — Subtitle/caption tracks passed as <track> elements (kind, src, srcLang, label).
|
|
2552
|
+
- **Gallery** — Displays a responsive image grid with configurable columns, aspect ratios, multi-select, and an optional lightbox.
|
|
2553
|
+
- `items: GalleryItem[]` (required) — Images to display in the gallery
|
|
2554
|
+
- `columns: number` = 3 — Number of grid columns. Default: 3.
|
|
2555
|
+
- `gap: "xs" | "sm" | "md" | "lg" | "xl"` = "md" — Gap between items. Default: "md".
|
|
2556
|
+
- `aspect: "square" | "landscape" | "portrait" | "auto"` = "square" — Aspect ratio for each image. Default: "square".
|
|
2557
|
+
- `selectable: boolean` = false — Enable multi-select with checkboxes.
|
|
2558
|
+
- `selected: string[]` — Controlled selected IDs.
|
|
2559
|
+
- `defaultSelected: string[]` = [] — Uncontrolled initial selected IDs.
|
|
2560
|
+
- `onSelectionChange: (ids: string[]) => void` — Called when selection changes.
|
|
2561
|
+
- `onItemClick: (item: GalleryItem, index: number) => void` — Called when an item is clicked (outside checkbox).
|
|
2562
|
+
- `renderActions: (params: { selectedIds: string[]; clearSelection: () => void; }) => React.ReactNode` — Render bulk-action toolbar when items are selected.
|
|
2563
|
+
- **Icon** — Visual symbols
|
|
2564
|
+
- `name: keyof typeof ALL_ICONS` — Icon name. Requires `import "wimui/icons"` once at the app entry to register icons.
|
|
2565
|
+
- `component: React.ComponentType<React.SVGProps<SVGSVGElement>>` — Icon component passed directly. Works without registration and is tree-shakable.
|
|
2566
|
+
- `size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl"` = "md" — Size of the icon
|
|
2567
|
+
- `spin: boolean` — Apply the loading rotation animation
|
|
2568
|
+
- `color: "danger" | "success" | "warning" | "info" | "primary" | "secondary" | "tertiary" | "disabled"` — Semantic color of the icon
|
|
2569
|
+
- **Image** — Image content
|
|
2570
|
+
- `src: string` (required) — Source URL of the image
|
|
2571
|
+
- `alt: string` (required) — Alternative text for the image
|
|
2572
|
+
- `width: string | number` — Width of the image
|
|
2573
|
+
- `height: string | number` — Height of the image
|
|
2574
|
+
- `radius: "none" | "sm" | "md" | "lg" | "full"` = "none" — Corner radius size
|
|
2575
|
+
- `shadow: boolean` = false — Whether to show a shadow
|
|
2576
|
+
- `border: boolean` = false — Whether to show a border
|
|
2577
|
+
- `fit: "contain" | "cover" | "fill" | "none" | "scale-down"` = "cover" — How the image fits its box
|
|
2578
|
+
- `loading: "eager" | "lazy"` — Lazy-loading behavior
|
|
2579
|
+
- `caption: string` — Caption shown below the image
|
|
2580
|
+
- `filter: ImageFilterOptions` — Filter applied to the image itself
|
|
2581
|
+
- `hoverFilter: ImageFilterOptions` — Filter applied on hover (when omitted, `filter` is kept)
|
|
2582
|
+
- `backdropFilter: ImageFilterOptions` — Filter applied to the background (effective with transparent images)
|
|
2583
|
+
- `hoverBackdropFilter: ImageFilterOptions` — Filter applied to the background on hover
|
|
2584
|
+
- `transition: "none" | "fast" | "normal" | "slow"` = "normal" — Animation speed when switching filters
|
|
2585
|
+
- `noise: ComponentSize | "none"` — Intensity of the film-grain (noise) effect
|
|
2586
|
+
- `duotone: ImageDuotoneOptions` — Duotone settings
|
|
2587
|
+
- `overlay: ImageOverlayOptions` — Overlay settings
|
|
2588
|
+
- `zoom: boolean | number` = false — Zoom factor on hover (e.g. 1.1) or true (defaults to 1.05)
|
|
2589
|
+
- `tilt: boolean` = false — Tilt effect that follows the mouse
|
|
2590
|
+
- `fadeIn: boolean` = false — Whether to fade in when loading completes
|
|
2591
|
+
- `blendMode: React.CSSProperties["mixBlendMode"]` — Blend mode of the image itself
|
|
2592
|
+
- `bgColor: string` — Background color used for blending
|
|
2593
|
+
- `demoDelay: number` — Demo only: milliseconds to intentionally delay load completion
|
|
2594
|
+
- `priority: boolean` = false — Whether to raise loading priority (e.g. an LCP candidate; sets fetchpriority="high")
|
|
2595
|
+
- `fallback: React.ReactNode` — Custom element shown when loading fails
|
|
2596
|
+
- **ImageCompare** — ImageCompare overlays two images and reveals them with a draggable divider — a before/after slider for comparing edits, restorations, or AI-generated results against their source.
|
|
2597
|
+
- `before: string` (required) — Source URL of the "before" image (revealed on the leading side)
|
|
2598
|
+
- `after: string` (required) — Source URL of the "after" image (revealed on the trailing side)
|
|
2599
|
+
- `beforeAlt: string` = "" — Alternative text for the before image
|
|
2600
|
+
- `afterAlt: string` = "" — Alternative text for the after image
|
|
2601
|
+
- `beforeLabel: React.ReactNode` — Badge label overlaid on the before side
|
|
2602
|
+
- `afterLabel: React.ReactNode` — Badge label overlaid on the after side
|
|
2603
|
+
- `defaultPosition: number` = 50 — Initial divider position as a percentage 0–100 (uncontrolled)
|
|
2604
|
+
- `position: number` — Divider position as a percentage 0–100 (controlled)
|
|
2605
|
+
- `onPositionChange: (position: number) => void` — Callback when the divider position changes
|
|
2606
|
+
- `orientation: "horizontal" | "vertical"` = "horizontal" — Direction the divider slides along
|
|
2607
|
+
- `width: string | number` — Width of the component
|
|
2608
|
+
- `height: string | number` — Height of the component
|
|
2609
|
+
- `radius: "none" | "sm" | "md" | "lg" | "full"` = "md" — Corner radius size
|
|
2610
|
+
- `labels: { /** Accessible label for the drag handle */ handleAriaLabel?: string; }` — Labels for internationalization
|
|
2611
|
+
- `className: string` — Additional class names
|
|
2612
|
+
- **Lightbox** — A high-quality overlay component for displaying images and media with gallery and zoom functionality.
|
|
2613
|
+
- `children: React.ReactNode` (required) — Lightbox parts (Lightbox.Trigger, Lightbox.Content, etc.)
|
|
2614
|
+
- `open: boolean` — Controlled open state
|
|
2615
|
+
- `onOpenChange: (open: boolean) => void` — Callback when the open state changes
|
|
2616
|
+
- `defaultOpen: boolean` = false — Initial open state for uncontrolled usage
|
|
2617
|
+
- `defaultIndex: number` = 0 — Index of the item shown first
|
|
2618
|
+
- **Video** — A component for embedding and controlling local or remote video content
|
|
2619
|
+
- `src: string` — Source URL of the video
|
|
2620
|
+
- `width: string | number` — Width of the video
|
|
2621
|
+
- `height: string | number` — Height of the video
|
|
2622
|
+
- `autoPlay: boolean` = false — Whether to start playing automatically
|
|
2623
|
+
- `loop: boolean` = false — Whether to loop playback
|
|
2624
|
+
- `muted: boolean` = false — Whether to start muted
|
|
2625
|
+
- `controls: boolean` = true — Whether to show playback controls
|
|
2626
|
+
- `poster: string` — Poster image shown before playback
|
|
2627
|
+
- `radius: "none" | "sm" | "md" | "lg" | "full"` = "none" — Corner radius size
|
|
2628
|
+
- `shadow: boolean` = false — Whether to show a shadow
|
|
2629
|
+
- `border: boolean` = false — Whether to show a border
|
|
2630
|
+
- `fit: "contain" | "cover" | "fill" | "none" | "scale-down"` = "cover" — How the video fits its box
|
|
2631
|
+
- `preload: "auto" | "metadata" | "none"` — Preload behavior
|
|
2632
|
+
- `caption: React.ReactNode` — Caption shown below the video
|
|
2633
|
+
- `customControls: boolean` = false — Whether to use the custom control bar instead of native controls
|
|
2634
|
+
- `advancedControls: boolean` = false — Whether to enable advanced controls (quality, playback rate, etc.)
|
|
2635
|
+
- `videoId: string` — Unique ID used to persist and resume playback position
|
|
2636
|
+
- `resumePlayback: boolean` = false — Whether to resume playback from the last saved position
|
|
2637
|
+
- `playlist: { src: string; title?: string; poster?: string }[]` — Playlist of videos to play in sequence
|
|
2638
|
+
- `autoPlayNext: boolean` = false — Whether to automatically play the next playlist item
|
|
2639
|
+
- `qualities: { label: string; src: string }[]` — Selectable quality sources
|
|
2640
|
+
- `loading: "eager" | "lazy"` = "lazy" — Loading behavior. With "lazy", an Intersection Observer is enabled.
|
|
2641
|
+
- `fadeIn: boolean` = false — Whether to fade in when loading completes
|
|
2642
|
+
- `demoDelay: number` — Demo only: milliseconds to intentionally delay load completion
|
|
2643
|
+
- `labels: { playlist?: string; skipBackward?: string; skipForward?: string; play?: string; pause?: string; nextTrack?: string; seek?: string; mute?: string; unmute?: string; volume?: string; settings?: string; pip?: string; fullscreen?: string; exitFullscreen?: string; quality?: string; playbackRate?: string; aspectRatio?: string; standard?: string; back?: string; auto?: string; fit?: string; fill?: string; contain?: string; cover?: string; scaleDown?: string; none?: string; videoAriaLabel?: string; seconds?: string; // e.g. "seconds" or "秒" }` = {} — Labels for manual translation
|
|
2644
|
+
- `tracks: React.ComponentPropsWithoutRef<"track">[]` — Subtitle/caption tracks passed as <track> elements (kind, src, srcLang, label).
|
|
2645
|
+
|
|
2646
|
+
### charts — `import { … } from "wimui/charts"`
|
|
2647
|
+
|
|
2648
|
+
- **AreaChart** — Area charts
|
|
2649
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the chart.
|
|
2650
|
+
- `keys: string[]` (required) — Keys in the data objects to render as areas (series).
|
|
2651
|
+
- `xAxisKey: string` (required) — The key in the data objects used for the X axis labels.
|
|
2652
|
+
- `stacked: boolean` = false — If true, series are stacked on top of each other.
|
|
2653
|
+
@default false
|
|
2654
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2655
|
+
@default 300
|
|
2656
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2657
|
+
@default "100%"
|
|
2658
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2659
|
+
- `smooth: boolean` = true — If true, draws smooth (monotone) curves instead of straight lines.
|
|
2660
|
+
@default true
|
|
2661
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2662
|
+
@default false
|
|
2663
|
+
- **BarChart** — Bar charts
|
|
2664
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the chart.
|
|
2665
|
+
- `keys: string[]` (required) — Keys in the data objects to render as bars (series).
|
|
2666
|
+
- `xAxisKey: string` (required) — The key in the data objects used for the X axis labels.
|
|
2667
|
+
- `stacked: boolean` = false — If true, series are stacked on top of each other.
|
|
2668
|
+
@default false
|
|
2669
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2670
|
+
@default 300
|
|
2671
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2672
|
+
@default "100%"
|
|
2673
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2674
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2675
|
+
@default false
|
|
2676
|
+
- **FunnelChart** — Process stage abandonment chart
|
|
2677
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the chart. Each entry represents one funnel stage.
|
|
2678
|
+
- `dataKey: string` (required) — The key in the data objects that represents the value of each stage.
|
|
2679
|
+
- `nameKey: string` (required) — The key in the data objects used for the stage labels.
|
|
2680
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2681
|
+
@default 300
|
|
2682
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2683
|
+
@default "100%"
|
|
2684
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2685
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2686
|
+
@default false
|
|
2687
|
+
- **GanttChart** — Project schedule and timeline visualization
|
|
2688
|
+
- `tasks: GanttTask[]` (required) — Tasks to render as bars in the chart.
|
|
2689
|
+
- `startDate: Date` — Start of the visible date range. Defaults to the earliest task start date.
|
|
2690
|
+
- `endDate: Date` — End of the visible date range. Defaults to the latest task end date.
|
|
2691
|
+
- `viewMode: "day" | "week" | "month"` = "day" — Granularity of the time axis.
|
|
2692
|
+
@default "day"
|
|
2693
|
+
- `columnWidth: number` — Width of one time column in pixels. Defaults to a value suited to the view mode.
|
|
2694
|
+
- `rowHeight: number` = 40 — Height of one task row in pixels.
|
|
2695
|
+
@default 40
|
|
2696
|
+
- `onTaskClick: (task: GanttTask) => void` — Called when a task bar is clicked.
|
|
2697
|
+
- `className: string` — Additional CSS class name for the container.
|
|
2698
|
+
- `labels: { ariaChart?: string; ariaTaskBar?: (label: string, start: string, end: string) => string; }` — Labels for manual translation overrides.
|
|
2699
|
+
- **GaugeChart** — KPI goal achievement chart
|
|
2700
|
+
- `value: number` (required) — Current value displayed by the gauge. Clamped between min and max.
|
|
2701
|
+
- `min: number` = 0 — Minimum value of the gauge.
|
|
2702
|
+
@default 0
|
|
2703
|
+
- `max: number` = 100 — Maximum value of the gauge.
|
|
2704
|
+
@default 100
|
|
2705
|
+
- `height: number` = 200 — The height of the chart in pixels.
|
|
2706
|
+
@default 200
|
|
2707
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2708
|
+
@default "100%"
|
|
2709
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2710
|
+
- `label: string` — Text label displayed with the value inside the gauge.
|
|
2711
|
+
- `color: string` — Color of the gauge arc. Defaults to the first chart color.
|
|
2712
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2713
|
+
@default false
|
|
2714
|
+
- **Heatmap** — Graphical representation of data where individual values are contained in a matrix as colors.
|
|
2715
|
+
- `data: { x: string; y: string; value: number }[]` (required) — Cells to display. Each entry maps an x/y category pair to a value.
|
|
2716
|
+
- `xAxisKey: string[]` (required) — Ordered list of X axis category labels.
|
|
2717
|
+
- `yAxisKey: string[]` (required) — Ordered list of Y axis category labels.
|
|
2718
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2719
|
+
@default 300
|
|
2720
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2721
|
+
@default "100%"
|
|
2722
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2723
|
+
- `colorRange: [string, string]` = ["var(--wim-color-surface-variant)", "var(--wim-color-primary)"] — Colors used for the lowest and highest values.
|
|
2724
|
+
@default ["var(--wim-color-surface-variant)", "var(--wim-color-primary)"]
|
|
2725
|
+
- `animated: boolean` = false — Whether to animate the cells on mount.
|
|
2726
|
+
@default false
|
|
2727
|
+
- **LineChart** — Line charts
|
|
2728
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the chart.
|
|
2729
|
+
- `keys: string[]` (required) — Keys in the data objects to render as lines (series).
|
|
2730
|
+
- `xAxisKey: string` (required) — The key in the data objects used for the X axis labels.
|
|
2731
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2732
|
+
@default 300
|
|
2733
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2734
|
+
@default "100%"
|
|
2735
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2736
|
+
- `smooth: boolean` = false — If true, draws smooth (monotone) curves instead of straight lines.
|
|
2737
|
+
@default false
|
|
2738
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2739
|
+
@default false
|
|
2740
|
+
- **PieChart** — Proportional parts of a whole chart
|
|
2741
|
+
- `data: { name: string; value: number }[]` (required) — Slices to display. Each entry has a name (label) and a value.
|
|
2742
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2743
|
+
@default 300
|
|
2744
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2745
|
+
@default "100%"
|
|
2746
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2747
|
+
- `donut: boolean` = false — If true, renders as a donut chart with a hollow center.
|
|
2748
|
+
@default false
|
|
2749
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2750
|
+
@default false
|
|
2751
|
+
- **RadarChart** — Multivariate data on concentric axes chart
|
|
2752
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the chart.
|
|
2753
|
+
- `keys: string[]` (required) — Keys in the data objects to render as radar areas (series).
|
|
2754
|
+
- `indexKey: string` (required) — The key in the data objects used for the axis (category) labels.
|
|
2755
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2756
|
+
@default 300
|
|
2757
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2758
|
+
@default "100%"
|
|
2759
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2760
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2761
|
+
@default false
|
|
2762
|
+
- **ScatterChart** — Scatter plots
|
|
2763
|
+
- `data: { x: number; y: number; z?: number; name: string }[]` (required) — Points to plot. `z` optionally controls the point size.
|
|
2764
|
+
- `xAxisName: string` = "X" — Name of the X axis, shown in the tooltip.
|
|
2765
|
+
@default "X"
|
|
2766
|
+
- `yAxisName: string` = "Y" — Name of the Y axis, shown in the tooltip.
|
|
2767
|
+
@default "Y"
|
|
2768
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2769
|
+
@default 300
|
|
2770
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2771
|
+
@default "100%"
|
|
2772
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2773
|
+
- `animated: boolean` = false — If true, animates the chart on mount.
|
|
2774
|
+
@default false
|
|
2775
|
+
- **Sparkline** — Tiny inline trend chart
|
|
2776
|
+
- `data: number[]` (required) — Sequence of values to plot, in order
|
|
2777
|
+
- `type: "line" | "area" | "bar"` = "line" — Visual form of the sparkline
|
|
2778
|
+
- `width: number | string` = 100 — Width of the sparkline (number in px, or a CSS value such as "100%")
|
|
2779
|
+
- `height: number` = 24 — Height of the sparkline in px
|
|
2780
|
+
- `color: string` = "var(--wim-color-primary)" — Stroke/fill color (defaults to the primary chart color)
|
|
2781
|
+
- `strokeWidth: number` = 2 — Stroke width for line and area types
|
|
2782
|
+
- `showLastDot: boolean` = false — Whether to emphasize the last data point with a dot (line and area only)
|
|
2783
|
+
- `min: number` — Lower bound of the y-axis domain (defaults to the data minimum)
|
|
2784
|
+
- `max: number` — Upper bound of the y-axis domain (defaults to the data maximum)
|
|
2785
|
+
- `ariaLabel: string` — Accessible label describing the trend; when omitted the sparkline is hidden from assistive tech
|
|
2786
|
+
- `className: string` — Additional class names
|
|
2787
|
+
- **Treemap** — Hierarchical data area-based display
|
|
2788
|
+
- `data: ChartDataPoint[]` (required) — Data to display in the treemap.
|
|
2789
|
+
- `dataKey: string` (required) — The key in the data objects that represents the size of the rectangle.
|
|
2790
|
+
- `aspectRatio: number` = 4 / 3 — The aspect ratio of the rectangles.
|
|
2791
|
+
@default 4/3
|
|
2792
|
+
- `height: number` = 300 — The height of the chart in pixels.
|
|
2793
|
+
@default 300
|
|
2794
|
+
- `width: string | number` = "100%" — The width of the chart (e.g., "100%", 500).
|
|
2795
|
+
@default "100%"
|
|
2796
|
+
- `title: string` — Optional title displayed above the chart.
|
|
2797
|
+
|
|
2798
|
+
### ai — `import { … } from "wimui/ai"`
|
|
2799
|
+
|
|
2800
|
+
- **AgentStatus** — Real-time agent state indicator (thinking / running / waiting)
|
|
2801
|
+
- `status: "idle" | "thinking" | "running" | "waiting" | "done" | "error"` (required) — Current state of the agent
|
|
2802
|
+
- `message: string` — Optional description of what the agent is doing; falls back to the localized status label
|
|
2803
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size variant
|
|
2804
|
+
- `showLabel: boolean` = true — Whether to show the text label next to the indicator
|
|
2805
|
+
- `className: string` — Additional CSS class
|
|
2806
|
+
- **AIResponseFeedback** — Thumbs-up/down feedback controls and regenerate button for AI responses.
|
|
2807
|
+
- `feedback: AIFeedbackValue | null` — Currently selected feedback value (controlled)
|
|
2808
|
+
- `defaultFeedback: AIFeedbackValue | null` = null — Default feedback value (uncontrolled)
|
|
2809
|
+
- `onFeedback: (value: AIFeedbackValue | null) => void` — Called when user clicks a feedback button. Passes null when deselected.
|
|
2810
|
+
- `showRegenerate: boolean` = false — Whether to show the regenerate button
|
|
2811
|
+
- `onRegenerate: () => void` — Called when the regenerate button is clicked
|
|
2812
|
+
- `disabled: boolean` = false — Whether all buttons are disabled
|
|
2813
|
+
- **ArtifactsOverlay** — ArtifactsOverlay is a specialized side-panel for displaying large AI-generated content (Artifacts) without interrupting the main chat context.
|
|
2814
|
+
- `open: boolean` (required) — Whether the overlay is open
|
|
2815
|
+
- `onOpenChange: (open: boolean) => void` (required) — Callback when open state changes
|
|
2816
|
+
- `title: string` (required) — Title of the artifact
|
|
2817
|
+
- `subtitle: string` — Subtitle or version info
|
|
2818
|
+
- `children: React.ReactNode` (required) — Main content
|
|
2819
|
+
- `showFullscreenToggle: boolean` = false — Whether to show a full-screen toggle (default: false)
|
|
2820
|
+
- `className: string` — Additional CSS class
|
|
2821
|
+
- **ChatUI** — A comprehensive set of components for building chat interfaces with support for messages, avatars, timestamps, and interactive input.
|
|
2822
|
+
- **CodeBlock** — Syntax-highlighted code block with copy button, line numbers, and collapsible overflow.
|
|
2823
|
+
- `code: string` (required) — The code string to display
|
|
2824
|
+
- `language: string` — Programming language label shown in the header (e.g. "tsx", "bash")
|
|
2825
|
+
- `filename: string` — Optional filename shown in the header instead of the language label
|
|
2826
|
+
- `showCopy: boolean` = true — Whether to show the copy-to-clipboard button (default: true)
|
|
2827
|
+
- `showLineNumbers: boolean` = false — Whether to show line numbers (default: false)
|
|
2828
|
+
- `maxLines: number` — Maximum visible height before the block becomes scrollable.
|
|
2829
|
+
Pass a CSS value (e.g. "300px") or a number of lines (e.g. 20).
|
|
2830
|
+
When set, an expand/collapse toggle is shown.
|
|
2831
|
+
- `className: string` — Additional CSS class
|
|
2832
|
+
- **CodeDiffViewer** — Displays code changes as a side-by-side or unified diff, with line-level highlighting and Apply/Reject actions.
|
|
2833
|
+
- `before: string` (required) — Code before the change
|
|
2834
|
+
- `after: string` (required) — Code after the change
|
|
2835
|
+
- `language: string` — Language label shown in header
|
|
2836
|
+
- `filename: string` — Filename shown in header (takes precedence over language)
|
|
2837
|
+
- `view: "split" | "unified"` = "split" — Display mode
|
|
2838
|
+
- `onApply: () => void` — Called when user clicks Apply
|
|
2839
|
+
- `onReject: () => void` — Called when user clicks Reject
|
|
2840
|
+
- `className: string` — Additional CSS class
|
|
2841
|
+
- `isApplying: boolean` = false — Whether the change is currently being applied
|
|
2842
|
+
- `isApplied: boolean` = false — Whether the change has been successfully applied
|
|
2843
|
+
- **InteractiveGraph** — InteractiveGraph provides a canvas for visualizing node-based data. Ideal for RAG knowledge bases, agent workflows, or state machines.
|
|
2844
|
+
- `nodes: Node[]` (required) — Initial nodes
|
|
2845
|
+
- `edges: Edge[]` (required) — Initial edges
|
|
2846
|
+
- `height: string | number` — Height of the container
|
|
2847
|
+
- `width: string | number` — Width of the container
|
|
2848
|
+
- `className: string` — Additional CSS class
|
|
2849
|
+
- `showGrid: boolean` — Whether to show the background grid
|
|
2850
|
+
- `showMiniMap: boolean` — Whether to show the minimap
|
|
2851
|
+
- `showControls: boolean` — Whether to show controls
|
|
2852
|
+
- **MarkdownRenderer** — MarkdownRenderer converts a markdown string into WIM UI components. It uses react-markdown under the hood and applies WIM's typography system.
|
|
2853
|
+
- `content: string` (required) — The markdown string to render
|
|
2854
|
+
- `className: string` — Additional CSS class for the root element
|
|
2855
|
+
- `withAnchors: boolean` — Whether to render titles with anchor links (default: false)
|
|
2856
|
+
- **ModelSelector** — ModelSelector is a dropdown for switching between AI models, surfacing the metadata that matters when choosing one — context window size and per-token pricing.
|
|
2857
|
+
- `models: ModelOption[]` (required) — List of selectable models
|
|
2858
|
+
- `value: string` — Selected model id (controlled)
|
|
2859
|
+
- `defaultValue: string` — Initially selected model id (uncontrolled)
|
|
2860
|
+
- `onChange: (id: string, model: ModelOption) => void` — Callback when the selected model changes
|
|
2861
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the trigger
|
|
2862
|
+
- `disabled: boolean` = false — Whether the selector is disabled
|
|
2863
|
+
- `fullWidth: boolean` = false — Whether to take full width of parent
|
|
2864
|
+
- `showPricing: boolean` = true — Whether to show pricing metadata in the dropdown
|
|
2865
|
+
- `showContext: boolean` = true — Whether to show the context-length metadata in the dropdown
|
|
2866
|
+
- `labels: { /** Placeholder shown when nothing is selected */ placeholder?: string; /** Prefix for the context-length meta (default "Context") */ contextLabel?: string; /** Prefix for the input price meta (default "In") */ inputLabel?: string; /** Prefix for the output price meta (default "Out") */ outputLabel?: string; /** Suffix appended to prices (default "/1M") */ perTokensLabel?: string; /** Accessible label for the trigger button */ triggerAriaLabel?: string; }` — Labels for internationalization
|
|
2867
|
+
- `className: string` — Additional class names
|
|
2868
|
+
- **PromptInput** — Auto-resizing prompt input with send and attachment actions
|
|
2869
|
+
- `value: string` — Current text value (controlled)
|
|
2870
|
+
- `defaultValue: string` = "" — Default value (uncontrolled)
|
|
2871
|
+
- `onChange: (value: string) => void` — Callback when value changes
|
|
2872
|
+
- `onSubmit: (value: string) => void` — Callback when user submits (Enter or button click)
|
|
2873
|
+
- `placeholder: string` — Placeholder text
|
|
2874
|
+
- `maxLength: number` — Maximum number of characters
|
|
2875
|
+
- `disabled: boolean` = false — Whether the input is disabled
|
|
2876
|
+
- `loading: boolean` = false — Whether the input is in a loading state
|
|
2877
|
+
- `showAttach: boolean` = false — Whether to show the attachment button
|
|
2878
|
+
- `onAttach: () => void` — Callback when attachment button is clicked
|
|
2879
|
+
- `maxRows: number` = 8 — Maximum number of rows to show before scrolling
|
|
2880
|
+
- `fullWidth: boolean` = false — Whether the input should take up the full width of its container
|
|
2881
|
+
- `className: string` — Additional CSS class
|
|
2882
|
+
- `label: React.ReactNode` — Label for the field
|
|
2883
|
+
- `error: string` — Error message
|
|
2884
|
+
- `required: boolean` — Whether the field is required
|
|
2885
|
+
- `layout: "vertical" | "horizontal"` — Layout of the field
|
|
2886
|
+
- **SourceCitation** — Displays cited sources with title, domain, and external link for AI-generated content.
|
|
2887
|
+
- `title: string` (required) — Title of the source
|
|
2888
|
+
- `url: string` — Source URL. When provided, renders as a clickable link.
|
|
2889
|
+
- `description: string` — Brief excerpt or description of the source
|
|
2890
|
+
- `index: number` — Numeric citation index shown as a badge (e.g. 1, 2, 3)
|
|
2891
|
+
- `domain: string` — Domain label shown below the title (auto-derived from url when omitted)
|
|
2892
|
+
- `className: string` — Additional CSS class
|
|
2893
|
+
- **StreamingText** — Streaming Markdown renderer for AI-generated responses
|
|
2894
|
+
- `content: string` (required) — The markdown text content to render
|
|
2895
|
+
- `isStreaming: boolean` = false — When true, a blinking cursor is shown at the end of the content
|
|
2896
|
+
- `components: Components` — Override the default markdown component renderers
|
|
2897
|
+
- `className: string` — Additional CSS class
|
|
2898
|
+
- **Terminal** — Renders terminal-style output with ANSI color support, prompt prefixes, and copy/clear controls.
|
|
2899
|
+
- `lines: TerminalLine[]` = [] — Lines to display
|
|
2900
|
+
- `title: string` — Window title shown in header bar
|
|
2901
|
+
- `height: string | number` — Explicit height; omit to let the terminal grow with content
|
|
2902
|
+
- `autoScroll: boolean` = true — Scroll to bottom when lines change
|
|
2903
|
+
- `prompt: string` = "$" — Prompt prefix for input lines
|
|
2904
|
+
- `showCopy: boolean` = true — Whether to show the copy button
|
|
2905
|
+
- `onClear: () => void` — Whether to show the clear button; fires onClear when clicked
|
|
2906
|
+
- `className: string` — Additional CSS class
|
|
2907
|
+
- **ThoughtProcess** — Visualizes AI reasoning steps and execution states in a timeline format.
|
|
2908
|
+
- `children: React.ReactNode` (required) — Reasoning steps to display (typically ThoughtStep elements)
|
|
2909
|
+
- `title: string` = "Thinking Process" — Header title
|
|
2910
|
+
- `className: string` — Additional CSS class
|
|
2911
|
+
- `isCollapsible: boolean` = true — Whether the body can be collapsed
|
|
2912
|
+
- `defaultExpanded: boolean` = true — Initial expanded state (only relevant when isCollapsible is true)
|
|
2913
|
+
- `isThinking: boolean` = false — Whether the AI is currently thinking (shows a pulsating background)
|
|
2914
|
+
- **ThreadList** — ThreadList renders a conversation-history sidebar for AI chat apps — a scrollable list of past threads with an optional new-conversation action and per-thread deletion.
|
|
2915
|
+
- `threads: Thread[]` (required) — Conversations to display, ordered newest first
|
|
2916
|
+
- `activeId: string` — Id of the currently active thread
|
|
2917
|
+
- `onSelect: (id: string) => void` — Callback when a thread is selected
|
|
2918
|
+
- `onDelete: (id: string) => void` — Callback when a thread's delete button is clicked (shows the button when set)
|
|
2919
|
+
- `onNewThread: () => void` — Callback when the new-conversation button is clicked (shows the button when set)
|
|
2920
|
+
- `labels: { /** Label of the new-conversation button */ newThread?: string; /** Text shown when there are no threads */ empty?: string; /** Accessible label for each delete button */ delete?: string; /** Accessible label for the list */ listAriaLabel?: string; }` — Labels for internationalization
|
|
2921
|
+
- `className: string` — Additional class names
|
|
2922
|
+
- **UsageMeter** — UsageMeter (also exported as TokenCounter) visualizes token consumption against a budget such as a model's context window — a labeled bar plus a numeric readout that shifts to warning and danger colors near the limit.
|
|
2923
|
+
- `used: number` (required) — Number of tokens used so far
|
|
2924
|
+
- `max: number` — Maximum available tokens (e.g. the context window). Omit for a counter-only display.
|
|
2925
|
+
- `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the meter
|
|
2926
|
+
- `showBar: boolean` = true — Whether to render the progress bar (requires `max`)
|
|
2927
|
+
- `showPercentage: boolean` = false — Whether to show the percentage instead of the raw count in the readout
|
|
2928
|
+
- `warnThreshold: number` = 0.75 — Fraction (0–1) at which the meter turns to the warning color
|
|
2929
|
+
- `dangerThreshold: number` = 0.9 — Fraction (0–1) at which the meter turns to the danger color
|
|
2930
|
+
- `labels: { /** Leading label (default "Tokens") */ label?: string; /** Unit appended to the raw counts (default "tokens") */ unit?: string; /** Accessible label describing the meter */ ariaLabel?: string; }` — Labels for internationalization
|
|
2931
|
+
- `className: string` — Additional class names
|
|
2932
|
+
- **VoiceVisualizer** — Animated voice-level indicator (bars / waveform)
|
|
2933
|
+
- `mode: "bars" | "waveform"` = "bars" — Visualization style
|
|
2934
|
+
- `data: unknown` — Normalized amplitude values (0–1) per slot.
|
|
2935
|
+
When omitted, a looping idle animation plays.
|
|
2936
|
+
For bars: one value per bar. For waveform: time-domain samples.
|
|
2937
|
+
- `isActive: boolean` = true — Whether the component is in an active (recording/playing) state
|
|
2938
|
+
- `barCount: number` = 24 — Number of bars — bars mode only (default 24)
|
|
2939
|
+
- `height: number` = 40 — Rendered height in pixels (default 40)
|
|
2940
|
+
- `className: string` — Additional CSS class
|
|
2941
|
+
- `sentiment: "neutral" | "positive" | "caution" | "negative" | "informative"` = "neutral" — Sentiment context for coloring (default 'neutral')
|