@sckyzo/cosmos-react 0.0.1 → 0.0.3
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/CHANGELOG.md +20 -0
- package/README.md +55 -16
- package/dist/index.cjs +743 -161
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +330 -261
- package/dist/index.d.ts +330 -261
- package/dist/index.js +738 -160
- package/dist/index.js.map +1 -1
- package/package.json +26 -26
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
2
|
import { HTMLAttributes, ReactNode, ElementType, ComponentType, ReactElement, LiHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ChangeEvent } from 'react';
|
|
4
3
|
import { LucideIcon } from 'lucide-react';
|
|
@@ -9,112 +8,6 @@ export { toast } from 'sonner';
|
|
|
9
8
|
import { Command } from 'cmdk';
|
|
10
9
|
import { DayPickerProps } from 'react-day-picker';
|
|
11
10
|
|
|
12
|
-
/**
|
|
13
|
-
* Deterministic placeholder avatar for stories and docs.
|
|
14
|
-
*
|
|
15
|
-
* Returns a `data:image/svg+xml;…` URL — fully local, no network fetch — that
|
|
16
|
-
* renders the seed's initials over a Cosmos-accent background colour picked
|
|
17
|
-
* deterministically from a stable hash of the seed.
|
|
18
|
-
*
|
|
19
|
-
* Use inside `*.stories.tsx` whenever a face is needed but a real user photo
|
|
20
|
-
* is not desirable: avoids reliance on `i.pravatar.cc` / `images.unsplash.com`,
|
|
21
|
-
* works offline, and produces no licensing concerns. Real apps should plug
|
|
22
|
-
* their own avatar service for production data.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* import { placeholderAvatar } from '@sckyzo/cosmos-react';
|
|
27
|
-
*
|
|
28
|
-
* <img src={placeholderAvatar('Aiden Park', 64)} alt="" className="size-8 rounded-full" />
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
type PlaceholderAvatarOptions = {
|
|
32
|
-
/** Override the auto-picked accent background (any CSS colour). */
|
|
33
|
-
bg?: string;
|
|
34
|
-
/** Override the foreground (initials) colour. */
|
|
35
|
-
fg?: string;
|
|
36
|
-
};
|
|
37
|
-
/**
|
|
38
|
-
* Build a deterministic placeholder avatar data URL.
|
|
39
|
-
*
|
|
40
|
-
* @param seed The string used both to derive the initials and to pick the
|
|
41
|
-
* accent background. Same seed → same avatar.
|
|
42
|
-
* @param size Square pixel size (default `64`).
|
|
43
|
-
* @param opts Optional colour overrides.
|
|
44
|
-
*/
|
|
45
|
-
declare const placeholderAvatar: (seed: string, size?: number, opts?: PlaceholderAvatarOptions) => string;
|
|
46
|
-
type PlaceholderCoverOptions = {
|
|
47
|
-
/** Override the two gradient stops. */
|
|
48
|
-
from?: string;
|
|
49
|
-
to?: string;
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* Build a deterministic placeholder landscape cover data URL.
|
|
53
|
-
*
|
|
54
|
-
* Renders a brand-coherent SVG with a seed-derived gradient and two soft
|
|
55
|
-
* decorative circles. Suitable for blog hero images, article tiles, and any
|
|
56
|
-
* other "cover" slot where a real photo is not available.
|
|
57
|
-
*
|
|
58
|
-
* @example
|
|
59
|
-
* ```tsx
|
|
60
|
-
* <img src={placeholderCover('Cosmos release notes', 1600, 700)} alt="" />
|
|
61
|
-
* ```
|
|
62
|
-
*/
|
|
63
|
-
declare const placeholderCover: (seed: string, width?: number, height?: number, opts?: PlaceholderCoverOptions) => string;
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Storybook docs parameters preset for components that render via portals
|
|
67
|
-
* (Modal, Drawer, Popover, NotificationsPanel, UserMenu, DatePicker,
|
|
68
|
-
* CommandPalette, …).
|
|
69
|
-
*
|
|
70
|
-
* Background: Storybook's autodocs renders stories *inline* by default. This
|
|
71
|
-
* means a story whose visible content lives in `document.body` (via React
|
|
72
|
-
* portal) or floats with `position: fixed/absolute` doesn't push the autodocs
|
|
73
|
-
* preview block to the right size — the panel either clips or vanishes.
|
|
74
|
-
*
|
|
75
|
-
* The official Storybook v10 fix is to render the story inside an iframe and
|
|
76
|
-
* reserve a fixed iframe height. This helper bundles that pattern so consumers
|
|
77
|
-
* don't repeat the boilerplate at every meta:
|
|
78
|
-
*
|
|
79
|
-
* @example
|
|
80
|
-
* ```ts
|
|
81
|
-
* const meta = {
|
|
82
|
-
* title: 'Overlays/Command Palette',
|
|
83
|
-
* component: CommandPalette,
|
|
84
|
-
* parameters: portalDocsParams.lg(),
|
|
85
|
-
* tags: ['autodocs'],
|
|
86
|
-
* } satisfies Meta<typeof CommandPalette>;
|
|
87
|
-
* ```
|
|
88
|
-
*
|
|
89
|
-
* Variants are sized to common portal footprints. Pass a custom number when
|
|
90
|
-
* the preset doesn't fit:
|
|
91
|
-
*
|
|
92
|
-
* @example
|
|
93
|
-
* ```ts
|
|
94
|
-
* parameters: portalDocsParams(720)
|
|
95
|
-
* ```
|
|
96
|
-
*/
|
|
97
|
-
declare const buildParams: (height: number) => {
|
|
98
|
-
layout: "fullscreen";
|
|
99
|
-
docs: {
|
|
100
|
-
story: {
|
|
101
|
-
inline: boolean;
|
|
102
|
-
iframeHeight: string;
|
|
103
|
-
};
|
|
104
|
-
};
|
|
105
|
-
};
|
|
106
|
-
type PortalDocsParams = ((height?: number) => ReturnType<typeof buildParams>) & {
|
|
107
|
-
/** ~320 px — Tooltip, compact Popover. */
|
|
108
|
-
sm: () => ReturnType<typeof buildParams>;
|
|
109
|
-
/** ~480 px — Dropdown, small Modal, Date picker. */
|
|
110
|
-
md: () => ReturnType<typeof buildParams>;
|
|
111
|
-
/** ~640 px — Drawer, CommandPalette, large Modal. */
|
|
112
|
-
lg: () => ReturnType<typeof buildParams>;
|
|
113
|
-
/** ~800 px — Full-screen Modal, page templates. */
|
|
114
|
-
full: () => ReturnType<typeof buildParams>;
|
|
115
|
-
};
|
|
116
|
-
declare const portalDocsParams: PortalDocsParams;
|
|
117
|
-
|
|
118
11
|
type DividerAlign = 'left' | 'center' | 'right';
|
|
119
12
|
type DividerProps = HTMLAttributes<HTMLDivElement> & {
|
|
120
13
|
/**
|
|
@@ -152,9 +45,9 @@ type DividerRowProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
152
45
|
*/
|
|
153
46
|
emphasis?: boolean;
|
|
154
47
|
};
|
|
155
|
-
declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }: DividerProps) =>
|
|
156
|
-
Icon: ({ icon: IconCmp, iconClassName, align, insetBg, className, ...rest }: DividerIconProps) =>
|
|
157
|
-
Row: ({ title, actions, emphasis, className, ...rest }: DividerRowProps) =>
|
|
48
|
+
declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }: DividerProps) => react.JSX.Element) & {
|
|
49
|
+
Icon: ({ icon: IconCmp, iconClassName, align, insetBg, className, ...rest }: DividerIconProps) => react.JSX.Element;
|
|
50
|
+
Row: ({ title, actions, emphasis, className, ...rest }: DividerRowProps) => react.JSX.Element;
|
|
158
51
|
};
|
|
159
52
|
|
|
160
53
|
type MediaObjectAlign = 'start' | 'center' | 'bottom' | 'stretch';
|
|
@@ -177,10 +70,10 @@ declare const MediaObject: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDi
|
|
|
177
70
|
Body: react.ForwardRefExoticComponent<MediaObjectBodyProps & react.RefAttributes<HTMLDivElement>>;
|
|
178
71
|
Title: ({ className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
|
|
179
72
|
children?: ReactNode;
|
|
180
|
-
}) =>
|
|
73
|
+
}) => react.JSX.Element;
|
|
181
74
|
Description: ({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement> & {
|
|
182
75
|
children?: ReactNode;
|
|
183
|
-
}) =>
|
|
76
|
+
}) => react.JSX.Element;
|
|
184
77
|
};
|
|
185
78
|
|
|
186
79
|
type TopbarProps = {
|
|
@@ -215,7 +108,7 @@ type TopbarProps = {
|
|
|
215
108
|
* Height: 72px. Background: `var(--color-bg-panel)` with a 500ms
|
|
216
109
|
* background-color transition (eases the dark/light toggle).
|
|
217
110
|
*/
|
|
218
|
-
declare const Topbar: ({ pageTitle, sidebarCollapsed, onToggleSidebar, leftActions, center, rightActions, className, }: TopbarProps) =>
|
|
111
|
+
declare const Topbar: ({ pageTitle, sidebarCollapsed, onToggleSidebar, leftActions, center, rightActions, className, }: TopbarProps) => react.JSX.Element;
|
|
219
112
|
|
|
220
113
|
type SidebarProps = {
|
|
221
114
|
/** Whether the sidebar is in collapsed (icons-only) state. */
|
|
@@ -239,7 +132,7 @@ type SidebarProps = {
|
|
|
239
132
|
* is automatically threaded to every subcomponent via React context, so
|
|
240
133
|
* children don't need to receive it as a prop.
|
|
241
134
|
*/
|
|
242
|
-
declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, className, }: SidebarProps) =>
|
|
135
|
+
declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, className, }: SidebarProps) => react.JSX.Element;
|
|
243
136
|
type SidebarBrandProps = {
|
|
244
137
|
/** Logo node — typically a small icon, lucide component, or img. */
|
|
245
138
|
logo?: ReactNode;
|
|
@@ -254,7 +147,7 @@ type SidebarBrandProps = {
|
|
|
254
147
|
/** Override the inherited collapsed state (defaults to `useContext`). */
|
|
255
148
|
collapsed?: boolean;
|
|
256
149
|
};
|
|
257
|
-
declare const SidebarBrand: ({ logo, title, subtitle, href, onClick, collapsed: collapsedProp, }: SidebarBrandProps) =>
|
|
150
|
+
declare const SidebarBrand: ({ logo, title, subtitle, href, onClick, collapsed: collapsedProp, }: SidebarBrandProps) => react.JSX.Element;
|
|
258
151
|
type SidebarItemProps = {
|
|
259
152
|
/** Icon component (lucide-react or any React component accepting className). */
|
|
260
153
|
icon: ComponentType<{
|
|
@@ -275,7 +168,7 @@ type SidebarItemProps = {
|
|
|
275
168
|
/** Indentation depth (for nested items inside groups). Default: 0. */
|
|
276
169
|
depth?: number;
|
|
277
170
|
};
|
|
278
|
-
declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth, }: SidebarItemProps) =>
|
|
171
|
+
declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth, }: SidebarItemProps) => react.JSX.Element;
|
|
279
172
|
type SidebarSubMenuProps = {
|
|
280
173
|
icon: ComponentType<{
|
|
281
174
|
className?: string;
|
|
@@ -292,20 +185,20 @@ type SidebarSubMenuProps = {
|
|
|
292
185
|
/** Nested items — typically `Sidebar.Item` with `depth={1}`. */
|
|
293
186
|
children: ReactNode;
|
|
294
187
|
};
|
|
295
|
-
declare const SidebarSubMenu: ({ icon: Icon, label, defaultOpen, collapsed: collapsedProp, active, badge, children, }: SidebarSubMenuProps) =>
|
|
188
|
+
declare const SidebarSubMenu: ({ icon: Icon, label, defaultOpen, collapsed: collapsedProp, active, badge, children, }: SidebarSubMenuProps) => react.JSX.Element;
|
|
296
189
|
type SidebarGroupProps = {
|
|
297
190
|
label: string;
|
|
298
191
|
defaultOpen?: boolean;
|
|
299
192
|
collapsed?: boolean;
|
|
300
193
|
children: ReactNode;
|
|
301
194
|
};
|
|
302
|
-
declare const SidebarGroup: ({ label, defaultOpen, collapsed: collapsedProp, children, }: SidebarGroupProps) =>
|
|
195
|
+
declare const SidebarGroup: ({ label, defaultOpen, collapsed: collapsedProp, children, }: SidebarGroupProps) => react.JSX.Element;
|
|
303
196
|
type SidebarSectionProps = {
|
|
304
197
|
label?: string;
|
|
305
198
|
collapsed?: boolean;
|
|
306
199
|
children: ReactNode;
|
|
307
200
|
};
|
|
308
|
-
declare const SidebarSection: ({ label, collapsed: collapsedProp, children }: SidebarSectionProps) =>
|
|
201
|
+
declare const SidebarSection: ({ label, collapsed: collapsedProp, children }: SidebarSectionProps) => react.JSX.Element;
|
|
309
202
|
type SidebarComponent = typeof SidebarRoot & {
|
|
310
203
|
Brand: typeof SidebarBrand;
|
|
311
204
|
Item: typeof SidebarItem;
|
|
@@ -359,7 +252,7 @@ type ShellProps = {
|
|
|
359
252
|
* …
|
|
360
253
|
* </Shell>
|
|
361
254
|
*/
|
|
362
|
-
declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, className, }: ShellProps) =>
|
|
255
|
+
declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, className, }: ShellProps) => react.JSX.Element;
|
|
363
256
|
|
|
364
257
|
type PageBreadcrumbItem = {
|
|
365
258
|
label: string;
|
|
@@ -378,7 +271,7 @@ type PageBreadcrumbProps = {
|
|
|
378
271
|
* page (rendered as plain text, not a link). Items in between are clickable
|
|
379
272
|
* (either via `href` or `onClick`).
|
|
380
273
|
*/
|
|
381
|
-
declare const PageBreadcrumb: ({ items, className }: PageBreadcrumbProps) =>
|
|
274
|
+
declare const PageBreadcrumb: ({ items, className }: PageBreadcrumbProps) => react.JSX.Element;
|
|
382
275
|
|
|
383
276
|
type PageHeaderProps = {
|
|
384
277
|
/** Main page title (h2) */
|
|
@@ -406,8 +299,8 @@ type PageHeaderMetaItemProps = {
|
|
|
406
299
|
}>;
|
|
407
300
|
children: ReactNode;
|
|
408
301
|
};
|
|
409
|
-
declare const PageHeader: (({ title, description, breadcrumb, meta, actions, className }: PageHeaderProps) =>
|
|
410
|
-
MetaItem: ({ icon: Icon, children }: PageHeaderMetaItemProps) =>
|
|
302
|
+
declare const PageHeader: (({ title, description, breadcrumb, meta, actions, className }: PageHeaderProps) => react.JSX.Element) & {
|
|
303
|
+
MetaItem: ({ icon: Icon, children }: PageHeaderMetaItemProps) => react.JSX.Element;
|
|
411
304
|
};
|
|
412
305
|
|
|
413
306
|
type SectionCardIconTone = 'brand' | 'blue' | 'violet' | 'green' | 'amber' | 'red' | 'gray';
|
|
@@ -436,7 +329,7 @@ type SectionCardProps = {
|
|
|
436
329
|
* The de-facto building block for grouped content in a page. Use multiple
|
|
437
330
|
* SectionCards stacked vertically (with `space-y-6`) or in a grid.
|
|
438
331
|
*/
|
|
439
|
-
declare const SectionCard: ({ title, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) =>
|
|
332
|
+
declare const SectionCard: ({ title, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) => react.JSX.Element;
|
|
440
333
|
|
|
441
334
|
type PageCardProps = {
|
|
442
335
|
children: ReactNode;
|
|
@@ -451,7 +344,7 @@ type PageCardProps = {
|
|
|
451
344
|
*
|
|
452
345
|
* Combine with `<ContentNarrow>` inside for a centered constrained column.
|
|
453
346
|
*/
|
|
454
|
-
declare const PageCard: ({ children, className }: PageCardProps) =>
|
|
347
|
+
declare const PageCard: ({ children, className }: PageCardProps) => react.JSX.Element;
|
|
455
348
|
|
|
456
349
|
type ContentNarrowProps = {
|
|
457
350
|
children: ReactNode;
|
|
@@ -465,7 +358,7 @@ type ContentNarrowProps = {
|
|
|
465
358
|
* Use inside PageCard or anywhere you want a readable column of content
|
|
466
359
|
* (settings forms, prose, profile pages…). Default width is 680px.
|
|
467
360
|
*/
|
|
468
|
-
declare const ContentNarrow: ({ children, maxWidth, className }: ContentNarrowProps) =>
|
|
361
|
+
declare const ContentNarrow: ({ children, maxWidth, className }: ContentNarrowProps) => react.JSX.Element;
|
|
469
362
|
|
|
470
363
|
type ColBoxProps = {
|
|
471
364
|
/** Label shown centered (typically a percentage like "50%") */
|
|
@@ -481,7 +374,7 @@ type ColBoxProps = {
|
|
|
481
374
|
* (e.g. "20% / 60% / 20%"). Same visual treatment as SectionCard but
|
|
482
375
|
* with a centered monospace label.
|
|
483
376
|
*/
|
|
484
|
-
declare const ColBox: ({ label, height, className }: ColBoxProps) =>
|
|
377
|
+
declare const ColBox: ({ label, height, className }: ColBoxProps) => react.JSX.Element;
|
|
485
378
|
|
|
486
379
|
type LoadingStateProps = {
|
|
487
380
|
/** Message shown below the spinner. Default: 'Loading…' */
|
|
@@ -494,7 +387,7 @@ type LoadingStateProps = {
|
|
|
494
387
|
* Use inside a SectionCard or any container while data is being fetched.
|
|
495
388
|
* Fills available height with vertical centering.
|
|
496
389
|
*/
|
|
497
|
-
declare const LoadingState: ({ message, className }: LoadingStateProps) =>
|
|
390
|
+
declare const LoadingState: ({ message, className }: LoadingStateProps) => react.JSX.Element;
|
|
498
391
|
|
|
499
392
|
type EmptyStateProps = {
|
|
500
393
|
/** Title (typically "No data" or domain-specific) */
|
|
@@ -511,7 +404,7 @@ type EmptyStateProps = {
|
|
|
511
404
|
* Use when an API call returns no results. Always show a description
|
|
512
405
|
* if there's an action the user can take to populate the list.
|
|
513
406
|
*/
|
|
514
|
-
declare const EmptyState: ({ title, description, action, className, }: EmptyStateProps) =>
|
|
407
|
+
declare const EmptyState: ({ title, description, action, className, }: EmptyStateProps) => react.JSX.Element;
|
|
515
408
|
|
|
516
409
|
type ErrorStateProps = {
|
|
517
410
|
/** Error message. Default: 'Something went wrong.' */
|
|
@@ -527,7 +420,7 @@ type ErrorStateProps = {
|
|
|
527
420
|
* Pair with `<EmptyState>` when the error is "no data found" rather
|
|
528
421
|
* than a real failure.
|
|
529
422
|
*/
|
|
530
|
-
declare const ErrorState: ({ message, onRetry, className, }: ErrorStateProps) =>
|
|
423
|
+
declare const ErrorState: ({ message, onRetry, className, }: ErrorStateProps) => react.JSX.Element;
|
|
531
424
|
|
|
532
425
|
type SkProps = {
|
|
533
426
|
/** Tailwind height class — default `h-4`. */
|
|
@@ -543,24 +436,24 @@ type SkProps = {
|
|
|
543
436
|
* the Skeleton presets (SkeletonText / SkeletonTable / SkeletonList) or
|
|
544
437
|
* use directly for custom placeholders.
|
|
545
438
|
*/
|
|
546
|
-
declare const Sk: ({ h, w, round, className }: SkProps) =>
|
|
439
|
+
declare const Sk: ({ h, w, round, className }: SkProps) => react.JSX.Element;
|
|
547
440
|
type SkeletonTextProps = {
|
|
548
441
|
lines?: number;
|
|
549
442
|
className?: string;
|
|
550
443
|
};
|
|
551
|
-
declare const SkeletonText: ({ lines, className }: SkeletonTextProps) =>
|
|
444
|
+
declare const SkeletonText: ({ lines, className }: SkeletonTextProps) => react.JSX.Element;
|
|
552
445
|
type SkeletonTableProps = {
|
|
553
446
|
rows?: number;
|
|
554
447
|
cols?: number;
|
|
555
448
|
className?: string;
|
|
556
449
|
};
|
|
557
|
-
declare const SkeletonTable: ({ rows, cols, className }: SkeletonTableProps) =>
|
|
450
|
+
declare const SkeletonTable: ({ rows, cols, className }: SkeletonTableProps) => react.JSX.Element;
|
|
558
451
|
type SkeletonListProps = {
|
|
559
452
|
rows?: number;
|
|
560
453
|
showAction?: boolean;
|
|
561
454
|
className?: string;
|
|
562
455
|
};
|
|
563
|
-
declare const SkeletonList: ({ rows, showAction, className }: SkeletonListProps) =>
|
|
456
|
+
declare const SkeletonList: ({ rows, showAction, className }: SkeletonListProps) => react.JSX.Element;
|
|
564
457
|
|
|
565
458
|
/** Health status — used by StatusBadge, HealthDot, HealthBadge, and lists. */
|
|
566
459
|
type HealthStatus = 'OK' | 'WARN' | 'CRIT' | 'UNKNOWN' | 'INFO';
|
|
@@ -580,7 +473,7 @@ type StatusBadgeProps = {
|
|
|
580
473
|
*
|
|
581
474
|
* Three sizes: sm (inline in tables), md (default), lg (prominent display).
|
|
582
475
|
*/
|
|
583
|
-
declare const StatusBadge: ({ status, size, label, className }: StatusBadgeProps) =>
|
|
476
|
+
declare const StatusBadge: ({ status, size, label, className }: StatusBadgeProps) => react.JSX.Element;
|
|
584
477
|
|
|
585
478
|
type HealthDotProps = {
|
|
586
479
|
status: HealthStatus;
|
|
@@ -594,7 +487,7 @@ type HealthDotProps = {
|
|
|
594
487
|
* Use for compact status displays (next to a label, in a row, in a chart legend).
|
|
595
488
|
* Set `pulse` to draw attention (recommended for CRIT).
|
|
596
489
|
*/
|
|
597
|
-
declare const HealthDot: ({ status, pulse, className }: HealthDotProps) =>
|
|
490
|
+
declare const HealthDot: ({ status, pulse, className }: HealthDotProps) => react.JSX.Element;
|
|
598
491
|
|
|
599
492
|
type HealthBadgeProps = {
|
|
600
493
|
status: HealthStatus;
|
|
@@ -608,7 +501,7 @@ type HealthBadgeProps = {
|
|
|
608
501
|
* Larger and more visible than StatusBadge — use for hero status displays
|
|
609
502
|
* (e.g. "System Health" page, dashboard summary cards).
|
|
610
503
|
*/
|
|
611
|
-
declare const HealthBadge: ({ status, label, className }: HealthBadgeProps) =>
|
|
504
|
+
declare const HealthBadge: ({ status, label, className }: HealthBadgeProps) => react.JSX.Element;
|
|
612
505
|
|
|
613
506
|
type StackedListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
|
|
614
507
|
children: ReactNode;
|
|
@@ -766,7 +659,7 @@ type SimpleRowProps = {
|
|
|
766
659
|
* </div>
|
|
767
660
|
* </SectionCard>
|
|
768
661
|
*/
|
|
769
|
-
declare const SimpleRow: ({ label, value, mono, className }: SimpleRowProps) =>
|
|
662
|
+
declare const SimpleRow: ({ label, value, mono, className }: SimpleRowProps) => react.JSX.Element;
|
|
770
663
|
|
|
771
664
|
type ClickableRowProps = {
|
|
772
665
|
/** Optional leading icon (lucide-react or any icon component) */
|
|
@@ -789,7 +682,7 @@ type ClickableRowProps = {
|
|
|
789
682
|
* Use for navigable lists: racks, servers, exporters, articles…
|
|
790
683
|
* Pair with `<StatusRow>` when you need a status badge on the right.
|
|
791
684
|
*/
|
|
792
|
-
declare const ClickableRow: ({ icon: Icon, title, subtitle, onClick, href, className, }: ClickableRowProps) =>
|
|
685
|
+
declare const ClickableRow: ({ icon: Icon, title, subtitle, onClick, href, className, }: ClickableRowProps) => react.JSX.Element;
|
|
793
686
|
|
|
794
687
|
type StatusRowProps = {
|
|
795
688
|
icon?: ComponentType<{
|
|
@@ -805,7 +698,7 @@ type StatusRowProps = {
|
|
|
805
698
|
/**
|
|
806
699
|
* StatusRow — same as ClickableRow but ends with a status badge instead of a chevron.
|
|
807
700
|
*/
|
|
808
|
-
declare const StatusRow: ({ icon: Icon, title, subtitle, status, onClick, href, className, }: StatusRowProps) =>
|
|
701
|
+
declare const StatusRow: ({ icon: Icon, title, subtitle, status, onClick, href, className, }: StatusRowProps) => react.JSX.Element;
|
|
809
702
|
|
|
810
703
|
type ActivityFeedIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
811
704
|
type ActivityFeedItemProps = LiHTMLAttributes<HTMLLIElement> & {
|
|
@@ -903,7 +796,7 @@ type BreadcrumbProps = {
|
|
|
903
796
|
* page headers with the Home icon. This Breadcrumb is bigger and supports
|
|
904
797
|
* an icon per item.
|
|
905
798
|
*/
|
|
906
|
-
declare const Breadcrumb: ({ items, separator, className }: BreadcrumbProps) =>
|
|
799
|
+
declare const Breadcrumb: ({ items, separator, className }: BreadcrumbProps) => react.JSX.Element;
|
|
907
800
|
|
|
908
801
|
type NavbarTheme = 'light' | 'dark';
|
|
909
802
|
type NavbarProps = HTMLAttributes<HTMLElement> & {
|
|
@@ -930,11 +823,11 @@ declare const Navbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement
|
|
|
930
823
|
heightClassName?: string;
|
|
931
824
|
children: ReactNode;
|
|
932
825
|
} & react.RefAttributes<HTMLElement>> & {
|
|
933
|
-
Brand: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) =>
|
|
934
|
-
Items: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) =>
|
|
935
|
-
Item: ({ active, theme, className, children, ...rest }: NavbarItemProps) =>
|
|
936
|
-
Actions: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) =>
|
|
937
|
-
MobileMenuButton: ({ theme, className, children, ...rest }: NavbarMobileMenuButtonProps) =>
|
|
826
|
+
Brand: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
|
|
827
|
+
Items: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
|
|
828
|
+
Item: ({ active, theme, className, children, ...rest }: NavbarItemProps) => react.JSX.Element;
|
|
829
|
+
Actions: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
|
|
830
|
+
MobileMenuButton: ({ theme, className, children, ...rest }: NavbarMobileMenuButtonProps) => react.JSX.Element;
|
|
938
831
|
};
|
|
939
832
|
|
|
940
833
|
type PaginationVariant = 'text' | 'compact';
|
|
@@ -953,7 +846,7 @@ type PaginationProps = {
|
|
|
953
846
|
size?: PaginationSize;
|
|
954
847
|
className?: string;
|
|
955
848
|
};
|
|
956
|
-
declare const Pagination: ({ page, totalPages, onPageChange, showInfo, pageSize, total, variant, size, className, }: PaginationProps) =>
|
|
849
|
+
declare const Pagination: ({ page, totalPages, onPageChange, showInfo, pageSize, total, variant, size, className, }: PaginationProps) => react.JSX.Element;
|
|
957
850
|
|
|
958
851
|
type StepperOrientation = 'horizontal' | 'vertical';
|
|
959
852
|
type StepperSize = 'sm' | 'md';
|
|
@@ -1009,9 +902,9 @@ type StepperProps = {
|
|
|
1009
902
|
className?: string;
|
|
1010
903
|
children: ReactNode;
|
|
1011
904
|
};
|
|
1012
|
-
declare const StepperRoot: ({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) =>
|
|
1013
|
-
declare const Stepper: (({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) =>
|
|
1014
|
-
Step: ({ children, description, icon: Icon, disabled, __index, __status, __orientation, __size, __variant, __clickable, __onClick, __isLast, }: StepperStepProps) =>
|
|
905
|
+
declare const StepperRoot: ({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) => react.JSX.Element;
|
|
906
|
+
declare const Stepper: (({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) => react.JSX.Element) & {
|
|
907
|
+
Step: ({ children, description, icon: Icon, disabled, __index, __status, __orientation, __size, __variant, __clickable, __onClick, __isLast, }: StepperStepProps) => react.JSX.Element;
|
|
1015
908
|
};
|
|
1016
909
|
|
|
1017
910
|
type VerticalNavigationItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
@@ -1048,7 +941,7 @@ declare const VerticalNavigation: react.ForwardRefExoticComponent<HTMLAttributes
|
|
|
1048
941
|
badge?: ReactNode;
|
|
1049
942
|
active?: boolean;
|
|
1050
943
|
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
1051
|
-
Section: ({ label, children, className, ...rest }: VerticalNavigationSectionProps) =>
|
|
944
|
+
Section: ({ label, children, className, ...rest }: VerticalNavigationSectionProps) => react.JSX.Element;
|
|
1052
945
|
};
|
|
1053
946
|
|
|
1054
947
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'soft';
|
|
@@ -1068,7 +961,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
1068
961
|
loading?: boolean;
|
|
1069
962
|
children?: ReactNode;
|
|
1070
963
|
};
|
|
1071
|
-
declare const Button: ({ variant, size, shape, icon: Icon, iconPosition, loading, disabled, className, children, type, ...rest }: ButtonProps) =>
|
|
964
|
+
declare const Button: ({ variant, size, shape, icon: Icon, iconPosition, loading, disabled, className, children, type, ...rest }: ButtonProps) => react.JSX.Element;
|
|
1072
965
|
|
|
1073
966
|
type CardProps = {
|
|
1074
967
|
children: ReactNode;
|
|
@@ -1090,20 +983,20 @@ type CardImageProps = ImgHTMLAttributes<HTMLImageElement> & {
|
|
|
1090
983
|
/** Wrapper className (the `<img>` is inside). */
|
|
1091
984
|
wrapperClassName?: string;
|
|
1092
985
|
};
|
|
1093
|
-
declare const Card: (({ children, className, padding, interactive, edgeToEdgeMobile, }: CardProps) =>
|
|
986
|
+
declare const Card: (({ children, className, padding, interactive, edgeToEdgeMobile, }: CardProps) => react.JSX.Element) & {
|
|
1094
987
|
Header: ({ children, className }: {
|
|
1095
988
|
children: ReactNode;
|
|
1096
989
|
className?: string;
|
|
1097
|
-
}) =>
|
|
990
|
+
}) => react.JSX.Element;
|
|
1098
991
|
Body: ({ children, className }: {
|
|
1099
992
|
children: ReactNode;
|
|
1100
993
|
className?: string;
|
|
1101
|
-
}) =>
|
|
994
|
+
}) => react.JSX.Element;
|
|
1102
995
|
Footer: ({ children, className }: {
|
|
1103
996
|
children: ReactNode;
|
|
1104
997
|
className?: string;
|
|
1105
|
-
}) =>
|
|
1106
|
-
Image: ({ aspectRatio, wrapperClassName, className, alt, ...rest }: CardImageProps) =>
|
|
998
|
+
}) => react.JSX.Element;
|
|
999
|
+
Image: ({ aspectRatio, wrapperClassName, className, alt, ...rest }: CardImageProps) => react.JSX.Element;
|
|
1107
1000
|
};
|
|
1108
1001
|
|
|
1109
1002
|
type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
@@ -1120,7 +1013,7 @@ type BadgeProps = {
|
|
|
1120
1013
|
iconPosition?: 'left' | 'right';
|
|
1121
1014
|
className?: string;
|
|
1122
1015
|
};
|
|
1123
|
-
declare const Badge: ({ children, variant, size, appearance, icon: Icon, iconPosition, className, }: BadgeProps) =>
|
|
1016
|
+
declare const Badge: ({ children, variant, size, appearance, icon: Icon, iconPosition, className, }: BadgeProps) => react.JSX.Element;
|
|
1124
1017
|
|
|
1125
1018
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
1126
1019
|
type AvatarProps = {
|
|
@@ -1131,7 +1024,7 @@ type AvatarProps = {
|
|
|
1131
1024
|
size?: AvatarSize;
|
|
1132
1025
|
className?: string;
|
|
1133
1026
|
};
|
|
1134
|
-
declare const Avatar: ({ src, alt, name, size, className }: AvatarProps) =>
|
|
1027
|
+
declare const Avatar: ({ src, alt, name, size, className }: AvatarProps) => react.JSX.Element;
|
|
1135
1028
|
|
|
1136
1029
|
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
1137
1030
|
type TooltipVariant = 'dark' | 'white' | 'brand';
|
|
@@ -1143,12 +1036,12 @@ type TooltipProps = {
|
|
|
1143
1036
|
/** Tailwind max-width class — default `max-w-xs` (320px) */
|
|
1144
1037
|
maxWidth?: string;
|
|
1145
1038
|
};
|
|
1146
|
-
declare const Tooltip: ({ content, children, position, variant, maxWidth, }: TooltipProps) =>
|
|
1039
|
+
declare const Tooltip: ({ content, children, position, variant, maxWidth, }: TooltipProps) => react.JSX.Element;
|
|
1147
1040
|
declare const TooltipHelp: ({ text, position, variant, }: {
|
|
1148
1041
|
text: string;
|
|
1149
1042
|
position?: TooltipPosition;
|
|
1150
1043
|
variant?: TooltipVariant;
|
|
1151
|
-
}) =>
|
|
1044
|
+
}) => react.JSX.Element;
|
|
1152
1045
|
|
|
1153
1046
|
type DropdownOption = {
|
|
1154
1047
|
value: string;
|
|
@@ -1171,7 +1064,7 @@ type DropdownProps = {
|
|
|
1171
1064
|
disabled?: boolean;
|
|
1172
1065
|
className?: string;
|
|
1173
1066
|
};
|
|
1174
|
-
declare const Dropdown: ({ label, icon: TriggerIcon, options, value, onChange, placeholder, align, disabled, className, }: DropdownProps) =>
|
|
1067
|
+
declare const Dropdown: ({ label, icon: TriggerIcon, options, value, onChange, placeholder, align, disabled, className, }: DropdownProps) => react.JSX.Element;
|
|
1175
1068
|
|
|
1176
1069
|
type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
1177
1070
|
type ModalProps = {
|
|
@@ -1179,6 +1072,12 @@ type ModalProps = {
|
|
|
1179
1072
|
onClose: () => void;
|
|
1180
1073
|
size?: ModalSize;
|
|
1181
1074
|
className?: string;
|
|
1075
|
+
/**
|
|
1076
|
+
* Accessible name for the dialog when it has no `Modal.Header` title to point
|
|
1077
|
+
* at. When a `Modal.Header title=…` is present, the dialog is labelled by it
|
|
1078
|
+
* automatically and this is unnecessary.
|
|
1079
|
+
*/
|
|
1080
|
+
ariaLabel?: string;
|
|
1182
1081
|
children: ReactNode;
|
|
1183
1082
|
};
|
|
1184
1083
|
type ModalHeaderProps = {
|
|
@@ -1220,17 +1119,17 @@ type ModalAlertProps = {
|
|
|
1220
1119
|
*/
|
|
1221
1120
|
fullWidthAction?: boolean;
|
|
1222
1121
|
};
|
|
1223
|
-
declare const Modal: (({ open, onClose, size, className, children }: ModalProps) => react.ReactPortal | null) & {
|
|
1224
|
-
Header: ({ title, description, onClose, className, children }: ModalHeaderProps) =>
|
|
1122
|
+
declare const Modal: (({ open, onClose, size, className, ariaLabel, children }: ModalProps) => react.ReactPortal | null) & {
|
|
1123
|
+
Header: ({ title, description, onClose, className, children }: ModalHeaderProps) => react.JSX.Element;
|
|
1225
1124
|
Body: ({ children, className }: {
|
|
1226
1125
|
children: ReactNode;
|
|
1227
1126
|
className?: string;
|
|
1228
|
-
}) =>
|
|
1127
|
+
}) => react.JSX.Element;
|
|
1229
1128
|
Footer: ({ children, className }: {
|
|
1230
1129
|
children: ReactNode;
|
|
1231
1130
|
className?: string;
|
|
1232
|
-
}) =>
|
|
1233
|
-
Alert: ({ open, onClose, intent, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, loading, layout, fullWidthAction, }: ModalAlertProps) =>
|
|
1131
|
+
}) => react.JSX.Element;
|
|
1132
|
+
Alert: ({ open, onClose, intent, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, loading, layout, fullWidthAction, }: ModalAlertProps) => react.JSX.Element;
|
|
1234
1133
|
};
|
|
1235
1134
|
|
|
1236
1135
|
type DrawerSide = 'left' | 'right';
|
|
@@ -1254,6 +1153,12 @@ type DrawerProps = {
|
|
|
1254
1153
|
* Has no effect when `withBackdrop` is `false`.
|
|
1255
1154
|
*/
|
|
1256
1155
|
closeOutside?: boolean;
|
|
1156
|
+
/**
|
|
1157
|
+
* Accessible name for the drawer when it has no `Drawer.Header` title to
|
|
1158
|
+
* point at. With a `Drawer.Header title=…` present the drawer is labelled by
|
|
1159
|
+
* it automatically and this is unnecessary.
|
|
1160
|
+
*/
|
|
1161
|
+
ariaLabel?: string;
|
|
1257
1162
|
className?: string;
|
|
1258
1163
|
children: ReactNode;
|
|
1259
1164
|
};
|
|
@@ -1265,16 +1170,16 @@ type DrawerHeaderProps = {
|
|
|
1265
1170
|
className?: string;
|
|
1266
1171
|
children?: ReactNode;
|
|
1267
1172
|
};
|
|
1268
|
-
declare const Drawer: (({ open, onClose, side, size, withBackdrop, closeOutside, className, children, }: DrawerProps) => react.ReactPortal) & {
|
|
1269
|
-
Header: ({ title, icon: Icon, description, onClose, className, children, }: DrawerHeaderProps) =>
|
|
1173
|
+
declare const Drawer: (({ open, onClose, side, size, withBackdrop, closeOutside, ariaLabel, className, children, }: DrawerProps) => react.ReactPortal) & {
|
|
1174
|
+
Header: ({ title, icon: Icon, description, onClose, className, children, }: DrawerHeaderProps) => react.JSX.Element;
|
|
1270
1175
|
Body: ({ children, className }: {
|
|
1271
1176
|
children: ReactNode;
|
|
1272
1177
|
className?: string;
|
|
1273
|
-
}) =>
|
|
1178
|
+
}) => react.JSX.Element;
|
|
1274
1179
|
Footer: ({ children, className }: {
|
|
1275
1180
|
children: ReactNode;
|
|
1276
1181
|
className?: string;
|
|
1277
|
-
}) =>
|
|
1182
|
+
}) => react.JSX.Element;
|
|
1278
1183
|
};
|
|
1279
1184
|
|
|
1280
1185
|
type TabsOrientation = 'horizontal' | 'vertical';
|
|
@@ -1294,17 +1199,17 @@ type TabProps = {
|
|
|
1294
1199
|
disabled?: boolean;
|
|
1295
1200
|
className?: string;
|
|
1296
1201
|
};
|
|
1297
|
-
declare const Tabs: (({ value, onChange, orientation, children, className }: TabsProps) =>
|
|
1202
|
+
declare const Tabs: (({ value, onChange, orientation, children, className }: TabsProps) => react.JSX.Element) & {
|
|
1298
1203
|
List: ({ children, className }: {
|
|
1299
1204
|
children: ReactNode;
|
|
1300
1205
|
className?: string;
|
|
1301
|
-
}) =>
|
|
1302
|
-
Trigger: ({ value, children, icon: Icon, badge, disabled, className }: TabProps) =>
|
|
1206
|
+
}) => react.JSX.Element;
|
|
1207
|
+
Trigger: ({ value, children, icon: Icon, badge, disabled, className }: TabProps) => react.JSX.Element;
|
|
1303
1208
|
Panel: ({ value, children, className, }: {
|
|
1304
1209
|
value: string;
|
|
1305
1210
|
children: ReactNode;
|
|
1306
1211
|
className?: string;
|
|
1307
|
-
}) =>
|
|
1212
|
+
}) => react.JSX.Element | null;
|
|
1308
1213
|
};
|
|
1309
1214
|
|
|
1310
1215
|
type CodeBlockProps = {
|
|
@@ -1314,7 +1219,7 @@ type CodeBlockProps = {
|
|
|
1314
1219
|
showCopy?: boolean;
|
|
1315
1220
|
className?: string;
|
|
1316
1221
|
};
|
|
1317
|
-
declare const CodeBlock: ({ code, language, showCopy, className }: CodeBlockProps) =>
|
|
1222
|
+
declare const CodeBlock: ({ code, language, showCopy, className }: CodeBlockProps) => react.JSX.Element;
|
|
1318
1223
|
|
|
1319
1224
|
type PageActionVariant = 'outline' | 'primary' | 'brand-outline' | 'danger-outline';
|
|
1320
1225
|
type PageActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
@@ -1322,12 +1227,12 @@ type PageActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
1322
1227
|
variant?: PageActionVariant;
|
|
1323
1228
|
children?: ReactNode;
|
|
1324
1229
|
};
|
|
1325
|
-
declare const PageActionButton: ({ icon: Icon, variant, className, children, type, ...rest }: PageActionButtonProps) =>
|
|
1230
|
+
declare const PageActionButton: ({ icon: Icon, variant, className, children, type, ...rest }: PageActionButtonProps) => react.JSX.Element;
|
|
1326
1231
|
type PageActionIconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
|
|
1327
1232
|
icon: ElementType;
|
|
1328
1233
|
variant?: PageActionVariant;
|
|
1329
1234
|
};
|
|
1330
|
-
declare const PageActionIconButton: ({ icon: Icon, variant, className, type, ...rest }: PageActionIconButtonProps) =>
|
|
1235
|
+
declare const PageActionIconButton: ({ icon: Icon, variant, className, type, ...rest }: PageActionIconButtonProps) => react.JSX.Element;
|
|
1331
1236
|
|
|
1332
1237
|
type RefreshOption = {
|
|
1333
1238
|
label: string;
|
|
@@ -1350,7 +1255,7 @@ type RefreshButtonProps = {
|
|
|
1350
1255
|
options?: RefreshOption[];
|
|
1351
1256
|
className?: string;
|
|
1352
1257
|
};
|
|
1353
|
-
declare const RefreshButton: ({ refreshing, autoRefreshMs, onRefresh, onIntervalChange, options, className, }: RefreshButtonProps) =>
|
|
1258
|
+
declare const RefreshButton: ({ refreshing, autoRefreshMs, onRefresh, onIntervalChange, options, className, }: RefreshButtonProps) => react.JSX.Element;
|
|
1354
1259
|
|
|
1355
1260
|
type RowActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1356
1261
|
children?: ReactNode;
|
|
@@ -1360,14 +1265,14 @@ type RowActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
1360
1265
|
* RowActionButton — compact action button for the right edge of table rows
|
|
1361
1266
|
* or list items. Defaults to a chevron-right indicator suggesting navigation.
|
|
1362
1267
|
*/
|
|
1363
|
-
declare const RowActionButton: ({ children, hideChevron, className, type, ...rest }: RowActionButtonProps) =>
|
|
1268
|
+
declare const RowActionButton: ({ children, hideChevron, className, type, ...rest }: RowActionButtonProps) => react.JSX.Element;
|
|
1364
1269
|
|
|
1365
1270
|
type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1366
1271
|
type SpinnerProps = {
|
|
1367
1272
|
size?: SpinnerSize;
|
|
1368
1273
|
className?: string;
|
|
1369
1274
|
};
|
|
1370
|
-
declare const Spinner: ({ size, className }: SpinnerProps) =>
|
|
1275
|
+
declare const Spinner: ({ size, className }: SpinnerProps) => react.JSX.Element;
|
|
1371
1276
|
|
|
1372
1277
|
type SectionLabelProps = {
|
|
1373
1278
|
children: ReactNode;
|
|
@@ -1377,7 +1282,7 @@ type SectionLabelProps = {
|
|
|
1377
1282
|
* SectionLabel — small upper-cased label used as a quiet section divider
|
|
1378
1283
|
* inside drawers, settings panels, and form groups.
|
|
1379
1284
|
*/
|
|
1380
|
-
declare const SectionLabel: ({ children, className }: SectionLabelProps) =>
|
|
1285
|
+
declare const SectionLabel: ({ children, className }: SectionLabelProps) => react.JSX.Element;
|
|
1381
1286
|
|
|
1382
1287
|
type IconBoxSize = 'sm' | 'md' | 'lg';
|
|
1383
1288
|
type IconBoxProps = {
|
|
@@ -1393,7 +1298,7 @@ type IconBoxProps = {
|
|
|
1393
1298
|
* IconBox — icon wrapped in a rounded square with configurable color theme.
|
|
1394
1299
|
* Useful for resource avatars in lists and cards.
|
|
1395
1300
|
*/
|
|
1396
|
-
declare const IconBox: ({ icon: Icon, size, bg, color, className, }: IconBoxProps) =>
|
|
1301
|
+
declare const IconBox: ({ icon: Icon, size, bg, color, className, }: IconBoxProps) => react.JSX.Element;
|
|
1397
1302
|
|
|
1398
1303
|
type AlertVariant = 'success' | 'error' | 'warning' | 'info';
|
|
1399
1304
|
type AlertBannerProps = {
|
|
@@ -1401,7 +1306,7 @@ type AlertBannerProps = {
|
|
|
1401
1306
|
children: ReactNode;
|
|
1402
1307
|
className?: string;
|
|
1403
1308
|
};
|
|
1404
|
-
declare const AlertBanner: ({ variant, children, className }: AlertBannerProps) =>
|
|
1309
|
+
declare const AlertBanner: ({ variant, children, className }: AlertBannerProps) => react.JSX.Element;
|
|
1405
1310
|
|
|
1406
1311
|
type SelectInputOption = {
|
|
1407
1312
|
label: string;
|
|
@@ -1421,7 +1326,7 @@ type SelectInputProps = {
|
|
|
1421
1326
|
* non-native menu). Use this when you want a pure value-changing native select
|
|
1422
1327
|
* with the Cosmos look.
|
|
1423
1328
|
*/
|
|
1424
|
-
declare const SelectInput: ({ value, onChange, options, placeholder, disabled, className, }: SelectInputProps) =>
|
|
1329
|
+
declare const SelectInput: ({ value, onChange, options, placeholder, disabled, className, }: SelectInputProps) => react.JSX.Element;
|
|
1425
1330
|
|
|
1426
1331
|
type BackdropProps = {
|
|
1427
1332
|
onClick?: () => void;
|
|
@@ -1433,7 +1338,7 @@ type BackdropProps = {
|
|
|
1433
1338
|
* Backdrop — primitive overlay layer (fixed inset-0 with semi-opaque black).
|
|
1434
1339
|
* Reusable building block for Modal, Drawer, Lightbox, command palette, etc.
|
|
1435
1340
|
*/
|
|
1436
|
-
declare const Backdrop: ({ onClick, zIndex, blur, className }: BackdropProps) =>
|
|
1341
|
+
declare const Backdrop: ({ onClick, zIndex, blur, className }: BackdropProps) => react.JSX.Element;
|
|
1437
1342
|
|
|
1438
1343
|
type SaveState = 'idle' | 'dirty' | 'saving' | 'saved' | 'error';
|
|
1439
1344
|
type StatefulSaveButtonProps = {
|
|
@@ -1449,7 +1354,7 @@ type StatefulSaveButtonProps = {
|
|
|
1449
1354
|
* StatefulSaveButton — save button with 5 visual states cycling
|
|
1450
1355
|
* idle → dirty → saving → saved → idle (or error on failure).
|
|
1451
1356
|
*/
|
|
1452
|
-
declare const StatefulSaveButton: ({ state, onClick, label, savedLabel, className, }: StatefulSaveButtonProps) =>
|
|
1357
|
+
declare const StatefulSaveButton: ({ state, onClick, label, savedLabel, className, }: StatefulSaveButtonProps) => react.JSX.Element;
|
|
1453
1358
|
|
|
1454
1359
|
type UnsavedIndicatorProps = {
|
|
1455
1360
|
visible: boolean;
|
|
@@ -1460,7 +1365,7 @@ type UnsavedIndicatorProps = {
|
|
|
1460
1365
|
* UnsavedIndicator — small amber label shown when a form has unsaved changes.
|
|
1461
1366
|
* Pair with StatefulSaveButton in a header or toolbar.
|
|
1462
1367
|
*/
|
|
1463
|
-
declare const UnsavedIndicator: ({ visible, label, className, }: UnsavedIndicatorProps) =>
|
|
1368
|
+
declare const UnsavedIndicator: ({ visible, label, className, }: UnsavedIndicatorProps) => react.JSX.Element | null;
|
|
1464
1369
|
|
|
1465
1370
|
type ConfirmationModalProps = {
|
|
1466
1371
|
open: boolean;
|
|
@@ -1557,7 +1462,7 @@ type NotificationsPanelFooterProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
1557
1462
|
/** When true, the panel auto-closes after the footer is clicked. Default true. */
|
|
1558
1463
|
closeOnClick?: boolean;
|
|
1559
1464
|
};
|
|
1560
|
-
declare const NotificationsPanel: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: NotificationsPanelProps) =>
|
|
1465
|
+
declare const NotificationsPanel: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: NotificationsPanelProps) => react.JSX.Element) & {
|
|
1561
1466
|
Trigger: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> & {
|
|
1562
1467
|
/** Number to show in the badge. 0 hides the badge. Values > 9999 render as "9999+". */
|
|
1563
1468
|
count?: number;
|
|
@@ -1567,15 +1472,15 @@ declare const NotificationsPanel: (({ open: openProp, defaultOpen, onOpenChange,
|
|
|
1567
1472
|
ping?: boolean;
|
|
1568
1473
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1569
1474
|
Content: ({ width, className, children, }: NotificationsPanelContentProps) => react.ReactPortal | null;
|
|
1570
|
-
Header: ({ title, children, className, }: NotificationsPanelHeaderProps) =>
|
|
1571
|
-
Counters: ({ crit, warn, info }: NotificationsPanelCountersProps) =>
|
|
1475
|
+
Header: ({ title, children, className, }: NotificationsPanelHeaderProps) => react.JSX.Element;
|
|
1476
|
+
Counters: ({ crit, warn, info }: NotificationsPanelCountersProps) => react.JSX.Element;
|
|
1572
1477
|
HeaderAction: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1573
1478
|
icon: ComponentType<{
|
|
1574
1479
|
className?: string;
|
|
1575
1480
|
}>;
|
|
1576
1481
|
active?: boolean;
|
|
1577
1482
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1578
|
-
List: ({ maxHeight, className, children, }: NotificationsPanelListProps) =>
|
|
1483
|
+
List: ({ maxHeight, className, children, }: NotificationsPanelListProps) => react.JSX.Element;
|
|
1579
1484
|
Item: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1580
1485
|
severity: NotificationSeverity;
|
|
1581
1486
|
title: string;
|
|
@@ -1587,8 +1492,8 @@ declare const NotificationsPanel: (({ open: openProp, defaultOpen, onOpenChange,
|
|
|
1587
1492
|
/** When true, the panel auto-closes after the item is clicked. Default true. */
|
|
1588
1493
|
closeOnClick?: boolean;
|
|
1589
1494
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1590
|
-
Empty: ({ title, subtitle, icon: Icon, }: NotificationsPanelEmptyProps) =>
|
|
1591
|
-
Footer: ({ children, closeOnClick, onClick, className, ...rest }: NotificationsPanelFooterProps) =>
|
|
1495
|
+
Empty: ({ title, subtitle, icon: Icon, }: NotificationsPanelEmptyProps) => react.JSX.Element;
|
|
1496
|
+
Footer: ({ children, closeOnClick, onClick, className, ...rest }: NotificationsPanelFooterProps) => react.JSX.Element;
|
|
1592
1497
|
};
|
|
1593
1498
|
|
|
1594
1499
|
type NotificationIntent = 'success' | 'info' | 'error';
|
|
@@ -1616,9 +1521,9 @@ type NotificationCardCondensedProps = {
|
|
|
1616
1521
|
onDismiss?: () => void;
|
|
1617
1522
|
className?: string;
|
|
1618
1523
|
};
|
|
1619
|
-
declare const NotificationCard: (({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) =>
|
|
1620
|
-
Simple: ({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) =>
|
|
1621
|
-
Condensed: ({ title, actionLabel, onAction, onDismiss, className, }: NotificationCardCondensedProps) =>
|
|
1524
|
+
declare const NotificationCard: (({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) => react.JSX.Element) & {
|
|
1525
|
+
Simple: ({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) => react.JSX.Element;
|
|
1526
|
+
Condensed: ({ title, actionLabel, onAction, onDismiss, className, }: NotificationCardCondensedProps) => react.JSX.Element;
|
|
1622
1527
|
};
|
|
1623
1528
|
|
|
1624
1529
|
type UserMenuProps = {
|
|
@@ -1658,7 +1563,7 @@ type UserMenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
1658
1563
|
/** Auto-close the menu after click. Default true. */
|
|
1659
1564
|
closeOnClick?: boolean;
|
|
1660
1565
|
};
|
|
1661
|
-
declare const UserMenu: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: UserMenuProps) =>
|
|
1566
|
+
declare const UserMenu: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: UserMenuProps) => react.JSX.Element) & {
|
|
1662
1567
|
Trigger: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> & {
|
|
1663
1568
|
/** Display name shown next to the avatar. Also used for initials fallback. */
|
|
1664
1569
|
name: string;
|
|
@@ -1668,10 +1573,10 @@ declare const UserMenu: (({ open: openProp, defaultOpen, onOpenChange, align, ch
|
|
|
1668
1573
|
hideName?: boolean;
|
|
1669
1574
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1670
1575
|
Content: ({ width, className, children }: UserMenuContentProps) => react.ReactPortal | null;
|
|
1671
|
-
Header: ({ name, email, avatarSrc, className }: UserMenuHeaderProps) =>
|
|
1576
|
+
Header: ({ name, email, avatarSrc, className }: UserMenuHeaderProps) => react.JSX.Element;
|
|
1672
1577
|
Items: ({ children }: {
|
|
1673
1578
|
children: ReactNode;
|
|
1674
|
-
}) =>
|
|
1579
|
+
}) => react.JSX.Element;
|
|
1675
1580
|
Item: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1676
1581
|
icon?: ComponentType<{
|
|
1677
1582
|
className?: string;
|
|
@@ -1680,7 +1585,7 @@ declare const UserMenu: (({ open: openProp, defaultOpen, onOpenChange, align, ch
|
|
|
1680
1585
|
/** Auto-close the menu after click. Default true. */
|
|
1681
1586
|
closeOnClick?: boolean;
|
|
1682
1587
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1683
|
-
Separator: () =>
|
|
1588
|
+
Separator: () => react.JSX.Element;
|
|
1684
1589
|
};
|
|
1685
1590
|
|
|
1686
1591
|
type ThemeToggleSize = 'sm' | 'md';
|
|
@@ -1757,7 +1662,7 @@ type ButtonGroupProps = {
|
|
|
1757
1662
|
* Patterns: period selectors (Day/Week/Month), toolbars, paginators,
|
|
1758
1663
|
* grouped actions (Save/Delete).
|
|
1759
1664
|
*/
|
|
1760
|
-
declare const ButtonGroup: ({ orientation, attached, gap, className, children, }: ButtonGroupProps) =>
|
|
1665
|
+
declare const ButtonGroup: ({ orientation, attached, gap, className, children, }: ButtonGroupProps) => react.JSX.Element;
|
|
1761
1666
|
|
|
1762
1667
|
type CarouselOptions = Parameters<typeof useEmblaCarousel>[0];
|
|
1763
1668
|
type CarouselProps = {
|
|
@@ -1770,7 +1675,7 @@ type CarouselProps = {
|
|
|
1770
1675
|
className?: string;
|
|
1771
1676
|
children: ReactNode;
|
|
1772
1677
|
};
|
|
1773
|
-
declare const CarouselRoot: ({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) =>
|
|
1678
|
+
declare const CarouselRoot: ({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) => react.JSX.Element;
|
|
1774
1679
|
type CarouselViewportProps = {
|
|
1775
1680
|
children: ReactNode;
|
|
1776
1681
|
className?: string;
|
|
@@ -1791,11 +1696,11 @@ type CarouselControlsProps = {
|
|
|
1791
1696
|
type CarouselIndicatorsProps = {
|
|
1792
1697
|
className?: string;
|
|
1793
1698
|
};
|
|
1794
|
-
declare const Carousel: (({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) =>
|
|
1795
|
-
Viewport: ({ children, className }: CarouselViewportProps) =>
|
|
1796
|
-
Slide: ({ basis, className, children }: CarouselSlideProps) =>
|
|
1797
|
-
Controls: ({ position, className, prevLabel, nextLabel, }: CarouselControlsProps) =>
|
|
1798
|
-
Indicators: ({ className }: CarouselIndicatorsProps) =>
|
|
1699
|
+
declare const Carousel: (({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) => react.JSX.Element) & {
|
|
1700
|
+
Viewport: ({ children, className }: CarouselViewportProps) => react.JSX.Element;
|
|
1701
|
+
Slide: ({ basis, className, children }: CarouselSlideProps) => react.JSX.Element;
|
|
1702
|
+
Controls: ({ position, className, prevLabel, nextLabel, }: CarouselControlsProps) => react.JSX.Element;
|
|
1703
|
+
Indicators: ({ className }: CarouselIndicatorsProps) => react.JSX.Element;
|
|
1799
1704
|
};
|
|
1800
1705
|
|
|
1801
1706
|
type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
@@ -1817,7 +1722,7 @@ type PopoverContentProps = {
|
|
|
1817
1722
|
className?: string;
|
|
1818
1723
|
children: ReactNode;
|
|
1819
1724
|
};
|
|
1820
|
-
declare const Popover: (({ open: openProp, defaultOpen, onOpenChange, children, }: PopoverProps) =>
|
|
1725
|
+
declare const Popover: (({ open: openProp, defaultOpen, onOpenChange, children, }: PopoverProps) => react.JSX.Element) & {
|
|
1821
1726
|
Trigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1822
1727
|
Content: ({ position, offset, arrow, width, className, children, }: PopoverContentProps) => react.ReactPortal | null;
|
|
1823
1728
|
};
|
|
@@ -1840,7 +1745,7 @@ type ProgressBarProps = {
|
|
|
1840
1745
|
indeterminate?: boolean;
|
|
1841
1746
|
className?: string;
|
|
1842
1747
|
};
|
|
1843
|
-
declare const ProgressBar: ({ value, max, size, intent, label, labelContent, striped, indeterminate, className, }: ProgressBarProps) =>
|
|
1748
|
+
declare const ProgressBar: ({ value, max, size, intent, label, labelContent, striped, indeterminate, className, }: ProgressBarProps) => react.JSX.Element;
|
|
1844
1749
|
|
|
1845
1750
|
type RibbonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
1846
1751
|
type RibbonIntent = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
@@ -1854,7 +1759,7 @@ type RibbonProps = {
|
|
|
1854
1759
|
children: ReactNode;
|
|
1855
1760
|
className?: string;
|
|
1856
1761
|
};
|
|
1857
|
-
declare const Ribbon: ({ position, intent, shape, children, className, }: RibbonProps) =>
|
|
1762
|
+
declare const Ribbon: ({ position, intent, shape, children, className, }: RibbonProps) => react.JSX.Element;
|
|
1858
1763
|
|
|
1859
1764
|
type LinkVariant = 'colored' | 'underline' | 'opacity' | 'opacity-hover' | 'subtle';
|
|
1860
1765
|
type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
@@ -1897,8 +1802,8 @@ type ListItemProps = {
|
|
|
1897
1802
|
className?: string;
|
|
1898
1803
|
children: ReactNode;
|
|
1899
1804
|
};
|
|
1900
|
-
declare const List: (({ variant, marker, spacing, orientation, className, children, }: ListProps) =>
|
|
1901
|
-
Item: ({ icon, iconColor, className, children }: ListItemProps) =>
|
|
1805
|
+
declare const List: (({ variant, marker, spacing, orientation, className, children, }: ListProps) => react.JSX.Element) & {
|
|
1806
|
+
Item: ({ icon, iconColor, className, children }: ListItemProps) => react.JSX.Element;
|
|
1902
1807
|
};
|
|
1903
1808
|
|
|
1904
1809
|
type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {
|
|
@@ -1939,7 +1844,7 @@ type ImageGridProps = {
|
|
|
1939
1844
|
className?: string;
|
|
1940
1845
|
children: ReactNode;
|
|
1941
1846
|
};
|
|
1942
|
-
declare const ImageGrid: ({ columns, gap, aspectRatio, rounded, className, children, }: ImageGridProps) =>
|
|
1847
|
+
declare const ImageGrid: ({ columns, gap, aspectRatio, rounded, className, children, }: ImageGridProps) => react.JSX.Element;
|
|
1943
1848
|
|
|
1944
1849
|
type VideoEmbedAspect = '16:9' | '4:3' | '1:1' | '21:9' | (string & {});
|
|
1945
1850
|
type VideoEmbedProps = {
|
|
@@ -1961,7 +1866,7 @@ type VideoEmbedProps = {
|
|
|
1961
1866
|
poster?: string;
|
|
1962
1867
|
className?: string;
|
|
1963
1868
|
};
|
|
1964
|
-
declare const VideoEmbed: ({ src, title, aspectRatio, rounded, type, allow, muted, autoPlay, loop, controls, poster, className, }: VideoEmbedProps) =>
|
|
1869
|
+
declare const VideoEmbed: ({ src, title, aspectRatio, rounded, type, allow, muted, autoPlay, loop, controls, poster, className, }: VideoEmbedProps) => react.JSX.Element;
|
|
1965
1870
|
|
|
1966
1871
|
/**
|
|
1967
1872
|
* Cosmos toast — thin wrapper around sonner.
|
|
@@ -1973,7 +1878,7 @@ declare const VideoEmbed: ({ src, title, aspectRatio, rounded, type, allow, mute
|
|
|
1973
1878
|
* Override per-instance by passing props.
|
|
1974
1879
|
*/
|
|
1975
1880
|
type CosmosToasterProps = ToasterProps;
|
|
1976
|
-
declare const Toaster: (props: CosmosToasterProps) =>
|
|
1881
|
+
declare const Toaster: (props: CosmosToasterProps) => react.JSX.Element;
|
|
1977
1882
|
|
|
1978
1883
|
type AnnouncementBarIntent = 'info' | 'success' | 'warning' | 'danger' | 'brand';
|
|
1979
1884
|
type AnnouncementBarProps = {
|
|
@@ -1991,7 +1896,7 @@ type AnnouncementBarProps = {
|
|
|
1991
1896
|
sticky?: boolean;
|
|
1992
1897
|
className?: string;
|
|
1993
1898
|
};
|
|
1994
|
-
declare const AnnouncementBar: ({ intent, icon, message, action, dismissible, onDismiss, sticky, className, }: AnnouncementBarProps) =>
|
|
1899
|
+
declare const AnnouncementBar: ({ intent, icon, message, action, dismissible, onDismiss, sticky, className, }: AnnouncementBarProps) => react.JSX.Element | null;
|
|
1995
1900
|
|
|
1996
1901
|
type CookieBannerPosition = 'bottom' | 'top' | 'floating';
|
|
1997
1902
|
type CookieBannerProps = {
|
|
@@ -2014,7 +1919,7 @@ type CookieBannerProps = {
|
|
|
2014
1919
|
showIcon?: boolean;
|
|
2015
1920
|
className?: string;
|
|
2016
1921
|
};
|
|
2017
|
-
declare const CookieBanner: ({ open: openProp, defaultOpen, onOpenChange, position, title, message, onSettings, settingsLabel, onDeny, denyLabel, onAccept, acceptLabel, showIcon, className, }: CookieBannerProps) =>
|
|
1922
|
+
declare const CookieBanner: ({ open: openProp, defaultOpen, onOpenChange, position, title, message, onSettings, settingsLabel, onDeny, denyLabel, onAccept, acceptLabel, showIcon, className, }: CookieBannerProps) => react.JSX.Element | null;
|
|
2018
1923
|
|
|
2019
1924
|
type CommandPaletteProps = ComponentPropsWithoutRef<typeof Command.Dialog> & {
|
|
2020
1925
|
/**
|
|
@@ -2038,7 +1943,7 @@ type CommandPaletteFooterProps = {
|
|
|
2038
1943
|
className?: string;
|
|
2039
1944
|
children: ReactNode;
|
|
2040
1945
|
};
|
|
2041
|
-
declare const CommandPalette: (({ hotkey, open, onOpenChange, className, overlayClassName, contentClassName, children, label, ...rest }: CommandPaletteProps) =>
|
|
1946
|
+
declare const CommandPalette: (({ hotkey, open, onOpenChange, className, overlayClassName, contentClassName, children, label, ...rest }: CommandPaletteProps) => react.JSX.Element) & {
|
|
2042
1947
|
Input: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
|
|
2043
1948
|
ref?: React.Ref<HTMLInputElement>;
|
|
2044
1949
|
} & {
|
|
@@ -2109,7 +2014,7 @@ declare const CommandPalette: (({ hotkey, open, onOpenChange, className, overlay
|
|
|
2109
2014
|
progress?: number;
|
|
2110
2015
|
label?: string;
|
|
2111
2016
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2112
|
-
Footer: ({ className, children }: CommandPaletteFooterProps) =>
|
|
2017
|
+
Footer: ({ className, children }: CommandPaletteFooterProps) => react.JSX.Element;
|
|
2113
2018
|
};
|
|
2114
2019
|
|
|
2115
2020
|
type ClipboardVariant = 'icon' | 'button';
|
|
@@ -2176,7 +2081,7 @@ type BackToTopFabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'
|
|
|
2176
2081
|
offset?: number;
|
|
2177
2082
|
ariaLabel?: string;
|
|
2178
2083
|
};
|
|
2179
|
-
declare const BackToTopFab: ({ threshold, position, smoothScroll, icon: Icon, intent, onActivate, offset, ariaLabel, className, style, ...rest }: BackToTopFabProps) =>
|
|
2084
|
+
declare const BackToTopFab: ({ threshold, position, smoothScroll, icon: Icon, intent, onActivate, offset, ariaLabel, className, style, ...rest }: BackToTopFabProps) => react.JSX.Element;
|
|
2180
2085
|
|
|
2181
2086
|
type HelpOverlayProps = {
|
|
2182
2087
|
/** Controlled open state. Omit to use the internal hotkey-driven state. */
|
|
@@ -2212,9 +2117,9 @@ type HelpOverlayShortcutProps = {
|
|
|
2212
2117
|
description: ReactNode;
|
|
2213
2118
|
className?: string;
|
|
2214
2119
|
};
|
|
2215
|
-
declare const HelpOverlay: (({ open: controlledOpen, onOpenChange, hotkey, title, description, footer, className, children, }: HelpOverlayProps) =>
|
|
2216
|
-
Section: ({ title, className, children }: HelpOverlaySectionProps) =>
|
|
2217
|
-
Shortcut: ({ keys, description, className }: HelpOverlayShortcutProps) =>
|
|
2120
|
+
declare const HelpOverlay: (({ open: controlledOpen, onOpenChange, hotkey, title, description, footer, className, children, }: HelpOverlayProps) => react.JSX.Element | null) & {
|
|
2121
|
+
Section: ({ title, className, children }: HelpOverlaySectionProps) => react.JSX.Element;
|
|
2122
|
+
Shortcut: ({ keys, description, className }: HelpOverlayShortcutProps) => react.JSX.Element;
|
|
2218
2123
|
};
|
|
2219
2124
|
|
|
2220
2125
|
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
|
|
@@ -2254,7 +2159,7 @@ type SearchInputProps = {
|
|
|
2254
2159
|
placeholder?: string;
|
|
2255
2160
|
className?: string;
|
|
2256
2161
|
};
|
|
2257
|
-
declare const SearchInput: ({ value, onChange, placeholder, className, }: SearchInputProps) =>
|
|
2162
|
+
declare const SearchInput: ({ value, onChange, placeholder, className, }: SearchInputProps) => react.JSX.Element;
|
|
2258
2163
|
|
|
2259
2164
|
type SelectOption = {
|
|
2260
2165
|
value: string;
|
|
@@ -2281,7 +2186,7 @@ type ToggleProps = {
|
|
|
2281
2186
|
label?: string;
|
|
2282
2187
|
description?: string;
|
|
2283
2188
|
};
|
|
2284
|
-
declare const Toggle: ({ checked, onChange, disabled, label, description, }: ToggleProps) =>
|
|
2189
|
+
declare const Toggle: ({ checked, onChange, disabled, label, description, }: ToggleProps) => react.JSX.Element;
|
|
2285
2190
|
|
|
2286
2191
|
type FilterOption<T extends string = string> = {
|
|
2287
2192
|
label: string;
|
|
@@ -2299,7 +2204,7 @@ type FilterPillsProps<T extends string = string> = {
|
|
|
2299
2204
|
fullWidth?: boolean;
|
|
2300
2205
|
className?: string;
|
|
2301
2206
|
};
|
|
2302
|
-
declare const FilterPills: <T extends string = string>({ options, value, onChange, icon: Icon, fullWidth, className, }: FilterPillsProps<T>) =>
|
|
2207
|
+
declare const FilterPills: <T extends string = string>({ options, value, onChange, icon: Icon, fullWidth, className, }: FilterPillsProps<T>) => react.JSX.Element;
|
|
2303
2208
|
|
|
2304
2209
|
type SegmentOption<T extends string> = {
|
|
2305
2210
|
label: string;
|
|
@@ -2312,7 +2217,7 @@ type SegmentedControlProps<T extends string> = {
|
|
|
2312
2217
|
onChange: (v: T) => void;
|
|
2313
2218
|
className?: string;
|
|
2314
2219
|
};
|
|
2315
|
-
declare const SegmentedControl: <T extends string>({ options, value, onChange, className, }: SegmentedControlProps<T>) =>
|
|
2220
|
+
declare const SegmentedControl: <T extends string>({ options, value, onChange, className, }: SegmentedControlProps<T>) => react.JSX.Element;
|
|
2316
2221
|
|
|
2317
2222
|
type StepperInputProps = {
|
|
2318
2223
|
value: number;
|
|
@@ -2335,7 +2240,7 @@ type StepperInputProps = {
|
|
|
2335
2240
|
* StepperInput — number field with stacked ↑ / ↓ arrows embedded inside the
|
|
2336
2241
|
* right edge. Compact alternative to NumberInput for settings panels.
|
|
2337
2242
|
*/
|
|
2338
|
-
declare const StepperInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: StepperInputProps) =>
|
|
2243
|
+
declare const StepperInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: StepperInputProps) => react.JSX.Element;
|
|
2339
2244
|
|
|
2340
2245
|
type NumberInputProps = {
|
|
2341
2246
|
value: number;
|
|
@@ -2360,7 +2265,7 @@ type NumberInputProps = {
|
|
|
2360
2265
|
* Replaces native `<input type="number">` spinners for cross-browser
|
|
2361
2266
|
* consistency.
|
|
2362
2267
|
*/
|
|
2363
|
-
declare const NumberInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: NumberInputProps) =>
|
|
2268
|
+
declare const NumberInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: NumberInputProps) => react.JSX.Element;
|
|
2364
2269
|
|
|
2365
2270
|
type ZoomBarProps = {
|
|
2366
2271
|
zoom: number;
|
|
@@ -2380,7 +2285,7 @@ type ZoomBarProps = {
|
|
|
2380
2285
|
* ZoomBar — inline zoom control group: [−] [xx%] [+] [fit] [reset].
|
|
2381
2286
|
* Use for canvas, map, and visualization views.
|
|
2382
2287
|
*/
|
|
2383
|
-
declare const ZoomBar: ({ zoom, onZoomOut, onZoomIn, onFit, onReset, fullWidth, className, }: ZoomBarProps) =>
|
|
2288
|
+
declare const ZoomBar: ({ zoom, onZoomOut, onZoomIn, onFit, onReset, fullWidth, className, }: ZoomBarProps) => react.JSX.Element;
|
|
2384
2289
|
|
|
2385
2290
|
type FormRowProps = {
|
|
2386
2291
|
label: string;
|
|
@@ -2395,7 +2300,7 @@ type FormRowProps = {
|
|
|
2395
2300
|
* on the left, control on the right. Pair multiple FormRows inside a
|
|
2396
2301
|
* `divide-y` container to build settings panels.
|
|
2397
2302
|
*/
|
|
2398
|
-
declare const FormRow: ({ label, description, tooltip, children, className }: FormRowProps) =>
|
|
2303
|
+
declare const FormRow: ({ label, description, tooltip, children, className }: FormRowProps) => react.JSX.Element;
|
|
2399
2304
|
|
|
2400
2305
|
type AvatarUploaderSize = 'md' | 'lg';
|
|
2401
2306
|
type AvatarUploaderProps = {
|
|
@@ -2425,7 +2330,7 @@ type AvatarUploaderProps = {
|
|
|
2425
2330
|
removeLabel?: string;
|
|
2426
2331
|
className?: string;
|
|
2427
2332
|
};
|
|
2428
|
-
declare const AvatarUploader: ({ src, name, size, onUpload, onRemove, loading: loadingProp, error: errorProp, helperText, maxSizeMB, accept, disabled, uploadLabel, removeLabel, className, }: AvatarUploaderProps) =>
|
|
2333
|
+
declare const AvatarUploader: ({ src, name, size, onUpload, onRemove, loading: loadingProp, error: errorProp, helperText, maxSizeMB, accept, disabled, uploadLabel, removeLabel, className, }: AvatarUploaderProps) => react.JSX.Element;
|
|
2429
2334
|
|
|
2430
2335
|
type PasswordInputProps = Omit<InputProps, 'type' | 'icon' | 'rightSlot' | 'labelTrailing'> & {
|
|
2431
2336
|
/** Tooltip text shown next to the label (uses TooltipHelp). */
|
|
@@ -2452,7 +2357,7 @@ type PasswordPolicyCheckerProps = {
|
|
|
2452
2357
|
title?: string | null;
|
|
2453
2358
|
className?: string;
|
|
2454
2359
|
};
|
|
2455
|
-
declare const PasswordPolicyChecker: ({ rules, title, className, }: PasswordPolicyCheckerProps) =>
|
|
2360
|
+
declare const PasswordPolicyChecker: ({ rules, title, className, }: PasswordPolicyCheckerProps) => react.JSX.Element;
|
|
2456
2361
|
/**
|
|
2457
2362
|
* Sensible default password policy. Override per-app if stricter/looser
|
|
2458
2363
|
* rules are needed (i18n, custom min length, blocklists, …).
|
|
@@ -2522,7 +2427,7 @@ type CheckboxGroupProps = {
|
|
|
2522
2427
|
size?: CheckboxSize;
|
|
2523
2428
|
className?: string;
|
|
2524
2429
|
};
|
|
2525
|
-
declare const CheckboxGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: CheckboxGroupProps) =>
|
|
2430
|
+
declare const CheckboxGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: CheckboxGroupProps) => react.JSX.Element;
|
|
2526
2431
|
|
|
2527
2432
|
type RadioSize = 'sm' | 'md';
|
|
2528
2433
|
type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'children'> & {
|
|
@@ -2559,7 +2464,7 @@ type RadioGroupProps = {
|
|
|
2559
2464
|
size?: RadioSize;
|
|
2560
2465
|
className?: string;
|
|
2561
2466
|
};
|
|
2562
|
-
declare const RadioGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: RadioGroupProps) =>
|
|
2467
|
+
declare const RadioGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: RadioGroupProps) => react.JSX.Element;
|
|
2563
2468
|
|
|
2564
2469
|
type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> & {
|
|
2565
2470
|
label?: string;
|
|
@@ -2609,7 +2514,7 @@ type DropzoneProps = {
|
|
|
2609
2514
|
hideFileList?: boolean;
|
|
2610
2515
|
className?: string;
|
|
2611
2516
|
};
|
|
2612
|
-
declare const Dropzone: ({ label, description, error: errorProp, multiple, accept, disabled, onChange, value, maxFiles, maxSize, children, hideFileList, className, }: DropzoneProps) =>
|
|
2517
|
+
declare const Dropzone: ({ label, description, error: errorProp, multiple, accept, disabled, onChange, value, maxFiles, maxSize, children, hideFileList, className, }: DropzoneProps) => react.JSX.Element;
|
|
2613
2518
|
|
|
2614
2519
|
type FormFooterAlign = 'right' | 'between';
|
|
2615
2520
|
type FormFooterProps = {
|
|
@@ -2636,7 +2541,7 @@ type FormFooterProps = {
|
|
|
2636
2541
|
children?: ReactNode;
|
|
2637
2542
|
className?: string;
|
|
2638
2543
|
};
|
|
2639
|
-
declare const FormFooter: ({ onCancel, cancelLabel, submitLabel, submitting, submitDisabled, submitVariant, formId, align, bordered, extra, children, className, }: FormFooterProps) =>
|
|
2544
|
+
declare const FormFooter: ({ onCancel, cancelLabel, submitLabel, submitting, submitDisabled, submitVariant, formId, align, bordered, extra, children, className, }: FormFooterProps) => react.JSX.Element;
|
|
2640
2545
|
|
|
2641
2546
|
type CalendarProps = DayPickerProps & {
|
|
2642
2547
|
className?: string;
|
|
@@ -2647,7 +2552,7 @@ type CalendarProps = DayPickerProps & {
|
|
|
2647
2552
|
* Tailwind class names on top of the defaults so the calendar matches the
|
|
2648
2553
|
* rest of the design system.
|
|
2649
2554
|
*/
|
|
2650
|
-
declare const Calendar: ({ classNames, components, className, ...rest }: CalendarProps) =>
|
|
2555
|
+
declare const Calendar: ({ classNames, components, className, ...rest }: CalendarProps) => react.JSX.Element;
|
|
2651
2556
|
|
|
2652
2557
|
type DateRange = {
|
|
2653
2558
|
from: Date | undefined;
|
|
@@ -2697,7 +2602,7 @@ type CommonProps = {
|
|
|
2697
2602
|
className?: string;
|
|
2698
2603
|
};
|
|
2699
2604
|
type DatePickerProps = (SingleProps | RangeProps) & CommonProps;
|
|
2700
|
-
declare const DatePicker: (props: DatePickerProps) =>
|
|
2605
|
+
declare const DatePicker: (props: DatePickerProps) => react.JSX.Element;
|
|
2701
2606
|
|
|
2702
2607
|
type TimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
|
|
2703
2608
|
label?: string;
|
|
@@ -2762,7 +2667,7 @@ type OtpInputProps = {
|
|
|
2762
2667
|
className?: string;
|
|
2763
2668
|
ariaLabel?: string;
|
|
2764
2669
|
};
|
|
2765
|
-
declare const OtpInput: ({ length, value, onChange, onComplete, disabled, error, alphanumeric, mask, autoFocus, name, className, ariaLabel, }: OtpInputProps) =>
|
|
2670
|
+
declare const OtpInput: ({ length, value, onChange, onComplete, disabled, error, alphanumeric, mask, autoFocus, name, className, ariaLabel, }: OtpInputProps) => react.JSX.Element;
|
|
2766
2671
|
|
|
2767
2672
|
type ActionPanelLayout = 'stacked' | 'inline';
|
|
2768
2673
|
type ActionPanelProps = HTMLAttributes<HTMLDivElement> & {
|
|
@@ -2827,7 +2732,7 @@ type ComboboxProps = {
|
|
|
2827
2732
|
error?: string;
|
|
2828
2733
|
className?: string;
|
|
2829
2734
|
};
|
|
2830
|
-
declare const Combobox: ({ label, value, onChange, options, placeholder, emptyMessage, disabled, helperText, error, className, }: ComboboxProps) =>
|
|
2735
|
+
declare const Combobox: ({ label, value, onChange, options, placeholder, emptyMessage, disabled, helperText, error, className, }: ComboboxProps) => react.JSX.Element;
|
|
2831
2736
|
|
|
2832
2737
|
type DescriptionListItemProps = HTMLAttributes<HTMLDivElement> & {
|
|
2833
2738
|
/** Label (`<dt>`). */
|
|
@@ -2888,7 +2793,7 @@ type KpiCardProps = {
|
|
|
2888
2793
|
* KpiCard — single key metric card : label + large value + optional sub-text.
|
|
2889
2794
|
* Use in dashboards as the top-row at-a-glance panel.
|
|
2890
2795
|
*/
|
|
2891
|
-
declare const KpiCard: ({ label, value, sub, className }: KpiCardProps) =>
|
|
2796
|
+
declare const KpiCard: ({ label, value, sub, className }: KpiCardProps) => react.JSX.Element;
|
|
2892
2797
|
|
|
2893
2798
|
type TimelineItem = {
|
|
2894
2799
|
id: string;
|
|
@@ -2929,7 +2834,7 @@ type TimelineProps = {
|
|
|
2929
2834
|
variant?: TimelineVariant;
|
|
2930
2835
|
className?: string;
|
|
2931
2836
|
};
|
|
2932
|
-
declare const Timeline: ({ items, variant, className }: TimelineProps) =>
|
|
2837
|
+
declare const Timeline: ({ items, variant, className }: TimelineProps) => react.JSX.Element;
|
|
2933
2838
|
|
|
2934
2839
|
type MiniCalendarProps = {
|
|
2935
2840
|
today?: Date;
|
|
@@ -2943,7 +2848,7 @@ type MiniCalendarProps = {
|
|
|
2943
2848
|
* MiniCalendar — compact ISO-week month picker with optional event dots.
|
|
2944
2849
|
* Click the month title to jump back to today's month.
|
|
2945
2850
|
*/
|
|
2946
|
-
declare const MiniCalendar: ({ today, selected, onSelect, eventDays, className, }: MiniCalendarProps) =>
|
|
2851
|
+
declare const MiniCalendar: ({ today, selected, onSelect, eventDays, className, }: MiniCalendarProps) => react.JSX.Element;
|
|
2947
2852
|
|
|
2948
2853
|
type SortDirection = 'asc' | 'desc';
|
|
2949
2854
|
type ColumnDef<T> = {
|
|
@@ -2999,7 +2904,7 @@ type DataTableProps<T> = {
|
|
|
2999
2904
|
* empty states, optional row selection with bulk actions, and an optional
|
|
3000
2905
|
* global search bar.
|
|
3001
2906
|
*/
|
|
3002
|
-
declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) =>
|
|
2907
|
+
declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react.JSX.Element;
|
|
3003
2908
|
|
|
3004
2909
|
type ColumnHeaderProps = {
|
|
3005
2910
|
label: ReactNode;
|
|
@@ -3016,7 +2921,7 @@ type ColumnHeaderProps = {
|
|
|
3016
2921
|
onFilterClear?: () => void;
|
|
3017
2922
|
className?: string;
|
|
3018
2923
|
};
|
|
3019
|
-
declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, className, }: ColumnHeaderProps) =>
|
|
2924
|
+
declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, className, }: ColumnHeaderProps) => react.JSX.Element;
|
|
3020
2925
|
|
|
3021
2926
|
type ColumnFilterDropdownProps = {
|
|
3022
2927
|
values: string[];
|
|
@@ -3030,7 +2935,7 @@ type ColumnFilterDropdownProps = {
|
|
|
3030
2935
|
* ColumnFilterDropdown — popover with multi-select checkboxes for filtering
|
|
3031
2936
|
* a column. Optional search input filters the visible options.
|
|
3032
2937
|
*/
|
|
3033
|
-
declare const ColumnFilterDropdown: ({ values, selected, searchable, onToggle, onClear, className, }: ColumnFilterDropdownProps) =>
|
|
2938
|
+
declare const ColumnFilterDropdown: ({ values, selected, searchable, onToggle, onClear, className, }: ColumnFilterDropdownProps) => react.JSX.Element;
|
|
3034
2939
|
|
|
3035
2940
|
type ActiveFilter = {
|
|
3036
2941
|
key: string;
|
|
@@ -3048,7 +2953,39 @@ type ActiveFiltersBarProps = {
|
|
|
3048
2953
|
* ActiveFiltersBar — chips row showing current column filters with per-chip
|
|
3049
2954
|
* dismiss + a "Clear all" action. Renders nothing when there are no filters.
|
|
3050
2955
|
*/
|
|
3051
|
-
declare const ActiveFiltersBar: ({ filters, onClearOne, onClearAll, className, }: ActiveFiltersBarProps) =>
|
|
2956
|
+
declare const ActiveFiltersBar: ({ filters, onClearOne, onClearAll, className, }: ActiveFiltersBarProps) => react.JSX.Element | null;
|
|
2957
|
+
|
|
2958
|
+
type AuthLayoutProps = {
|
|
2959
|
+
/** Brand icon component (lucide). Renders inside a brand-colored square above the title. */
|
|
2960
|
+
logo?: ComponentType<{
|
|
2961
|
+
className?: string;
|
|
2962
|
+
}>;
|
|
2963
|
+
/** Brand name shown below the logo. */
|
|
2964
|
+
title?: string;
|
|
2965
|
+
/** Tagline shown below the title. */
|
|
2966
|
+
subtitle?: string;
|
|
2967
|
+
/**
|
|
2968
|
+
* Override the entire brand block (logo + title + subtitle).
|
|
2969
|
+
* Pass `null` to render no brand block.
|
|
2970
|
+
*/
|
|
2971
|
+
brand?: ReactNode;
|
|
2972
|
+
/** Form content rendered inside the card, below the brand block. */
|
|
2973
|
+
children: ReactNode;
|
|
2974
|
+
className?: string;
|
|
2975
|
+
};
|
|
2976
|
+
/**
|
|
2977
|
+
* AuthLayout — single-card centered layout for authentication pages.
|
|
2978
|
+
*
|
|
2979
|
+
* The card sits on a muted page background (gray-50 light / gray-950 dark)
|
|
2980
|
+
* with a small shadow and a soft border. The brand block (logo + title +
|
|
2981
|
+
* subtitle) is rendered *inside* the card, above the form children.
|
|
2982
|
+
*
|
|
2983
|
+
* - No props or only `children` → form-only card.
|
|
2984
|
+
* - `logo` / `title` / `subtitle` → built-in centered brand block.
|
|
2985
|
+
* - `brand={...}` → fully custom brand block.
|
|
2986
|
+
* - `brand={null}` → no brand block (form only).
|
|
2987
|
+
*/
|
|
2988
|
+
declare const AuthLayout: ({ logo: Logo, title, subtitle, brand, children, className, }: AuthLayoutProps) => react.JSX.Element;
|
|
3052
2989
|
|
|
3053
2990
|
type ErrorPageProps = {
|
|
3054
2991
|
/** Big numeric code displayed prominently — e.g. `404`, `500`, `503`. */
|
|
@@ -3079,7 +3016,120 @@ type ErrorPageProps = {
|
|
|
3079
3016
|
* }
|
|
3080
3017
|
* />
|
|
3081
3018
|
*/
|
|
3082
|
-
declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) =>
|
|
3019
|
+
declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) => react.JSX.Element;
|
|
3020
|
+
|
|
3021
|
+
type IntegrationStatus = 'connected' | 'available' | 'error' | 'pending';
|
|
3022
|
+
type IntegrationCardProps = {
|
|
3023
|
+
/** SVG element or `<img>` for the provider logo. Rendered inside a 48 px square. */
|
|
3024
|
+
logo: ReactNode;
|
|
3025
|
+
name: string;
|
|
3026
|
+
description?: string;
|
|
3027
|
+
status?: IntegrationStatus;
|
|
3028
|
+
/** Optional small label rendered above the name (e.g. "Communication"). */
|
|
3029
|
+
category?: string;
|
|
3030
|
+
/** Primary action button label. */
|
|
3031
|
+
actionLabel?: string;
|
|
3032
|
+
actionVariant?: ButtonVariant;
|
|
3033
|
+
onAction?: () => void;
|
|
3034
|
+
/** Secondary action button label. */
|
|
3035
|
+
secondaryLabel?: string;
|
|
3036
|
+
onSecondary?: () => void;
|
|
3037
|
+
loading?: boolean;
|
|
3038
|
+
className?: string;
|
|
3039
|
+
};
|
|
3040
|
+
declare const IntegrationCard: ({ logo, name, description, status, category, actionLabel, actionVariant, onAction, secondaryLabel, onSecondary, loading, className, }: IntegrationCardProps) => react.JSX.Element;
|
|
3041
|
+
|
|
3042
|
+
type ResetPasswordFormProps = {
|
|
3043
|
+
onSubmit: (email: string) => void | Promise<void>;
|
|
3044
|
+
signInHref?: string;
|
|
3045
|
+
signInLabel?: string;
|
|
3046
|
+
/** Switch to the post-submit confirmation view. Default `false`. */
|
|
3047
|
+
sent?: boolean;
|
|
3048
|
+
/** Email displayed in the `sent` view. Falls back to the form's last value. */
|
|
3049
|
+
sentEmail?: string;
|
|
3050
|
+
loading?: boolean;
|
|
3051
|
+
error?: string;
|
|
3052
|
+
title?: string;
|
|
3053
|
+
description?: string;
|
|
3054
|
+
submitLabel?: string;
|
|
3055
|
+
/** Resend handler in the `sent` view. Hidden if not provided. */
|
|
3056
|
+
onResend?: () => void;
|
|
3057
|
+
resendLabel?: string;
|
|
3058
|
+
className?: string;
|
|
3059
|
+
};
|
|
3060
|
+
declare const ResetPasswordForm: ({ onSubmit, signInHref, signInLabel, sent, sentEmail, loading, error, title, description, submitLabel, onResend, resendLabel, className, }: ResetPasswordFormProps) => react.JSX.Element;
|
|
3061
|
+
|
|
3062
|
+
type SignInFormValues = {
|
|
3063
|
+
email: string;
|
|
3064
|
+
password: string;
|
|
3065
|
+
remember: boolean;
|
|
3066
|
+
};
|
|
3067
|
+
type SignInFormProps = {
|
|
3068
|
+
onSubmit: (values: SignInFormValues) => void | Promise<void>;
|
|
3069
|
+
onForgotPassword?: () => void;
|
|
3070
|
+
/** Sign-up CTA target (router link href). Hidden if not provided. */
|
|
3071
|
+
signUpHref?: string;
|
|
3072
|
+
signUpLabel?: string;
|
|
3073
|
+
title?: string;
|
|
3074
|
+
description?: string;
|
|
3075
|
+
emailLabel?: string;
|
|
3076
|
+
passwordLabel?: string;
|
|
3077
|
+
rememberLabel?: string;
|
|
3078
|
+
submitLabel?: string;
|
|
3079
|
+
forgotLabel?: string;
|
|
3080
|
+
loading?: boolean;
|
|
3081
|
+
error?: string;
|
|
3082
|
+
/** Slot rendered above the form (e.g. social provider buttons). */
|
|
3083
|
+
extraTop?: ReactNode;
|
|
3084
|
+
className?: string;
|
|
3085
|
+
};
|
|
3086
|
+
declare const SignInForm: ({ onSubmit, onForgotPassword, signUpHref, signUpLabel, title, description, emailLabel, passwordLabel, rememberLabel, submitLabel, forgotLabel, loading, error, extraTop, className, }: SignInFormProps) => react.JSX.Element;
|
|
3087
|
+
|
|
3088
|
+
type SignUpFormValues = {
|
|
3089
|
+
firstName: string;
|
|
3090
|
+
lastName: string;
|
|
3091
|
+
email: string;
|
|
3092
|
+
password: string;
|
|
3093
|
+
agreedToTerms: boolean;
|
|
3094
|
+
};
|
|
3095
|
+
type SignUpFormProps = {
|
|
3096
|
+
onSubmit: (values: SignUpFormValues) => void | Promise<void>;
|
|
3097
|
+
signInHref?: string;
|
|
3098
|
+
signInLabel?: string;
|
|
3099
|
+
termsHref?: string;
|
|
3100
|
+
privacyHref?: string;
|
|
3101
|
+
/** Show PasswordPolicyChecker live below the password field. Default `true`. */
|
|
3102
|
+
showPolicy?: boolean;
|
|
3103
|
+
loading?: boolean;
|
|
3104
|
+
error?: string;
|
|
3105
|
+
title?: string;
|
|
3106
|
+
description?: string;
|
|
3107
|
+
submitLabel?: string;
|
|
3108
|
+
/** Slot rendered above the form (e.g. social provider buttons). */
|
|
3109
|
+
extraTop?: ReactNode;
|
|
3110
|
+
className?: string;
|
|
3111
|
+
};
|
|
3112
|
+
declare const SignUpForm: ({ onSubmit, signInHref, signInLabel, termsHref, privacyHref, showPolicy, loading, error, title, description, submitLabel, extraTop, className, }: SignUpFormProps) => react.JSX.Element;
|
|
3113
|
+
|
|
3114
|
+
type SocialProvider = 'google' | 'github' | 'x' | 'facebook' | 'apple' | 'microsoft';
|
|
3115
|
+
type SocialAuthButtonsLayout = 'stacked' | 'grid';
|
|
3116
|
+
type SocialAuthButtonsProps = {
|
|
3117
|
+
providers: SocialProvider[];
|
|
3118
|
+
onProviderClick: (provider: SocialProvider) => void;
|
|
3119
|
+
/** Provider currently loading (shows spinner + disables all buttons). */
|
|
3120
|
+
loading?: SocialProvider | null;
|
|
3121
|
+
/** Render a "OR continue with" divider below the buttons. Default `true`. */
|
|
3122
|
+
divider?: boolean;
|
|
3123
|
+
dividerLabel?: string;
|
|
3124
|
+
/** `stacked` (1 per row) or `grid` (2 cols). Default `stacked`. */
|
|
3125
|
+
layout?: SocialAuthButtonsLayout;
|
|
3126
|
+
/** Customize button label. Default `Continue with {Provider}`. */
|
|
3127
|
+
labelFor?: (provider: SocialProvider) => string;
|
|
3128
|
+
/** Render at the top (above divider) or below (between form & nothing). */
|
|
3129
|
+
position?: 'above' | 'below';
|
|
3130
|
+
className?: string;
|
|
3131
|
+
};
|
|
3132
|
+
declare const SocialAuthButtons: ({ providers, onProviderClick, loading, divider, dividerLabel, layout, labelFor, position, className, }: SocialAuthButtonsProps) => react.JSX.Element | null;
|
|
3083
3133
|
|
|
3084
3134
|
type StickyScrollNavSection = {
|
|
3085
3135
|
id: string;
|
|
@@ -3097,7 +3147,26 @@ type StickyScrollNavProps = {
|
|
|
3097
3147
|
* StickyScrollNav — sticky horizontal nav row that scrolls to in-page
|
|
3098
3148
|
* sections by id. Useful for long template gallery pages and docs.
|
|
3099
3149
|
*/
|
|
3100
|
-
declare const StickyScrollNav: ({ sections, onNavigate, topOffset, className, }: StickyScrollNavProps) =>
|
|
3150
|
+
declare const StickyScrollNav: ({ sections, onNavigate, topOffset, className, }: StickyScrollNavProps) => react.JSX.Element;
|
|
3151
|
+
|
|
3152
|
+
type TwoStepVerificationFormProps = {
|
|
3153
|
+
onSubmit: (code: string) => void | Promise<void>;
|
|
3154
|
+
onResend?: () => void;
|
|
3155
|
+
/** Email/phone where the code was sent — shown in the description. */
|
|
3156
|
+
sentTo?: string;
|
|
3157
|
+
length?: number;
|
|
3158
|
+
loading?: boolean;
|
|
3159
|
+
error?: string;
|
|
3160
|
+
/** Trigger onSubmit automatically when the user fills the last cell. Default `true`. */
|
|
3161
|
+
autoSubmit?: boolean;
|
|
3162
|
+
cancelHref?: string;
|
|
3163
|
+
cancelLabel?: string;
|
|
3164
|
+
title?: string;
|
|
3165
|
+
submitLabel?: string;
|
|
3166
|
+
resendLabel?: string;
|
|
3167
|
+
className?: string;
|
|
3168
|
+
};
|
|
3169
|
+
declare const TwoStepVerificationForm: ({ onSubmit, onResend, sentTo, length, loading, error, autoSubmit, cancelHref, cancelLabel, title, submitLabel, resendLabel, className, }: TwoStepVerificationFormProps) => react.JSX.Element;
|
|
3101
3170
|
|
|
3102
3171
|
type ColorSwatchProps = {
|
|
3103
3172
|
/** Color hex (e.g. `#465fff`). */
|
|
@@ -3113,7 +3182,7 @@ type ColorSwatchProps = {
|
|
|
3113
3182
|
* ColorSwatch — single colour pick button. A filled rectangle with the
|
|
3114
3183
|
* colour, an optional checkmark when active, and a small caption below.
|
|
3115
3184
|
*/
|
|
3116
|
-
declare const ColorSwatch: ({ hex, label, active, onClick, className, }: ColorSwatchProps) =>
|
|
3185
|
+
declare const ColorSwatch: ({ hex, label, active, onClick, className, }: ColorSwatchProps) => react.JSX.Element;
|
|
3117
3186
|
|
|
3118
3187
|
type AccentColor = {
|
|
3119
3188
|
/** Stable identifier (used as React key + value). */
|
|
@@ -3139,7 +3208,7 @@ type AccentPickerProps = {
|
|
|
3139
3208
|
* AccentPicker — grid of `<ColorSwatch>` buttons. Use to let the user
|
|
3140
3209
|
* pick the primary brand colour. Inspired by rackscope's appearance settings.
|
|
3141
3210
|
*/
|
|
3142
|
-
declare const AccentPicker: ({ colors, value, onChange, cols, smCols, className, }: AccentPickerProps) =>
|
|
3211
|
+
declare const AccentPicker: ({ colors, value, onChange, cols, smCols, className, }: AccentPickerProps) => react.JSX.Element;
|
|
3143
3212
|
|
|
3144
3213
|
type PalettePreview = {
|
|
3145
3214
|
/** Page background. */
|
|
@@ -3170,7 +3239,7 @@ type PaletteCardProps = {
|
|
|
3170
3239
|
* of a palette plus its label. Use inside `<PalettePicker>` to let the
|
|
3171
3240
|
* user pick a light/dark theme palette.
|
|
3172
3241
|
*/
|
|
3173
|
-
declare const PaletteCard: ({ meta, active, onClick, className }: PaletteCardProps) =>
|
|
3242
|
+
declare const PaletteCard: ({ meta, active, onClick, className }: PaletteCardProps) => react.JSX.Element;
|
|
3174
3243
|
|
|
3175
3244
|
type PalettePickerProps = {
|
|
3176
3245
|
palettes: PaletteMeta[];
|
|
@@ -3184,7 +3253,7 @@ type PalettePickerProps = {
|
|
|
3184
3253
|
* PalettePicker — responsive grid of `<PaletteCard>` previews. Use one for
|
|
3185
3254
|
* the light theme set and another for the dark theme set.
|
|
3186
3255
|
*/
|
|
3187
|
-
declare const PalettePicker: ({ palettes, value, onChange, cols, className, }: PalettePickerProps) =>
|
|
3256
|
+
declare const PalettePicker: ({ palettes, value, onChange, cols, className, }: PalettePickerProps) => react.JSX.Element;
|
|
3188
3257
|
|
|
3189
3258
|
type OptionCardProps = {
|
|
3190
3259
|
/** Stable identifier (used as React key + value). */
|
|
@@ -3204,7 +3273,7 @@ type OptionCardProps = {
|
|
|
3204
3273
|
* optional description. Use to build pickers for icon styles, view modes,
|
|
3205
3274
|
* layout variants, etc.
|
|
3206
3275
|
*/
|
|
3207
|
-
declare const OptionCard: ({ label, desc, preview, active, onClick, className, }: OptionCardProps) =>
|
|
3276
|
+
declare const OptionCard: ({ label, desc, preview, active, onClick, className, }: OptionCardProps) => react.JSX.Element;
|
|
3208
3277
|
|
|
3209
3278
|
type OptionItem = Pick<OptionCardProps, 'id' | 'label' | 'desc' | 'preview'>;
|
|
3210
3279
|
type OptionPickerProps = {
|
|
@@ -3219,7 +3288,7 @@ type OptionPickerProps = {
|
|
|
3219
3288
|
* OptionPicker — responsive grid of `<OptionCard>` previews. Use for
|
|
3220
3289
|
* generic single-select pickers (icon styles, view modes, density, etc.).
|
|
3221
3290
|
*/
|
|
3222
|
-
declare const OptionPicker: ({ options, value, onChange, cols, className, }: OptionPickerProps) =>
|
|
3291
|
+
declare const OptionPicker: ({ options, value, onChange, cols, className, }: OptionPickerProps) => react.JSX.Element;
|
|
3223
3292
|
|
|
3224
3293
|
type BlockquoteVariant = 'plain' | 'solid' | 'icon' | 'testimonial';
|
|
3225
3294
|
type BlockquoteSize = 'sm' | 'md' | 'lg';
|
|
@@ -3244,7 +3313,7 @@ type BlockquoteProps = {
|
|
|
3244
3313
|
authorAvatar?: string;
|
|
3245
3314
|
className?: string;
|
|
3246
3315
|
};
|
|
3247
|
-
declare const Blockquote: ({ children, variant, size, align, author, role, authorAvatar, className, }: BlockquoteProps) =>
|
|
3316
|
+
declare const Blockquote: ({ children, variant, size, align, author, role, authorAvatar, className, }: BlockquoteProps) => react.JSX.Element;
|
|
3248
3317
|
|
|
3249
3318
|
type KbdSize = 'sm' | 'md';
|
|
3250
3319
|
type KbdProps = {
|
|
@@ -3262,7 +3331,7 @@ type KbdProps = {
|
|
|
3262
3331
|
* The component intentionally stays passive — no state, no overlay — so it can
|
|
3263
3332
|
* sit inside tooltips, help screens, paragraphs and badges without coupling.
|
|
3264
3333
|
*/
|
|
3265
|
-
declare const Kbd: ({ children, size, className }: KbdProps) =>
|
|
3334
|
+
declare const Kbd: ({ children, size, className }: KbdProps) => react.JSX.Element;
|
|
3266
3335
|
|
|
3267
3336
|
type FigureAlign = 'left' | 'center' | 'right';
|
|
3268
3337
|
type FigureSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
@@ -3287,6 +3356,6 @@ type FigureProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
|
|
|
3287
3356
|
* common visual knobs (alignment, size, rounding, shadow) without re-doing
|
|
3288
3357
|
* the Tailwind tetris each time.
|
|
3289
3358
|
*/
|
|
3290
|
-
declare const Figure: ({ src, alt, caption, align, size, radius, shadow, className, wrapperClassName, ...rest }: FigureProps) =>
|
|
3359
|
+
declare const Figure: ({ src, alt, caption, align, size, radius, shadow, className, wrapperClassName, ...rest }: FigureProps) => react.JSX.Element;
|
|
3291
3360
|
|
|
3292
|
-
export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosToasterProps, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageCard, type PageCardProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule,
|
|
3361
|
+
export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosToasterProps, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageCard, type PageCardProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule, Popover, type PopoverContentProps, type PopoverPosition, type PopoverProps, type PopoverTriggerProps, ProgressBar, type ProgressBarIntent, type ProgressBarLabel, type ProgressBarProps, type ProgressBarSize, REFRESH_OPTIONS, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, RefreshButton, type RefreshButtonProps, type RefreshOption, ResetPasswordForm, type ResetPasswordFormProps, Ribbon, type RibbonIntent, type RibbonPosition, type RibbonProps, type RibbonShape, RowActionButton, type RowActionButtonProps, STATUS_COLOR, STATUS_PILL, type SaveState, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionLabel, type SectionLabelProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectInput, type SelectInputOption, type SelectInputProps, type SelectOption, type SelectProps, Shell, type ShellProps, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, SignInForm, type SignInFormProps, type SignInFormValues, SignUpForm, type SignUpFormProps, type SignUpFormValues, SimpleRow, type SimpleRowProps, Sk, type SkProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, SocialAuthButtons, type SocialAuthButtonsLayout, type SocialAuthButtonsProps, type SocialProvider, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, StackedList, StackedListInCard, type StackedListInCardProps, type StackedListItemProps, type StackedListProps, StatefulSaveButton, type StatefulSaveButtonProps, StatusBadge, type StatusBadgeProps, StatusRow, type StatusRowProps, type StepStatus, Stepper, StepperInput, type StepperInputProps, type StepperOrientation, type StepperProps, StepperRoot, type StepperSize, type StepperStepProps, type StepperVariant, StickyScrollNav, type StickyScrollNavProps, type StickyScrollNavSection, type TabProps, Tabs, type TabsOrientation, type TabsProps, Textarea, type TextareaProps, type TextareaResize, type ThemeMode, ThemeToggle, type ThemeToggleProps, type ThemeToggleSize, ThemeToggleTri, type ThemeToggleTriProps, type ThemeToggleTriSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineTone, type TimelineVariant, Toaster, Toggle, type ToggleProps, Tooltip, TooltipHelp, type TooltipPosition, type TooltipProps, type TooltipVariant, Topbar, type TopbarProps, TwoStepVerificationForm, type TwoStepVerificationFormProps, UnsavedIndicator, type UnsavedIndicatorProps, UserMenu, type UserMenuContentProps, type UserMenuHeaderProps, type UserMenuItemProps, type UserMenuItemVariant, type UserMenuProps, type UserMenuTriggerProps, VerticalNavigation, type VerticalNavigationItemProps, type VerticalNavigationProps, type VerticalNavigationSectionProps, VideoEmbed, type VideoEmbedAspect, type VideoEmbedProps, ZoomBar, type ZoomBarProps, defaultPasswordRules, useAutoRefresh };
|