@apcrda/ui 0.5.7 → 0.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +343 -51
- package/dist/components/AlertDialog/AlertDialog.d.ts +22 -3
- package/dist/components/AlertDialog/AlertDialog.types.d.ts +14 -12
- package/dist/components/AlertDialog/index.d.ts +2 -2
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Card/Card.d.ts +4 -2
- package/dist/components/Card/Card.types.d.ts +4 -1
- package/dist/components/Card/index.d.ts +1 -1
- package/dist/components/FormField/FormField.d.ts +1 -1
- package/dist/components/FormField/FormField.types.d.ts +4 -1
- package/dist/components/FormField/FormFieldContext.d.ts +9 -0
- package/dist/components/FormField/index.d.ts +2 -0
- package/dist/components/Navbar/Navbar.d.ts +5 -0
- package/dist/components/Navbar/Navbar.types.d.ts +10 -0
- package/dist/components/Navbar/index.d.ts +2 -0
- package/dist/components/Spinner/Spinner.d.ts +2 -0
- package/dist/components/Spinner/Spinner.types.d.ts +9 -0
- package/dist/components/Spinner/index.d.ts +2 -0
- package/dist/components/Stepper/Stepper.d.ts +1 -1
- package/dist/components/Stepper/Stepper.types.d.ts +1 -0
- package/dist/components/Table/DataTable.d.ts +1 -1
- package/dist/components/Table/DataTable.types.d.ts +62 -6
- package/dist/components/Table/DataTable.utils.d.ts +7 -0
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/Textarea/Textarea.d.ts +1 -0
- package/dist/components/Textarea/Textarea.types.d.ts +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/index.js +6379 -4720
- package/dist/xlsx-BNuhnZ8W.js +12387 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,93 +1,385 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @apcrda/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@apcrda/ui)
|
|
4
|
+
[](https://www.npmjs.com/package/@apcrda/ui)
|
|
5
|
+
[](https://www.npmjs.com/package/@apcrda/ui)
|
|
6
|
+
|
|
7
|
+
Production-ready React 19 component library for APCRDA government applications. 49 accessible components covering forms, data display, navigation, feedback, and layout — built on Tailwind CSS v4 with full dark-mode and theming support.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **49 components** — forms, tables, modals, navigation, charts, and more
|
|
12
|
+
- **Accessible** — WCAG 2.1 AA target; keyboard navigation; ARIA semantics via Radix UI primitives
|
|
13
|
+
- **Fully typed** — complete TypeScript types exported for every component and prop
|
|
14
|
+
- **Themeable** — CSS custom properties, `data-theme` attribute, light and dark modes out of the box
|
|
15
|
+
- **Tree-shakeable** — ESM build with preserved module boundaries; only the components you import are bundled
|
|
16
|
+
- **FormField integration** — label, hint, and error wiring handled automatically via React context
|
|
17
|
+
- **DataTable** — sort, filter, paginate, pin, resize, reorder, virtual scroll (1 000+ rows), CSV/Excel export
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
4
22
|
|
|
5
23
|
```bash
|
|
6
24
|
npm install @apcrda/ui
|
|
7
25
|
```
|
|
8
26
|
|
|
9
|
-
|
|
27
|
+
**Peer dependencies** — install these in your project if not already present:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install react@^19 react-dom@^19
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Setup
|
|
36
|
+
|
|
37
|
+
### 1. Import the stylesheet
|
|
10
38
|
|
|
11
|
-
|
|
39
|
+
Add this once in your application entry point (e.g. `main.tsx`):
|
|
12
40
|
|
|
13
41
|
```tsx
|
|
14
42
|
import '@apcrda/ui/styles.css'
|
|
15
43
|
```
|
|
16
44
|
|
|
17
|
-
|
|
45
|
+
### 2. Wrap with ThemeProvider
|
|
18
46
|
|
|
19
47
|
```tsx
|
|
20
|
-
import {
|
|
48
|
+
import { ThemeProvider } from '@apcrda/ui'
|
|
21
49
|
|
|
22
|
-
export default function
|
|
50
|
+
export default function Root() {
|
|
23
51
|
return (
|
|
24
52
|
<ThemeProvider defaultTheme="light">
|
|
25
|
-
<
|
|
26
|
-
<CardContent className="space-y-4">
|
|
27
|
-
<Input placeholder="Employee Name" />
|
|
28
|
-
<Button>Save</Button>
|
|
29
|
-
</CardContent>
|
|
30
|
-
</Card>
|
|
53
|
+
<App />
|
|
31
54
|
</ThemeProvider>
|
|
32
55
|
)
|
|
33
56
|
}
|
|
34
57
|
```
|
|
35
58
|
|
|
36
|
-
|
|
59
|
+
`ThemeProvider` sets the `data-theme` attribute on `<html>` and persists the user's preference to `localStorage` automatically.
|
|
37
60
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
### Basic form
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Button, FormField, Input, PasswordInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@apcrda/ui'
|
|
69
|
+
|
|
70
|
+
export function LoginForm() {
|
|
71
|
+
return (
|
|
72
|
+
<form className="flex flex-col gap-4">
|
|
73
|
+
<FormField label="Employee ID" required>
|
|
74
|
+
<Input placeholder="EMP-0001" />
|
|
75
|
+
</FormField>
|
|
76
|
+
|
|
77
|
+
<FormField label="Password" required>
|
|
78
|
+
<PasswordInput placeholder="Enter password" />
|
|
79
|
+
</FormField>
|
|
80
|
+
|
|
81
|
+
<FormField label="Department">
|
|
82
|
+
<Select>
|
|
83
|
+
<SelectTrigger>
|
|
84
|
+
<SelectValue placeholder="Select department" />
|
|
85
|
+
</SelectTrigger>
|
|
86
|
+
<SelectContent>
|
|
87
|
+
<SelectItem value="revenue">Revenue</SelectItem>
|
|
88
|
+
<SelectItem value="survey">Survey</SelectItem>
|
|
89
|
+
</SelectContent>
|
|
90
|
+
</Select>
|
|
91
|
+
</FormField>
|
|
92
|
+
|
|
93
|
+
<Button type="submit">Sign in</Button>
|
|
94
|
+
</form>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### FormField with validation error
|
|
100
|
+
|
|
101
|
+
`FormField` wires label, hint text, and error message to the input automatically — no manual `id`, `aria-describedby`, or `aria-invalid` threading required.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<FormField
|
|
105
|
+
label="Aadhaar Number"
|
|
106
|
+
hint="12-digit number printed on your Aadhaar card"
|
|
107
|
+
error="Aadhaar number must be 12 digits"
|
|
108
|
+
required
|
|
109
|
+
>
|
|
110
|
+
<Input placeholder="XXXX XXXX XXXX" />
|
|
111
|
+
</FormField>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### DataTable
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
import { DataTable } from '@apcrda/ui'
|
|
118
|
+
import type { ColumnDef } from '@apcrda/ui'
|
|
119
|
+
|
|
120
|
+
type Application = {
|
|
121
|
+
id: string
|
|
122
|
+
applicantName: string
|
|
123
|
+
status: string
|
|
124
|
+
submittedOn: string
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
const columns: ColumnDef<Application>[] = [
|
|
128
|
+
{ accessorKey: 'id', header: 'Application ID', size: 160 },
|
|
129
|
+
{ accessorKey: 'applicantName', header: 'Applicant Name', size: 260 },
|
|
130
|
+
{ accessorKey: 'status', header: 'Status', size: 160 },
|
|
131
|
+
{ accessorKey: 'submittedOn', header: 'Submitted On', size: 160 },
|
|
132
|
+
]
|
|
133
|
+
|
|
134
|
+
export function ApplicationsTable({ data }: { data: Application[] }) {
|
|
135
|
+
return (
|
|
136
|
+
<DataTable
|
|
137
|
+
data={data}
|
|
138
|
+
columns={columns}
|
|
139
|
+
pagination
|
|
140
|
+
selectable
|
|
141
|
+
columnFilters
|
|
142
|
+
exportCsv
|
|
143
|
+
stickyHeader
|
|
144
|
+
/>
|
|
145
|
+
)
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Notifications
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import { Button } from '@apcrda/ui'
|
|
153
|
+
import { useToast } from '@apcrda/ui'
|
|
154
|
+
|
|
155
|
+
export function SaveButton() {
|
|
156
|
+
const { toast } = useToast()
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<Button
|
|
160
|
+
onClick={() =>
|
|
161
|
+
toast({ title: 'Saved', description: 'Application updated successfully.', variant: 'success' })
|
|
162
|
+
}
|
|
163
|
+
>
|
|
164
|
+
Save
|
|
165
|
+
</Button>
|
|
166
|
+
)
|
|
167
|
+
}
|
|
44
168
|
```
|
|
45
169
|
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## Components
|
|
173
|
+
|
|
174
|
+
### Form & Input
|
|
175
|
+
|
|
176
|
+
| Component | Description |
|
|
177
|
+
| --- | --- |
|
|
178
|
+
| `Input` | Text input — sizes sm/md/lg, left/right icons, loading spinner |
|
|
179
|
+
| `Textarea` | Multi-line input with optional character counter |
|
|
180
|
+
| `PasswordInput` | Password field with show/hide toggle |
|
|
181
|
+
| `NumberInput` | Numeric stepper with min, max, step |
|
|
182
|
+
| `FileUpload` | File picker — button or drag-and-drop dropzone variant |
|
|
183
|
+
| `Checkbox` | Accessible checkbox with indeterminate state |
|
|
184
|
+
| `RadioGroup` | Controlled radio button group |
|
|
185
|
+
| `Switch` | Toggle switch |
|
|
186
|
+
| `Select` | Single-value dropdown |
|
|
187
|
+
| `MultiSelect` | Multi-value select with chip display |
|
|
188
|
+
| `Combobox` | Searchable single-select dropdown |
|
|
189
|
+
| `Autocomplete` | Free-text input with suggestions list |
|
|
190
|
+
| `DatePicker` | Single-date calendar picker |
|
|
191
|
+
| `DateRangePicker` | Date range calendar picker |
|
|
192
|
+
| `FormField` | Label + input + hint + error wrapper (context-based) |
|
|
193
|
+
| `Label` | Accessible form label |
|
|
194
|
+
|
|
195
|
+
### Data Display
|
|
196
|
+
|
|
197
|
+
| Component | Description |
|
|
198
|
+
| --- | --- |
|
|
199
|
+
| `DataTable` | Full-featured table with 30+ capabilities |
|
|
200
|
+
| `StatCard` | KPI metric card with trend indicator |
|
|
201
|
+
| `Calendar` | Standalone month calendar |
|
|
202
|
+
| `Timeline` | Vertical event timeline |
|
|
203
|
+
| `ScrollArea` | Styled scrollable container |
|
|
204
|
+
| `Progress` | Linear and indeterminate progress bar |
|
|
205
|
+
| `Skeleton` | Loading placeholder shimmer |
|
|
206
|
+
|
|
207
|
+
### Navigation
|
|
208
|
+
|
|
209
|
+
| Component | Description |
|
|
210
|
+
| --- | --- |
|
|
211
|
+
| `Navbar` | Top application bar |
|
|
212
|
+
| `Sidebar` | Collapsible side navigation with nested items |
|
|
213
|
+
| `Breadcrumb` | Page hierarchy trail |
|
|
214
|
+
| `Tabs` | Horizontal tab panels |
|
|
215
|
+
| `Pagination` | Page navigation controls |
|
|
216
|
+
| `Stepper` | Multi-step workflow indicator |
|
|
217
|
+
| `Accordion` | Expand/collapse content sections |
|
|
218
|
+
|
|
219
|
+
### Feedback & Overlay
|
|
220
|
+
|
|
221
|
+
| Component | Description |
|
|
222
|
+
| --- | --- |
|
|
223
|
+
| `Alert` | Inline status message — info, success, warning, error |
|
|
224
|
+
| `AlertDialog` | Blocking confirmation modal with cancel/confirm actions |
|
|
225
|
+
| `Dialog` | General-purpose modal dialog |
|
|
226
|
+
| `Drawer` | Slide-in side panel |
|
|
227
|
+
| `Toast` | Ephemeral notification — top-right stack |
|
|
228
|
+
| `Tooltip` | Hover hint on any element |
|
|
229
|
+
| `Popover` | Anchored floating content panel |
|
|
230
|
+
| `NotificationCenter` | Notification feed with read/unread state |
|
|
231
|
+
| `EmptyState` | Zero-data placeholder with icon and action |
|
|
232
|
+
|
|
233
|
+
### Layout & Display
|
|
234
|
+
|
|
235
|
+
| Component | Description |
|
|
236
|
+
| --- | --- |
|
|
237
|
+
| `Card` | Elevated surface container with optional header and footer |
|
|
238
|
+
| `Divider` | Horizontal or vertical separator |
|
|
239
|
+
| `Typography` | `Heading` and `Text` variants with size and weight props |
|
|
240
|
+
| `Avatar` | User avatar with image or fallback initials |
|
|
241
|
+
| `Badge` | Status and count pill |
|
|
242
|
+
| `Tag` | Removable label chip |
|
|
243
|
+
| `Spinner` | Accessible loading indicator |
|
|
244
|
+
| `Kbd` | Keyboard shortcut key display |
|
|
245
|
+
|
|
246
|
+
### Utility
|
|
247
|
+
|
|
248
|
+
| Component | Description |
|
|
249
|
+
| --- | --- |
|
|
250
|
+
| `CommandPalette` | `⌘K` command search overlay |
|
|
251
|
+
| `ContextMenu` | Right-click context menu |
|
|
252
|
+
|
|
253
|
+
---
|
|
254
|
+
|
|
46
255
|
## Theming
|
|
47
256
|
|
|
48
|
-
|
|
257
|
+
### Light and dark mode
|
|
258
|
+
|
|
259
|
+
APCRDA UI uses CSS custom properties scoped to a `data-theme` attribute:
|
|
49
260
|
|
|
50
261
|
```html
|
|
51
|
-
<html data-theme="light"
|
|
52
|
-
<html data-theme="dark"
|
|
262
|
+
<html data-theme="light">…</html>
|
|
263
|
+
<html data-theme="dark">…</html>
|
|
53
264
|
```
|
|
54
265
|
|
|
55
|
-
`ThemeProvider` manages the attribute and
|
|
266
|
+
`ThemeProvider` manages the attribute and syncs it with `localStorage`:
|
|
267
|
+
|
|
268
|
+
```tsx
|
|
269
|
+
// Force a specific theme
|
|
270
|
+
<ThemeProvider defaultTheme="dark">…</ThemeProvider>
|
|
271
|
+
|
|
272
|
+
// Follow system preference
|
|
273
|
+
<ThemeProvider defaultTheme="system">…</ThemeProvider>
|
|
274
|
+
```
|
|
56
275
|
|
|
57
|
-
|
|
276
|
+
### Custom tokens
|
|
58
277
|
|
|
59
|
-
|
|
278
|
+
Override any design token after importing the stylesheet:
|
|
60
279
|
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
|
|
280
|
+
```css
|
|
281
|
+
@import '@apcrda/ui/styles.css';
|
|
282
|
+
|
|
283
|
+
:root {
|
|
284
|
+
--apcrda-color-primary: #0052cc;
|
|
285
|
+
--apcrda-color-primary-foreground: #ffffff;
|
|
286
|
+
--apcrda-radius-md: 0.25rem;
|
|
287
|
+
--apcrda-font-sans: 'Noto Sans Telugu', system-ui, sans-serif;
|
|
288
|
+
}
|
|
64
289
|
```
|
|
65
290
|
|
|
66
|
-
|
|
291
|
+
### Tailwind CSS plugin
|
|
67
292
|
|
|
68
|
-
|
|
69
|
-
|
|
293
|
+
If you use Tailwind CSS in your app, register the APCRDA tokens as a plugin so your own classes can reference the same variables:
|
|
294
|
+
|
|
295
|
+
```ts
|
|
296
|
+
// tailwind.config.ts
|
|
297
|
+
import apcrdaPlugin from '@apcrda/ui/plugin.css'
|
|
298
|
+
|
|
299
|
+
export default {
|
|
300
|
+
plugins: [apcrdaPlugin],
|
|
301
|
+
}
|
|
70
302
|
```
|
|
71
303
|
|
|
72
|
-
|
|
304
|
+
---
|
|
73
305
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
306
|
+
## TypeScript
|
|
307
|
+
|
|
308
|
+
All components, props, and utility types are fully typed and exported from the package root:
|
|
309
|
+
|
|
310
|
+
```ts
|
|
311
|
+
import type {
|
|
312
|
+
ButtonVariant,
|
|
313
|
+
ColumnDef,
|
|
314
|
+
DataTableProps,
|
|
315
|
+
DataTableRowAction,
|
|
316
|
+
InputProps,
|
|
317
|
+
InputSize,
|
|
318
|
+
} from '@apcrda/ui'
|
|
77
319
|
```
|
|
78
320
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
321
|
+
The package ships `.d.ts` declaration files alongside the ESM bundle — no `@types/` package needed.
|
|
322
|
+
|
|
323
|
+
---
|
|
324
|
+
|
|
325
|
+
## Accessibility
|
|
326
|
+
|
|
327
|
+
- **Target:** WCAG 2.1 AA
|
|
328
|
+
- **Keyboard navigation:** all interactive components are fully keyboard-accessible
|
|
329
|
+
- **Screen readers:** semantic HTML and Radix UI ARIA patterns throughout
|
|
330
|
+
- **Focus management:** visible focus rings, focus trapping in modals and drawers
|
|
331
|
+
- **Motion:** animations respect `prefers-reduced-motion`
|
|
332
|
+
- **Form errors:** error messages are linked to inputs via `aria-describedby` and announced as `role="alert"`
|
|
333
|
+
|
|
334
|
+
---
|
|
335
|
+
|
|
336
|
+
## DataTable capabilities
|
|
337
|
+
|
|
338
|
+
| Feature | Prop |
|
|
339
|
+
| --- | --- |
|
|
340
|
+
| Client-side pagination | `pagination` |
|
|
341
|
+
| Server-side pagination | `serverPagination` |
|
|
342
|
+
| Infinite scroll | `infiniteScroll` |
|
|
343
|
+
| Global search | built-in |
|
|
344
|
+
| Column filters (text / select / range / date) | `columnFilters` |
|
|
345
|
+
| Multi-column sort | `multiSort` |
|
|
346
|
+
| Column visibility toggle | `columnVisibility` |
|
|
347
|
+
| Column resize | `columnResize` |
|
|
348
|
+
| Column pinning | `columnPinning` |
|
|
349
|
+
| Column reorder (drag and drop) | `columnReorder` |
|
|
350
|
+
| Row grouping | `grouping` |
|
|
351
|
+
| Row expand / sub-rows | `getRowCanExpand` + `renderSubRow` |
|
|
352
|
+
| Tree data | `getSubRows` |
|
|
353
|
+
| Row selection + bulk actions | `selectable` + `bulkActions` |
|
|
354
|
+
| Row actions menu | `rowActions` |
|
|
355
|
+
| Virtual scroll (1 000+ rows) | `virtualize` |
|
|
356
|
+
| CSV export | `exportCsv` |
|
|
357
|
+
| Excel export | `exportExcel` |
|
|
358
|
+
| Print | `print` |
|
|
359
|
+
| Copy to clipboard | `copy` |
|
|
360
|
+
| Density toggle (compact / normal / spacious) | `density` |
|
|
361
|
+
| Sticky header | `stickyHeader` |
|
|
362
|
+
| Striped rows | `striped` |
|
|
363
|
+
| Loading skeleton | `loading` |
|
|
364
|
+
| Empty state | `emptyMessage` / `emptyDescription` |
|
|
365
|
+
| Footer aggregations | column `footer` + `aggregationFn` |
|
|
366
|
+
|
|
367
|
+
---
|
|
368
|
+
|
|
369
|
+
## Bundle size
|
|
370
|
+
|
|
371
|
+
The package is built as ESM with Vite in library mode. Unused components are tree-shaken automatically by your bundler. Runtime dependencies (Radix UI primitives, CVA, date-fns, etc.) are bundled. React and ReactDOM are peer dependencies and are **not** included.
|
|
372
|
+
|
|
373
|
+
---
|
|
374
|
+
|
|
375
|
+
## Links
|
|
376
|
+
|
|
377
|
+
- [Repository](https://gitlab.apcrda.org/crda/apcrda-design-system)
|
|
378
|
+
- [Issues](https://gitlab.apcrda.org/crda/apcrda-design-system/-/issues)
|
|
379
|
+
- [Changelog](https://gitlab.apcrda.org/crda/apcrda-design-system/-/blob/main/CHANGELOG.md)
|
|
380
|
+
|
|
381
|
+
---
|
|
382
|
+
|
|
383
|
+
## License
|
|
384
|
+
|
|
385
|
+
MIT © APCRDA
|
|
@@ -1,5 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export declare
|
|
1
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
2
|
+
import type { AlertDialogFooterProps, AlertDialogHeaderProps } from './AlertDialog.types';
|
|
3
|
+
export declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
4
|
+
export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
export declare const AlertDialogPortal: import("react").FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
6
|
+
export declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
8
|
+
readonly closeOnOverlayClick?: boolean;
|
|
9
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react").JSX.Element;
|
|
11
|
+
export declare namespace AlertDialogHeader {
|
|
4
12
|
var displayName: string;
|
|
5
13
|
}
|
|
14
|
+
export declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react").JSX.Element;
|
|
15
|
+
export declare namespace AlertDialogFooter {
|
|
16
|
+
var displayName: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
19
|
+
export declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
20
|
+
export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
21
|
+
readonly variant?: import("./AlertDialog.types").AlertDialogVariant;
|
|
22
|
+
readonly loading?: boolean;
|
|
23
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
readonly
|
|
1
|
+
import type * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
2
|
+
import type { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
|
|
3
|
+
import type { ButtonVariant } from '../Button/Button.types';
|
|
4
|
+
export type AlertDialogVariant = Extract<ButtonVariant, 'destructive' | 'primary' | 'success'>;
|
|
5
|
+
export type AlertDialogOverlayProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
|
|
6
|
+
export type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
|
|
7
|
+
export type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
|
|
8
|
+
export type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
9
|
+
export type AlertDialogFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
10
|
+
export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
|
|
11
|
+
readonly closeOnOverlayClick?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
|
|
12
14
|
readonly variant?: AlertDialogVariant;
|
|
13
15
|
readonly loading?: boolean;
|
|
14
|
-
readonly children?: React.ReactNode;
|
|
15
16
|
};
|
|
17
|
+
export type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { AlertDialog } from './AlertDialog';
|
|
2
|
-
export type {
|
|
1
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './AlertDialog';
|
|
2
|
+
export type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogOverlayProps, AlertDialogTitleProps, AlertDialogVariant, } from './AlertDialog.types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const buttonVariants: (props?: ({
|
|
2
|
-
variant?: "success" | "
|
|
2
|
+
variant?: "success" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
|
|
3
3
|
size?: "icon" | "sm" | "md" | "lg" | null | undefined;
|
|
4
4
|
fullWidth?: boolean | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CardDescriptionProps, CardSectionProps
|
|
1
|
+
import type { CardDescriptionProps, CardSectionProps } from './Card.types';
|
|
2
2
|
export declare const cardVariants: (props?: ({
|
|
3
3
|
variant?: "elevated" | "outlined" | "filled" | null | undefined;
|
|
4
4
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -7,7 +7,9 @@ export declare const Card: import("react").ForwardRefExoticComponent<import("rea
|
|
|
7
7
|
readonly loading?: boolean;
|
|
8
8
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
9
|
export declare const CardHeader: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export declare const CardTitle: import("react").ForwardRefExoticComponent<
|
|
10
|
+
export declare const CardTitle: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLHeadingElement> & {
|
|
11
|
+
readonly as?: import("./Card.types").CardTitleLevel;
|
|
12
|
+
} & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
11
13
|
export declare const CardDescription: import("react").ForwardRefExoticComponent<CardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
12
14
|
export declare const CardContent: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
15
|
export declare const CardFooter: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
2
|
export type CardVariant = 'elevated' | 'outlined' | 'filled';
|
|
3
|
+
export type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
3
4
|
export type CardProps = HTMLAttributes<HTMLDivElement> & {
|
|
4
5
|
readonly variant?: CardVariant;
|
|
5
6
|
readonly loading?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type CardSectionProps = HTMLAttributes<HTMLDivElement>;
|
|
8
|
-
export type CardTitleProps = HTMLAttributes<HTMLHeadingElement
|
|
9
|
+
export type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
|
|
10
|
+
readonly as?: CardTitleLevel;
|
|
11
|
+
};
|
|
9
12
|
export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants, } from './Card';
|
|
2
|
-
export type { CardDescriptionProps, CardProps, CardSectionProps, CardTitleProps, CardVariant } from './Card.types';
|
|
2
|
+
export type { CardDescriptionProps, CardProps, CardSectionProps, CardTitleLevel, CardTitleProps, CardVariant } from './Card.types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FormFieldProps } from './FormField.types';
|
|
2
|
-
export declare function FormField({ label, htmlFor, required, hint, error, className, children, ...props }: FormFieldProps): import("react").JSX.Element;
|
|
2
|
+
export declare function FormField({ id: idProp, label, htmlFor, required, hint, error, className, children, ...props }: FormFieldProps): import("react").JSX.Element;
|
|
3
3
|
export declare namespace FormField {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
|
|
3
|
+
/** Shared id used for label `htmlFor`, input `id`, and `aria-describedby` wiring. */
|
|
4
|
+
readonly id?: string;
|
|
5
|
+
/** Explicit label-for override. Defaults to `id` when omitted. */
|
|
4
6
|
readonly htmlFor?: string;
|
|
7
|
+
readonly label?: string;
|
|
5
8
|
readonly required?: boolean;
|
|
6
9
|
readonly hint?: string;
|
|
7
10
|
readonly error?: string;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface FormFieldContextValue {
|
|
2
|
+
readonly id: string | undefined;
|
|
3
|
+
readonly errorId: string | undefined;
|
|
4
|
+
readonly hintId: string | undefined;
|
|
5
|
+
readonly error: string | undefined;
|
|
6
|
+
readonly required: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare const FormFieldContext: import("react").Context<FormFieldContextValue>;
|
|
9
|
+
export declare function useFormField(): FormFieldContextValue;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { NavbarActionsProps, NavbarBrandProps, NavbarContentProps, NavbarProps } from './Navbar.types';
|
|
2
|
+
export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;
|
|
3
|
+
export declare const NavbarBrand: import("react").ForwardRefExoticComponent<NavbarBrandProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export declare const NavbarContent: import("react").ForwardRefExoticComponent<NavbarContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const NavbarActions: import("react").ForwardRefExoticComponent<NavbarActionsProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
export interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** Stick to top of viewport. Defaults to true. */
|
|
4
|
+
readonly sticky?: boolean;
|
|
5
|
+
/** Add a bottom border. Defaults to true. */
|
|
6
|
+
readonly bordered?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export type NavbarBrandProps = HTMLAttributes<HTMLDivElement>;
|
|
9
|
+
export type NavbarContentProps = HTMLAttributes<HTMLDivElement>;
|
|
10
|
+
export type NavbarActionsProps = HTMLAttributes<HTMLDivElement>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export type SpinnerVariant = 'default' | 'muted' | 'white' | 'current';
|
|
4
|
+
export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
readonly size?: SpinnerSize;
|
|
6
|
+
readonly variant?: SpinnerVariant;
|
|
7
|
+
/** Accessible label announced to screen readers. Set to empty string when spinner is decorative. */
|
|
8
|
+
readonly label?: string;
|
|
9
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { StepperProps } from './Stepper.types';
|
|
2
|
-
export declare function Stepper({ steps, activeStep, orientation, completedSteps, errorSteps, className, ...props }: StepperProps): import("react").JSX.Element;
|
|
2
|
+
export declare function Stepper({ steps, activeStep, orientation, completedSteps, errorSteps, onStepClick, className, ...props }: StepperProps): import("react").JSX.Element;
|
|
3
3
|
export declare namespace Stepper {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DataTableProps } from './DataTable.types';
|
|
2
|
-
export declare function DataTable<TData>({ data, columns, loading, loadingRows, emptyMessage, emptyDescription, pageSize: initialPageSize, pageSizeOptions, pagination,
|
|
2
|
+
export declare function DataTable<TData>({ data, columns, loading, loadingRows, emptyMessage, emptyDescription, pageSize: initialPageSize, pageSizeOptions, pagination, serverPagination, infiniteScroll, multiSort, columnFilters: enableColumnFilters, columnVisibility: enableColumnVisibility, columnResize, columnPinning: enableColumnPinning, columnReorder, selectable, onSelectionChange, getRowCanExpand, renderSubRow, getSubRows, grouping: enableGrouping, defaultGrouping, density: enableDensity, defaultDensity, stickyHeader, striped, virtualize, estimatedRowHeight, rowActions, bulkActions, exportCsv, exportExcel, exportFilename, print: enablePrint, copy: enableCopy, showFooter, onRowClick, className, }: DataTableProps<TData>): import("react").JSX.Element;
|
|
3
3
|
export declare namespace DataTable {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|