@kjaniec-dev/ui 0.7.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4231 -158
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +760 -21
- package/dist/index.d.ts +760 -21
- package/dist/index.js +4159 -158
- package/dist/index.js.map +1 -1
- package/package.json +60 -20
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,6 @@ import { ClassValue } from 'clsx';
|
|
|
2
2
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
5
|
|
|
7
6
|
/**
|
|
8
7
|
* Merge class names with Tailwind-aware conflict resolution.
|
|
@@ -58,6 +57,47 @@ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
58
57
|
}
|
|
59
58
|
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
|
60
59
|
|
|
60
|
+
type ProgressRingSize = "sm" | "md" | "lg" | "xl";
|
|
61
|
+
type ProgressRingTone = "primary" | "secondary" | "success" | "warning" | "danger" | "info";
|
|
62
|
+
interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
63
|
+
/** Current progress value. Defaults to 0. */
|
|
64
|
+
value?: number;
|
|
65
|
+
/** Minimum progress value. Defaults to 0. */
|
|
66
|
+
min?: number;
|
|
67
|
+
/** Maximum progress value. Defaults to 100. */
|
|
68
|
+
max?: number;
|
|
69
|
+
/** Preset size of the ring. Defaults to "md". */
|
|
70
|
+
size?: ProgressRingSize;
|
|
71
|
+
/** Override stroke thickness (in px). */
|
|
72
|
+
strokeWidth?: number;
|
|
73
|
+
/** Color tone of the progress indicator. Defaults to "primary". */
|
|
74
|
+
tone?: ProgressRingTone;
|
|
75
|
+
/** Whether to show the percentage text inside the ring center if no children are provided. Defaults to false. */
|
|
76
|
+
showValue?: boolean;
|
|
77
|
+
/** Optional formatter for the center percentage display. */
|
|
78
|
+
formatValue?: (value: number, percentage: number) => React.ReactNode;
|
|
79
|
+
/** Additional CSS class for the background track circle. */
|
|
80
|
+
trackClassName?: string;
|
|
81
|
+
/** Additional CSS class for the progress indicator circle. */
|
|
82
|
+
indicatorClassName?: string;
|
|
83
|
+
/** Custom center content. */
|
|
84
|
+
children?: React.ReactNode;
|
|
85
|
+
}
|
|
86
|
+
declare const ProgressRing: React.ForwardRefExoticComponent<ProgressRingProps & React.RefAttributes<HTMLDivElement>>;
|
|
87
|
+
interface ProgressRingFieldProps extends ProgressRingProps {
|
|
88
|
+
/** Field label text. */
|
|
89
|
+
label: string;
|
|
90
|
+
/** Helper hint text displayed beneath the control. */
|
|
91
|
+
hint?: string;
|
|
92
|
+
/** Error message displayed beneath the control. */
|
|
93
|
+
error?: string;
|
|
94
|
+
/** Renders a required indicator (*). */
|
|
95
|
+
required?: boolean;
|
|
96
|
+
/** Class name for the outer field wrapper div. */
|
|
97
|
+
fieldClassName?: string;
|
|
98
|
+
}
|
|
99
|
+
declare const ProgressRingField: React.ForwardRefExoticComponent<ProgressRingFieldProps & React.RefAttributes<HTMLDivElement>>;
|
|
100
|
+
|
|
61
101
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
62
102
|
/** Visual error state (red border + ring). */
|
|
63
103
|
error?: boolean;
|
|
@@ -143,7 +183,22 @@ interface SegmentedProps<T extends string> {
|
|
|
143
183
|
"aria-label"?: string;
|
|
144
184
|
}
|
|
145
185
|
/** Segmented control / single-select toggle group. Controlled. */
|
|
146
|
-
declare function Segmented<T extends string>({ options, value, onChange, className, ...props }: SegmentedProps<T>):
|
|
186
|
+
declare function Segmented<T extends string>({ options, value, onChange, className, ...props }: SegmentedProps<T>): React.JSX.Element;
|
|
187
|
+
|
|
188
|
+
interface ToggleGroupOption<T extends string> {
|
|
189
|
+
value: T;
|
|
190
|
+
label: React.ReactNode;
|
|
191
|
+
}
|
|
192
|
+
interface ToggleGroupProps<T extends string> {
|
|
193
|
+
options: ToggleGroupOption<T>[];
|
|
194
|
+
value: T[];
|
|
195
|
+
onChange: (value: T[]) => void;
|
|
196
|
+
disabled?: boolean;
|
|
197
|
+
className?: string;
|
|
198
|
+
"aria-label": string;
|
|
199
|
+
}
|
|
200
|
+
/** Multi-select toggle row. Always controlled — each button's pressed state is independent. */
|
|
201
|
+
declare function ToggleGroup<T extends string>({ options, value, onChange, disabled, className, ...props }: ToggleGroupProps<T>): React.JSX.Element;
|
|
147
202
|
|
|
148
203
|
interface CardProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "as"> {
|
|
149
204
|
as?: React.ElementType;
|
|
@@ -191,7 +246,7 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
191
246
|
defaultValue?: string;
|
|
192
247
|
onValueChange?: (value: string) => void;
|
|
193
248
|
}
|
|
194
|
-
declare function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps):
|
|
249
|
+
declare function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps): React.JSX.Element;
|
|
195
250
|
declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
196
251
|
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
197
252
|
value: string;
|
|
@@ -207,7 +262,7 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
207
262
|
type?: "single" | "multiple";
|
|
208
263
|
defaultValue?: string[];
|
|
209
264
|
}
|
|
210
|
-
declare function Accordion({ type, defaultValue, className, children, ...props }: AccordionProps):
|
|
265
|
+
declare function Accordion({ type, defaultValue, className, children, ...props }: AccordionProps): React.JSX.Element;
|
|
211
266
|
interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
212
267
|
value: string;
|
|
213
268
|
}
|
|
@@ -218,14 +273,14 @@ declare const AccordionContent: React.ForwardRefExoticComponent<React.HTMLAttrib
|
|
|
218
273
|
declare function DropdownMenu({ children, className }: {
|
|
219
274
|
children: React.ReactNode;
|
|
220
275
|
className?: string;
|
|
221
|
-
}):
|
|
276
|
+
}): React.JSX.Element;
|
|
222
277
|
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
223
278
|
asChild?: boolean;
|
|
224
279
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
225
280
|
interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
226
281
|
align?: "start" | "end";
|
|
227
282
|
}
|
|
228
|
-
declare function DropdownMenuContent({ className, align, children, ...props }: DropdownMenuContentProps):
|
|
283
|
+
declare function DropdownMenuContent({ className, align, children, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
|
|
229
284
|
interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
230
285
|
danger?: boolean;
|
|
231
286
|
icon?: React.ReactNode;
|
|
@@ -233,7 +288,7 @@ interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonEle
|
|
|
233
288
|
declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
234
289
|
declare function DropdownMenuSeparator({ className }: {
|
|
235
290
|
className?: string;
|
|
236
|
-
}):
|
|
291
|
+
}): React.JSX.Element;
|
|
237
292
|
|
|
238
293
|
declare const Breadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
239
294
|
interface BreadcrumbItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
@@ -241,7 +296,7 @@ interface BreadcrumbItemProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
|
|
|
241
296
|
current?: boolean;
|
|
242
297
|
}
|
|
243
298
|
declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
244
|
-
declare function BreadcrumbSeparator():
|
|
299
|
+
declare function BreadcrumbSeparator(): React.JSX.Element;
|
|
245
300
|
|
|
246
301
|
interface PaginationProps {
|
|
247
302
|
page: number;
|
|
@@ -251,7 +306,7 @@ interface PaginationProps {
|
|
|
251
306
|
siblingCount?: number;
|
|
252
307
|
className?: string;
|
|
253
308
|
}
|
|
254
|
-
declare function Pagination({ page, pageCount, onPageChange, className }: PaginationProps):
|
|
309
|
+
declare function Pagination({ page, pageCount, onPageChange, className }: PaginationProps): React.JSX.Element;
|
|
255
310
|
|
|
256
311
|
interface BottomNavigationItem {
|
|
257
312
|
id: string;
|
|
@@ -294,7 +349,7 @@ interface TooltipProps {
|
|
|
294
349
|
className?: string;
|
|
295
350
|
}
|
|
296
351
|
/** CSS-only hover/focus tooltip positioned above the trigger. */
|
|
297
|
-
declare function Tooltip({ content, children, className }: TooltipProps):
|
|
352
|
+
declare function Tooltip({ content, children, className }: TooltipProps): React.JSX.Element;
|
|
298
353
|
|
|
299
354
|
interface ModalProps {
|
|
300
355
|
open: boolean;
|
|
@@ -306,10 +361,10 @@ interface ModalProps {
|
|
|
306
361
|
showClose?: boolean;
|
|
307
362
|
}
|
|
308
363
|
/** Centered overlay dialog. Closes on backdrop click and Escape. Includes focus trap and restore. */
|
|
309
|
-
declare function Modal({ open, onClose, children, width, className, showClose }: ModalProps):
|
|
310
|
-
declare function ModalTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>):
|
|
311
|
-
declare function ModalDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>):
|
|
312
|
-
declare function ModalActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>):
|
|
364
|
+
declare function Modal({ open, onClose, children, width, className, showClose }: ModalProps): React.JSX.Element;
|
|
365
|
+
declare function ModalTitle({ className, id, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
|
|
366
|
+
declare function ModalDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
|
|
367
|
+
declare function ModalActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
313
368
|
|
|
314
369
|
type ToastTone = "default" | "success" | "danger";
|
|
315
370
|
interface ToastOptions {
|
|
@@ -324,7 +379,7 @@ interface ToastCtx {
|
|
|
324
379
|
declare function useToast(): ToastCtx;
|
|
325
380
|
declare function ToastProvider({ children }: {
|
|
326
381
|
children: React.ReactNode;
|
|
327
|
-
}):
|
|
382
|
+
}): React.JSX.Element;
|
|
328
383
|
|
|
329
384
|
interface PageHeaderProps {
|
|
330
385
|
eyebrow?: string;
|
|
@@ -334,6 +389,34 @@ interface PageHeaderProps {
|
|
|
334
389
|
}
|
|
335
390
|
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
336
391
|
|
|
392
|
+
type SectionHeaderAlign = "left" | "center";
|
|
393
|
+
type SectionHeaderHeadingLevel = "h2" | "h3" | "h4";
|
|
394
|
+
interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
395
|
+
kicker?: React.ReactNode;
|
|
396
|
+
title?: React.ReactNode;
|
|
397
|
+
description?: React.ReactNode;
|
|
398
|
+
actions?: React.ReactNode;
|
|
399
|
+
align?: SectionHeaderAlign;
|
|
400
|
+
headingLevel?: SectionHeaderHeadingLevel;
|
|
401
|
+
divider?: boolean;
|
|
402
|
+
}
|
|
403
|
+
type SectionHeaderKickerProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
404
|
+
interface SectionHeaderTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
405
|
+
as?: SectionHeaderHeadingLevel;
|
|
406
|
+
}
|
|
407
|
+
type SectionHeaderDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
408
|
+
type SectionHeaderActionsProps = React.HTMLAttributes<HTMLDivElement>;
|
|
409
|
+
declare const SectionHeaderKicker: React.ForwardRefExoticComponent<SectionHeaderKickerProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
410
|
+
declare const SectionHeaderTitle: React.ForwardRefExoticComponent<SectionHeaderTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
411
|
+
declare const SectionHeaderDescription: React.ForwardRefExoticComponent<SectionHeaderDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
412
|
+
declare const SectionHeaderActions: React.ForwardRefExoticComponent<SectionHeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
413
|
+
declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>> & {
|
|
414
|
+
Kicker: typeof SectionHeaderKicker;
|
|
415
|
+
Title: typeof SectionHeaderTitle;
|
|
416
|
+
Description: typeof SectionHeaderDescription;
|
|
417
|
+
Actions: typeof SectionHeaderActions;
|
|
418
|
+
};
|
|
419
|
+
|
|
337
420
|
interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
338
421
|
icon?: React.ReactNode;
|
|
339
422
|
title: string;
|
|
@@ -378,7 +461,7 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
378
461
|
sortDirection?: "asc" | "desc";
|
|
379
462
|
onSort?: (sortKey: string, direction: "asc" | "desc") => void;
|
|
380
463
|
}
|
|
381
|
-
declare function DataTable<T>({ className, columns, data, loading, error, emptyTitle, emptyDescription, emptyAction, getRowKey, onRowClick, toolbar, pagination, selectedRows, onSelectionChange, sortBy, sortDirection, onSort, ...props }: DataTableProps<T>):
|
|
464
|
+
declare function DataTable<T>({ className, columns, data, loading, error, emptyTitle, emptyDescription, emptyAction, getRowKey, onRowClick, toolbar, pagination, selectedRows, onSelectionChange, sortBy, sortDirection, onSort, ...props }: DataTableProps<T>): React.JSX.Element;
|
|
382
465
|
declare namespace DataTable {
|
|
383
466
|
var displayName: string;
|
|
384
467
|
}
|
|
@@ -458,7 +541,7 @@ interface ConfirmDialogProps {
|
|
|
458
541
|
tone?: "danger" | "primary" | "success";
|
|
459
542
|
loading?: boolean;
|
|
460
543
|
}
|
|
461
|
-
declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, tone, loading, }: ConfirmDialogProps):
|
|
544
|
+
declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, tone, loading, }: ConfirmDialogProps): React.JSX.Element;
|
|
462
545
|
declare namespace ConfirmDialog {
|
|
463
546
|
var displayName: string;
|
|
464
547
|
}
|
|
@@ -472,7 +555,7 @@ interface DrawerProps {
|
|
|
472
555
|
width?: string;
|
|
473
556
|
side?: "right" | "left";
|
|
474
557
|
}
|
|
475
|
-
declare function Drawer({ open, onClose, children, title, description, width, side, }: DrawerProps):
|
|
558
|
+
declare function Drawer({ open, onClose, children, title, description, width, side, }: DrawerProps): React.JSX.Element;
|
|
476
559
|
declare namespace Drawer {
|
|
477
560
|
var displayName: string;
|
|
478
561
|
}
|
|
@@ -492,7 +575,7 @@ interface CommandPaletteProps {
|
|
|
492
575
|
items: CommandPaletteItem[];
|
|
493
576
|
placeholder?: string;
|
|
494
577
|
}
|
|
495
|
-
declare function CommandPalette({ open, onClose, items, placeholder }: CommandPaletteProps):
|
|
578
|
+
declare function CommandPalette({ open, onClose, items, placeholder }: CommandPaletteProps): React.JSX.Element | null;
|
|
496
579
|
declare namespace CommandPalette {
|
|
497
580
|
var displayName: string;
|
|
498
581
|
}
|
|
@@ -514,9 +597,665 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
514
597
|
groups: SidebarNavGroup[];
|
|
515
598
|
currentHref?: string;
|
|
516
599
|
}
|
|
517
|
-
declare function SidebarNav({ className, groups, currentHref, ...props }: SidebarNavProps):
|
|
600
|
+
declare function SidebarNav({ className, groups, currentHref, ...props }: SidebarNavProps): React.JSX.Element;
|
|
518
601
|
declare namespace SidebarNav {
|
|
519
602
|
var displayName: string;
|
|
520
603
|
}
|
|
521
604
|
|
|
522
|
-
|
|
605
|
+
declare const fabVariants: (props?: ({
|
|
606
|
+
variant?: "primary" | "secondary" | "outline" | "danger" | null | undefined;
|
|
607
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
608
|
+
position?: "none" | "bottom-right" | "bottom-left" | "bottom-center" | null | undefined;
|
|
609
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
610
|
+
interface FabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof fabVariants> {
|
|
611
|
+
/** Icon rendered inside the button. */
|
|
612
|
+
icon: React.ReactNode;
|
|
613
|
+
/** Text label for accessibility (aria-label). */
|
|
614
|
+
label: string;
|
|
615
|
+
/** If true, the FAB will only be visible on mobile screens (< 768px). */
|
|
616
|
+
mobileOnly?: boolean;
|
|
617
|
+
/** Shows a spinner and disables interaction. */
|
|
618
|
+
loading?: boolean;
|
|
619
|
+
}
|
|
620
|
+
declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
621
|
+
|
|
622
|
+
interface BottomSheetProps {
|
|
623
|
+
open: boolean;
|
|
624
|
+
onClose: () => void;
|
|
625
|
+
children: React.ReactNode;
|
|
626
|
+
maxWidth?: "max-w-sm" | "max-w-md" | "max-w-lg" | "max-w-xl" | "max-w-2xl";
|
|
627
|
+
className?: string;
|
|
628
|
+
showClose?: boolean;
|
|
629
|
+
}
|
|
630
|
+
declare function BottomSheet({ open, onClose, children, maxWidth, className, showClose, }: BottomSheetProps): React.JSX.Element | null;
|
|
631
|
+
declare function BottomSheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
632
|
+
declare function BottomSheetTitle({ className, id, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
|
|
633
|
+
declare function BottomSheetDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
|
|
634
|
+
declare function BottomSheetContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
635
|
+
declare function BottomSheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
636
|
+
|
|
637
|
+
declare const kbdVariants: (props?: ({
|
|
638
|
+
size?: "sm" | "md" | null | undefined;
|
|
639
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
640
|
+
interface KbdProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof kbdVariants> {
|
|
641
|
+
/** Render one <kbd> chip per key (separated by a small gap); children are ignored. */
|
|
642
|
+
keys?: string[];
|
|
643
|
+
}
|
|
644
|
+
declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
|
|
645
|
+
|
|
646
|
+
interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
647
|
+
/** The snippet text to display. */
|
|
648
|
+
code: string;
|
|
649
|
+
/** Language label shown in the header when no filename is set (e.g. "tsx"). */
|
|
650
|
+
language?: string;
|
|
651
|
+
/** Optional filename label shown in the header; takes precedence over language. */
|
|
652
|
+
filename?: string;
|
|
653
|
+
/** Show the copy-to-clipboard button. */
|
|
654
|
+
copyable?: boolean;
|
|
655
|
+
/** Max height in pixels; content scrolls vertically beyond it. */
|
|
656
|
+
maxHeight?: number;
|
|
657
|
+
}
|
|
658
|
+
declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
|
|
659
|
+
|
|
660
|
+
interface SeparatorProps {
|
|
661
|
+
orientation?: "horizontal" | "vertical";
|
|
662
|
+
/** Purely visual by default (role="none", hidden from a11y tree). Set false for a semantically meaningful divider. */
|
|
663
|
+
decorative?: boolean;
|
|
664
|
+
className?: string;
|
|
665
|
+
}
|
|
666
|
+
/** Thin layout divider. Decorative by default; pass decorative={false} for a semantic role="separator". */
|
|
667
|
+
declare function Separator({ orientation, decorative, className }: SeparatorProps): React.JSX.Element;
|
|
668
|
+
|
|
669
|
+
interface PopoverProps {
|
|
670
|
+
/** Trigger and content elements. */
|
|
671
|
+
children: React.ReactNode;
|
|
672
|
+
/** Additional classes for the positioning wrapper. */
|
|
673
|
+
className?: string;
|
|
674
|
+
/** Controlled open state. Omit for uncontrolled behavior. */
|
|
675
|
+
open?: boolean;
|
|
676
|
+
/** Called whenever the open state should change. */
|
|
677
|
+
onOpenChange?: (open: boolean) => void;
|
|
678
|
+
}
|
|
679
|
+
declare function Popover({ children, className, open: openProp, onOpenChange }: PopoverProps): React.JSX.Element;
|
|
680
|
+
declare const PopoverTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
681
|
+
asChild?: boolean;
|
|
682
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
683
|
+
interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
684
|
+
/** Which side of the trigger the panel opens on. */
|
|
685
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
686
|
+
/** Alignment along the chosen side. */
|
|
687
|
+
align?: "start" | "center" | "end";
|
|
688
|
+
}
|
|
689
|
+
declare function PopoverContent({ className, side, align, children, ...props }: PopoverContentProps): React.JSX.Element | null;
|
|
690
|
+
|
|
691
|
+
interface ComboboxOption {
|
|
692
|
+
value: string;
|
|
693
|
+
label: string;
|
|
694
|
+
disabled?: boolean;
|
|
695
|
+
}
|
|
696
|
+
interface ComboboxBaseProps {
|
|
697
|
+
options: ComboboxOption[];
|
|
698
|
+
/** Trigger text when nothing is selected. Default "Select…". */
|
|
699
|
+
placeholder?: string;
|
|
700
|
+
/** Search input placeholder inside the popup. Default "Search…". */
|
|
701
|
+
searchPlaceholder?: string;
|
|
702
|
+
/** Shown when the filter matches no options. Default "No results". */
|
|
703
|
+
emptyMessage?: string;
|
|
704
|
+
disabled?: boolean;
|
|
705
|
+
/** Visual error state (red border + aria-invalid on the trigger). */
|
|
706
|
+
error?: boolean;
|
|
707
|
+
/** Marks the trigger aria-required (buttons have no native `required` attribute). */
|
|
708
|
+
required?: boolean;
|
|
709
|
+
className?: string;
|
|
710
|
+
id?: string;
|
|
711
|
+
name?: string;
|
|
712
|
+
"aria-describedby"?: string;
|
|
713
|
+
}
|
|
714
|
+
type ComboboxProps = (ComboboxBaseProps & {
|
|
715
|
+
multiple?: false;
|
|
716
|
+
value?: string;
|
|
717
|
+
defaultValue?: string;
|
|
718
|
+
onChange?: (value: string) => void;
|
|
719
|
+
}) | (ComboboxBaseProps & {
|
|
720
|
+
multiple: true;
|
|
721
|
+
value?: string[];
|
|
722
|
+
defaultValue?: string[];
|
|
723
|
+
onChange?: (value: string[]) => void;
|
|
724
|
+
});
|
|
725
|
+
declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
726
|
+
type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
|
|
727
|
+
type ComboboxFieldProps = DistributiveOmit<ComboboxProps, "error"> & {
|
|
728
|
+
label: string;
|
|
729
|
+
hint?: string;
|
|
730
|
+
error?: string;
|
|
731
|
+
required?: boolean;
|
|
732
|
+
};
|
|
733
|
+
declare const ComboboxField: React.ForwardRefExoticComponent<ComboboxFieldProps & React.RefAttributes<HTMLButtonElement>>;
|
|
734
|
+
|
|
735
|
+
interface CalendarProps {
|
|
736
|
+
value?: Date;
|
|
737
|
+
defaultValue?: Date;
|
|
738
|
+
onChange?: (date: Date) => void;
|
|
739
|
+
/** Controlled displayed month. Omit for uncontrolled behavior. */
|
|
740
|
+
month?: Date;
|
|
741
|
+
/** Initial displayed month when uncontrolled. Defaults to `value` ?? today. */
|
|
742
|
+
defaultMonth?: Date;
|
|
743
|
+
onMonthChange?: (month: Date) => void;
|
|
744
|
+
min?: Date;
|
|
745
|
+
max?: Date;
|
|
746
|
+
disabledDates?: (date: Date) => boolean;
|
|
747
|
+
className?: string;
|
|
748
|
+
}
|
|
749
|
+
declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
750
|
+
|
|
751
|
+
interface DatePickerProps {
|
|
752
|
+
value?: Date;
|
|
753
|
+
defaultValue?: Date;
|
|
754
|
+
onChange?: (date: Date) => void;
|
|
755
|
+
min?: Date;
|
|
756
|
+
max?: Date;
|
|
757
|
+
disabledDates?: (date: Date) => boolean;
|
|
758
|
+
/** Trigger text when nothing is selected. Default "Pick a date…". */
|
|
759
|
+
placeholder?: string;
|
|
760
|
+
disabled?: boolean;
|
|
761
|
+
/** Visual error state (red border + aria-invalid on the trigger). */
|
|
762
|
+
error?: boolean;
|
|
763
|
+
/** Marks the trigger aria-required (buttons have no native `required` attribute). */
|
|
764
|
+
required?: boolean;
|
|
765
|
+
className?: string;
|
|
766
|
+
id?: string;
|
|
767
|
+
name?: string;
|
|
768
|
+
"aria-describedby"?: string;
|
|
769
|
+
}
|
|
770
|
+
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
771
|
+
interface DatePickerFieldProps extends Omit<DatePickerProps, "error"> {
|
|
772
|
+
label: string;
|
|
773
|
+
hint?: string;
|
|
774
|
+
error?: string;
|
|
775
|
+
}
|
|
776
|
+
declare const DatePickerField: React.ForwardRefExoticComponent<DatePickerFieldProps & React.RefAttributes<HTMLButtonElement>>;
|
|
777
|
+
|
|
778
|
+
interface DateRange {
|
|
779
|
+
start?: Date;
|
|
780
|
+
end?: Date;
|
|
781
|
+
}
|
|
782
|
+
interface RangeCalendarProps {
|
|
783
|
+
value?: DateRange;
|
|
784
|
+
defaultValue?: DateRange;
|
|
785
|
+
onChange?: (range: DateRange) => void;
|
|
786
|
+
/** Controlled left-month. The right month is always this + 1 (locked navigation). */
|
|
787
|
+
month?: Date;
|
|
788
|
+
defaultMonth?: Date;
|
|
789
|
+
onMonthChange?: (month: Date) => void;
|
|
790
|
+
min?: Date;
|
|
791
|
+
max?: Date;
|
|
792
|
+
disabledDates?: (date: Date) => boolean;
|
|
793
|
+
className?: string;
|
|
794
|
+
}
|
|
795
|
+
declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
796
|
+
|
|
797
|
+
interface DateRangePickerProps {
|
|
798
|
+
value?: DateRange;
|
|
799
|
+
defaultValue?: DateRange;
|
|
800
|
+
onChange?: (range: DateRange) => void;
|
|
801
|
+
min?: Date;
|
|
802
|
+
max?: Date;
|
|
803
|
+
disabledDates?: (date: Date) => boolean;
|
|
804
|
+
/** Trigger text when nothing is selected. Default "Pick a date range…". */
|
|
805
|
+
placeholder?: string;
|
|
806
|
+
disabled?: boolean;
|
|
807
|
+
/** Visual error state (red border + aria-invalid on the trigger). */
|
|
808
|
+
error?: boolean;
|
|
809
|
+
/** Marks the trigger aria-required (buttons have no native `required` attribute). */
|
|
810
|
+
required?: boolean;
|
|
811
|
+
className?: string;
|
|
812
|
+
id?: string;
|
|
813
|
+
name?: string;
|
|
814
|
+
"aria-describedby"?: string;
|
|
815
|
+
}
|
|
816
|
+
declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
817
|
+
interface DateRangePickerFieldProps extends Omit<DateRangePickerProps, "error"> {
|
|
818
|
+
label: string;
|
|
819
|
+
hint?: string;
|
|
820
|
+
error?: string;
|
|
821
|
+
}
|
|
822
|
+
declare const DateRangePickerField: React.ForwardRefExoticComponent<DateRangePickerFieldProps & React.RefAttributes<HTMLButtonElement>>;
|
|
823
|
+
|
|
824
|
+
interface DropzoneProps {
|
|
825
|
+
onFiles: (files: File[]) => void;
|
|
826
|
+
/** Native picker filter hint. Real enforcement lives in FileUpload's validation. */
|
|
827
|
+
accept?: string;
|
|
828
|
+
multiple?: boolean;
|
|
829
|
+
disabled?: boolean;
|
|
830
|
+
className?: string;
|
|
831
|
+
/** Overrides the default drop-region content. */
|
|
832
|
+
children?: React.ReactNode;
|
|
833
|
+
id?: string;
|
|
834
|
+
"aria-describedby"?: string;
|
|
835
|
+
"aria-invalid"?: boolean | "true" | "false";
|
|
836
|
+
"aria-required"?: boolean;
|
|
837
|
+
}
|
|
838
|
+
declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLButtonElement>>;
|
|
839
|
+
|
|
840
|
+
type UploadStatus = "pending" | "uploading" | "success" | "error";
|
|
841
|
+
interface UploadItem {
|
|
842
|
+
id: string;
|
|
843
|
+
file: File;
|
|
844
|
+
/** Defaults to "pending" when unset. Drives the row's rendering. */
|
|
845
|
+
status?: UploadStatus;
|
|
846
|
+
/** 0–100. Shown as a Progress bar when status === "uploading". */
|
|
847
|
+
progress?: number;
|
|
848
|
+
/** Shown (danger tone) when status === "error". */
|
|
849
|
+
error?: string;
|
|
850
|
+
}
|
|
851
|
+
interface FileRejection {
|
|
852
|
+
file: File;
|
|
853
|
+
reason: "type" | "size" | "count";
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
interface FileUploadProps {
|
|
857
|
+
value?: UploadItem[];
|
|
858
|
+
defaultValue?: UploadItem[];
|
|
859
|
+
onChange?: (items: UploadItem[]) => void;
|
|
860
|
+
/** Called with files rejected by validation on a given drop/selection. */
|
|
861
|
+
onReject?: (rejections: FileRejection[]) => void;
|
|
862
|
+
accept?: string;
|
|
863
|
+
maxSize?: number;
|
|
864
|
+
maxFiles?: number;
|
|
865
|
+
multiple?: boolean;
|
|
866
|
+
disabled?: boolean;
|
|
867
|
+
/** Visual error state (danger border + aria-invalid on the dropzone). */
|
|
868
|
+
error?: boolean;
|
|
869
|
+
/** aria-required on the dropzone. */
|
|
870
|
+
required?: boolean;
|
|
871
|
+
className?: string;
|
|
872
|
+
id?: string;
|
|
873
|
+
"aria-describedby"?: string;
|
|
874
|
+
}
|
|
875
|
+
declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLButtonElement>>;
|
|
876
|
+
interface FileUploadFieldProps extends Omit<FileUploadProps, "error"> {
|
|
877
|
+
label: string;
|
|
878
|
+
hint?: string;
|
|
879
|
+
error?: string;
|
|
880
|
+
}
|
|
881
|
+
declare const FileUploadField: React.ForwardRefExoticComponent<FileUploadFieldProps & React.RefAttributes<HTMLButtonElement>>;
|
|
882
|
+
|
|
883
|
+
type TimelineAlign = "left" | "right" | "alternate";
|
|
884
|
+
type TimelineDotVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
885
|
+
type TimelineDotSize = "sm" | "md" | "lg";
|
|
886
|
+
interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
887
|
+
align?: TimelineAlign;
|
|
888
|
+
}
|
|
889
|
+
declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;
|
|
890
|
+
interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
891
|
+
index?: number;
|
|
892
|
+
}
|
|
893
|
+
declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
894
|
+
interface TimelineSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
895
|
+
isEven?: boolean;
|
|
896
|
+
align?: TimelineAlign;
|
|
897
|
+
}
|
|
898
|
+
declare const TimelineSeparator: React.ForwardRefExoticComponent<TimelineSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
899
|
+
interface TimelineConnectorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
900
|
+
dashed?: boolean;
|
|
901
|
+
}
|
|
902
|
+
declare const TimelineConnector: React.ForwardRefExoticComponent<TimelineConnectorProps & React.RefAttributes<HTMLDivElement>>;
|
|
903
|
+
interface TimelineDotProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
904
|
+
variant?: TimelineDotVariant;
|
|
905
|
+
size?: TimelineDotSize;
|
|
906
|
+
}
|
|
907
|
+
declare const TimelineDot: React.ForwardRefExoticComponent<TimelineDotProps & React.RefAttributes<HTMLDivElement>>;
|
|
908
|
+
interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
909
|
+
isEven?: boolean;
|
|
910
|
+
align?: TimelineAlign;
|
|
911
|
+
}
|
|
912
|
+
declare const TimelineContent: React.ForwardRefExoticComponent<TimelineContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
913
|
+
declare const TimelineTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
914
|
+
declare const TimelineTime: React.ForwardRefExoticComponent<React.TimeHTMLAttributes<HTMLTimeElement> & React.RefAttributes<HTMLTimeElement>>;
|
|
915
|
+
|
|
916
|
+
interface UseStepperOptions {
|
|
917
|
+
initialStep?: number;
|
|
918
|
+
stepsCount: number;
|
|
919
|
+
}
|
|
920
|
+
interface UseStepperReturn {
|
|
921
|
+
activeStep: number;
|
|
922
|
+
completedSteps: number[];
|
|
923
|
+
setStep: (step: number) => void;
|
|
924
|
+
nextStep: () => void;
|
|
925
|
+
prevStep: () => void;
|
|
926
|
+
completeStep: (step: number) => void;
|
|
927
|
+
uncompleteStep: (step: number) => void;
|
|
928
|
+
reset: () => void;
|
|
929
|
+
isFirstStep: boolean;
|
|
930
|
+
isLastStep: boolean;
|
|
931
|
+
}
|
|
932
|
+
declare function useStepper({ initialStep, stepsCount }: UseStepperOptions): UseStepperReturn;
|
|
933
|
+
type StepperOrientation = "horizontal" | "vertical";
|
|
934
|
+
interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
935
|
+
value?: number;
|
|
936
|
+
defaultValue?: number;
|
|
937
|
+
onValueChange?: (value: number) => void;
|
|
938
|
+
orientation?: StepperOrientation;
|
|
939
|
+
linear?: boolean;
|
|
940
|
+
}
|
|
941
|
+
declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
|
|
942
|
+
interface StepperContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
943
|
+
value: number;
|
|
944
|
+
}
|
|
945
|
+
declare const StepperContent: React.ForwardRefExoticComponent<StepperContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
946
|
+
type StepperListProps = React.HTMLAttributes<HTMLDivElement>;
|
|
947
|
+
declare const StepperList: React.ForwardRefExoticComponent<StepperListProps & React.RefAttributes<HTMLDivElement>>;
|
|
948
|
+
interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
949
|
+
value: number;
|
|
950
|
+
disabled?: boolean;
|
|
951
|
+
}
|
|
952
|
+
declare const StepperItem: React.ForwardRefExoticComponent<StepperItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
953
|
+
type StepperSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
|
|
954
|
+
declare const StepperSeparator: React.ForwardRefExoticComponent<StepperSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
955
|
+
type StepperTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
956
|
+
declare const StepperTrigger: React.ForwardRefExoticComponent<StepperTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
957
|
+
type StepperIndicatorProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
958
|
+
declare const StepperIndicator: React.ForwardRefExoticComponent<StepperIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
|
|
959
|
+
type StepperTitleProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
960
|
+
declare const StepperTitle: React.ForwardRefExoticComponent<StepperTitleProps & React.RefAttributes<HTMLSpanElement>>;
|
|
961
|
+
type StepperDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
962
|
+
declare const StepperDescription: React.ForwardRefExoticComponent<StepperDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
|
|
963
|
+
|
|
964
|
+
interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
965
|
+
banner?: React.ReactNode;
|
|
966
|
+
header?: React.ReactNode;
|
|
967
|
+
children?: React.ReactNode;
|
|
968
|
+
footer?: React.ReactNode;
|
|
969
|
+
contentWidth?: "default" | "narrow" | "wide" | "full";
|
|
970
|
+
headerPosition?: "sticky" | "fixed" | "static";
|
|
971
|
+
headerVariant?: "glass" | "solid" | "transparent";
|
|
972
|
+
paddedContent?: boolean;
|
|
973
|
+
mobileNav?: React.ReactNode;
|
|
974
|
+
}
|
|
975
|
+
interface AppShellBannerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
976
|
+
variant?: "primary" | "accent" | "muted";
|
|
977
|
+
closable?: boolean;
|
|
978
|
+
onClose?: () => void;
|
|
979
|
+
children: React.ReactNode;
|
|
980
|
+
}
|
|
981
|
+
interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement> {
|
|
982
|
+
variant?: "glass" | "solid" | "transparent";
|
|
983
|
+
position?: "sticky" | "fixed" | "static";
|
|
984
|
+
bordered?: boolean;
|
|
985
|
+
children?: React.ReactNode;
|
|
986
|
+
mobileNav?: React.ReactNode;
|
|
987
|
+
}
|
|
988
|
+
interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
|
|
989
|
+
width?: "default" | "narrow" | "wide" | "full";
|
|
990
|
+
padded?: boolean;
|
|
991
|
+
children: React.ReactNode;
|
|
992
|
+
}
|
|
993
|
+
interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement> {
|
|
994
|
+
bordered?: boolean;
|
|
995
|
+
children: React.ReactNode;
|
|
996
|
+
}
|
|
997
|
+
declare const AppShellBanner: React.ForwardRefExoticComponent<AppShellBannerProps & React.RefAttributes<HTMLDivElement>>;
|
|
998
|
+
declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
999
|
+
declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
|
|
1000
|
+
declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;
|
|
1001
|
+
type AppShellComponent = React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>> & {
|
|
1002
|
+
Banner: typeof AppShellBanner;
|
|
1003
|
+
Header: typeof AppShellHeader;
|
|
1004
|
+
Main: typeof AppShellMain;
|
|
1005
|
+
Footer: typeof AppShellFooter;
|
|
1006
|
+
};
|
|
1007
|
+
declare const AppShell: AppShellComponent;
|
|
1008
|
+
|
|
1009
|
+
type RatingSize = "sm" | "md" | "lg" | "xl";
|
|
1010
|
+
type RatingIconType = "star" | "heart" | "flame" | "shield" | "thumb";
|
|
1011
|
+
interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
1012
|
+
value?: number;
|
|
1013
|
+
defaultValue?: number;
|
|
1014
|
+
max?: number;
|
|
1015
|
+
precision?: number;
|
|
1016
|
+
size?: RatingSize;
|
|
1017
|
+
icon?: RatingIconType | React.ComponentType<{
|
|
1018
|
+
className?: string;
|
|
1019
|
+
}>;
|
|
1020
|
+
color?: string;
|
|
1021
|
+
emptyColor?: string;
|
|
1022
|
+
allowClear?: boolean;
|
|
1023
|
+
disabled?: boolean;
|
|
1024
|
+
readOnly?: boolean;
|
|
1025
|
+
hoverPreview?: boolean;
|
|
1026
|
+
showValue?: boolean;
|
|
1027
|
+
showCount?: boolean;
|
|
1028
|
+
count?: number;
|
|
1029
|
+
name?: string;
|
|
1030
|
+
onChange?: (value: number) => void;
|
|
1031
|
+
onHoverChange?: (value: number | null) => void;
|
|
1032
|
+
}
|
|
1033
|
+
declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
|
|
1034
|
+
|
|
1035
|
+
interface RatingFieldProps extends RatingProps {
|
|
1036
|
+
label?: React.ReactNode;
|
|
1037
|
+
helperText?: React.ReactNode;
|
|
1038
|
+
errorMessage?: React.ReactNode;
|
|
1039
|
+
required?: boolean;
|
|
1040
|
+
containerClassName?: string;
|
|
1041
|
+
}
|
|
1042
|
+
declare const RatingField: React.ForwardRefExoticComponent<RatingFieldProps & React.RefAttributes<HTMLDivElement>>;
|
|
1043
|
+
|
|
1044
|
+
interface RatingDistributionItem {
|
|
1045
|
+
stars: number;
|
|
1046
|
+
count: number;
|
|
1047
|
+
percentage: number;
|
|
1048
|
+
}
|
|
1049
|
+
interface RatingSummaryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1050
|
+
average: number;
|
|
1051
|
+
totalCount: number;
|
|
1052
|
+
distribution: RatingDistributionItem[];
|
|
1053
|
+
max?: number;
|
|
1054
|
+
size?: RatingSize;
|
|
1055
|
+
icon?: RatingIconType | React.ComponentType<{
|
|
1056
|
+
className?: string;
|
|
1057
|
+
}>;
|
|
1058
|
+
}
|
|
1059
|
+
declare const RatingSummary: React.ForwardRefExoticComponent<RatingSummaryProps & React.RefAttributes<HTMLDivElement>>;
|
|
1060
|
+
|
|
1061
|
+
type PricingFeatureItem = string | {
|
|
1062
|
+
text: string;
|
|
1063
|
+
included?: boolean;
|
|
1064
|
+
tooltip?: string;
|
|
1065
|
+
};
|
|
1066
|
+
interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1067
|
+
name: string;
|
|
1068
|
+
price: string | number;
|
|
1069
|
+
period?: string;
|
|
1070
|
+
description?: string;
|
|
1071
|
+
features?: PricingFeatureItem[];
|
|
1072
|
+
variant?: "default" | "featured" | "outline";
|
|
1073
|
+
badge?: string;
|
|
1074
|
+
popular?: boolean;
|
|
1075
|
+
ctaText?: string;
|
|
1076
|
+
onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
1077
|
+
ctaHref?: string;
|
|
1078
|
+
cta?: React.ReactNode;
|
|
1079
|
+
disabled?: boolean;
|
|
1080
|
+
}
|
|
1081
|
+
declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
1082
|
+
|
|
1083
|
+
interface BlogCardAuthor {
|
|
1084
|
+
name: string;
|
|
1085
|
+
avatarUrl?: string;
|
|
1086
|
+
role?: string;
|
|
1087
|
+
}
|
|
1088
|
+
interface BlogCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
|
|
1089
|
+
title: string;
|
|
1090
|
+
description?: string;
|
|
1091
|
+
coverUrl?: string;
|
|
1092
|
+
coverAlt?: string;
|
|
1093
|
+
category?: string;
|
|
1094
|
+
readTime?: string;
|
|
1095
|
+
publishedAt?: string;
|
|
1096
|
+
author?: BlogCardAuthor;
|
|
1097
|
+
orientation?: "vertical" | "horizontal";
|
|
1098
|
+
href?: string;
|
|
1099
|
+
}
|
|
1100
|
+
declare const BlogCard: React.ForwardRefExoticComponent<BlogCardProps & React.RefAttributes<HTMLElement>>;
|
|
1101
|
+
|
|
1102
|
+
interface ProjectCardMetric {
|
|
1103
|
+
label?: string;
|
|
1104
|
+
value: string | number;
|
|
1105
|
+
icon?: React.ReactNode;
|
|
1106
|
+
}
|
|
1107
|
+
interface ProjectCardStatus {
|
|
1108
|
+
label: string;
|
|
1109
|
+
variant?: "success" | "warning" | "danger" | "neutral" | "info";
|
|
1110
|
+
}
|
|
1111
|
+
interface ProjectCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
|
|
1112
|
+
title: string;
|
|
1113
|
+
description?: string;
|
|
1114
|
+
status?: ProjectCardStatus;
|
|
1115
|
+
techStack?: string[];
|
|
1116
|
+
metrics?: ProjectCardMetric[];
|
|
1117
|
+
updatedAt?: string;
|
|
1118
|
+
actions?: React.ReactNode;
|
|
1119
|
+
}
|
|
1120
|
+
declare const ProjectCard: React.ForwardRefExoticComponent<ProjectCardProps & React.RefAttributes<HTMLElement>>;
|
|
1121
|
+
|
|
1122
|
+
interface NotificationItemData {
|
|
1123
|
+
/** Unique stable identifier. */
|
|
1124
|
+
id: string;
|
|
1125
|
+
/** Primary notification text. */
|
|
1126
|
+
title: React.ReactNode;
|
|
1127
|
+
/** Optional second line (preview, quote, etc.). */
|
|
1128
|
+
body?: React.ReactNode;
|
|
1129
|
+
/**
|
|
1130
|
+
* Leading visual (28×28 circle).
|
|
1131
|
+
* SVG ReactNode → icon mode. If avatarSrc is also provided, avatarSrc wins.
|
|
1132
|
+
*/
|
|
1133
|
+
icon?: React.ReactNode;
|
|
1134
|
+
/** Image URL for avatar mode. */
|
|
1135
|
+
avatarSrc?: string;
|
|
1136
|
+
/** 1–2 character initials for avatar fallback. */
|
|
1137
|
+
avatarFallback?: string;
|
|
1138
|
+
/** Shown as a relative time string. */
|
|
1139
|
+
timestamp: Date | string;
|
|
1140
|
+
/** Defaults to false (unread). */
|
|
1141
|
+
read?: boolean;
|
|
1142
|
+
/**
|
|
1143
|
+
* If provided, the row renders as <a href={href}>.
|
|
1144
|
+
* Clicking marks the item read and navigates.
|
|
1145
|
+
*/
|
|
1146
|
+
href?: string;
|
|
1147
|
+
/** Called after the row is clicked (after mark-read). */
|
|
1148
|
+
onClick?: (id: string) => void;
|
|
1149
|
+
}
|
|
1150
|
+
declare function formatRelativeTime(date: Date | string): string;
|
|
1151
|
+
interface InboxStateReturn {
|
|
1152
|
+
items: NotificationItemData[];
|
|
1153
|
+
unreadCount: number;
|
|
1154
|
+
markRead: (id: string) => void;
|
|
1155
|
+
markAllRead: () => void;
|
|
1156
|
+
dismiss: (id: string) => void;
|
|
1157
|
+
}
|
|
1158
|
+
/**
|
|
1159
|
+
* Local-state convenience hook for InboxPopover.
|
|
1160
|
+
* Intended for demos, Storybook stories, and simple apps.
|
|
1161
|
+
*
|
|
1162
|
+
* NOTE: `initial` is used only as the seed value for `useState`.
|
|
1163
|
+
* Re-rendering the parent with a new `initial` array does NOT reset
|
|
1164
|
+
* the hook's state. This is intentional — the hook owns its state
|
|
1165
|
+
* independently after mount. To reset from the outside, remount the
|
|
1166
|
+
* component using a `key` prop.
|
|
1167
|
+
*/
|
|
1168
|
+
declare function useInboxState(initial: NotificationItemData[]): InboxStateReturn;
|
|
1169
|
+
interface InboxPopoverProps {
|
|
1170
|
+
children: React.ReactNode;
|
|
1171
|
+
open?: boolean;
|
|
1172
|
+
onOpenChange?: (open: boolean) => void;
|
|
1173
|
+
className?: string;
|
|
1174
|
+
}
|
|
1175
|
+
declare function InboxPopover({ children, className, open: openProp, onOpenChange, }: InboxPopoverProps): React.JSX.Element;
|
|
1176
|
+
interface InboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1177
|
+
/** Badge count. Hidden when 0 or undefined. */
|
|
1178
|
+
unreadCount?: number;
|
|
1179
|
+
/** Accessible label (default: "Notifications"). */
|
|
1180
|
+
label?: string;
|
|
1181
|
+
}
|
|
1182
|
+
declare function InboxTrigger({ unreadCount, label, className, onClick, ...props }: InboxTriggerProps): React.JSX.Element;
|
|
1183
|
+
interface NotificationItemProps {
|
|
1184
|
+
item: NotificationItemData;
|
|
1185
|
+
onDismiss?: (id: string) => void;
|
|
1186
|
+
className?: string;
|
|
1187
|
+
}
|
|
1188
|
+
declare function NotificationItem({ item, onDismiss, className }: NotificationItemProps): React.JSX.Element;
|
|
1189
|
+
interface InboxContentProps {
|
|
1190
|
+
items: NotificationItemData[];
|
|
1191
|
+
onMarkAllRead?: () => void;
|
|
1192
|
+
onDismiss?: (id: string) => void;
|
|
1193
|
+
viewAllHref?: string;
|
|
1194
|
+
viewAllLabel?: string;
|
|
1195
|
+
emptyState?: React.ReactNode;
|
|
1196
|
+
width?: number | string;
|
|
1197
|
+
maxHeight?: number | string;
|
|
1198
|
+
className?: string;
|
|
1199
|
+
}
|
|
1200
|
+
declare function InboxContent({ items, onMarkAllRead, onDismiss, viewAllHref, viewAllLabel, emptyState, width, maxHeight, className, }: InboxContentProps): React.JSX.Element | null;
|
|
1201
|
+
|
|
1202
|
+
declare const DEFAULT_COLOR_SWATCHES: readonly ["#EF4444", "#F97316", "#F59E0B", "#10B981", "#14B8A6", "#06B6D4", "#3B82F6", "#6366F1", "#8B5CF6", "#EC4899", "#64748B", "#1E293B"];
|
|
1203
|
+
declare function isValidHex(hex: string): boolean;
|
|
1204
|
+
declare function normalizeHex(hex: string): string;
|
|
1205
|
+
declare function hexToHsl(hex: string): {
|
|
1206
|
+
h: number;
|
|
1207
|
+
s: number;
|
|
1208
|
+
l: number;
|
|
1209
|
+
};
|
|
1210
|
+
declare function hslToHex(h: number, s: number, l: number): string;
|
|
1211
|
+
interface ColorPickerSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1212
|
+
color: string;
|
|
1213
|
+
selected?: boolean;
|
|
1214
|
+
size?: "sm" | "md" | "lg";
|
|
1215
|
+
}
|
|
1216
|
+
declare const ColorPickerSwatch: React.ForwardRefExoticComponent<ColorPickerSwatchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1217
|
+
interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value" | "defaultValue"> {
|
|
1218
|
+
/** Current hex color value (controlled). */
|
|
1219
|
+
value?: string;
|
|
1220
|
+
/** Initial hex color value (uncontrolled). Defaults to "#3B82F6". */
|
|
1221
|
+
defaultValue?: string;
|
|
1222
|
+
/** Called when color changes. */
|
|
1223
|
+
onChange?: (hex: string) => void;
|
|
1224
|
+
/** Array of hex color strings for preset palette. Defaults to DEFAULT_COLOR_SWATCHES. */
|
|
1225
|
+
swatches?: readonly string[] | string[];
|
|
1226
|
+
/** Whether the picker is disabled. */
|
|
1227
|
+
disabled?: boolean;
|
|
1228
|
+
/** Whether to show the manual Hex text input inside the popover. Defaults to true. */
|
|
1229
|
+
showHexInput?: boolean;
|
|
1230
|
+
/** Additional class name for the container. */
|
|
1231
|
+
className?: string;
|
|
1232
|
+
}
|
|
1233
|
+
declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
1234
|
+
interface ColorPickerFieldProps extends ColorPickerProps {
|
|
1235
|
+
label?: React.ReactNode;
|
|
1236
|
+
hint?: React.ReactNode;
|
|
1237
|
+
error?: React.ReactNode;
|
|
1238
|
+
required?: boolean;
|
|
1239
|
+
}
|
|
1240
|
+
declare const ColorPickerField: React.ForwardRefExoticComponent<ColorPickerFieldProps & React.RefAttributes<HTMLDivElement>>;
|
|
1241
|
+
|
|
1242
|
+
interface GalleryImage {
|
|
1243
|
+
src: string;
|
|
1244
|
+
alt?: string;
|
|
1245
|
+
title?: string;
|
|
1246
|
+
caption?: string;
|
|
1247
|
+
thumbnailSrc?: string;
|
|
1248
|
+
}
|
|
1249
|
+
interface ImageGalleryProps {
|
|
1250
|
+
images: GalleryImage[];
|
|
1251
|
+
columns?: 2 | 3 | 4 | 5;
|
|
1252
|
+
aspectRatio?: "square" | "video" | "4/3" | "auto" | string;
|
|
1253
|
+
maxVisible?: number;
|
|
1254
|
+
className?: string;
|
|
1255
|
+
thumbnailClassName?: string;
|
|
1256
|
+
lightboxClassName?: string;
|
|
1257
|
+
onImageClick?: (index: number) => void;
|
|
1258
|
+
}
|
|
1259
|
+
declare function ImageGallery({ images, columns, aspectRatio, maxVisible, className, thumbnailClassName, lightboxClassName, onImageClick, }: ImageGalleryProps): React.JSX.Element;
|
|
1260
|
+
|
|
1261
|
+
export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, AppShell, AppShellBanner, type AppShellBannerProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, BlogCard, type BlogCardAuthor, type BlogCardProps, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, type BottomSheetProps, BottomSheetTitle, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CodeBlock, type CodeBlockProps, ColorPicker, ColorPickerField, type ColorPickerFieldProps, type ColorPickerProps, ColorPickerSwatch, type ColorPickerSwatchProps, Combobox, ComboboxField, type ComboboxFieldProps, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, DEFAULT_COLOR_SWATCHES, DashboardShell, type DashboardShellProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, DatePickerField, type DatePickerFieldProps, type DatePickerProps, type DateRange, DateRangePicker, DateRangePickerField, type DateRangePickerFieldProps, type DateRangePickerProps, DetailPageLayout, type DetailPageLayoutProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Fab, type FabProps, Field, type FileRejection, FileUpload, FileUploadField, type FileUploadFieldProps, type FileUploadProps, FormField, type FormFieldProps, type GalleryImage, Hint, type HintProps, ImageGallery, type ImageGalleryProps, InboxContent, type InboxContentProps, InboxPopover, type InboxPopoverProps, type InboxStateReturn, InboxTrigger, type InboxTriggerProps, Input, type InputProps, Kbd, type KbdProps, Label, type LabelProps, MetricCard, type MetricCardProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, NotificationItem, type NotificationItemData, type NotificationItemProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, PricingCard, type PricingCardProps, type PricingFeatureItem, Progress, type ProgressProps, ProgressRing, ProgressRingField, type ProgressRingFieldProps, type ProgressRingProps, type ProgressRingSize, type ProgressRingTone, ProjectCard, type ProjectCardMetric, type ProjectCardProps, type ProjectCardStatus, Radio, type RadioProps, RangeCalendar, type RangeCalendarProps, Rating, type RatingDistributionItem, RatingField, type RatingFieldProps, type RatingIconType, type RatingProps, type RatingSize, RatingSummary, type RatingSummaryProps, SectionHeader, type SectionHeaderActionsProps, type SectionHeaderAlign, type SectionHeaderDescriptionProps, type SectionHeaderHeadingLevel, type SectionHeaderKickerProps, type SectionHeaderProps, type SectionHeaderTitleProps, Segmented, type SegmentedOption, type SegmentedProps, Select, SelectField, type SelectFieldProps, type SelectProps, Separator, type SeparatorProps, SettingsLayout, type SettingsLayoutProps, SidebarNav, type SidebarNavGroup, type SidebarNavItem, type SidebarNavProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Stepper, StepperContent, type StepperContentProps, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperList, type StepperListProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableToolbar, type TableToolbarProps, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, Timeline, type TimelineAlign, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDot, type TimelineDotProps, type TimelineDotSize, type TimelineDotVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, TimelineTime, TimelineTitle, type ToastOptions, ToastProvider, type ToastTone, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, Tooltip, type TooltipProps, type UploadItem, type UploadStatus, type UseStepperOptions, type UseStepperReturn, badgeVariants, buttonVariants, cn, formatRelativeTime, hexToHsl, hslToHex, isValidHex, normalizeHex, sliderThumbCSS, useInboxState, useStepper, useToast };
|