@nukleas/react-cyberdesign 0.1.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/LICENSE +21 -0
- package/README.md +118 -0
- package/dist/fonts/JetBrainsMono-Variable.woff2 +0 -0
- package/dist/fonts/OFL.txt +93 -0
- package/dist/index.cjs +3340 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1454 -0
- package/dist/index.d.ts +1454 -0
- package/dist/index.js +3217 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +8377 -0
- package/package.json +82 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1454 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode, DetailsHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, ComponentProps, MouseEvent, CSSProperties, LabelHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes, TextareaHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/** Lightweight className join — filters falsy parts (no runtime dep). */
|
|
5
|
+
declare function cn(...parts: Array<string | false | null | undefined>): string;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Semantic color palette used across badges, cards, gauges, and accents.
|
|
9
|
+
* Maps to `cd-*-{color}` modifier classes in cyberdesign CSS.
|
|
10
|
+
*/
|
|
11
|
+
type CdColor = 'orange' | 'amber' | 'gold' | 'cyan' | 'magenta' | 'green' | 'red' | 'blue' | 'purple' | 'yellow';
|
|
12
|
+
/**
|
|
13
|
+
* Theme accent family applied via `.theme-*` on a root element
|
|
14
|
+
* (typically `<html>` or {@link ThemeProvider}).
|
|
15
|
+
*/
|
|
16
|
+
type CdTheme = 'orange' | 'cyan' | 'green' | 'red' | 'steel';
|
|
17
|
+
/** Shared size scale used by form controls and buttons. */
|
|
18
|
+
type CdSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
19
|
+
|
|
20
|
+
interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
|
|
21
|
+
/**
|
|
22
|
+
* Active accent theme. Sets `theme-{name}` so semantic tokens
|
|
23
|
+
* like `--cd-accent` resolve correctly.
|
|
24
|
+
* @default 'orange'
|
|
25
|
+
*/
|
|
26
|
+
theme?: CdTheme;
|
|
27
|
+
/**
|
|
28
|
+
* Opt into the accessibility type/contrast layer (`.cd-a11y`).
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
a11y?: boolean;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
/** Read the nearest {@link ThemeProvider} theme (falls back to `orange`). */
|
|
35
|
+
declare function useTheme(): CdTheme;
|
|
36
|
+
/**
|
|
37
|
+
* Root theme scope for cyberdesign. Apply once near the app root so
|
|
38
|
+
* accent tokens (`--cd-accent`, glows, primary buttons) resolve.
|
|
39
|
+
*
|
|
40
|
+
* ```tsx
|
|
41
|
+
* <ThemeProvider theme="cyan">
|
|
42
|
+
* <App />
|
|
43
|
+
* </ThemeProvider>
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
declare function ThemeProvider({ theme, a11y, className, children, ...rest }: ThemeProviderProps): react.JSX.Element;
|
|
47
|
+
|
|
48
|
+
interface AccordionItemData {
|
|
49
|
+
/** Trigger heading text. */
|
|
50
|
+
title: ReactNode;
|
|
51
|
+
/** Body content revealed when open. */
|
|
52
|
+
content: ReactNode;
|
|
53
|
+
/** Optional icon glyph before the title. */
|
|
54
|
+
icon?: ReactNode;
|
|
55
|
+
/** Render this item open initially. */
|
|
56
|
+
defaultOpen?: boolean;
|
|
57
|
+
}
|
|
58
|
+
interface AccordionItemProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'title'> {
|
|
59
|
+
/** Trigger heading text. */
|
|
60
|
+
title: ReactNode;
|
|
61
|
+
/** Optional icon glyph before the title. */
|
|
62
|
+
icon?: ReactNode;
|
|
63
|
+
/** Body content. */
|
|
64
|
+
children?: ReactNode;
|
|
65
|
+
}
|
|
66
|
+
/** Single `<details>` accordion row — for manual composition under `<Accordion>`. */
|
|
67
|
+
declare function AccordionItem({ title, icon, children, className, ...rest }: AccordionItemProps): react.JSX.Element;
|
|
68
|
+
interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
|
|
69
|
+
/** Data-driven rows. Omit to compose `<Accordion.Item>` children manually. */
|
|
70
|
+
items?: AccordionItemData[];
|
|
71
|
+
/** `sep` adds gaps between items; `flush` drops side borders. */
|
|
72
|
+
variant?: 'default' | 'sep' | 'flush';
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
}
|
|
75
|
+
/** Disclosure accordion — native `<details>` rows, data-driven or composed via `Accordion.Item`. */
|
|
76
|
+
declare function AccordionRoot({ items, variant, className, children, ...rest }: AccordionProps): react.JSX.Element;
|
|
77
|
+
declare const Accordion: typeof AccordionRoot & {
|
|
78
|
+
Item: typeof AccordionItem;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
82
|
+
/** Semantic color. `accent` follows the active theme accent. */
|
|
83
|
+
variant?: 'info' | 'success' | 'warning' | 'error' | 'accent';
|
|
84
|
+
/** Compact padding/type. */
|
|
85
|
+
size?: 'sm';
|
|
86
|
+
/** Drop the left accent bar for a flatter inline banner. */
|
|
87
|
+
inline?: boolean;
|
|
88
|
+
/** Bold uppercase heading line. */
|
|
89
|
+
title?: ReactNode;
|
|
90
|
+
/** Leading glyph (e.g. ℹ ✓ ⚠ ✕ ⬡). */
|
|
91
|
+
icon?: ReactNode;
|
|
92
|
+
/** When provided, renders a dismiss ✕ that calls this on click. */
|
|
93
|
+
onDismiss?: () => void;
|
|
94
|
+
/** Body text. */
|
|
95
|
+
children?: ReactNode;
|
|
96
|
+
}
|
|
97
|
+
/** Banner / alert with semantic color, optional icon, title and dismiss. */
|
|
98
|
+
declare function Alert({ variant, size, inline, title, icon, onDismiss, className, children, ...rest }: AlertProps): react.JSX.Element;
|
|
99
|
+
|
|
100
|
+
interface AlertDialogProps {
|
|
101
|
+
open: boolean;
|
|
102
|
+
onClose?: () => void;
|
|
103
|
+
/** Dialog title. */
|
|
104
|
+
title?: ReactNode;
|
|
105
|
+
/** Body description. */
|
|
106
|
+
children?: ReactNode;
|
|
107
|
+
/** Confirm button label. @default 'Confirm' */
|
|
108
|
+
confirmLabel?: ReactNode;
|
|
109
|
+
/** Cancel button label. @default 'Cancel' */
|
|
110
|
+
cancelLabel?: ReactNode;
|
|
111
|
+
/** Called when confirm is pressed. */
|
|
112
|
+
onConfirm?: () => void;
|
|
113
|
+
/** Destructive confirm styling. */
|
|
114
|
+
destructive?: boolean;
|
|
115
|
+
}
|
|
116
|
+
/** Confirmation dialog built on Modal — cancel / confirm actions. */
|
|
117
|
+
declare function AlertDialog({ open, onClose, title, children, confirmLabel, cancelLabel, onConfirm, destructive, }: AlertDialogProps): react.JSX.Element;
|
|
118
|
+
|
|
119
|
+
interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
|
|
120
|
+
/** Aspect ratio as width/height (e.g. 16/9). @default 16/9 */
|
|
121
|
+
ratio?: number;
|
|
122
|
+
children?: ReactNode;
|
|
123
|
+
}
|
|
124
|
+
/** Locks children to a fixed aspect ratio box. */
|
|
125
|
+
declare function AspectRatio({ ratio, className, style, children, ...rest }: AspectRatioProps): react.JSX.Element;
|
|
126
|
+
|
|
127
|
+
interface AugButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
128
|
+
/** `primary` fills with the accent-subtle background and a drop-shadow glow. */
|
|
129
|
+
variant?: 'default' | 'primary';
|
|
130
|
+
/** `sm` and `lg` adjust height, padding and clip size; `md` is the default. */
|
|
131
|
+
size?: 'sm' | 'md' | 'lg';
|
|
132
|
+
/** Reverse the diagonal clip to cut the TR+BL corners instead of TL+BR. */
|
|
133
|
+
reverse?: boolean;
|
|
134
|
+
children?: ReactNode;
|
|
135
|
+
}
|
|
136
|
+
/** Augmented clip-path button — neon-bordered diagonal-corner button matching cd-aug-btn. */
|
|
137
|
+
declare function AugButton({ variant, size, reverse, className, children, ...rest }: AugButtonProps): react.JSX.Element;
|
|
138
|
+
|
|
139
|
+
interface AugPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
140
|
+
/** Clip/padding size: `sm` (6px clip), `md` (default, 20px clip) or `lg` (32px clip). */
|
|
141
|
+
size?: 'sm' | 'md' | 'lg';
|
|
142
|
+
/** Clip all four corners instead of the default diagonal TL+BR pair. */
|
|
143
|
+
corners4?: boolean;
|
|
144
|
+
children?: ReactNode;
|
|
145
|
+
}
|
|
146
|
+
/** Augmented clip-path panel — neon drop-shadow border with clipped corners (cd-aug-panel). */
|
|
147
|
+
declare function AugPanel({ size, corners4, className, children, ...rest }: AugPanelProps): react.JSX.Element;
|
|
148
|
+
|
|
149
|
+
interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
150
|
+
/** Image source. When set, renders `<img>`; otherwise shows `fallback` initials. */
|
|
151
|
+
src?: string;
|
|
152
|
+
/** Alt text for the image. */
|
|
153
|
+
alt?: string;
|
|
154
|
+
/** Initials shown when no `src` (e.g. "NH"). */
|
|
155
|
+
fallback?: ReactNode;
|
|
156
|
+
/** Diameter preset. `md` is the default (no modifier). */
|
|
157
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
158
|
+
/** Neon ring around the avatar. */
|
|
159
|
+
glow?: boolean;
|
|
160
|
+
/** Presence dot rendered via `data-status`. */
|
|
161
|
+
status?: 'online' | 'away' | 'busy' | 'offline';
|
|
162
|
+
}
|
|
163
|
+
/** Circular avatar — image or fallback initials, sized presets, neon glow ring and presence dot. */
|
|
164
|
+
declare function Avatar({ src, alt, fallback, size, glow, status, className, ...rest }: AvatarProps): react.JSX.Element;
|
|
165
|
+
declare namespace Avatar {
|
|
166
|
+
var Group: typeof AvatarGroup;
|
|
167
|
+
}
|
|
168
|
+
interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
169
|
+
/** Overflow count rendered as a trailing `+N` badge. */
|
|
170
|
+
more?: number;
|
|
171
|
+
/** Avatars to stack, in order. */
|
|
172
|
+
children?: ReactNode;
|
|
173
|
+
}
|
|
174
|
+
/** Overlapping stack of avatars with an optional `+N` overflow badge. */
|
|
175
|
+
declare function AvatarGroup({ more, className, children, ...rest }: AvatarGroupProps): react.JSX.Element;
|
|
176
|
+
|
|
177
|
+
interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|
|
178
|
+
/** Color variant. Defaults to `orange`. */
|
|
179
|
+
color?: CdColor;
|
|
180
|
+
children?: ReactNode;
|
|
181
|
+
}
|
|
182
|
+
/** Inline status badge — uppercase, pixel-corner, with a neon color variant. */
|
|
183
|
+
declare function Badge({ color, className, children, ...rest }: BadgeProps): react.JSX.Element;
|
|
184
|
+
|
|
185
|
+
interface BottomNavItem {
|
|
186
|
+
id: string;
|
|
187
|
+
label: ReactNode;
|
|
188
|
+
icon?: ReactNode;
|
|
189
|
+
badge?: ReactNode;
|
|
190
|
+
disabled?: boolean;
|
|
191
|
+
}
|
|
192
|
+
interface BottomNavProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
193
|
+
items: BottomNavItem[];
|
|
194
|
+
/** Active item id. */
|
|
195
|
+
value?: string;
|
|
196
|
+
onValueChange?: (id: string) => void;
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Mobile bottom tab bar — dashboard-app MAP / FEED / STATS / TIME pattern.
|
|
200
|
+
*/
|
|
201
|
+
declare function BottomNav({ items, value, onValueChange, className, ...rest }: BottomNavProps): react.JSX.Element;
|
|
202
|
+
|
|
203
|
+
interface BreadcrumbItem {
|
|
204
|
+
/** Crumb text. */
|
|
205
|
+
label: ReactNode;
|
|
206
|
+
/** Link target. Omitted (or on the active crumb) renders plain text. */
|
|
207
|
+
href?: string;
|
|
208
|
+
/** Marks this crumb as the current page (plain, non-interactive). */
|
|
209
|
+
active?: boolean;
|
|
210
|
+
}
|
|
211
|
+
interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
|
|
212
|
+
/** Crumbs in order. The last item is treated as active if none is flagged. */
|
|
213
|
+
items: BreadcrumbItem[];
|
|
214
|
+
/** Separator style: `/` (default), `›` arrow, or `·` dot. */
|
|
215
|
+
variant?: 'default' | 'arrow' | 'dot';
|
|
216
|
+
/** Accessible label for the `<nav>`. */
|
|
217
|
+
'aria-label'?: string;
|
|
218
|
+
}
|
|
219
|
+
/** Breadcrumb trail — data-driven crumbs with slash / arrow / dot separators; renders `<nav><ol>`. */
|
|
220
|
+
declare function Breadcrumb({ items, variant, className, 'aria-label': ariaLabel, ...rest }: BreadcrumbProps): react.JSX.Element;
|
|
221
|
+
|
|
222
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
223
|
+
/** Visual emphasis. `primary` uses the theme accent; `danger` is destructive. */
|
|
224
|
+
variant?: 'default' | 'primary' | 'danger';
|
|
225
|
+
/** `sm` is the compact height; `md` is the default. */
|
|
226
|
+
size?: 'sm' | 'md';
|
|
227
|
+
/** Square icon-only button (no horizontal padding). */
|
|
228
|
+
icon?: boolean;
|
|
229
|
+
children?: ReactNode;
|
|
230
|
+
}
|
|
231
|
+
/** Cyber terminal button — uppercase, pixel-corner accent, neon hover glow. */
|
|
232
|
+
declare function Button({ variant, size, icon, className, children, ...rest }: ButtonProps): react.JSX.Element;
|
|
233
|
+
|
|
234
|
+
interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
235
|
+
/** Stack buttons vertically. */
|
|
236
|
+
vertical?: boolean;
|
|
237
|
+
children?: ReactNode;
|
|
238
|
+
}
|
|
239
|
+
/** Groups adjacent `Button` children with shared borders. */
|
|
240
|
+
declare function ButtonGroup({ vertical, className, children, ...rest }: ButtonGroupProps): react.JSX.Element;
|
|
241
|
+
|
|
242
|
+
interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
243
|
+
/** Controlled selected date. */
|
|
244
|
+
selected?: Date;
|
|
245
|
+
/** Uncontrolled initial selection. */
|
|
246
|
+
defaultSelected?: Date;
|
|
247
|
+
/** Month currently displayed (controlled). */
|
|
248
|
+
month?: Date;
|
|
249
|
+
defaultMonth?: Date;
|
|
250
|
+
onSelect?: (date: Date) => void;
|
|
251
|
+
onMonthChange?: (month: Date) => void;
|
|
252
|
+
}
|
|
253
|
+
/** Month grid calendar with neon selection. */
|
|
254
|
+
declare function Calendar({ selected, defaultSelected, month, defaultMonth, onSelect, onMonthChange, className, ...rest }: CalendarProps): react.JSX.Element;
|
|
255
|
+
|
|
256
|
+
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
257
|
+
/** Neon border/glow treatment. */
|
|
258
|
+
glow?: boolean;
|
|
259
|
+
children?: ReactNode;
|
|
260
|
+
}
|
|
261
|
+
/** Structured surface card — compose with Card.Header/Title/Description/Content/Footer. */
|
|
262
|
+
declare function Card({ glow, className, children, ...rest }: CardProps): react.JSX.Element;
|
|
263
|
+
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
264
|
+
/** Row layout: title left, actions right. */
|
|
265
|
+
row?: boolean;
|
|
266
|
+
children?: ReactNode;
|
|
267
|
+
}
|
|
268
|
+
declare function CardHeader({ row, className, children, ...rest }: CardHeaderProps): react.JSX.Element;
|
|
269
|
+
declare function CardTitle({ className, children, ...rest }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
|
|
270
|
+
declare function CardDescription({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
|
|
271
|
+
declare function CardContent({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
272
|
+
interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
273
|
+
/** Right-align footer actions. */
|
|
274
|
+
end?: boolean;
|
|
275
|
+
children?: ReactNode;
|
|
276
|
+
}
|
|
277
|
+
declare function CardFooter({ end, className, children, ...rest }: CardFooterProps): react.JSX.Element;
|
|
278
|
+
|
|
279
|
+
interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
|
|
280
|
+
children: ReactNode;
|
|
281
|
+
/** Uncontrolled initial slide index. */
|
|
282
|
+
defaultIndex?: number;
|
|
283
|
+
showDots?: boolean;
|
|
284
|
+
showControls?: boolean;
|
|
285
|
+
}
|
|
286
|
+
/** Simple horizontal carousel with prev/next and dots. */
|
|
287
|
+
declare function Carousel({ children, defaultIndex, showDots, showControls, className, ...rest }: CarouselProps): react.JSX.Element;
|
|
288
|
+
|
|
289
|
+
type ChatRole = 'user' | 'assistant' | 'system' | 'error';
|
|
290
|
+
interface ChatMessageData {
|
|
291
|
+
id?: string;
|
|
292
|
+
role: ChatRole;
|
|
293
|
+
content: ReactNode;
|
|
294
|
+
/** Optional language label for a code block under the message body. */
|
|
295
|
+
code?: string;
|
|
296
|
+
codeLang?: string;
|
|
297
|
+
/** Timestamp / meta label. */
|
|
298
|
+
time?: ReactNode;
|
|
299
|
+
/** Author label (defaults from role). */
|
|
300
|
+
author?: ReactNode;
|
|
301
|
+
}
|
|
302
|
+
interface ChatActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
303
|
+
/** Glyph / icon before the label. */
|
|
304
|
+
icon?: ReactNode;
|
|
305
|
+
/** Visible text (hidden on icon-only if omit). */
|
|
306
|
+
label?: ReactNode;
|
|
307
|
+
/** Active/toggled state. */
|
|
308
|
+
active?: boolean;
|
|
309
|
+
/** Destructive hover (delete, reject). */
|
|
310
|
+
danger?: boolean;
|
|
311
|
+
/** Show text label next to icon. */
|
|
312
|
+
showLabel?: boolean;
|
|
313
|
+
}
|
|
314
|
+
/** Icon button for message toolbars and composer tools. */
|
|
315
|
+
declare function ChatAction({ icon, label, active, danger, showLabel, className, type, title, children, ...rest }: ChatActionProps): react.JSX.Element;
|
|
316
|
+
interface ChatActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
317
|
+
/** Absolute overlay on the message (default) or flow below. */
|
|
318
|
+
placement?: 'overlay' | 'below';
|
|
319
|
+
/** Force visible (also shows on parent hover). */
|
|
320
|
+
visible?: boolean;
|
|
321
|
+
children?: ReactNode;
|
|
322
|
+
}
|
|
323
|
+
/** Hover toolbar container for message actions. */
|
|
324
|
+
declare function ChatActions({ placement, visible, className, children, ...rest }: ChatActionsProps): react.JSX.Element;
|
|
325
|
+
interface ChatCodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCopy'> {
|
|
326
|
+
code: string;
|
|
327
|
+
language?: string;
|
|
328
|
+
onCopy?: (code: string) => void;
|
|
329
|
+
onInsert?: (code: string) => void;
|
|
330
|
+
onRun?: (code: string) => void;
|
|
331
|
+
}
|
|
332
|
+
/** Code fence with hover copy / insert / run actions. */
|
|
333
|
+
declare function ChatCodeBlock({ code, language, onCopy, onInsert, onRun, className, ...rest }: ChatCodeBlockProps): react.JSX.Element;
|
|
334
|
+
interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
|
|
335
|
+
role: ChatRole;
|
|
336
|
+
/** Message body. */
|
|
337
|
+
children?: ReactNode;
|
|
338
|
+
/** Optional code fence below the body. */
|
|
339
|
+
code?: string;
|
|
340
|
+
codeLang?: string;
|
|
341
|
+
time?: ReactNode;
|
|
342
|
+
author?: ReactNode;
|
|
343
|
+
/** Hover action toolbar. */
|
|
344
|
+
actions?: ReactNode;
|
|
345
|
+
/** Always show actions (no hover required). */
|
|
346
|
+
actionsVisible?: boolean;
|
|
347
|
+
onCopyCode?: (code: string) => void;
|
|
348
|
+
onInsertCode?: (code: string) => void;
|
|
349
|
+
onRunCode?: (code: string) => void;
|
|
350
|
+
}
|
|
351
|
+
/** Single chat message row with optional hover actions + code block. */
|
|
352
|
+
declare function ChatMessage({ role, children, code, codeLang, time, author, actions, actionsVisible, onCopyCode, onInsertCode, onRunCode, className, ...rest }: ChatMessageProps): react.JSX.Element;
|
|
353
|
+
interface ChatTypingProps extends HTMLAttributes<HTMLDivElement> {
|
|
354
|
+
label?: ReactNode;
|
|
355
|
+
}
|
|
356
|
+
/** Streaming / thinking indicator. */
|
|
357
|
+
declare function ChatTyping({ label, className, ...rest }: ChatTypingProps): react.JSX.Element;
|
|
358
|
+
interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
|
|
359
|
+
title?: ReactNode;
|
|
360
|
+
actions?: ReactNode;
|
|
361
|
+
messages?: ChatMessageData[];
|
|
362
|
+
/** Quick prompt chips above the composer. */
|
|
363
|
+
prompts?: Array<{
|
|
364
|
+
label: ReactNode;
|
|
365
|
+
value: string;
|
|
366
|
+
}>;
|
|
367
|
+
onPrompt?: (value: string) => void;
|
|
368
|
+
/** Controlled composer value. */
|
|
369
|
+
value?: string;
|
|
370
|
+
onValueChange?: (value: string) => void;
|
|
371
|
+
placeholder?: string;
|
|
372
|
+
onSubmit?: (value: string) => void;
|
|
373
|
+
submitLabel?: ReactNode;
|
|
374
|
+
/** Extra tools above the input (attach, mic, model picker…). */
|
|
375
|
+
composerTools?: ReactNode;
|
|
376
|
+
/** Show typing indicator at end of transcript. */
|
|
377
|
+
typing?: boolean;
|
|
378
|
+
typingLabel?: ReactNode;
|
|
379
|
+
/** Disable send. */
|
|
380
|
+
disabled?: boolean;
|
|
381
|
+
/** Custom render for each message (defaults to ChatMessage with standard actions). */
|
|
382
|
+
renderMessage?: (msg: ChatMessageData, index: number) => ReactNode;
|
|
383
|
+
children?: ReactNode;
|
|
384
|
+
}
|
|
385
|
+
/**
|
|
386
|
+
* AI chat panel shell — messages, optional quick prompts, composer tools, and input.
|
|
387
|
+
* Pair with {@link ChatMessage} hover actions for a full AI UX.
|
|
388
|
+
*/
|
|
389
|
+
declare function Chat({ title, actions, messages, prompts, onPrompt, value, onValueChange, placeholder, onSubmit, submitLabel, composerTools, typing, typingLabel, disabled, renderMessage, className, children, ...rest }: ChatProps): react.JSX.Element;
|
|
390
|
+
|
|
391
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
392
|
+
/** Text shown beside the box. When set, wraps the input in a `cd-control` label. */
|
|
393
|
+
label?: ReactNode;
|
|
394
|
+
/** Smaller helper line below the label. */
|
|
395
|
+
description?: ReactNode;
|
|
396
|
+
}
|
|
397
|
+
/** Cyber checkbox — neon fill + checkmark; renders inside a `cd-control` label when labelled. */
|
|
398
|
+
declare function Checkbox({ label, description, className, ...rest }: CheckboxProps): react.JSX.Element;
|
|
399
|
+
|
|
400
|
+
interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
401
|
+
/** Selected / pressed visual state. */
|
|
402
|
+
active?: boolean;
|
|
403
|
+
size?: 'sm' | 'md';
|
|
404
|
+
children?: ReactNode;
|
|
405
|
+
}
|
|
406
|
+
/**
|
|
407
|
+
* Compact filter/toggle chip — dashboard-app `NEAR` / `TOP` / category filters
|
|
408
|
+
* and AI-shell quick-prompt style.
|
|
409
|
+
*/
|
|
410
|
+
declare function Chip({ active, size, className, children, type, ...rest }: ChipProps): react.JSX.Element;
|
|
411
|
+
interface ChipRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
412
|
+
children?: ReactNode;
|
|
413
|
+
}
|
|
414
|
+
declare function ChipRow({ className, children, ...rest }: ChipRowProps): react.JSX.Element;
|
|
415
|
+
|
|
416
|
+
interface ClockProps extends HTMLAttributes<HTMLSpanElement> {
|
|
417
|
+
/** IANA timezone. @default local */
|
|
418
|
+
timeZone?: string;
|
|
419
|
+
/** Show calendar date. @default true */
|
|
420
|
+
showDate?: boolean;
|
|
421
|
+
/** 24h clock. @default true */
|
|
422
|
+
hour12?: boolean;
|
|
423
|
+
}
|
|
424
|
+
/**
|
|
425
|
+
* Live clock readout — dashboard-app header date/time strip.
|
|
426
|
+
*/
|
|
427
|
+
declare function Clock({ timeZone, showDate, hour12, className, ...rest }: ClockProps): react.JSX.Element;
|
|
428
|
+
|
|
429
|
+
interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
|
|
430
|
+
/** Trigger label. */
|
|
431
|
+
trigger: ReactNode;
|
|
432
|
+
/** Uncontrolled initial open state. */
|
|
433
|
+
defaultOpen?: boolean;
|
|
434
|
+
/** Controlled open state. */
|
|
435
|
+
open?: boolean;
|
|
436
|
+
onOpenChange?: (open: boolean) => void;
|
|
437
|
+
children?: ReactNode;
|
|
438
|
+
}
|
|
439
|
+
/** Expand/collapse section with a trigger row. */
|
|
440
|
+
declare function Collapsible({ trigger, defaultOpen, open, onOpenChange, className, children, ...rest }: CollapsibleProps): react.JSX.Element;
|
|
441
|
+
|
|
442
|
+
interface ComboboxOption {
|
|
443
|
+
value: string;
|
|
444
|
+
label: string;
|
|
445
|
+
disabled?: boolean;
|
|
446
|
+
}
|
|
447
|
+
interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
448
|
+
options: ComboboxOption[];
|
|
449
|
+
value?: string;
|
|
450
|
+
defaultValue?: string;
|
|
451
|
+
onChange?: (value: string) => void;
|
|
452
|
+
placeholder?: string;
|
|
453
|
+
emptyText?: string;
|
|
454
|
+
disabled?: boolean;
|
|
455
|
+
}
|
|
456
|
+
/** Searchable select — filters options as you type. */
|
|
457
|
+
declare function Combobox({ options, value, defaultValue, onChange, placeholder, emptyText, disabled, className, ...rest }: ComboboxProps): react.JSX.Element;
|
|
458
|
+
|
|
459
|
+
interface CommandItem {
|
|
460
|
+
value: string;
|
|
461
|
+
label: ReactNode;
|
|
462
|
+
keywords?: string;
|
|
463
|
+
group?: string;
|
|
464
|
+
kbd?: ReactNode;
|
|
465
|
+
disabled?: boolean;
|
|
466
|
+
onSelect?: () => void;
|
|
467
|
+
}
|
|
468
|
+
interface CommandProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
469
|
+
items: CommandItem[];
|
|
470
|
+
placeholder?: string;
|
|
471
|
+
emptyText?: string;
|
|
472
|
+
onSelect?: (item: CommandItem) => void;
|
|
473
|
+
}
|
|
474
|
+
/** Filterable command palette list. */
|
|
475
|
+
declare function Command({ items, placeholder, emptyText, onSelect, className, ...rest }: CommandProps): react.JSX.Element;
|
|
476
|
+
|
|
477
|
+
interface ContextMenuItem {
|
|
478
|
+
label: ReactNode;
|
|
479
|
+
kbd?: ReactNode;
|
|
480
|
+
danger?: boolean;
|
|
481
|
+
disabled?: boolean;
|
|
482
|
+
onSelect?: () => void;
|
|
483
|
+
sep?: boolean;
|
|
484
|
+
}
|
|
485
|
+
interface ContextMenuProps extends HTMLAttributes<HTMLDivElement> {
|
|
486
|
+
items: ContextMenuItem[];
|
|
487
|
+
children: ReactNode;
|
|
488
|
+
}
|
|
489
|
+
/** Right-click context menu over children. */
|
|
490
|
+
declare function ContextMenu({ items, children, className, ...rest }: ContextMenuProps): react.JSX.Element;
|
|
491
|
+
|
|
492
|
+
interface DataTableColumn<T> {
|
|
493
|
+
key: string;
|
|
494
|
+
header: ReactNode;
|
|
495
|
+
cell: (row: T, index: number) => ReactNode;
|
|
496
|
+
/** Right-align numeric cells. */
|
|
497
|
+
numeric?: boolean;
|
|
498
|
+
}
|
|
499
|
+
interface DataTableProps<T> {
|
|
500
|
+
columns: DataTableColumn<T>[];
|
|
501
|
+
data: T[];
|
|
502
|
+
/** Unique key for each row. */
|
|
503
|
+
getRowId?: (row: T, index: number) => string | number;
|
|
504
|
+
compact?: boolean;
|
|
505
|
+
bordered?: boolean;
|
|
506
|
+
emptyTitle?: ReactNode;
|
|
507
|
+
emptyDescription?: ReactNode;
|
|
508
|
+
className?: string;
|
|
509
|
+
}
|
|
510
|
+
/** Declarative data table built on {@link Table}. */
|
|
511
|
+
declare function DataTable<T>({ columns, data, getRowId, compact, bordered, emptyTitle, emptyDescription, className, }: DataTableProps<T>): react.JSX.Element;
|
|
512
|
+
|
|
513
|
+
interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
514
|
+
value?: Date;
|
|
515
|
+
defaultValue?: Date;
|
|
516
|
+
onChange?: (date: Date | undefined) => void;
|
|
517
|
+
placeholder?: string;
|
|
518
|
+
disabled?: boolean;
|
|
519
|
+
}
|
|
520
|
+
/** Input + calendar popover for picking a date. */
|
|
521
|
+
declare function DatePicker({ value, defaultValue, onChange, placeholder, disabled, className, ...rest }: DatePickerProps): react.JSX.Element;
|
|
522
|
+
|
|
523
|
+
interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
524
|
+
/** Controls visibility — adds `is-open` to animate the overlay/panel in. */
|
|
525
|
+
open: boolean;
|
|
526
|
+
/** Fired by the backdrop click, the ✕ close button, and Escape handlers you wire up. */
|
|
527
|
+
onClose?: () => void;
|
|
528
|
+
/** Uppercase accent heading rendered in the header. Omit to hide the header. */
|
|
529
|
+
title?: ReactNode;
|
|
530
|
+
/** Footer content (typically action buttons). Omit to hide the footer. */
|
|
531
|
+
footer?: ReactNode;
|
|
532
|
+
/** Panel width. `default` is 480px; `sm` 340px, `lg` 680px, `xl` 900px. */
|
|
533
|
+
size?: 'default' | 'sm' | 'lg' | 'xl';
|
|
534
|
+
/** Hide the header ✕ close button. */
|
|
535
|
+
hideClose?: boolean;
|
|
536
|
+
/** Dialog body content. */
|
|
537
|
+
children?: ReactNode;
|
|
538
|
+
}
|
|
539
|
+
/** Centered modal dialog over a dimmed backdrop — controlled via `open` / `onClose`. */
|
|
540
|
+
declare function Modal({ open, onClose, title, footer, size, hideClose, className, children, ...rest }: ModalProps): react.JSX.Element;
|
|
541
|
+
|
|
542
|
+
type DialogProps = ComponentProps<typeof Modal>;
|
|
543
|
+
/** Alias for {@link Modal} — familiar naming for teams used to a "Dialog" component. */
|
|
544
|
+
declare function Dialog(props: DialogProps): react.JSX.Element;
|
|
545
|
+
|
|
546
|
+
interface SheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
547
|
+
/** Controls visibility. */
|
|
548
|
+
open: boolean;
|
|
549
|
+
onClose?: () => void;
|
|
550
|
+
/** Edge the panel slides from. @default 'right' */
|
|
551
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
552
|
+
/** Panel width for left/right. */
|
|
553
|
+
size?: 'sm' | 'default' | 'lg';
|
|
554
|
+
title?: ReactNode;
|
|
555
|
+
description?: ReactNode;
|
|
556
|
+
footer?: ReactNode;
|
|
557
|
+
hideClose?: boolean;
|
|
558
|
+
children?: ReactNode;
|
|
559
|
+
}
|
|
560
|
+
/** Side/bottom sheet panel over a dimmed backdrop. */
|
|
561
|
+
declare function Sheet({ open, onClose, side, size, title, description, footer, hideClose, className, children, ...rest }: SheetProps): react.JSX.Element;
|
|
562
|
+
|
|
563
|
+
type DrawerProps = ComponentProps<typeof Sheet>;
|
|
564
|
+
/** Alias for {@link Sheet} with default side `bottom` (mobile drawer pattern). */
|
|
565
|
+
declare function Drawer({ side, ...rest }: DrawerProps): react.JSX.Element;
|
|
566
|
+
|
|
567
|
+
interface DropdownItem {
|
|
568
|
+
/** Item label text. */
|
|
569
|
+
label: ReactNode;
|
|
570
|
+
/** Leading icon glyph rendered in the `__item-icon` slot. */
|
|
571
|
+
icon?: ReactNode;
|
|
572
|
+
/** Right-aligned keyboard shortcut hint (`__item-kbd`). */
|
|
573
|
+
kbd?: ReactNode;
|
|
574
|
+
/** Destructive styling (red on hover). */
|
|
575
|
+
danger?: boolean;
|
|
576
|
+
/** Disable selection. */
|
|
577
|
+
disabled?: boolean;
|
|
578
|
+
/** Fired when the item is clicked (closes the menu). */
|
|
579
|
+
onSelect?: () => void;
|
|
580
|
+
}
|
|
581
|
+
type DropdownEntry = DropdownItem | {
|
|
582
|
+
sep: true;
|
|
583
|
+
} | {
|
|
584
|
+
label: ReactNode;
|
|
585
|
+
heading: true;
|
|
586
|
+
};
|
|
587
|
+
interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
588
|
+
/** Trigger node — rendered as the `cd-dropdown__trigger` button content. */
|
|
589
|
+
trigger: ReactNode;
|
|
590
|
+
/** Menu entries: items, `{ sep: true }` separators, or `{ heading: true }` labels. */
|
|
591
|
+
items: DropdownEntry[];
|
|
592
|
+
/** Right-align the menu panel under the trigger. */
|
|
593
|
+
align?: 'left' | 'right';
|
|
594
|
+
/** Extra classes for the trigger button (e.g. `cd-btn cd-btn--primary`). */
|
|
595
|
+
triggerClassName?: string;
|
|
596
|
+
/** Initial open state (uncontrolled). */
|
|
597
|
+
defaultOpen?: boolean;
|
|
598
|
+
}
|
|
599
|
+
/** Dropdown menu — a trigger button toggling a `cd-dropdown__menu` of data-driven items. */
|
|
600
|
+
declare function Dropdown({ trigger, items, align, triggerClassName, defaultOpen, className, ...rest }: DropdownProps): react.JSX.Element;
|
|
601
|
+
|
|
602
|
+
type DropdownMenuProps = ComponentProps<typeof Dropdown>;
|
|
603
|
+
/** Alias for {@link Dropdown} — familiar naming for teams used to a "DropdownMenu" component. */
|
|
604
|
+
declare function DropdownMenu(props: DropdownMenuProps): react.JSX.Element;
|
|
605
|
+
|
|
606
|
+
interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
607
|
+
icon?: ReactNode;
|
|
608
|
+
title?: ReactNode;
|
|
609
|
+
description?: ReactNode;
|
|
610
|
+
actions?: ReactNode;
|
|
611
|
+
children?: ReactNode;
|
|
612
|
+
}
|
|
613
|
+
/** Empty state panel for lists, tables, and search results. */
|
|
614
|
+
declare function Empty({ icon, title, description, actions, className, children, ...rest }: EmptyProps): react.JSX.Element;
|
|
615
|
+
|
|
616
|
+
interface FeedItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
|
|
617
|
+
/** Leading badge / category chip. */
|
|
618
|
+
badge?: ReactNode;
|
|
619
|
+
title: ReactNode;
|
|
620
|
+
subtitle?: ReactNode;
|
|
621
|
+
time?: ReactNode;
|
|
622
|
+
/** Selected row (map/feed selection). */
|
|
623
|
+
selected?: boolean;
|
|
624
|
+
children?: ReactNode;
|
|
625
|
+
}
|
|
626
|
+
/**
|
|
627
|
+
* Intel-feed list row — dashboard-app feed cards with badge, title, meta, time.
|
|
628
|
+
*/
|
|
629
|
+
declare function FeedItem({ badge, title, subtitle, time, selected, className, children, type, ...rest }: FeedItemProps): react.JSX.Element;
|
|
630
|
+
interface FeedProps extends HTMLAttributes<HTMLDivElement> {
|
|
631
|
+
children?: ReactNode;
|
|
632
|
+
}
|
|
633
|
+
declare function Feed({ className, children, ...rest }: FeedProps): react.JSX.Element;
|
|
634
|
+
|
|
635
|
+
interface FieldProps extends HTMLAttributes<HTMLDivElement> {
|
|
636
|
+
/** Inline layout: label left, control right. */
|
|
637
|
+
inline?: boolean;
|
|
638
|
+
/** Helper / description text below the control. */
|
|
639
|
+
description?: ReactNode;
|
|
640
|
+
/** Error message below the control (rendered with a ⚠ marker). */
|
|
641
|
+
error?: ReactNode;
|
|
642
|
+
/** Label + control (e.g. a `Label` followed by an input). */
|
|
643
|
+
children?: ReactNode;
|
|
644
|
+
}
|
|
645
|
+
/** Form field wrapper — stacks a label, control, and optional helper/error text. */
|
|
646
|
+
declare function Field({ inline, description, error, className, children, ...rest }: FieldProps): react.JSX.Element;
|
|
647
|
+
|
|
648
|
+
interface GaugeProps extends HTMLAttributes<HTMLDivElement> {
|
|
649
|
+
/** Fill amount, 0–100. Drives the conic `--value` CSS variable. */
|
|
650
|
+
value: number;
|
|
651
|
+
/** Text shown in the center; defaults to `value`. */
|
|
652
|
+
display?: ReactNode;
|
|
653
|
+
/** Uppercase caption under the value. */
|
|
654
|
+
label?: ReactNode;
|
|
655
|
+
/** `small` is the compact radial. */
|
|
656
|
+
size?: 'small';
|
|
657
|
+
/** Color theme: accent (default), or a semantic override. */
|
|
658
|
+
variant?: 'danger' | 'success' | 'warn';
|
|
659
|
+
/** Concentric-ring radar style with sweep fill. */
|
|
660
|
+
radar?: boolean;
|
|
661
|
+
/** Extra center content (rendered after value/label). */
|
|
662
|
+
children?: ReactNode;
|
|
663
|
+
}
|
|
664
|
+
/** Radial neon gauge — conic fill driven by a 0–100 `value`, with center readout. */
|
|
665
|
+
declare function Gauge({ value, display, label, size, variant, radar, className, style, children, ...rest }: GaugeProps): react.JSX.Element;
|
|
666
|
+
|
|
667
|
+
interface GlowCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
668
|
+
/** Neon border/glow color family. Defaults to `orange`. */
|
|
669
|
+
color?: CdColor;
|
|
670
|
+
/** Marks the card as selected (`data-active`). */
|
|
671
|
+
active?: boolean;
|
|
672
|
+
children?: ReactNode;
|
|
673
|
+
onClick?: (e: MouseEvent<HTMLDivElement>) => void;
|
|
674
|
+
style?: CSSProperties;
|
|
675
|
+
}
|
|
676
|
+
/** Interactive panel with neon border glow — primary surface for cyber layouts. */
|
|
677
|
+
declare function GlowCard({ color, active, className, onClick, style, children, ...rest }: GlowCardProps): react.JSX.Element;
|
|
678
|
+
|
|
679
|
+
interface HBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
680
|
+
label: ReactNode;
|
|
681
|
+
/** 0–100 fill percent. */
|
|
682
|
+
value: number;
|
|
683
|
+
/** Optional numeric readout (defaults to value). */
|
|
684
|
+
display?: ReactNode;
|
|
685
|
+
/** CSS color for the fill (defaults to accent). */
|
|
686
|
+
color?: string;
|
|
687
|
+
}
|
|
688
|
+
/**
|
|
689
|
+
* Labeled horizontal bar — dashboard-app "BY CATEGORY" breakdown rows.
|
|
690
|
+
*/
|
|
691
|
+
declare function HBar({ label, value, display, color, className, ...rest }: HBarProps): react.JSX.Element;
|
|
692
|
+
|
|
693
|
+
interface HoverCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
694
|
+
/** Trigger content. */
|
|
695
|
+
trigger: ReactNode;
|
|
696
|
+
title?: ReactNode;
|
|
697
|
+
description?: ReactNode;
|
|
698
|
+
children?: ReactNode;
|
|
699
|
+
}
|
|
700
|
+
/** Hover/focus-revealed card (CSS-driven). */
|
|
701
|
+
declare function HoverCard({ trigger, title, description, className, children, ...rest }: HoverCardProps): react.JSX.Element;
|
|
702
|
+
|
|
703
|
+
/** Status color for a segment value — maps to `cd-hud-segment__value--*`. */
|
|
704
|
+
type HudSegmentStatus = 'ok' | 'warn' | 'err';
|
|
705
|
+
interface HudSegmentProps extends HTMLAttributes<HTMLDivElement> {
|
|
706
|
+
/** Small uppercase caption. */
|
|
707
|
+
label?: ReactNode;
|
|
708
|
+
/** Accent-colored value. */
|
|
709
|
+
value?: ReactNode;
|
|
710
|
+
/** Color the value by status. */
|
|
711
|
+
status?: HudSegmentStatus;
|
|
712
|
+
children?: ReactNode;
|
|
713
|
+
}
|
|
714
|
+
/** One label/value cell inside a `HudBar`. */
|
|
715
|
+
declare function HudSegment({ label, value, status, className, children, ...rest }: HudSegmentProps): react.JSX.Element;
|
|
716
|
+
interface HudBarSegment {
|
|
717
|
+
/** Small uppercase caption. */
|
|
718
|
+
label?: ReactNode;
|
|
719
|
+
/** Accent-colored value. */
|
|
720
|
+
value?: ReactNode;
|
|
721
|
+
/** Color the value by status. */
|
|
722
|
+
status?: HudSegmentStatus;
|
|
723
|
+
}
|
|
724
|
+
interface HudBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
725
|
+
/** Data-driven segments rendered left-to-right. */
|
|
726
|
+
segments?: HudBarSegment[];
|
|
727
|
+
/** Glowing accent edge: `top` or `bottom` bar, or `side` for vertical. */
|
|
728
|
+
position?: 'top' | 'bottom' | 'side';
|
|
729
|
+
/** Tighter segment padding/type. */
|
|
730
|
+
compact?: boolean;
|
|
731
|
+
/** Custom segment markup (e.g. `HudSegment` children) instead of `segments`. */
|
|
732
|
+
children?: ReactNode;
|
|
733
|
+
}
|
|
734
|
+
/** Persistent HUD status bar — a row of label/value segments with a glowing accent edge. */
|
|
735
|
+
declare function HudBar({ segments, position, compact, className, children, ...rest }: HudBarProps): react.JSX.Element;
|
|
736
|
+
|
|
737
|
+
/** Status color for a HUD value readout — maps to `cd-hud__value--*`. */
|
|
738
|
+
type HudValueStatus = 'ok' | 'warn' | 'err' | 'dim';
|
|
739
|
+
interface HudFrameProps extends HTMLAttributes<HTMLDivElement> {
|
|
740
|
+
/** Uppercase label line above the value. */
|
|
741
|
+
label?: ReactNode;
|
|
742
|
+
/** Primary readout value. */
|
|
743
|
+
value?: ReactNode;
|
|
744
|
+
/** Color the value by status. */
|
|
745
|
+
status?: HudValueStatus;
|
|
746
|
+
/** Tighter padding for dense UIs. */
|
|
747
|
+
compact?: boolean;
|
|
748
|
+
/** Frosted / AR-style translucent backdrop. */
|
|
749
|
+
floating?: boolean;
|
|
750
|
+
/** Extra content rendered after the label/value (e.g. nested gauges). */
|
|
751
|
+
children?: ReactNode;
|
|
752
|
+
}
|
|
753
|
+
/** Framed HUD stat panel — uppercase label over a glowing accent value readout. */
|
|
754
|
+
declare function HudFrame({ label, value, status, compact, floating, className, children, ...rest }: HudFrameProps): react.JSX.Element;
|
|
755
|
+
|
|
756
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
757
|
+
/** `sm` is compact, `lg` is taller; default is the standard height. */
|
|
758
|
+
size?: 'sm' | 'md' | 'lg';
|
|
759
|
+
/** Adds a left accent border (corpus-search pattern). */
|
|
760
|
+
accent?: boolean;
|
|
761
|
+
/** Error state — red border and glow. */
|
|
762
|
+
error?: boolean;
|
|
763
|
+
}
|
|
764
|
+
/** Cyber text input — neon focus ring, optional left-accent border and error state. */
|
|
765
|
+
declare function Input({ size, accent, error, className, type, ...rest }: InputProps): react.JSX.Element;
|
|
766
|
+
|
|
767
|
+
interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
768
|
+
children?: ReactNode;
|
|
769
|
+
}
|
|
770
|
+
/** Prefix/suffix input group — place `InputGroupAddon` and `Input` as children. */
|
|
771
|
+
declare function InputGroup({ className, children, ...rest }: InputGroupProps): react.JSX.Element;
|
|
772
|
+
interface InputGroupAddonProps extends HTMLAttributes<HTMLSpanElement> {
|
|
773
|
+
children?: ReactNode;
|
|
774
|
+
}
|
|
775
|
+
declare function InputGroupAddon({ className, children, ...rest }: InputGroupAddonProps): react.JSX.Element;
|
|
776
|
+
|
|
777
|
+
interface InputOTPProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
778
|
+
/** Number of digits. @default 6 */
|
|
779
|
+
length?: number;
|
|
780
|
+
value?: string;
|
|
781
|
+
onChange?: (value: string) => void;
|
|
782
|
+
disabled?: boolean;
|
|
783
|
+
size?: 'sm' | 'md';
|
|
784
|
+
/** Insert a separator after this many digits (e.g. 3 → XXX-XXX). */
|
|
785
|
+
separatorAfter?: number;
|
|
786
|
+
}
|
|
787
|
+
/** One-time-passcode digit inputs with focus advance. */
|
|
788
|
+
declare function InputOTP({ length, value, onChange, disabled, size, separatorAfter, className, ...rest }: InputOTPProps): react.JSX.Element;
|
|
789
|
+
|
|
790
|
+
interface InterferenceProps extends HTMLAttributes<HTMLDivElement> {
|
|
791
|
+
/** Static intensity: `light`, default, or `heavy`. */
|
|
792
|
+
intensity?: 'light' | 'heavy';
|
|
793
|
+
/** Extra-aggressive noise (combine with `heavy`). */
|
|
794
|
+
intense?: boolean;
|
|
795
|
+
/** Enable the text/data corruption effect (uses `corruptText` as the clipped layer text). */
|
|
796
|
+
glitch?: boolean;
|
|
797
|
+
/**
|
|
798
|
+
* Text driving the glitch corruption layers (sets `data-text` on the content wrapper).
|
|
799
|
+
* Required for the corruption effect to render; should match the visible heading text.
|
|
800
|
+
*/
|
|
801
|
+
corruptText?: string;
|
|
802
|
+
/** Content shown beneath the noise overlay. */
|
|
803
|
+
children?: ReactNode;
|
|
804
|
+
}
|
|
805
|
+
/** Animated static / data-corruption overlay — adds a `__noise` layer over wrapped content. */
|
|
806
|
+
declare function Interference({ intensity, intense, glitch, corruptText, className, children, ...rest }: InterferenceProps): react.JSX.Element;
|
|
807
|
+
|
|
808
|
+
interface ItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
809
|
+
media?: ReactNode;
|
|
810
|
+
title?: ReactNode;
|
|
811
|
+
description?: ReactNode;
|
|
812
|
+
actions?: ReactNode;
|
|
813
|
+
bordered?: boolean;
|
|
814
|
+
interactive?: boolean;
|
|
815
|
+
children?: ReactNode;
|
|
816
|
+
}
|
|
817
|
+
/** List row primitive — media, title, description, actions. */
|
|
818
|
+
declare function Item({ media, title, description, actions, bordered, interactive, className, children, ...rest }: ItemProps): react.JSX.Element;
|
|
819
|
+
declare function ItemGroup({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
820
|
+
|
|
821
|
+
interface KbdProps extends HTMLAttributes<HTMLElement> {
|
|
822
|
+
/** `lg` renders the larger standalone key. */
|
|
823
|
+
size?: 'md' | 'lg';
|
|
824
|
+
/** Accent-highlighted key with a neon glow. */
|
|
825
|
+
accent?: boolean;
|
|
826
|
+
children?: ReactNode;
|
|
827
|
+
}
|
|
828
|
+
/** Keyboard key — boxed glyph with size and accent variants. */
|
|
829
|
+
declare function Kbd({ size, accent, className, children, ...rest }: KbdProps): react.JSX.Element;
|
|
830
|
+
interface KbdGroupProps extends HTMLAttributes<HTMLSpanElement> {
|
|
831
|
+
/** Separator rendered between keys (default `+`). */
|
|
832
|
+
separator?: ReactNode;
|
|
833
|
+
/** `Kbd` keys to combine. */
|
|
834
|
+
children?: ReactNode;
|
|
835
|
+
}
|
|
836
|
+
/** Key combination group — joins multiple `Kbd` keys with a separator (e.g. ⌘ + K). */
|
|
837
|
+
declare function KbdGroup({ separator, className, children, ...rest }: KbdGroupProps): react.JSX.Element;
|
|
838
|
+
|
|
839
|
+
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
840
|
+
/** Append a red required asterisk. */
|
|
841
|
+
required?: boolean;
|
|
842
|
+
children?: ReactNode;
|
|
843
|
+
}
|
|
844
|
+
/** Uppercase form label — optional required asterisk. */
|
|
845
|
+
declare function Label({ required, className, children, ...rest }: LabelProps): react.JSX.Element;
|
|
846
|
+
|
|
847
|
+
interface MenubarAction {
|
|
848
|
+
label: ReactNode;
|
|
849
|
+
disabled?: boolean;
|
|
850
|
+
onSelect?: () => void;
|
|
851
|
+
}
|
|
852
|
+
interface MenubarMenu {
|
|
853
|
+
label: ReactNode;
|
|
854
|
+
items: MenubarAction[];
|
|
855
|
+
}
|
|
856
|
+
interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
|
|
857
|
+
menus: MenubarMenu[];
|
|
858
|
+
}
|
|
859
|
+
/** Horizontal application menubar with dropdown sections. */
|
|
860
|
+
declare function Menubar({ menus, className, ...rest }: MenubarProps): react.JSX.Element;
|
|
861
|
+
|
|
862
|
+
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
863
|
+
/** `sm` is the compact height; default is the standard height. */
|
|
864
|
+
size?: 'sm' | 'md';
|
|
865
|
+
/** Uppercase tracked label styling (viz-controls pattern). */
|
|
866
|
+
label?: boolean;
|
|
867
|
+
/** Error state — red border. */
|
|
868
|
+
error?: boolean;
|
|
869
|
+
/** `<option>` elements. */
|
|
870
|
+
children?: ReactNode;
|
|
871
|
+
}
|
|
872
|
+
/** Native select with custom neon chevron — wraps the element for the arrow. */
|
|
873
|
+
declare function Select({ size, label, error, className, children, ...rest }: SelectProps): react.JSX.Element;
|
|
874
|
+
|
|
875
|
+
type NativeSelectProps = ComponentProps<typeof Select>;
|
|
876
|
+
/** Alias for {@link Select} — familiar naming for teams used to a "NativeSelect" component. */
|
|
877
|
+
declare function NativeSelect(props: NativeSelectProps): react.JSX.Element;
|
|
878
|
+
|
|
879
|
+
interface NavigationMenuLink {
|
|
880
|
+
label: ReactNode;
|
|
881
|
+
href?: string;
|
|
882
|
+
active?: boolean;
|
|
883
|
+
onClick?: () => void;
|
|
884
|
+
}
|
|
885
|
+
interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {
|
|
886
|
+
items: NavigationMenuLink[];
|
|
887
|
+
}
|
|
888
|
+
/** Horizontal navigation link row. */
|
|
889
|
+
declare function NavigationMenu({ items, className, ...rest }: NavigationMenuProps): react.JSX.Element;
|
|
890
|
+
type NavigationMenuItemProps = AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
891
|
+
|
|
892
|
+
interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
893
|
+
/** Current page (1-based). */
|
|
894
|
+
page: number;
|
|
895
|
+
/** Total number of pages. */
|
|
896
|
+
pageCount: number;
|
|
897
|
+
/** Fired with the target page when a control is activated. */
|
|
898
|
+
onPageChange?: (page: number) => void;
|
|
899
|
+
/** How many sibling pages to show on each side of the current page. */
|
|
900
|
+
siblingCount?: number;
|
|
901
|
+
/** Size variant. */
|
|
902
|
+
size?: 'default' | 'sm' | 'lg';
|
|
903
|
+
/** Collapse gaps so items share borders. */
|
|
904
|
+
compact?: boolean;
|
|
905
|
+
/** Show "Page X of Y" info text after the controls. */
|
|
906
|
+
showInfo?: boolean;
|
|
907
|
+
/** Prev button label. */
|
|
908
|
+
prevLabel?: React.ReactNode;
|
|
909
|
+
/** Next button label. */
|
|
910
|
+
nextLabel?: React.ReactNode;
|
|
911
|
+
}
|
|
912
|
+
/** Page navigation — windowed page list with prev/next, ellipsis and optional info. */
|
|
913
|
+
declare function Pagination({ page, pageCount, onPageChange, siblingCount, size, compact, showInfo, prevLabel, nextLabel, className, ...rest }: PaginationProps): react.JSX.Element;
|
|
914
|
+
|
|
915
|
+
interface PanelHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
916
|
+
/** Trailing actions slot (right-aligned), e.g. a count or status indicator. */
|
|
917
|
+
actions?: ReactNode;
|
|
918
|
+
/** Header label / title content. */
|
|
919
|
+
children?: ReactNode;
|
|
920
|
+
}
|
|
921
|
+
/** Panel header bar — uppercase neon title with an animated sweep and a right-aligned actions slot. */
|
|
922
|
+
declare function PanelHeader({ actions, className, children, ...rest }: PanelHeaderProps): react.JSX.Element;
|
|
923
|
+
|
|
924
|
+
interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
925
|
+
/** Trigger node. */
|
|
926
|
+
trigger: ReactNode;
|
|
927
|
+
/** Uncontrolled open. */
|
|
928
|
+
defaultOpen?: boolean;
|
|
929
|
+
open?: boolean;
|
|
930
|
+
onOpenChange?: (open: boolean) => void;
|
|
931
|
+
/** Content placement. @default 'bottom' */
|
|
932
|
+
side?: 'top' | 'bottom' | 'bottom-end' | 'right';
|
|
933
|
+
title?: ReactNode;
|
|
934
|
+
description?: ReactNode;
|
|
935
|
+
children?: ReactNode;
|
|
936
|
+
}
|
|
937
|
+
/** Click-triggered floating panel. */
|
|
938
|
+
declare function Popover({ trigger, defaultOpen, open, onOpenChange, side, title, description, className, children, ...rest }: PopoverProps): react.JSX.Element;
|
|
939
|
+
|
|
940
|
+
interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
941
|
+
/** Fill percentage (0–100). Ignored when `indeterminate`. */
|
|
942
|
+
value?: number;
|
|
943
|
+
/** Color variant. Default uses the theme accent. */
|
|
944
|
+
variant?: 'default' | 'danger' | 'success' | 'warning';
|
|
945
|
+
/** Taller 8px bar. */
|
|
946
|
+
thick?: boolean;
|
|
947
|
+
/** Scanning/indeterminate animation (no fixed value). */
|
|
948
|
+
indeterminate?: boolean;
|
|
949
|
+
}
|
|
950
|
+
/** Progress bar — accent fill driven by `value`%, with color, thick, and indeterminate variants. */
|
|
951
|
+
declare function Progress({ value, variant, thick, indeterminate, className, ...rest }: ProgressProps): react.JSX.Element;
|
|
952
|
+
|
|
953
|
+
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
954
|
+
/** Text shown beside the dot. When set, wraps the input in a `cd-control` label. */
|
|
955
|
+
label?: ReactNode;
|
|
956
|
+
/** Smaller helper line below the label. */
|
|
957
|
+
description?: ReactNode;
|
|
958
|
+
}
|
|
959
|
+
/** Cyber radio — neon filled dot; renders inside a `cd-control` label when labelled. */
|
|
960
|
+
declare function Radio({ label, description, className, ...rest }: RadioProps): react.JSX.Element;
|
|
961
|
+
|
|
962
|
+
interface RadioGroupItem {
|
|
963
|
+
value: string;
|
|
964
|
+
label: ReactNode;
|
|
965
|
+
description?: ReactNode;
|
|
966
|
+
disabled?: boolean;
|
|
967
|
+
}
|
|
968
|
+
interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
969
|
+
/** Shared `name` for the radio inputs. */
|
|
970
|
+
name: string;
|
|
971
|
+
items: RadioGroupItem[];
|
|
972
|
+
value?: string;
|
|
973
|
+
defaultValue?: string;
|
|
974
|
+
onValueChange?: (value: string) => void;
|
|
975
|
+
/** Stack vertically (default) or horizontally. */
|
|
976
|
+
orientation?: 'vertical' | 'horizontal';
|
|
977
|
+
}
|
|
978
|
+
/** Group of labelled radio options with shared name. */
|
|
979
|
+
declare function RadioGroup({ name, items, value, defaultValue, onValueChange, orientation, className, ...rest }: RadioGroupProps): react.JSX.Element;
|
|
980
|
+
|
|
981
|
+
interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
|
|
982
|
+
/** First panel content. */
|
|
983
|
+
first: ReactNode;
|
|
984
|
+
/** Second panel content. */
|
|
985
|
+
second: ReactNode;
|
|
986
|
+
/** Horizontal (side-by-side) or vertical (stacked). @default 'horizontal' */
|
|
987
|
+
orientation?: 'horizontal' | 'vertical';
|
|
988
|
+
/** Initial first-panel size as percent 0–100. @default 50 */
|
|
989
|
+
defaultSize?: number;
|
|
990
|
+
minSize?: number;
|
|
991
|
+
maxSize?: number;
|
|
992
|
+
}
|
|
993
|
+
/** Two-panel resizable split view. */
|
|
994
|
+
declare function Resizable({ first, second, orientation, defaultSize, minSize, maxSize, className, ...rest }: ResizableProps): react.JSX.Element;
|
|
995
|
+
|
|
996
|
+
interface ScannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
997
|
+
/** Sweep top-to-bottom instead of left-to-right. */
|
|
998
|
+
vertical?: boolean;
|
|
999
|
+
/** Fainter return-sweep look. */
|
|
1000
|
+
ping?: boolean;
|
|
1001
|
+
/** Content scanned by the sweep line. */
|
|
1002
|
+
children?: ReactNode;
|
|
1003
|
+
}
|
|
1004
|
+
/** Animated scan/sweep-line overlay — wraps content with a glowing lidar/radar sweep. */
|
|
1005
|
+
declare function Scanner({ vertical, ping, className, children, ...rest }: ScannerProps): react.JSX.Element;
|
|
1006
|
+
|
|
1007
|
+
interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
|
|
1008
|
+
/** Thin neon scrollbar styling. @default true */
|
|
1009
|
+
thin?: boolean;
|
|
1010
|
+
children?: ReactNode;
|
|
1011
|
+
}
|
|
1012
|
+
/** Scrollable region with optional thin cyber scrollbar. */
|
|
1013
|
+
declare function ScrollArea({ thin, className, children, ...rest }: ScrollAreaProps): react.JSX.Element;
|
|
1014
|
+
|
|
1015
|
+
interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1016
|
+
/** Section title (uppercase tracking). */
|
|
1017
|
+
title: ReactNode;
|
|
1018
|
+
/** Leading caret glyph. @default '▸' */
|
|
1019
|
+
caret?: ReactNode;
|
|
1020
|
+
/** Right-aligned actions (chips, buttons, counts). */
|
|
1021
|
+
actions?: ReactNode;
|
|
1022
|
+
children?: ReactNode;
|
|
1023
|
+
}
|
|
1024
|
+
/**
|
|
1025
|
+
* Panel section title row — dashboard-app pattern (`▸ INTEL FEED` / `▸ METRICS`).
|
|
1026
|
+
* Lighter than {@link PanelHeader}; use inside sidebars and column panels.
|
|
1027
|
+
*/
|
|
1028
|
+
declare function SectionHeader({ title, caret, actions, className, children, ...rest }: SectionHeaderProps): react.JSX.Element;
|
|
1029
|
+
|
|
1030
|
+
interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
1031
|
+
/** Orientation. `vertical` draws a vertical divider. */
|
|
1032
|
+
orientation?: 'horizontal' | 'vertical';
|
|
1033
|
+
/** Neon gradient line instead of a plain rule. */
|
|
1034
|
+
neon?: boolean;
|
|
1035
|
+
/** Optional inline label (e.g. "OR"); centers it between the rules. */
|
|
1036
|
+
children?: ReactNode;
|
|
1037
|
+
}
|
|
1038
|
+
/** Divider rule — horizontal/vertical, optional neon gradient and centered label. */
|
|
1039
|
+
declare function Separator({ orientation, neon, className, children, ...rest }: SeparatorProps): react.JSX.Element;
|
|
1040
|
+
|
|
1041
|
+
interface SidebarLink {
|
|
1042
|
+
label: ReactNode;
|
|
1043
|
+
icon?: ReactNode;
|
|
1044
|
+
href?: string;
|
|
1045
|
+
active?: boolean;
|
|
1046
|
+
onClick?: () => void;
|
|
1047
|
+
}
|
|
1048
|
+
interface SidebarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1049
|
+
title?: ReactNode;
|
|
1050
|
+
links: SidebarLink[];
|
|
1051
|
+
/** Main content beside the sidebar. */
|
|
1052
|
+
children?: ReactNode;
|
|
1053
|
+
defaultCollapsed?: boolean;
|
|
1054
|
+
collapsed?: boolean;
|
|
1055
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
1056
|
+
}
|
|
1057
|
+
/** App shell with collapsible sidebar navigation. */
|
|
1058
|
+
declare function Sidebar({ title, links, children, defaultCollapsed, collapsed, onCollapsedChange, className, ...rest }: SidebarProps): react.JSX.Element;
|
|
1059
|
+
|
|
1060
|
+
interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
1061
|
+
/** Pre-sized shape. `block`/`card` render the compound containers; the rest are line/avatar/button placeholders. */
|
|
1062
|
+
shape?: 'plain' | 'text' | 'heading' | 'avatar' | 'btn' | 'block' | 'card';
|
|
1063
|
+
/** Fractional width helper (full / 3/4 / 1/2 / 1/3). Ignored for `block`/`card`. */
|
|
1064
|
+
width?: 'full' | '3/4' | '1/2' | '1/3';
|
|
1065
|
+
}
|
|
1066
|
+
/** Shimmering loading placeholder — text/heading/avatar/btn shapes plus block & card containers. */
|
|
1067
|
+
declare function Skeleton({ shape, width, className, children, ...rest }: SkeletonProps): react.JSX.Element;
|
|
1068
|
+
/** Inline row inside a `cd-skeleton-block` (e.g. avatar + text lines). */
|
|
1069
|
+
declare function SkeletonRow({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
1070
|
+
|
|
1071
|
+
interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
1072
|
+
/** When provided, renders the value label beside the track inside a `cd-slider-wrap`. */
|
|
1073
|
+
value?: InputHTMLAttributes<HTMLInputElement>['value'];
|
|
1074
|
+
/** Node shown in the trailing `cd-slider-value` label. When set, wraps in `cd-slider-wrap`. */
|
|
1075
|
+
valueLabel?: ReactNode;
|
|
1076
|
+
}
|
|
1077
|
+
/** Range slider — neon track with 3D thumb; optional trailing value label. */
|
|
1078
|
+
declare function Slider({ valueLabel, className, ...rest }: SliderProps): react.JSX.Element;
|
|
1079
|
+
|
|
1080
|
+
interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
1081
|
+
/** Diameter preset. `md` is the default (no modifier). */
|
|
1082
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1083
|
+
/** `ring` (default), `dual` counter-rotating rings, or `dots` pulse. */
|
|
1084
|
+
variant?: 'ring' | 'dual' | 'dots';
|
|
1085
|
+
/** Accessible label announced to screen readers. */
|
|
1086
|
+
label?: string;
|
|
1087
|
+
}
|
|
1088
|
+
/** Loading spinner — ring / dual-ring / dot-pulse variants in five sizes. */
|
|
1089
|
+
declare function Spinner({ size, variant, label, className, ...rest }: SpinnerProps): react.JSX.Element;
|
|
1090
|
+
|
|
1091
|
+
/** 2D matrix of cell raw values (display may evaluate formulas). */
|
|
1092
|
+
type SpreadsheetData = string[][];
|
|
1093
|
+
interface CellCoord {
|
|
1094
|
+
row: number;
|
|
1095
|
+
col: number;
|
|
1096
|
+
}
|
|
1097
|
+
interface SpreadsheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
1098
|
+
/** Controlled cell matrix. When omitted, component is uncontrolled. */
|
|
1099
|
+
data?: SpreadsheetData;
|
|
1100
|
+
/** Initial matrix for uncontrolled mode. */
|
|
1101
|
+
defaultData?: SpreadsheetData;
|
|
1102
|
+
/** Fired with the full matrix after any edit. */
|
|
1103
|
+
onChange?: (data: SpreadsheetData) => void;
|
|
1104
|
+
/** Fired when a single cell commits. */
|
|
1105
|
+
onCellChange?: (row: number, col: number, value: string, data: SpreadsheetData) => void;
|
|
1106
|
+
/** Number of rows when no data provided. @default 12 */
|
|
1107
|
+
rows?: number;
|
|
1108
|
+
/** Number of columns when no data provided. @default 8 */
|
|
1109
|
+
cols?: number;
|
|
1110
|
+
/** Column width in px. @default 96 */
|
|
1111
|
+
columnWidth?: number;
|
|
1112
|
+
/** Max viewport height. @default 420 */
|
|
1113
|
+
maxHeight?: number | string;
|
|
1114
|
+
/** Compact row density. */
|
|
1115
|
+
compact?: boolean;
|
|
1116
|
+
/** Disable editing (selection/nav still work). */
|
|
1117
|
+
readOnly?: boolean;
|
|
1118
|
+
/** Evaluate `=` formulas for display. @default true */
|
|
1119
|
+
formulas?: boolean;
|
|
1120
|
+
/** Show address + formula bar. @default true */
|
|
1121
|
+
showFormulaBar?: boolean;
|
|
1122
|
+
/** Show status strip. @default true */
|
|
1123
|
+
showStatus?: boolean;
|
|
1124
|
+
/** Optional column labels (defaults A, B, C…). */
|
|
1125
|
+
columnLabels?: string[];
|
|
1126
|
+
/** Optional row labels (defaults 1-based numbers). */
|
|
1127
|
+
rowLabels?: string[];
|
|
1128
|
+
}
|
|
1129
|
+
/**
|
|
1130
|
+
* Editable cyber spreadsheet grid.
|
|
1131
|
+
*
|
|
1132
|
+
* Features: cell selection, shift-range select, inline edit, formula bar,
|
|
1133
|
+
* keyboard nav (arrows/tab/enter), basic formulas (`=A1+B1`, `=SUM(A1:A3)`).
|
|
1134
|
+
*/
|
|
1135
|
+
declare function Spreadsheet({ data: controlledData, defaultData, onChange, onCellChange, rows: rowsProp, cols: colsProp, columnWidth, maxHeight, compact, readOnly, formulas, showFormulaBar, showStatus, columnLabels, rowLabels, className, style, ...rest }: SpreadsheetProps): react.JSX.Element;
|
|
1136
|
+
/** Build an empty matrix helper for consumers. */
|
|
1137
|
+
declare function createSpreadsheetData(rows: number, cols: number, fill?: string): SpreadsheetData;
|
|
1138
|
+
|
|
1139
|
+
interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
1140
|
+
/** Uppercase caption above the value. */
|
|
1141
|
+
label: ReactNode;
|
|
1142
|
+
/** The headline metric. */
|
|
1143
|
+
value: ReactNode;
|
|
1144
|
+
/** Secondary change/context line below the value. */
|
|
1145
|
+
delta?: ReactNode;
|
|
1146
|
+
/** Tints the delta green (`up`) or red (`down`). */
|
|
1147
|
+
trend?: 'up' | 'down';
|
|
1148
|
+
/** Color treatment for the value. Default is the neon-green metric look. */
|
|
1149
|
+
variant?: 'default' | 'accent' | 'red' | 'yellow' | 'blue' | 'magenta';
|
|
1150
|
+
}
|
|
1151
|
+
/** Metric block — uppercase label, neon value and optional trend delta. */
|
|
1152
|
+
declare function Stat({ label, value, delta, trend, variant, className, ...rest }: StatProps): react.JSX.Element;
|
|
1153
|
+
declare namespace Stat {
|
|
1154
|
+
var Grid: typeof StatGrid;
|
|
1155
|
+
}
|
|
1156
|
+
/** Grid container that separates `Stat` cards with 1px border lines. */
|
|
1157
|
+
declare function StatGrid({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
1158
|
+
|
|
1159
|
+
interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
1160
|
+
/** Primary status message (gets `> ` prompt prefix). */
|
|
1161
|
+
message?: ReactNode;
|
|
1162
|
+
/** Show blinking terminal cursor after the message. @default true */
|
|
1163
|
+
cursor?: boolean;
|
|
1164
|
+
/** Leading status widget (e.g. StatusDot). */
|
|
1165
|
+
leading?: ReactNode;
|
|
1166
|
+
/** Trailing meta (filename, clock, etc.). */
|
|
1167
|
+
meta?: ReactNode;
|
|
1168
|
+
children?: ReactNode;
|
|
1169
|
+
}
|
|
1170
|
+
/**
|
|
1171
|
+
* App footer status strip — AI-shell status bar with terminal prompt/cursor.
|
|
1172
|
+
*/
|
|
1173
|
+
declare function StatusBar({ message, cursor, leading, meta, className, children, ...rest }: StatusBarProps): react.JSX.Element;
|
|
1174
|
+
|
|
1175
|
+
interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
|
|
1176
|
+
/** Visual state. @default 'live' */
|
|
1177
|
+
status?: 'live' | 'success' | 'warn' | 'danger' | 'paused' | 'idle';
|
|
1178
|
+
/** Optional label (e.g. SYS.ACTIVE / Live). */
|
|
1179
|
+
children?: ReactNode;
|
|
1180
|
+
/** Hide the text label, show only the orb. */
|
|
1181
|
+
orbOnly?: boolean;
|
|
1182
|
+
}
|
|
1183
|
+
/**
|
|
1184
|
+
* Live/system status indicator — dashboard-app `SYS.ACTIVE` pulse and
|
|
1185
|
+
* AI-shell Live/Paused dots.
|
|
1186
|
+
*/
|
|
1187
|
+
declare function StatusDot({ status, children, orbOnly, className, ...rest }: StatusDotProps): react.JSX.Element;
|
|
1188
|
+
|
|
1189
|
+
type StatusPillVariant = 'default' | 'active' | 'developing' | 'resolved' | 'success' | 'critical' | 'muted';
|
|
1190
|
+
interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
|
|
1191
|
+
variant?: StatusPillVariant;
|
|
1192
|
+
children?: ReactNode;
|
|
1193
|
+
}
|
|
1194
|
+
/**
|
|
1195
|
+
* Situation / severity pill — dashboard-app `DEVELOPING` / `ACTIVE` / `SEV 4 · CRITICAL`.
|
|
1196
|
+
*/
|
|
1197
|
+
declare function StatusPill({ variant, className, children, ...rest }: StatusPillProps): react.JSX.Element;
|
|
1198
|
+
|
|
1199
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
1200
|
+
/** `sm` is the compact track; default is the standard size. */
|
|
1201
|
+
size?: 'sm' | 'md';
|
|
1202
|
+
/** Text shown beside the toggle. */
|
|
1203
|
+
label?: ReactNode;
|
|
1204
|
+
}
|
|
1205
|
+
/** Toggle switch — visually-hidden checkbox driving a neon track + thumb. */
|
|
1206
|
+
declare function Switch({ size, label, className, ...rest }: SwitchProps): react.JSX.Element;
|
|
1207
|
+
|
|
1208
|
+
interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
1209
|
+
/** Tighter padding and smaller type. */
|
|
1210
|
+
compact?: boolean;
|
|
1211
|
+
/** Draw cell borders. */
|
|
1212
|
+
bordered?: boolean;
|
|
1213
|
+
/** Wrap the table in a horizontally-scrollable `cd-table-wrap` container. */
|
|
1214
|
+
scroll?: boolean;
|
|
1215
|
+
/** Props forwarded to the wrapping `cd-table-wrap` div when `scroll` is set. */
|
|
1216
|
+
wrapProps?: HTMLAttributes<HTMLDivElement>;
|
|
1217
|
+
children?: ReactNode;
|
|
1218
|
+
}
|
|
1219
|
+
/** Cyber data table — accent uppercase headers, status dots, numeric cells. Compose with Table.Head/Body/Row/HeaderCell/Cell. */
|
|
1220
|
+
declare function Table({ compact, bordered, scroll, wrapProps, className, children, ...rest }: TableProps): react.JSX.Element;
|
|
1221
|
+
declare namespace Table {
|
|
1222
|
+
var Head: typeof TableHead;
|
|
1223
|
+
var Body: typeof TableBody;
|
|
1224
|
+
var Row: typeof TableRow;
|
|
1225
|
+
var HeaderCell: typeof TableHeaderCell;
|
|
1226
|
+
var Cell: typeof TableCell;
|
|
1227
|
+
}
|
|
1228
|
+
interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
1229
|
+
children?: ReactNode;
|
|
1230
|
+
}
|
|
1231
|
+
/** `<thead>` group for the table header row(s). */
|
|
1232
|
+
declare function TableHead({ children, ...rest }: TableHeadProps): react.JSX.Element;
|
|
1233
|
+
interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
1234
|
+
children?: ReactNode;
|
|
1235
|
+
}
|
|
1236
|
+
/** `<tbody>` group for the table data rows. */
|
|
1237
|
+
declare function TableBody({ children, ...rest }: TableBodyProps): react.JSX.Element;
|
|
1238
|
+
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
1239
|
+
children?: ReactNode;
|
|
1240
|
+
}
|
|
1241
|
+
/** `<tr>` table row. */
|
|
1242
|
+
declare function TableRow({ children, ...rest }: TableRowProps): react.JSX.Element;
|
|
1243
|
+
interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
1244
|
+
/** Right-aligned tabular-numeric header cell (`cd-table__num`). */
|
|
1245
|
+
numeric?: boolean;
|
|
1246
|
+
/** Mark column sortable; `'asc'`/`'desc'` show a direction arrow (sets `data-sort`). */
|
|
1247
|
+
sort?: boolean | 'asc' | 'desc';
|
|
1248
|
+
children?: ReactNode;
|
|
1249
|
+
}
|
|
1250
|
+
/** `<th>` header cell — supports numeric alignment and a sortable `data-sort` indicator. */
|
|
1251
|
+
declare function TableHeaderCell({ numeric, sort, className, children, ...rest }: TableHeaderCellProps): react.JSX.Element;
|
|
1252
|
+
interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
1253
|
+
/** Right-aligned tabular-numeric, accent-colored cell (`cd-table__num`). */
|
|
1254
|
+
numeric?: boolean;
|
|
1255
|
+
/** Status dot prefix (sets `data-status`). */
|
|
1256
|
+
status?: 'ok' | 'warn' | 'err' | 'idle';
|
|
1257
|
+
children?: ReactNode;
|
|
1258
|
+
}
|
|
1259
|
+
/** `<td>` data cell — supports numeric alignment and a leading status dot. */
|
|
1260
|
+
declare function TableCell({ numeric, status, className, children, ...rest }: TableCellProps): react.JSX.Element;
|
|
1261
|
+
|
|
1262
|
+
interface TabItem {
|
|
1263
|
+
/** Tab label (also the trigger text). */
|
|
1264
|
+
label: ReactNode;
|
|
1265
|
+
/** Panel content shown when this tab is active. */
|
|
1266
|
+
content?: ReactNode;
|
|
1267
|
+
/** Optional trailing badge node in the trigger (e.g. a count). */
|
|
1268
|
+
badge?: ReactNode;
|
|
1269
|
+
/** Disable selection of this tab. */
|
|
1270
|
+
disabled?: boolean;
|
|
1271
|
+
}
|
|
1272
|
+
interface TabsProps {
|
|
1273
|
+
/** The tabs to render, in order. */
|
|
1274
|
+
items: TabItem[];
|
|
1275
|
+
/** Layout style: underline (default), pills, or vertical. */
|
|
1276
|
+
variant?: 'underline' | 'pills' | 'vertical';
|
|
1277
|
+
/** Index of the initially-active tab (uncontrolled). */
|
|
1278
|
+
defaultActive?: number;
|
|
1279
|
+
/** Controlled active index. When set, `onTabChange` should update it. */
|
|
1280
|
+
active?: number;
|
|
1281
|
+
/** Fires with the new index when a tab is selected. */
|
|
1282
|
+
onTabChange?: (index: number) => void;
|
|
1283
|
+
/** Hide the panels region (trigger-only, e.g. a filter bar). */
|
|
1284
|
+
hidePanels?: boolean;
|
|
1285
|
+
className?: string;
|
|
1286
|
+
}
|
|
1287
|
+
/** Tabbed navigation — underline / pills / vertical, with optional badges and panels. */
|
|
1288
|
+
declare function Tabs({ items, variant, defaultActive, active, onTabChange, hidePanels, className, }: TabsProps): react.JSX.Element;
|
|
1289
|
+
|
|
1290
|
+
/** Semantic line kinds — map to `cd-terminal__line--*` modifiers. */
|
|
1291
|
+
type TerminalLineType = 'system' | 'prompt' | 'command' | 'output' | 'error';
|
|
1292
|
+
interface TerminalLine {
|
|
1293
|
+
/** Line text content. */
|
|
1294
|
+
text: ReactNode;
|
|
1295
|
+
/** Line kind; omit for the default (plain) line. */
|
|
1296
|
+
type?: TerminalLineType;
|
|
1297
|
+
/** Prompt glyph shown before the text (for `prompt` lines, e.g. `root@net> `). */
|
|
1298
|
+
prompt?: ReactNode;
|
|
1299
|
+
}
|
|
1300
|
+
interface TerminalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1301
|
+
/** Header title text (theme-accent colored). Omit to hide the header. */
|
|
1302
|
+
title?: ReactNode;
|
|
1303
|
+
/** Show the min/max/close window control dots in the header. */
|
|
1304
|
+
controls?: boolean;
|
|
1305
|
+
/** The log lines to render in the body. */
|
|
1306
|
+
lines?: TerminalLine[];
|
|
1307
|
+
/** Tighter spacing / smaller type. */
|
|
1308
|
+
compact?: boolean;
|
|
1309
|
+
/** Extra CRT inner scanline overlay. */
|
|
1310
|
+
crt?: boolean;
|
|
1311
|
+
/** Render a bottom command input row. */
|
|
1312
|
+
input?: boolean;
|
|
1313
|
+
/** Prompt glyph shown before the input field. */
|
|
1314
|
+
inputPrompt?: ReactNode;
|
|
1315
|
+
/** Props forwarded to the input field element. */
|
|
1316
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
1317
|
+
/** Extra body content rendered after `lines`. */
|
|
1318
|
+
children?: ReactNode;
|
|
1319
|
+
}
|
|
1320
|
+
/** Cyberpunk terminal/console window — header, scrollable log body and optional command input. */
|
|
1321
|
+
declare function Terminal({ title, controls, lines, compact, crt, input, inputPrompt, inputProps, className, children, ...rest }: TerminalProps): react.JSX.Element;
|
|
1322
|
+
|
|
1323
|
+
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
1324
|
+
/** Error state — red border. */
|
|
1325
|
+
error?: boolean;
|
|
1326
|
+
}
|
|
1327
|
+
/** Cyber multi-line text area — vertical resize, neon focus ring, error state. */
|
|
1328
|
+
declare function Textarea({ error, className, ...rest }: TextareaProps): react.JSX.Element;
|
|
1329
|
+
|
|
1330
|
+
interface TickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
1331
|
+
/** The feed items to scroll, in order. */
|
|
1332
|
+
items: ReactNode[];
|
|
1333
|
+
/** Scroll speed; `fast` ≈ 9s, `slow` ≈ 32s (default ≈ 18s). */
|
|
1334
|
+
speed?: 'fast' | 'slow';
|
|
1335
|
+
/** Shorthand for `speed="fast"`. */
|
|
1336
|
+
fast?: boolean;
|
|
1337
|
+
/** Scroll vertically instead of horizontally. */
|
|
1338
|
+
vertical?: boolean;
|
|
1339
|
+
}
|
|
1340
|
+
/** Auto-scrolling data ticker / feed — pauses on hover, respects reduced motion. */
|
|
1341
|
+
declare function Ticker({ items, speed, fast, vertical, className, ...rest }: TickerProps): react.JSX.Element;
|
|
1342
|
+
|
|
1343
|
+
interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1344
|
+
/** Semantic color. `accent` follows the active theme accent. */
|
|
1345
|
+
variant?: 'info' | 'success' | 'warning' | 'error' | 'accent';
|
|
1346
|
+
/** Leading glyph (e.g. ℹ ✓ ⚠ ✕ ⬡). */
|
|
1347
|
+
icon?: ReactNode;
|
|
1348
|
+
/** Bold uppercase heading line. */
|
|
1349
|
+
title?: ReactNode;
|
|
1350
|
+
/** When provided, renders a dismiss ✕ that calls this on click. */
|
|
1351
|
+
onDismiss?: () => void;
|
|
1352
|
+
/** Message body. */
|
|
1353
|
+
children?: ReactNode;
|
|
1354
|
+
}
|
|
1355
|
+
/** Single notification toast — semantic color, icon, title/body and optional dismiss. */
|
|
1356
|
+
declare function Toast({ variant, icon, title, onDismiss, className, children, ...rest }: ToastProps): react.JSX.Element;
|
|
1357
|
+
|
|
1358
|
+
type ToastInput = Omit<ToastProps, 'onDismiss'> & {
|
|
1359
|
+
id?: string;
|
|
1360
|
+
duration?: number;
|
|
1361
|
+
};
|
|
1362
|
+
interface ToasterContextValue {
|
|
1363
|
+
toast: (input: ToastInput) => string;
|
|
1364
|
+
dismiss: (id: string) => void;
|
|
1365
|
+
}
|
|
1366
|
+
declare function useToast(): ToasterContextValue;
|
|
1367
|
+
interface ToasterProviderProps {
|
|
1368
|
+
children?: ReactNode;
|
|
1369
|
+
/** Viewport position. @default 'bottom-right' */
|
|
1370
|
+
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
|
|
1371
|
+
/** Default auto-dismiss ms. @default 4000 */
|
|
1372
|
+
duration?: number;
|
|
1373
|
+
}
|
|
1374
|
+
/** Sonner-style toast provider + viewport. */
|
|
1375
|
+
declare function ToasterProvider({ children, position, duration, }: ToasterProviderProps): react.JSX.Element;
|
|
1376
|
+
/** Standalone viewport alias for Sonner naming. */
|
|
1377
|
+
declare function Toaster(props: Omit<ToasterProviderProps, 'children'>): react.JSX.Element;
|
|
1378
|
+
|
|
1379
|
+
interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
1380
|
+
/** Controlled pressed state. */
|
|
1381
|
+
pressed?: boolean;
|
|
1382
|
+
/** Uncontrolled initial state. */
|
|
1383
|
+
defaultPressed?: boolean;
|
|
1384
|
+
onPressedChange?: (pressed: boolean) => void;
|
|
1385
|
+
size?: 'sm' | 'md';
|
|
1386
|
+
variant?: 'default' | 'outline';
|
|
1387
|
+
children?: ReactNode;
|
|
1388
|
+
}
|
|
1389
|
+
/** Two-state toggle button (pressed / unpressed). */
|
|
1390
|
+
declare function Toggle({ pressed, defaultPressed, onPressedChange, size, variant, className, children, ...rest }: ToggleProps): react.JSX.Element;
|
|
1391
|
+
|
|
1392
|
+
interface ToggleGroupItem {
|
|
1393
|
+
value: string;
|
|
1394
|
+
label: ReactNode;
|
|
1395
|
+
disabled?: boolean;
|
|
1396
|
+
}
|
|
1397
|
+
interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1398
|
+
items: ToggleGroupItem[];
|
|
1399
|
+
/** Controlled value (single) or values (multiple). */
|
|
1400
|
+
value?: string | string[];
|
|
1401
|
+
defaultValue?: string | string[];
|
|
1402
|
+
/** Allow multiple selection. */
|
|
1403
|
+
multiple?: boolean;
|
|
1404
|
+
onValueChange?: (value: string | string[]) => void;
|
|
1405
|
+
size?: 'sm' | 'md';
|
|
1406
|
+
}
|
|
1407
|
+
/** Group of toggle buttons — single or multi select. */
|
|
1408
|
+
declare function ToggleGroup({ items, value, defaultValue, multiple, onValueChange, size, className, ...rest }: ToggleGroupProps): react.JSX.Element;
|
|
1409
|
+
|
|
1410
|
+
interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
|
|
1411
|
+
/** Tooltip text shown on hover (rendered via the `data-tip` attribute). */
|
|
1412
|
+
tip: string;
|
|
1413
|
+
/** Show the tooltip below the trigger instead of above. */
|
|
1414
|
+
below?: boolean;
|
|
1415
|
+
/** The trigger content the tooltip wraps. */
|
|
1416
|
+
children?: ReactNode;
|
|
1417
|
+
}
|
|
1418
|
+
/** CSS-only tooltip — wraps a trigger and reveals `tip` text on hover. */
|
|
1419
|
+
declare function Tooltip({ tip, below, className, children, ...rest }: TooltipProps): react.JSX.Element;
|
|
1420
|
+
|
|
1421
|
+
interface TransportProps extends HTMLAttributes<HTMLDivElement> {
|
|
1422
|
+
playing?: boolean;
|
|
1423
|
+
onPlay?: () => void;
|
|
1424
|
+
onStop?: () => void;
|
|
1425
|
+
playLabel?: ReactNode;
|
|
1426
|
+
stopLabel?: ReactNode;
|
|
1427
|
+
disabled?: boolean;
|
|
1428
|
+
children?: ReactNode;
|
|
1429
|
+
}
|
|
1430
|
+
/**
|
|
1431
|
+
* Play/Stop transport cluster — AI-shell header transport group.
|
|
1432
|
+
*/
|
|
1433
|
+
declare function Transport({ playing, onPlay, onStop, playLabel, stopLabel, disabled, className, children, ...rest }: TransportProps): react.JSX.Element;
|
|
1434
|
+
|
|
1435
|
+
declare function H1({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
|
|
1436
|
+
declare function H2({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
|
|
1437
|
+
declare function H3({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
|
|
1438
|
+
declare function H4({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
|
|
1439
|
+
declare function P({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
|
|
1440
|
+
declare function Lead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
|
|
1441
|
+
declare function Muted({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
|
|
1442
|
+
declare function Small({ className, ...rest }: HTMLAttributes<HTMLElement>): react.JSX.Element;
|
|
1443
|
+
declare function InlineCode({ className, ...rest }: HTMLAttributes<HTMLElement>): react.JSX.Element;
|
|
1444
|
+
declare function Pre({ className, ...rest }: HTMLAttributes<HTMLPreElement>): react.JSX.Element;
|
|
1445
|
+
declare function Blockquote({ className, ...rest }: BlockquoteHTMLAttributes<HTMLQuoteElement>): react.JSX.Element;
|
|
1446
|
+
declare function List({ className, ...rest }: OlHTMLAttributes<HTMLUListElement>): react.JSX.Element;
|
|
1447
|
+
declare function InlineLink({ className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): react.JSX.Element;
|
|
1448
|
+
interface TypographyProps extends HTMLAttributes<HTMLDivElement> {
|
|
1449
|
+
children?: ReactNode;
|
|
1450
|
+
}
|
|
1451
|
+
/** Optional wrapper applying base typography font. */
|
|
1452
|
+
declare function Typography({ className, children, ...rest }: TypographyProps): react.JSX.Element;
|
|
1453
|
+
|
|
1454
|
+
export { Accordion, type AccordionItemData, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, AspectRatio, type AspectRatioProps, AugButton, type AugButtonProps, AugPanel, type AugPanelProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Blockquote, BottomNav, type BottomNavItem, type BottomNavProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, Carousel, type CarouselProps, type CdColor, type CdSize, type CdTheme, type CellCoord, Chat, ChatAction, type ChatActionProps, ChatActions, type ChatActionsProps, ChatCodeBlock, type ChatCodeBlockProps, ChatMessage, type ChatMessageData, type ChatMessageProps, type ChatProps, type ChatRole, ChatTyping, type ChatTypingProps, Checkbox, type CheckboxProps, Chip, type ChipProps, ChipRow, type ChipRowProps, Clock, type ClockProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Drawer, type DrawerProps, Dropdown, type DropdownEntry, type DropdownItem, DropdownMenu, type DropdownMenuProps, type DropdownProps, Empty, type EmptyProps, Feed, FeedItem, type FeedItemProps, type FeedProps, Field, type FieldProps, Gauge, type GaugeProps, GlowCard, type GlowCardProps, H1, H2, H3, H4, HBar, type HBarProps, HoverCard, type HoverCardProps, HudBar, type HudBarProps, type HudBarSegment, HudFrame, type HudFrameProps, HudSegment, type HudSegmentProps, type HudSegmentStatus, type HudValueStatus, InlineCode, InlineLink, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Interference, type InterferenceProps, Item, ItemGroup, type ItemProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps, Lead, List, Menubar, type MenubarAction, type MenubarMenu, type MenubarProps, Modal, type ModalProps, Muted, NativeSelect, type NativeSelectProps, NavigationMenu, type NavigationMenuItemProps, type NavigationMenuLink, type NavigationMenuProps, P, Pagination, type PaginationProps, PanelHeader, type PanelHeaderProps, Popover, type PopoverProps, Pre, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupItem, type RadioGroupProps, type RadioProps, Resizable, type ResizableProps, Scanner, type ScannerProps, ScrollArea, type ScrollAreaProps, SectionHeader, type SectionHeaderProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Sidebar, type SidebarLink, type SidebarProps, Skeleton, type SkeletonProps, SkeletonRow, Slider, type SliderProps, Small, Spinner, type SpinnerProps, Spreadsheet, type SpreadsheetData, type SpreadsheetProps, Stat, StatGrid, type StatProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, StatusPill, type StatusPillProps, type StatusPillVariant, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Terminal, type TerminalLine, type TerminalLineType, type TerminalProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Ticker, type TickerProps, Toast, type ToastInput, type ToastProps, Toaster, ToasterProvider, type ToasterProviderProps, Toggle, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, Transport, type TransportProps, Typography, type TypographyProps, cn, createSpreadsheetData, useTheme, useToast };
|