@heuresys/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/dist/index.cjs +9259 -0
- package/dist/index.d.cts +2528 -0
- package/dist/index.d.ts +2528 -0
- package/dist/index.mjs +8971 -0
- package/package.json +166 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/README.md +31 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-A-full.svg +11 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-A-symbol.svg +8 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-B-full.svg +12 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-B-symbol.svg +9 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-C-full.svg +13 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-C-symbol.svg +10 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-D-full.svg +6 -0
- package/src/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-D-symbol.svg +4 -0
- package/src/assets/brand/legacy/README.md +34 -0
- package/src/assets/brand/legacy/favicon.svg +16 -0
- package/src/assets/brand/legacy/heuresys-mark.svg +14 -0
- package/src/assets/brand/legacy/heuresys-wordmark-monochrome-dark.svg +15 -0
- package/src/assets/brand/legacy/heuresys-wordmark-monochrome-light.svg +15 -0
- package/src/assets/brand/legacy/heuresys-wordmark.svg +21 -0
- package/src/assets/brand/legacy/og-image-template.svg +44 -0
- package/src/assets/brand/logo/heuresys-mark-16.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-180.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-192.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-32.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-48.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-512.png +0 -0
- package/src/assets/brand/logo/heuresys-mark-64.png +0 -0
- package/src/assets/brand/social/linkedin-banner-1200x627.png +0 -0
- package/src/assets/brand/social/og-image-1200x630.png +0 -0
- package/src/assets/brand/social/twitter-card-1200x628.png +0 -0
- package/src/components/brand/candidates/LogoCandidateA.tsx +87 -0
- package/src/components/brand/candidates/LogoCandidateB.tsx +65 -0
- package/src/components/brand/candidates/LogoCandidateC.tsx +68 -0
- package/src/components/brand/candidates/LogoCandidateD.tsx +77 -0
- package/src/components/brand/candidates/index.ts +4 -0
- package/src/styles/globals.css +21 -0
- package/src/styles/hover-affordance.css +280 -0
- package/src/styles/tokens.css +109 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2528 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
6
|
+
import { ClassValue } from 'clsx';
|
|
7
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
+
import * as Dropdown from '@radix-ui/react-dropdown-menu';
|
|
10
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
11
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
12
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
13
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
14
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
15
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
16
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
17
|
+
import { HTMLMotionProps } from 'framer-motion';
|
|
18
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
19
|
+
import confettiLib from 'canvas-confetti';
|
|
20
|
+
import { LottieComponentProps } from 'lottie-react';
|
|
21
|
+
import { EChartsOption } from 'echarts';
|
|
22
|
+
import ReactMarkdown from 'react-markdown';
|
|
23
|
+
import * as lucide_react from 'lucide-react';
|
|
24
|
+
|
|
25
|
+
declare const buttonVariants: (props?: ({
|
|
26
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | null | undefined;
|
|
27
|
+
size?: "sm" | "md" | "lg" | "icon" | null | undefined;
|
|
28
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
29
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
30
|
+
asChild?: boolean;
|
|
31
|
+
}
|
|
32
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
33
|
+
|
|
34
|
+
declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
35
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
36
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
37
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
38
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
39
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
|
|
41
|
+
declare const inputVariants: (props?: ({
|
|
42
|
+
variant?: "default" | "error" | null | undefined;
|
|
43
|
+
inputSize?: "sm" | "md" | "lg" | null | undefined;
|
|
44
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
45
|
+
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
46
|
+
label?: React$1.ReactNode;
|
|
47
|
+
helperText?: React$1.ReactNode;
|
|
48
|
+
errorText?: React$1.ReactNode;
|
|
49
|
+
containerClassName?: string;
|
|
50
|
+
}
|
|
51
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Toast — wrapper around @radix-ui/react-toast.
|
|
55
|
+
*
|
|
56
|
+
* Usage: mount once at the root of your app:
|
|
57
|
+
*
|
|
58
|
+
* <ToastProvider>
|
|
59
|
+
* <App />
|
|
60
|
+
* <ToastViewport />
|
|
61
|
+
* </ToastProvider>
|
|
62
|
+
*
|
|
63
|
+
* Then render <Toast> imperatively or via your own state hook.
|
|
64
|
+
*/
|
|
65
|
+
declare const ToastProvider: React$1.FC<ToastPrimitive.ToastProviderProps>;
|
|
66
|
+
declare const ToastViewport: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & React$1.RefAttributes<HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
|
|
67
|
+
declare const toastVariants: (props?: ({
|
|
68
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
69
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
70
|
+
interface ToastProps extends React$1.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {
|
|
71
|
+
}
|
|
72
|
+
declare const Toast: React$1.ForwardRefExoticComponent<ToastProps & React$1.RefAttributes<HTMLLIElement>>;
|
|
73
|
+
declare const ToastTitle: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastTitleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
74
|
+
declare const ToastDescription: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
75
|
+
declare const ToastClose: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
77
|
+
|
|
78
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
79
|
+
|
|
80
|
+
type Theme = 'light' | 'dark' | 'system';
|
|
81
|
+
type ResolvedTheme = 'light' | 'dark';
|
|
82
|
+
interface ThemeContextValue {
|
|
83
|
+
theme: Theme;
|
|
84
|
+
resolved: ResolvedTheme;
|
|
85
|
+
setTheme: (t: Theme) => void;
|
|
86
|
+
}
|
|
87
|
+
declare function ThemeProvider({ children, defaultTheme, }: {
|
|
88
|
+
children: React$1.ReactNode;
|
|
89
|
+
defaultTheme?: Theme;
|
|
90
|
+
}): React$1.ReactElement;
|
|
91
|
+
declare function useTheme(): ThemeContextValue;
|
|
92
|
+
|
|
93
|
+
declare function ThemeToggle({ className }: {
|
|
94
|
+
className?: string;
|
|
95
|
+
}): React$1.ReactElement;
|
|
96
|
+
|
|
97
|
+
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
98
|
+
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
99
|
+
declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
100
|
+
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
101
|
+
declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
103
|
+
showCloseButton?: boolean;
|
|
104
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
105
|
+
declare function DialogHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
106
|
+
declare function DialogFooter({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
107
|
+
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
108
|
+
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
109
|
+
|
|
110
|
+
declare const DropdownMenu: React$1.FC<Dropdown.DropdownMenuProps>;
|
|
111
|
+
declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<Dropdown.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
112
|
+
declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<Dropdown.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
declare const DropdownMenuSub: React$1.FC<Dropdown.DropdownMenuSubProps>;
|
|
114
|
+
declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<Dropdown.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
116
|
+
inset?: boolean;
|
|
117
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
118
|
+
declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
119
|
+
declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
120
|
+
declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
121
|
+
inset?: boolean;
|
|
122
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
123
|
+
declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
124
|
+
declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
125
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentPropsWithoutRef<typeof Dropdown.Label> & {
|
|
126
|
+
inset?: boolean;
|
|
127
|
+
}): react_jsx_runtime.JSX.Element;
|
|
128
|
+
declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<Dropdown.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
129
|
+
declare function DropdownMenuShortcut({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
130
|
+
|
|
131
|
+
declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
|
|
132
|
+
declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
133
|
+
declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
135
|
+
|
|
136
|
+
declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
137
|
+
declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
|
|
138
|
+
declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
139
|
+
declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
140
|
+
|
|
141
|
+
declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
142
|
+
declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
143
|
+
declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
144
|
+
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
145
|
+
|
|
146
|
+
declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
|
|
147
|
+
declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
148
|
+
declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
149
|
+
declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
150
|
+
|
|
151
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
152
|
+
|
|
153
|
+
declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
154
|
+
|
|
155
|
+
declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
156
|
+
declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
|
|
157
|
+
declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
158
|
+
declare function AvatarGroup({ children, max, className, }: {
|
|
159
|
+
children: React$1.ReactNode;
|
|
160
|
+
max?: number;
|
|
161
|
+
className?: string;
|
|
162
|
+
}): React$1.ReactElement;
|
|
163
|
+
|
|
164
|
+
declare const badgeVariants: (props?: ({
|
|
165
|
+
variant?: "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | null | undefined;
|
|
166
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
167
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
168
|
+
}
|
|
169
|
+
declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
170
|
+
|
|
171
|
+
declare function Skeleton({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
172
|
+
declare function Spinner({ className }: {
|
|
173
|
+
className?: string;
|
|
174
|
+
}): react_jsx_runtime.JSX.Element;
|
|
175
|
+
|
|
176
|
+
interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
177
|
+
icon?: React$1.ReactNode;
|
|
178
|
+
title: string;
|
|
179
|
+
description?: string;
|
|
180
|
+
action?: React$1.ReactNode;
|
|
181
|
+
}
|
|
182
|
+
declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
183
|
+
interface ErrorStateProps extends EmptyStateProps {
|
|
184
|
+
retry?: () => void;
|
|
185
|
+
}
|
|
186
|
+
declare function ErrorState({ title, ...rest }: Partial<ErrorStateProps>): react_jsx_runtime.JSX.Element;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Layout primitives — every-layout style. CSS-only, composable, no JS layout
|
|
190
|
+
* logic. (RTGB B7.23)
|
|
191
|
+
*/
|
|
192
|
+
interface LayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
193
|
+
as?: 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav' | 'main' | 'aside';
|
|
194
|
+
}
|
|
195
|
+
declare function Stack({ className, gap, ...props }: LayoutProps & {
|
|
196
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
197
|
+
}): react_jsx_runtime.JSX.Element;
|
|
198
|
+
declare function Cluster({ className, gap, align, justify, ...props }: LayoutProps & {
|
|
199
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
200
|
+
align?: 'start' | 'center' | 'end' | 'stretch';
|
|
201
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around';
|
|
202
|
+
}): react_jsx_runtime.JSX.Element;
|
|
203
|
+
declare function Center({ className, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
|
|
204
|
+
declare function Cover({ className, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
|
|
205
|
+
declare function Frame({ className, ratio, ...props }: LayoutProps & {
|
|
206
|
+
ratio?: '1/1' | '4/3' | '16/9' | '21/9' | '3/4';
|
|
207
|
+
}): react_jsx_runtime.JSX.Element;
|
|
208
|
+
declare function Grid({ className, cols, gap, ...props }: LayoutProps & {
|
|
209
|
+
cols?: 'auto' | 1 | 2 | 3 | 4 | 6 | 12;
|
|
210
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
211
|
+
}): react_jsx_runtime.JSX.Element;
|
|
212
|
+
declare function Switcher({ className, threshold, gap, ...props }: LayoutProps & {
|
|
213
|
+
threshold?: string;
|
|
214
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
215
|
+
}): react_jsx_runtime.JSX.Element;
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Motion primitives (RTGB B7.28-B7.30).
|
|
219
|
+
*
|
|
220
|
+
* Wrap framer-motion `motion.div` with a small set of presets so callers don't
|
|
221
|
+
* have to repeat keyframes. All respect `prefers-reduced-motion` via the
|
|
222
|
+
* media query in tokens.css.
|
|
223
|
+
*/
|
|
224
|
+
declare const FadeIn: React$1.FC<HTMLMotionProps<'div'> & {
|
|
225
|
+
delay?: number;
|
|
226
|
+
}>;
|
|
227
|
+
declare const SlideIn: React$1.FC<HTMLMotionProps<'div'> & {
|
|
228
|
+
from?: 'top' | 'bottom' | 'left' | 'right';
|
|
229
|
+
delay?: number;
|
|
230
|
+
}>;
|
|
231
|
+
declare const ScaleIn: React$1.FC<HTMLMotionProps<'div'> & {
|
|
232
|
+
delay?: number;
|
|
233
|
+
}>;
|
|
234
|
+
declare const StaggerChildren: React$1.FC<HTMLMotionProps<'div'> & {
|
|
235
|
+
delay?: number;
|
|
236
|
+
stagger?: number;
|
|
237
|
+
}>;
|
|
238
|
+
declare const StaggerItem: React$1.FC<HTMLMotionProps<'div'>>;
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* Command palette wrapper around cmdk. (RTGB B7.20)
|
|
242
|
+
*
|
|
243
|
+
* Use:
|
|
244
|
+
* const [open, setOpen] = useState(false);
|
|
245
|
+
* useGlobalCmdK(() => setOpen(true));
|
|
246
|
+
* <CommandPalette open={open} onOpenChange={setOpen}>
|
|
247
|
+
* <CommandPalette.Group heading="Navigate">
|
|
248
|
+
* <CommandPalette.Item onSelect={() => router.push('/dashboard')}>Dashboard</CommandPalette.Item>
|
|
249
|
+
* </CommandPalette.Group>
|
|
250
|
+
* </CommandPalette>
|
|
251
|
+
*/
|
|
252
|
+
declare function useGlobalCmdK(callback: () => void): void;
|
|
253
|
+
interface CommandPaletteRootProps {
|
|
254
|
+
open: boolean;
|
|
255
|
+
onOpenChange: (open: boolean) => void;
|
|
256
|
+
placeholder?: string;
|
|
257
|
+
empty?: React$1.ReactNode;
|
|
258
|
+
children: React$1.ReactNode;
|
|
259
|
+
}
|
|
260
|
+
declare function CommandPaletteRoot({ open, onOpenChange, placeholder, empty, children, }: CommandPaletteRootProps): react_jsx_runtime.JSX.Element;
|
|
261
|
+
declare const CommandPalette: typeof CommandPaletteRoot & {
|
|
262
|
+
Group: React$1.ForwardRefExoticComponent<Omit<{
|
|
263
|
+
children?: React$1.ReactNode;
|
|
264
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
265
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
266
|
+
} & {
|
|
267
|
+
asChild?: boolean;
|
|
268
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
|
|
269
|
+
heading?: React$1.ReactNode;
|
|
270
|
+
value?: string;
|
|
271
|
+
forceMount?: boolean;
|
|
272
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
273
|
+
Item: React$1.ForwardRefExoticComponent<Omit<{
|
|
274
|
+
children?: React$1.ReactNode;
|
|
275
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
276
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
277
|
+
} & {
|
|
278
|
+
asChild?: boolean;
|
|
279
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
|
|
280
|
+
disabled?: boolean;
|
|
281
|
+
onSelect?: (value: string) => void;
|
|
282
|
+
value?: string;
|
|
283
|
+
keywords?: string[];
|
|
284
|
+
forceMount?: boolean;
|
|
285
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
286
|
+
Separator: React$1.ForwardRefExoticComponent<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
287
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
288
|
+
} & {
|
|
289
|
+
asChild?: boolean;
|
|
290
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
291
|
+
alwaysRender?: boolean;
|
|
292
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* DataTable — TanStack Table 8 wrapper with sorting + pagination + filter
|
|
297
|
+
* primitives. Virtual scroll opt-in via the `virtual` prop (consumer wraps
|
|
298
|
+
* in VirtualScroller separately).
|
|
299
|
+
*
|
|
300
|
+
* (RTGB B7.15)
|
|
301
|
+
*/
|
|
302
|
+
interface DataTableProps<TData, TValue> {
|
|
303
|
+
columns: ColumnDef<TData, TValue>[];
|
|
304
|
+
data: TData[];
|
|
305
|
+
className?: string;
|
|
306
|
+
caption?: string;
|
|
307
|
+
emptyMessage?: string;
|
|
308
|
+
pageSize?: number;
|
|
309
|
+
}
|
|
310
|
+
declare function DataTable<TData, TValue>({ columns, data, className, caption, emptyMessage, pageSize, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
311
|
+
|
|
312
|
+
/**
|
|
313
|
+
* PageHeader — admin page header with title, description, breadcrumbs slot,
|
|
314
|
+
* and right-aligned action area. (TIER 1)
|
|
315
|
+
*/
|
|
316
|
+
interface PageHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
317
|
+
title: string;
|
|
318
|
+
description?: string;
|
|
319
|
+
breadcrumbs?: React$1.ReactNode;
|
|
320
|
+
actions?: React$1.ReactNode;
|
|
321
|
+
badges?: React$1.ReactNode;
|
|
322
|
+
divider?: boolean;
|
|
323
|
+
}
|
|
324
|
+
declare function PageHeader({ title, description, breadcrumbs, actions, badges, divider, className, ...props }: PageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
325
|
+
|
|
326
|
+
interface FilterChip {
|
|
327
|
+
id: string;
|
|
328
|
+
label: string;
|
|
329
|
+
value: string;
|
|
330
|
+
onRemove: () => void;
|
|
331
|
+
}
|
|
332
|
+
interface FilterBarProps {
|
|
333
|
+
searchValue?: string;
|
|
334
|
+
onSearchChange?: (v: string) => void;
|
|
335
|
+
searchPlaceholder?: string;
|
|
336
|
+
chips?: FilterChip[];
|
|
337
|
+
onClearAll?: () => void;
|
|
338
|
+
filtersSlot?: React$1.ReactNode;
|
|
339
|
+
rightSlot?: React$1.ReactNode;
|
|
340
|
+
className?: string;
|
|
341
|
+
}
|
|
342
|
+
/**
|
|
343
|
+
* FilterBar smart — search input + chip-based active filters + advanced
|
|
344
|
+
* filters dropdown. (TIER 1)
|
|
345
|
+
*/
|
|
346
|
+
declare function FilterBar({ searchValue, onSearchChange, searchPlaceholder, chips, onClearAll, filtersSlot, rightSlot, className, }: FilterBarProps): react_jsx_runtime.JSX.Element;
|
|
347
|
+
|
|
348
|
+
interface AppShellNavItem {
|
|
349
|
+
id: string;
|
|
350
|
+
label: string;
|
|
351
|
+
icon?: React$1.ReactNode;
|
|
352
|
+
href?: string;
|
|
353
|
+
onClick?: () => void;
|
|
354
|
+
active?: boolean;
|
|
355
|
+
badge?: React$1.ReactNode;
|
|
356
|
+
children?: AppShellNavItem[];
|
|
357
|
+
}
|
|
358
|
+
interface AppShellProps {
|
|
359
|
+
brand?: React$1.ReactNode;
|
|
360
|
+
nav: AppShellNavItem[];
|
|
361
|
+
topbarLeft?: React$1.ReactNode;
|
|
362
|
+
topbarRight?: React$1.ReactNode;
|
|
363
|
+
children: React$1.ReactNode;
|
|
364
|
+
collapsedDefault?: boolean;
|
|
365
|
+
className?: string;
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* AppShell — full app skeleton: collapsible sidebar + topbar + main content.
|
|
369
|
+
* Hierarchical sidenav supports 2 levels. Mobile uses overlay drawer.
|
|
370
|
+
* (TIER 1)
|
|
371
|
+
*/
|
|
372
|
+
declare function AppShell({ brand, nav, topbarLeft, topbarRight, children, collapsedDefault, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* BentoGrid — adaptive responsive grid where children can span multiple
|
|
376
|
+
* cells via colSpan/rowSpan props. CSS Grid auto-fit + named area-less.
|
|
377
|
+
* (TIER 1)
|
|
378
|
+
*/
|
|
379
|
+
interface BentoGridProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
380
|
+
columns?: number;
|
|
381
|
+
rowHeight?: string;
|
|
382
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
383
|
+
}
|
|
384
|
+
declare function BentoGrid({ columns, rowHeight, gap, className, style, ...props }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
385
|
+
interface BentoCellProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
386
|
+
colSpan?: number;
|
|
387
|
+
rowSpan?: number;
|
|
388
|
+
colSpanMd?: number;
|
|
389
|
+
rowSpanMd?: number;
|
|
390
|
+
}
|
|
391
|
+
declare function BentoCell({ colSpan, rowSpan, colSpanMd, rowSpanMd, className, style, ...props }: BentoCellProps): react_jsx_runtime.JSX.Element;
|
|
392
|
+
|
|
393
|
+
interface BreadcrumbItem {
|
|
394
|
+
label: string;
|
|
395
|
+
href?: string;
|
|
396
|
+
onClick?: () => void;
|
|
397
|
+
}
|
|
398
|
+
/**
|
|
399
|
+
* Breadcrumbs advanced — collapses to ellipsis when items > maxItems.
|
|
400
|
+
* (TIER 1)
|
|
401
|
+
*/
|
|
402
|
+
declare function Breadcrumbs({ items, maxItems, separator, className, }: {
|
|
403
|
+
items: BreadcrumbItem[];
|
|
404
|
+
maxItems?: number;
|
|
405
|
+
separator?: React$1.ReactNode;
|
|
406
|
+
className?: string;
|
|
407
|
+
}): react_jsx_runtime.JSX.Element;
|
|
408
|
+
|
|
409
|
+
interface StepperStep {
|
|
410
|
+
id: string;
|
|
411
|
+
label: string;
|
|
412
|
+
description?: string;
|
|
413
|
+
optional?: boolean;
|
|
414
|
+
}
|
|
415
|
+
interface StepperProps {
|
|
416
|
+
steps: StepperStep[];
|
|
417
|
+
current: number;
|
|
418
|
+
onStepClick?: (idx: number) => void;
|
|
419
|
+
orientation?: 'horizontal' | 'vertical';
|
|
420
|
+
className?: string;
|
|
421
|
+
}
|
|
422
|
+
/**
|
|
423
|
+
* Stepper / Wizard nav — accessible numbered step progression.
|
|
424
|
+
* (TIER 1)
|
|
425
|
+
*/
|
|
426
|
+
declare function Stepper({ steps, current, onStepClick, orientation, className, }: StepperProps): react_jsx_runtime.JSX.Element;
|
|
427
|
+
|
|
428
|
+
interface PaginationProps {
|
|
429
|
+
page: number;
|
|
430
|
+
pageCount: number;
|
|
431
|
+
onPageChange: (p: number) => void;
|
|
432
|
+
showFirstLast?: boolean;
|
|
433
|
+
showJumpTo?: boolean;
|
|
434
|
+
showPageSize?: boolean;
|
|
435
|
+
pageSize?: number;
|
|
436
|
+
pageSizeOptions?: number[];
|
|
437
|
+
onPageSizeChange?: (size: number) => void;
|
|
438
|
+
className?: string;
|
|
439
|
+
}
|
|
440
|
+
/**
|
|
441
|
+
* Pagination advanced — first/prev/page numbers/next/last + jump-to + size picker.
|
|
442
|
+
* (TIER 1)
|
|
443
|
+
*/
|
|
444
|
+
declare function Pagination({ page, pageCount, onPageChange, showFirstLast, showJumpTo, showPageSize, pageSize, pageSizeOptions, onPageSizeChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
445
|
+
|
|
446
|
+
declare const fabVariants: (props?: ({
|
|
447
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
448
|
+
position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | null | undefined;
|
|
449
|
+
tone?: "secondary" | "primary" | "accent" | null | undefined;
|
|
450
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
451
|
+
interface FABProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'size'>, VariantProps<typeof fabVariants> {
|
|
452
|
+
icon?: React$1.ReactNode;
|
|
453
|
+
label: string;
|
|
454
|
+
extended?: boolean;
|
|
455
|
+
}
|
|
456
|
+
/**
|
|
457
|
+
* FAB — Floating Action Button. Pinned to viewport corners.
|
|
458
|
+
* Supports extended (icon + label visible) for primary actions.
|
|
459
|
+
* (TIER 1)
|
|
460
|
+
*/
|
|
461
|
+
declare const FAB: React$1.ForwardRefExoticComponent<FABProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
462
|
+
|
|
463
|
+
interface MobileNavItem {
|
|
464
|
+
id: string;
|
|
465
|
+
label: string;
|
|
466
|
+
icon: React$1.ReactNode;
|
|
467
|
+
active?: boolean;
|
|
468
|
+
badge?: number;
|
|
469
|
+
onClick?: () => void;
|
|
470
|
+
}
|
|
471
|
+
/**
|
|
472
|
+
* MobileBottomNav — fixed bottom navigation bar for mobile/tablet.
|
|
473
|
+
* Optimized for thumb-reach and 5 items max.
|
|
474
|
+
* (TIER 1)
|
|
475
|
+
*/
|
|
476
|
+
declare function MobileBottomNav({ items, className, }: {
|
|
477
|
+
items: MobileNavItem[];
|
|
478
|
+
className?: string;
|
|
479
|
+
}): react_jsx_runtime.JSX.Element;
|
|
480
|
+
|
|
481
|
+
interface TabItem {
|
|
482
|
+
id: string;
|
|
483
|
+
label: string;
|
|
484
|
+
badge?: React$1.ReactNode;
|
|
485
|
+
disabled?: boolean;
|
|
486
|
+
}
|
|
487
|
+
/**
|
|
488
|
+
* TabsOverflow — horizontally scrollable tabs that gracefully collapse
|
|
489
|
+
* overflow into a "More" dropdown. Measures via ResizeObserver.
|
|
490
|
+
* (TIER 1)
|
|
491
|
+
*/
|
|
492
|
+
declare function TabsOverflow({ items, value, onChange, className, }: {
|
|
493
|
+
items: TabItem[];
|
|
494
|
+
value: string;
|
|
495
|
+
onChange: (id: string) => void;
|
|
496
|
+
className?: string;
|
|
497
|
+
}): react_jsx_runtime.JSX.Element;
|
|
498
|
+
|
|
499
|
+
interface AppSwitcherApp {
|
|
500
|
+
id: string;
|
|
501
|
+
name: string;
|
|
502
|
+
icon: React$1.ReactNode;
|
|
503
|
+
href?: string;
|
|
504
|
+
description?: string;
|
|
505
|
+
onClick?: () => void;
|
|
506
|
+
}
|
|
507
|
+
/**
|
|
508
|
+
* AppSwitcher — Google-style waffle 3x3 launcher. Opens a popover with
|
|
509
|
+
* a grid of apps. (TIER 1)
|
|
510
|
+
*/
|
|
511
|
+
declare function AppSwitcher({ apps, trigger, className, }: {
|
|
512
|
+
apps: AppSwitcherApp[];
|
|
513
|
+
trigger?: React$1.ReactNode;
|
|
514
|
+
className?: string;
|
|
515
|
+
}): react_jsx_runtime.JSX.Element;
|
|
516
|
+
|
|
517
|
+
interface MegaMenuColumn {
|
|
518
|
+
heading: string;
|
|
519
|
+
items: Array<{
|
|
520
|
+
id: string;
|
|
521
|
+
label: string;
|
|
522
|
+
description?: string;
|
|
523
|
+
icon?: React$1.ReactNode;
|
|
524
|
+
href?: string;
|
|
525
|
+
onClick?: () => void;
|
|
526
|
+
badge?: React$1.ReactNode;
|
|
527
|
+
}>;
|
|
528
|
+
}
|
|
529
|
+
interface MegaMenuTrigger {
|
|
530
|
+
id: string;
|
|
531
|
+
label: string;
|
|
532
|
+
columns: MegaMenuColumn[];
|
|
533
|
+
featured?: React$1.ReactNode;
|
|
534
|
+
}
|
|
535
|
+
/**
|
|
536
|
+
* MegaMenu — multi-column dropdown for top navigation. Supports featured
|
|
537
|
+
* card slot per trigger. (TIER 1)
|
|
538
|
+
*/
|
|
539
|
+
declare function MegaMenu({ triggers, className, }: {
|
|
540
|
+
triggers: MegaMenuTrigger[];
|
|
541
|
+
className?: string;
|
|
542
|
+
}): react_jsx_runtime.JSX.Element;
|
|
543
|
+
|
|
544
|
+
/**
|
|
545
|
+
* Lightweight OKLCH color utilities for the Theme Builder Wizard.
|
|
546
|
+
* Pure TS, no deps. Math from CSS Color Module Level 4.
|
|
547
|
+
*/
|
|
548
|
+
interface OKLCH {
|
|
549
|
+
l: number;
|
|
550
|
+
c: number;
|
|
551
|
+
h: number;
|
|
552
|
+
}
|
|
553
|
+
declare function oklch(l: number, c: number, h: number): OKLCH;
|
|
554
|
+
declare function toCss({ l, c, h }: OKLCH): string;
|
|
555
|
+
/** Convert OKLCH to sRGB hex (approximate via sRGB gamut clip). */
|
|
556
|
+
declare function toHex(color: OKLCH): string;
|
|
557
|
+
/** OKLCH → Linear sRGB (for relative luminance / contrast calcs). */
|
|
558
|
+
declare function toRgb({ l, c, h }: OKLCH): {
|
|
559
|
+
r: number;
|
|
560
|
+
g: number;
|
|
561
|
+
b: number;
|
|
562
|
+
};
|
|
563
|
+
/** Approximate WCAG relative luminance from OKLCH. */
|
|
564
|
+
declare function luminance(color: OKLCH): number;
|
|
565
|
+
/** WCAG contrast ratio between two colors. */
|
|
566
|
+
declare function contrastRatio(a: OKLCH, b: OKLCH): number;
|
|
567
|
+
/** Color blindness simulation (Brettel et al., daltonization simplified). */
|
|
568
|
+
declare function simulateColorBlind(color: OKLCH, type: 'protan' | 'deutan' | 'tritan'): OKLCH;
|
|
569
|
+
/** Generate harmonies from a base color. */
|
|
570
|
+
declare function harmony(base: OKLCH, kind: 'analogous' | 'triadic' | 'split-complement' | 'monochromatic'): OKLCH[];
|
|
571
|
+
/** Build a 11-stop scale (50, 100..900, 950) from a base. */
|
|
572
|
+
declare function buildScale(base: OKLCH): OKLCH[];
|
|
573
|
+
|
|
574
|
+
interface BrandIdentity {
|
|
575
|
+
name: string;
|
|
576
|
+
tagline?: string;
|
|
577
|
+
logoSvg?: string;
|
|
578
|
+
mood: 'corporate' | 'playful' | 'minimal' | 'futuristic' | 'elegant';
|
|
579
|
+
}
|
|
580
|
+
interface ColorSystem {
|
|
581
|
+
primary: OKLCH;
|
|
582
|
+
secondary: OKLCH;
|
|
583
|
+
accent: OKLCH;
|
|
584
|
+
success: OKLCH;
|
|
585
|
+
warning: OKLCH;
|
|
586
|
+
destructive: OKLCH;
|
|
587
|
+
info: OKLCH;
|
|
588
|
+
grayScale: 'slate' | 'neutral' | 'zinc' | 'stone' | 'cool' | 'warm';
|
|
589
|
+
}
|
|
590
|
+
interface ColorModes {
|
|
591
|
+
light: boolean;
|
|
592
|
+
dark: boolean;
|
|
593
|
+
highContrast: boolean;
|
|
594
|
+
colorBlindSim?: 'protan' | 'deutan' | 'tritan' | null;
|
|
595
|
+
}
|
|
596
|
+
interface Typography {
|
|
597
|
+
fontSans: string;
|
|
598
|
+
fontSerif: string;
|
|
599
|
+
fontMono: string;
|
|
600
|
+
scale: 'modular' | 'fluid';
|
|
601
|
+
baseSize: number;
|
|
602
|
+
lineHeight: number;
|
|
603
|
+
letterSpacing: number;
|
|
604
|
+
weights: number[];
|
|
605
|
+
}
|
|
606
|
+
interface SpacingLayout {
|
|
607
|
+
scale: '4-base' | '8-base' | 'fibonacci' | 'golden';
|
|
608
|
+
borderRadius: 'sharp' | 'soft' | 'round';
|
|
609
|
+
borderWidth: 'thin' | 'medium' | 'thick';
|
|
610
|
+
}
|
|
611
|
+
interface MotionConfig {
|
|
612
|
+
intensity: 'reduced' | 'normal' | 'expressive';
|
|
613
|
+
durationFast: number;
|
|
614
|
+
durationBase: number;
|
|
615
|
+
durationSlow: number;
|
|
616
|
+
easing: 'linear' | 'ease-in-out' | 'spring' | 'bounce' | 'anticipate';
|
|
617
|
+
}
|
|
618
|
+
interface EffectsConfig {
|
|
619
|
+
shadows: 'none' | 'subtle' | 'material' | 'elevated' | 'dramatic';
|
|
620
|
+
glassmorphism: number;
|
|
621
|
+
neumorphism: boolean;
|
|
622
|
+
glow: boolean;
|
|
623
|
+
meshGradient: boolean;
|
|
624
|
+
noiseOverlay: number;
|
|
625
|
+
}
|
|
626
|
+
interface IconographyConfig {
|
|
627
|
+
set: 'lucide' | 'phosphor' | 'tabler' | 'heroicons';
|
|
628
|
+
weight: 'thin' | 'regular' | 'bold';
|
|
629
|
+
style: 'linear' | 'filled' | 'duotone';
|
|
630
|
+
}
|
|
631
|
+
interface ThemeBuilderState {
|
|
632
|
+
brand: BrandIdentity;
|
|
633
|
+
colors: ColorSystem;
|
|
634
|
+
modes: ColorModes;
|
|
635
|
+
typography: Typography;
|
|
636
|
+
spacing: SpacingLayout;
|
|
637
|
+
motion: MotionConfig;
|
|
638
|
+
effects: EffectsConfig;
|
|
639
|
+
iconography: IconographyConfig;
|
|
640
|
+
density: 'compact' | 'comfortable' | 'spacious';
|
|
641
|
+
}
|
|
642
|
+
declare const DEFAULT_THEME_STATE: ThemeBuilderState;
|
|
643
|
+
|
|
644
|
+
declare function ThemeBuilderWizard({ initial, onComplete, onChange, className, }: {
|
|
645
|
+
initial?: Partial<ThemeBuilderState>;
|
|
646
|
+
onComplete?: (state: ThemeBuilderState) => void;
|
|
647
|
+
onChange?: (state: ThemeBuilderState) => void;
|
|
648
|
+
className?: string;
|
|
649
|
+
}): react_jsx_runtime.JSX.Element;
|
|
650
|
+
|
|
651
|
+
interface ThemePreset {
|
|
652
|
+
id: string;
|
|
653
|
+
name: string;
|
|
654
|
+
mood: string;
|
|
655
|
+
description: string;
|
|
656
|
+
primary: OKLCH;
|
|
657
|
+
secondary: OKLCH;
|
|
658
|
+
accent: OKLCH;
|
|
659
|
+
fontSans: string;
|
|
660
|
+
fontSerif: string;
|
|
661
|
+
fontMono: string;
|
|
662
|
+
borderRadius: 'sharp' | 'soft' | 'round';
|
|
663
|
+
motionIntensity: 'reduced' | 'normal' | 'expressive';
|
|
664
|
+
effects: ('shadow' | 'glass' | 'neumorphism' | 'glow' | 'mesh' | 'noise')[];
|
|
665
|
+
density: 'compact' | 'comfortable' | 'spacious';
|
|
666
|
+
}
|
|
667
|
+
declare const STARTER_PRESETS: ThemePreset[];
|
|
668
|
+
declare function findPreset(id: string): ThemePreset | undefined;
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Export the wizard state to multiple formats:
|
|
672
|
+
* - tokens.css (CSS variables, light + dark)
|
|
673
|
+
* - tailwind.config.js (extended)
|
|
674
|
+
* - tokens.json (W3C Design Tokens spec)
|
|
675
|
+
* - figma-tokens.json (Style Dictionary compatible)
|
|
676
|
+
* - theme.tsx (TypeScript ThemeProvider config)
|
|
677
|
+
*/
|
|
678
|
+
declare function exportTokensCss(state: ThemeBuilderState): string;
|
|
679
|
+
declare function exportTailwindConfig(state: ThemeBuilderState): string;
|
|
680
|
+
declare function exportTokensJson(state: ThemeBuilderState): string;
|
|
681
|
+
declare function exportFigmaTokens(state: ThemeBuilderState): string;
|
|
682
|
+
declare function exportThemeProvider(state: ThemeBuilderState): string;
|
|
683
|
+
declare function downloadAsFile(filename: string, content: string, mime?: string): void;
|
|
684
|
+
|
|
685
|
+
declare const glassVariants: (props?: ({
|
|
686
|
+
intensity?: "light" | "medium" | "heavy" | null | undefined;
|
|
687
|
+
tint?: "none" | "primary" | "accent" | null | undefined;
|
|
688
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
689
|
+
interface GlassCardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof glassVariants> {
|
|
690
|
+
}
|
|
691
|
+
/**
|
|
692
|
+
* GlassCard — glassmorphism container with backdrop-blur tunable.
|
|
693
|
+
* (TIER 2)
|
|
694
|
+
*/
|
|
695
|
+
declare const GlassCard: React$1.ForwardRefExoticComponent<GlassCardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
696
|
+
|
|
697
|
+
declare const neuVariants: (props?: ({
|
|
698
|
+
elevation?: "flat" | "raised" | "pressed" | null | undefined;
|
|
699
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
700
|
+
interface NeumorphicCardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof neuVariants> {
|
|
701
|
+
}
|
|
702
|
+
/**
|
|
703
|
+
* NeumorphicCard — soft shadow elevated/pressed surface for "soft" UI styles.
|
|
704
|
+
* (TIER 2)
|
|
705
|
+
*/
|
|
706
|
+
declare const NeumorphicCard: React$1.ForwardRefExoticComponent<NeumorphicCardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
707
|
+
|
|
708
|
+
interface StatsCardProps {
|
|
709
|
+
label: string;
|
|
710
|
+
value: number | string;
|
|
711
|
+
unit?: string;
|
|
712
|
+
trend?: number;
|
|
713
|
+
trendDirection?: 'up' | 'down' | 'flat';
|
|
714
|
+
description?: string;
|
|
715
|
+
sparkline?: number[];
|
|
716
|
+
icon?: React$1.ReactNode;
|
|
717
|
+
animate?: boolean;
|
|
718
|
+
className?: string;
|
|
719
|
+
}
|
|
720
|
+
/**
|
|
721
|
+
* StatsCard — KPI card with animated count-up + sparkline + trend badge.
|
|
722
|
+
* (TIER 3)
|
|
723
|
+
*/
|
|
724
|
+
declare function StatsCard({ label, value, unit, trend, trendDirection, description, sparkline, icon, animate, className, }: StatsCardProps): react_jsx_runtime.JSX.Element;
|
|
725
|
+
|
|
726
|
+
interface ActivityFeedItem {
|
|
727
|
+
id: string;
|
|
728
|
+
actor: {
|
|
729
|
+
name: string;
|
|
730
|
+
avatar?: string;
|
|
731
|
+
};
|
|
732
|
+
verb: string;
|
|
733
|
+
target?: string;
|
|
734
|
+
meta?: string;
|
|
735
|
+
timestamp: string;
|
|
736
|
+
icon?: React$1.ReactNode;
|
|
737
|
+
actions?: React$1.ReactNode;
|
|
738
|
+
}
|
|
739
|
+
/**
|
|
740
|
+
* ActivityFeed — vertical timeline of events with avatars + actions.
|
|
741
|
+
* (TIER 3)
|
|
742
|
+
*/
|
|
743
|
+
declare function ActivityFeed({ items, className, emptyMessage, }: {
|
|
744
|
+
items: ActivityFeedItem[];
|
|
745
|
+
className?: string;
|
|
746
|
+
emptyMessage?: string;
|
|
747
|
+
}): react_jsx_runtime.JSX.Element;
|
|
748
|
+
|
|
749
|
+
interface Notification {
|
|
750
|
+
id: string;
|
|
751
|
+
title: string;
|
|
752
|
+
body?: string;
|
|
753
|
+
timestamp: string;
|
|
754
|
+
read?: boolean;
|
|
755
|
+
variant?: 'info' | 'success' | 'warning' | 'destructive';
|
|
756
|
+
href?: string;
|
|
757
|
+
onClick?: () => void;
|
|
758
|
+
}
|
|
759
|
+
/**
|
|
760
|
+
* NotificationCenter — bell icon trigger + dropdown with read/unread states.
|
|
761
|
+
* (TIER 3)
|
|
762
|
+
*/
|
|
763
|
+
declare function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, className, }: {
|
|
764
|
+
notifications: Notification[];
|
|
765
|
+
onMarkRead?: (id: string) => void;
|
|
766
|
+
onMarkAllRead?: () => void;
|
|
767
|
+
className?: string;
|
|
768
|
+
}): react_jsx_runtime.JSX.Element;
|
|
769
|
+
|
|
770
|
+
/**
|
|
771
|
+
* useConfetti — fire celebratory confetti burst from any component.
|
|
772
|
+
* Wraps canvas-confetti. (TIER 3)
|
|
773
|
+
*/
|
|
774
|
+
declare function useConfetti(): (options?: confettiLib.Options) => void;
|
|
775
|
+
/**
|
|
776
|
+
* ConfettiButton — drop-in button that fires confetti on click.
|
|
777
|
+
*/
|
|
778
|
+
declare function ConfettiButton({ children, onClick, ...props }: React$1.ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
|
|
779
|
+
|
|
780
|
+
declare const tierVariants: (props?: ({
|
|
781
|
+
tier?: "gold" | "silver" | "bronze" | "platinum" | "legendary" | null | undefined;
|
|
782
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
783
|
+
interface AchievementBadgeProps extends VariantProps<typeof tierVariants> {
|
|
784
|
+
title: string;
|
|
785
|
+
description?: string;
|
|
786
|
+
icon?: React$1.ReactNode;
|
|
787
|
+
unlocked?: boolean;
|
|
788
|
+
unlockedAt?: string;
|
|
789
|
+
className?: string;
|
|
790
|
+
}
|
|
791
|
+
/**
|
|
792
|
+
* AchievementBadge — gamification badge with tier coloring + unlock state.
|
|
793
|
+
* (TIER 3)
|
|
794
|
+
*/
|
|
795
|
+
declare function AchievementBadge({ title, description, icon, tier, unlocked, unlockedAt, className, }: AchievementBadgeProps): react_jsx_runtime.JSX.Element;
|
|
796
|
+
|
|
797
|
+
interface TourStep {
|
|
798
|
+
id: string;
|
|
799
|
+
targetSelector: string;
|
|
800
|
+
title: string;
|
|
801
|
+
description: string;
|
|
802
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
803
|
+
}
|
|
804
|
+
/**
|
|
805
|
+
* OnboardingTour — Joyride-style multi-step coach marks.
|
|
806
|
+
* Highlights elements via querySelector + renders a popover beside them.
|
|
807
|
+
* (TIER 3)
|
|
808
|
+
*/
|
|
809
|
+
declare function OnboardingTour({ steps, active, onDismiss, onComplete, }: {
|
|
810
|
+
steps: TourStep[];
|
|
811
|
+
active: boolean;
|
|
812
|
+
onDismiss?: () => void;
|
|
813
|
+
onComplete?: () => void;
|
|
814
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
815
|
+
|
|
816
|
+
interface ShortcutGroup {
|
|
817
|
+
heading: string;
|
|
818
|
+
shortcuts: Array<{
|
|
819
|
+
keys: string[];
|
|
820
|
+
label: string;
|
|
821
|
+
}>;
|
|
822
|
+
}
|
|
823
|
+
/**
|
|
824
|
+
* KeyboardShortcutsModal — Cmd+/ trigger that lists app shortcuts grouped.
|
|
825
|
+
* (TIER 3)
|
|
826
|
+
*/
|
|
827
|
+
declare function KeyboardShortcutsModal({ groups, open, onOpenChange, }: {
|
|
828
|
+
groups: ShortcutGroup[];
|
|
829
|
+
open: boolean;
|
|
830
|
+
onOpenChange: (v: boolean) => void;
|
|
831
|
+
}): react_jsx_runtime.JSX.Element;
|
|
832
|
+
/**
|
|
833
|
+
* useShortcutsModal — hook that toggles a modal on Cmd+/ (or Ctrl+/).
|
|
834
|
+
*/
|
|
835
|
+
declare function useShortcutsModal(): {
|
|
836
|
+
readonly open: boolean;
|
|
837
|
+
readonly setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
838
|
+
};
|
|
839
|
+
|
|
840
|
+
/**
|
|
841
|
+
* Decorative backgrounds — pure CSS, no JS, respects prefers-reduced-motion.
|
|
842
|
+
* (TIER 3)
|
|
843
|
+
*/
|
|
844
|
+
declare function MeshGradient({ className, colors, intensity, }: {
|
|
845
|
+
className?: string;
|
|
846
|
+
colors?: string[];
|
|
847
|
+
intensity?: number;
|
|
848
|
+
}): react_jsx_runtime.JSX.Element;
|
|
849
|
+
declare function AuroraBackground({ className }: {
|
|
850
|
+
className?: string;
|
|
851
|
+
}): react_jsx_runtime.JSX.Element;
|
|
852
|
+
declare function DotGrid({ className, size, dotSize, color, }: {
|
|
853
|
+
className?: string;
|
|
854
|
+
size?: number;
|
|
855
|
+
dotSize?: number;
|
|
856
|
+
color?: string;
|
|
857
|
+
}): react_jsx_runtime.JSX.Element;
|
|
858
|
+
declare function NoiseOverlay({ className, opacity, }: {
|
|
859
|
+
className?: string;
|
|
860
|
+
opacity?: number;
|
|
861
|
+
}): react_jsx_runtime.JSX.Element;
|
|
862
|
+
|
|
863
|
+
/**
|
|
864
|
+
* TiltCard — 3D tilt effect on hover via mouse position. Pure CSS transform
|
|
865
|
+
* no extra deps. Disabled when prefers-reduced-motion. (TIER 3)
|
|
866
|
+
*/
|
|
867
|
+
declare function TiltCard({ children, className, intensity, ...props }: React$1.HTMLAttributes<HTMLDivElement> & {
|
|
868
|
+
intensity?: number;
|
|
869
|
+
}): react_jsx_runtime.JSX.Element;
|
|
870
|
+
|
|
871
|
+
declare const bannerVariants: (props?: ({
|
|
872
|
+
tone?: "destructive" | "info" | "success" | "warning" | "neutral" | null | undefined;
|
|
873
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
874
|
+
interface BannerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerVariants> {
|
|
875
|
+
title?: string;
|
|
876
|
+
dismissible?: boolean;
|
|
877
|
+
onDismiss?: () => void;
|
|
878
|
+
}
|
|
879
|
+
/**
|
|
880
|
+
* Banner — page-level alert with variant tone + optional dismiss.
|
|
881
|
+
* (TIER 3)
|
|
882
|
+
*/
|
|
883
|
+
declare function Banner({ tone, title, dismissible, onDismiss, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
|
|
884
|
+
|
|
885
|
+
/**
|
|
886
|
+
* LottiePlayer — wrap lottie-react with a11y label + reduced-motion respect.
|
|
887
|
+
* Accepts JSON animation data or a URL fetched on demand.
|
|
888
|
+
* (TIER 3)
|
|
889
|
+
*/
|
|
890
|
+
interface LottiePlayerProps extends Omit<LottieComponentProps, 'animationData' | 'data'> {
|
|
891
|
+
src?: string;
|
|
892
|
+
data?: object;
|
|
893
|
+
ariaLabel: string;
|
|
894
|
+
className?: string;
|
|
895
|
+
}
|
|
896
|
+
declare function LottiePlayer({ src, data, ariaLabel, className, ...rest }: LottiePlayerProps): react_jsx_runtime.JSX.Element;
|
|
897
|
+
|
|
898
|
+
/**
|
|
899
|
+
* EChartsCard — generic ECharts wrapper. Pass option object directly. Theme
|
|
900
|
+
* follows tokens via CSS variables. (TIER 4 charts core)
|
|
901
|
+
*/
|
|
902
|
+
interface EChartsCardProps {
|
|
903
|
+
option: EChartsOption;
|
|
904
|
+
height?: number | string;
|
|
905
|
+
loading?: boolean;
|
|
906
|
+
className?: string;
|
|
907
|
+
onEvents?: Record<string, (params: unknown) => void>;
|
|
908
|
+
ariaLabel?: string;
|
|
909
|
+
}
|
|
910
|
+
declare function EChartsCard({ option, height, loading, className, onEvents, ariaLabel, }: EChartsCardProps): react_jsx_runtime.JSX.Element;
|
|
911
|
+
/**
|
|
912
|
+
* Quick presets for common charts. Pass `data` shaped per preset.
|
|
913
|
+
*/
|
|
914
|
+
declare const echartsPresets: {
|
|
915
|
+
readonly line: (data: {
|
|
916
|
+
x: string[];
|
|
917
|
+
series: {
|
|
918
|
+
name: string;
|
|
919
|
+
values: number[];
|
|
920
|
+
}[];
|
|
921
|
+
}) => EChartsOption;
|
|
922
|
+
readonly bar: (data: {
|
|
923
|
+
x: string[];
|
|
924
|
+
series: {
|
|
925
|
+
name: string;
|
|
926
|
+
values: number[];
|
|
927
|
+
}[];
|
|
928
|
+
}) => EChartsOption;
|
|
929
|
+
readonly pie: (data: {
|
|
930
|
+
name: string;
|
|
931
|
+
value: number;
|
|
932
|
+
}[]) => EChartsOption;
|
|
933
|
+
readonly heatmap: (data: {
|
|
934
|
+
x: string[];
|
|
935
|
+
y: string[];
|
|
936
|
+
values: [number, number, number][];
|
|
937
|
+
}) => EChartsOption;
|
|
938
|
+
readonly sankey: (data: {
|
|
939
|
+
nodes: {
|
|
940
|
+
name: string;
|
|
941
|
+
}[];
|
|
942
|
+
links: {
|
|
943
|
+
source: string;
|
|
944
|
+
target: string;
|
|
945
|
+
value: number;
|
|
946
|
+
}[];
|
|
947
|
+
}) => EChartsOption;
|
|
948
|
+
readonly funnel: (data: {
|
|
949
|
+
name: string;
|
|
950
|
+
value: number;
|
|
951
|
+
}[]) => EChartsOption;
|
|
952
|
+
readonly treemap: (data: {
|
|
953
|
+
name: string;
|
|
954
|
+
value: number;
|
|
955
|
+
children?: unknown[];
|
|
956
|
+
}[]) => EChartsOption;
|
|
957
|
+
readonly radar: (data: {
|
|
958
|
+
indicator: {
|
|
959
|
+
name: string;
|
|
960
|
+
max: number;
|
|
961
|
+
}[];
|
|
962
|
+
series: {
|
|
963
|
+
name: string;
|
|
964
|
+
value: number[];
|
|
965
|
+
}[];
|
|
966
|
+
}) => EChartsOption;
|
|
967
|
+
readonly gauge: (value: number, max?: number) => EChartsOption;
|
|
968
|
+
};
|
|
969
|
+
|
|
970
|
+
/**
|
|
971
|
+
* Sparkline — inline tiny chart. Renders SVG polyline + optional area fill.
|
|
972
|
+
* (TIER 4 sparklines)
|
|
973
|
+
*/
|
|
974
|
+
interface SparklineProps {
|
|
975
|
+
data: number[];
|
|
976
|
+
width?: number;
|
|
977
|
+
height?: number;
|
|
978
|
+
stroke?: string;
|
|
979
|
+
fill?: string;
|
|
980
|
+
showPoints?: boolean;
|
|
981
|
+
showMinMax?: boolean;
|
|
982
|
+
className?: string;
|
|
983
|
+
ariaLabel?: string;
|
|
984
|
+
}
|
|
985
|
+
declare function Sparkline({ data, width, height, stroke, fill, showPoints, showMinMax, className, ariaLabel, }: SparklineProps): react_jsx_runtime.JSX.Element | null;
|
|
986
|
+
declare function WinLossSparkline({ data, className, ariaLabel, }: {
|
|
987
|
+
data: ('win' | 'loss' | 'tie')[];
|
|
988
|
+
className?: string;
|
|
989
|
+
ariaLabel?: string;
|
|
990
|
+
}): react_jsx_runtime.JSX.Element;
|
|
991
|
+
|
|
992
|
+
/**
|
|
993
|
+
* Radial gauge animated (semi-circle or full circle). SVG-only, no deps.
|
|
994
|
+
* (TIER 4 gauges)
|
|
995
|
+
*/
|
|
996
|
+
interface RadialGaugeProps {
|
|
997
|
+
value: number;
|
|
998
|
+
max?: number;
|
|
999
|
+
min?: number;
|
|
1000
|
+
label?: string;
|
|
1001
|
+
unit?: string;
|
|
1002
|
+
size?: number;
|
|
1003
|
+
thickness?: number;
|
|
1004
|
+
variant?: 'semi' | 'full';
|
|
1005
|
+
tone?: 'primary' | 'success' | 'warning' | 'destructive';
|
|
1006
|
+
className?: string;
|
|
1007
|
+
}
|
|
1008
|
+
declare function RadialGauge({ value, max, min, label, unit, size, thickness, variant, tone, className, }: RadialGaugeProps): react_jsx_runtime.JSX.Element;
|
|
1009
|
+
/**
|
|
1010
|
+
* ActivityRing — Apple Watch-style multi-ring progress indicator.
|
|
1011
|
+
*/
|
|
1012
|
+
interface ActivityRingProps {
|
|
1013
|
+
rings: {
|
|
1014
|
+
value: number;
|
|
1015
|
+
max: number;
|
|
1016
|
+
color: string;
|
|
1017
|
+
label?: string;
|
|
1018
|
+
}[];
|
|
1019
|
+
size?: number;
|
|
1020
|
+
thickness?: number;
|
|
1021
|
+
className?: string;
|
|
1022
|
+
}
|
|
1023
|
+
declare function ActivityRing({ rings, size, thickness, className }: ActivityRingProps): react_jsx_runtime.JSX.Element;
|
|
1024
|
+
/**
|
|
1025
|
+
* LinearGauge — horizontal progress with label + value.
|
|
1026
|
+
*/
|
|
1027
|
+
interface LinearGaugeProps {
|
|
1028
|
+
value: number;
|
|
1029
|
+
max?: number;
|
|
1030
|
+
label?: string;
|
|
1031
|
+
segments?: number;
|
|
1032
|
+
tone?: 'primary' | 'success' | 'warning' | 'destructive';
|
|
1033
|
+
className?: string;
|
|
1034
|
+
}
|
|
1035
|
+
declare function LinearGauge({ value, max, label, segments, tone, className, }: LinearGaugeProps): react_jsx_runtime.JSX.Element;
|
|
1036
|
+
|
|
1037
|
+
/**
|
|
1038
|
+
* NetworkGraph — Cytoscape.js wrapper for force-directed graph viz.
|
|
1039
|
+
* Useful for ESCO knowledge graph, org chart, dependency maps.
|
|
1040
|
+
* (TIER 4 specialized viz)
|
|
1041
|
+
*/
|
|
1042
|
+
interface NetworkGraphProps {
|
|
1043
|
+
nodes: {
|
|
1044
|
+
id: string;
|
|
1045
|
+
label?: string;
|
|
1046
|
+
group?: string;
|
|
1047
|
+
size?: number;
|
|
1048
|
+
}[];
|
|
1049
|
+
edges: {
|
|
1050
|
+
id: string;
|
|
1051
|
+
source: string;
|
|
1052
|
+
target: string;
|
|
1053
|
+
label?: string;
|
|
1054
|
+
weight?: number;
|
|
1055
|
+
}[];
|
|
1056
|
+
layout?: 'cose' | 'circle' | 'grid' | 'concentric' | 'breadthfirst';
|
|
1057
|
+
height?: number | string;
|
|
1058
|
+
className?: string;
|
|
1059
|
+
ariaLabel?: string;
|
|
1060
|
+
}
|
|
1061
|
+
declare function NetworkGraph({ nodes, edges, layout, height, className, ariaLabel, }: NetworkGraphProps): react_jsx_runtime.JSX.Element;
|
|
1062
|
+
|
|
1063
|
+
interface FormWizardStep<TState = unknown> extends StepperStep {
|
|
1064
|
+
render: (state: TState, update: (patch: Partial<TState>) => void) => React$1.ReactNode;
|
|
1065
|
+
validate?: (state: TState) => string | null;
|
|
1066
|
+
}
|
|
1067
|
+
/**
|
|
1068
|
+
* FormWizard — multi-step form with per-step validation, save & resume hook,
|
|
1069
|
+
* and skeleton state for "load draft" UX. (TIER 6)
|
|
1070
|
+
*/
|
|
1071
|
+
interface FormWizardProps<TState> {
|
|
1072
|
+
steps: FormWizardStep<TState>[];
|
|
1073
|
+
initial: TState;
|
|
1074
|
+
onComplete: (state: TState) => void;
|
|
1075
|
+
onSaveDraft?: (state: TState) => void;
|
|
1076
|
+
draft?: TState;
|
|
1077
|
+
className?: string;
|
|
1078
|
+
title?: string;
|
|
1079
|
+
}
|
|
1080
|
+
declare function FormWizard<TState extends Record<string, unknown>>({ steps, initial, onComplete, onSaveDraft, draft, className, title, }: FormWizardProps<TState>): react_jsx_runtime.JSX.Element;
|
|
1081
|
+
|
|
1082
|
+
/**
|
|
1083
|
+
* Smart inputs — domain-aware inputs with formatting + validation.
|
|
1084
|
+
* (TIER 6)
|
|
1085
|
+
*/
|
|
1086
|
+
declare function PhoneInputField({ value, onChange, defaultCountry, className, }: {
|
|
1087
|
+
value: string;
|
|
1088
|
+
onChange: (val: string) => void;
|
|
1089
|
+
defaultCountry?: string;
|
|
1090
|
+
className?: string;
|
|
1091
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1092
|
+
interface MoneyInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
1093
|
+
value: number | null;
|
|
1094
|
+
onChange: (val: number | null) => void;
|
|
1095
|
+
currency?: string;
|
|
1096
|
+
locale?: string;
|
|
1097
|
+
}
|
|
1098
|
+
declare function MoneyInput({ value, onChange, currency, locale, className, ...rest }: MoneyInputProps): react_jsx_runtime.JSX.Element;
|
|
1099
|
+
/**
|
|
1100
|
+
* IbanInput — formats IBAN with spaces every 4 chars + light validation.
|
|
1101
|
+
*/
|
|
1102
|
+
declare function IbanInput({ value, onChange, className, ...rest }: Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
|
|
1103
|
+
value: string;
|
|
1104
|
+
onChange: (val: string) => void;
|
|
1105
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1106
|
+
/**
|
|
1107
|
+
* TaxIdInput — Italian Codice Fiscale or VAT.
|
|
1108
|
+
*/
|
|
1109
|
+
declare function TaxIdInput({ value, onChange, variant, className, ...rest }: Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
|
|
1110
|
+
value: string;
|
|
1111
|
+
onChange: (val: string) => void;
|
|
1112
|
+
variant?: 'cf' | 'vat';
|
|
1113
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1114
|
+
|
|
1115
|
+
/**
|
|
1116
|
+
* OtpInput — segmented one-time password input. Auto-advance + paste support.
|
|
1117
|
+
* (TIER 6)
|
|
1118
|
+
*/
|
|
1119
|
+
interface OtpInputProps {
|
|
1120
|
+
length?: number;
|
|
1121
|
+
value: string;
|
|
1122
|
+
onChange: (v: string) => void;
|
|
1123
|
+
onComplete?: (v: string) => void;
|
|
1124
|
+
disabled?: boolean;
|
|
1125
|
+
className?: string;
|
|
1126
|
+
ariaLabel?: string;
|
|
1127
|
+
}
|
|
1128
|
+
declare function OtpInput({ length, value, onChange, onComplete, disabled, className, ariaLabel, }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
1129
|
+
|
|
1130
|
+
/**
|
|
1131
|
+
* PasswordStrengthMeter — uses zxcvbn for entropy scoring (0-4).
|
|
1132
|
+
* Shows visual bars + feedback suggestions.
|
|
1133
|
+
* (TIER 6)
|
|
1134
|
+
*/
|
|
1135
|
+
declare function PasswordStrengthMeter({ password, userInputs, className, }: {
|
|
1136
|
+
password: string;
|
|
1137
|
+
userInputs?: string[];
|
|
1138
|
+
className?: string;
|
|
1139
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
1140
|
+
|
|
1141
|
+
/**
|
|
1142
|
+
* SignaturePadField — canvas-based signature capture with clear + save.
|
|
1143
|
+
* (TIER 6)
|
|
1144
|
+
*/
|
|
1145
|
+
interface SignaturePadFieldProps {
|
|
1146
|
+
onSave?: (dataUrl: string) => void;
|
|
1147
|
+
width?: number;
|
|
1148
|
+
height?: number;
|
|
1149
|
+
className?: string;
|
|
1150
|
+
ariaLabel?: string;
|
|
1151
|
+
}
|
|
1152
|
+
declare function SignaturePadField({ onSave, width, height, className, ariaLabel, }: SignaturePadFieldProps): react_jsx_runtime.JSX.Element;
|
|
1153
|
+
|
|
1154
|
+
/**
|
|
1155
|
+
* FileDropzone — drag/drop upload zone with multi-file support, validation,
|
|
1156
|
+
* and per-file progress slot. (TIER 6 + TIER 9)
|
|
1157
|
+
*/
|
|
1158
|
+
interface FileDropzoneProps {
|
|
1159
|
+
accept?: string;
|
|
1160
|
+
multiple?: boolean;
|
|
1161
|
+
maxSize?: number;
|
|
1162
|
+
onFiles: (files: File[]) => void;
|
|
1163
|
+
files?: {
|
|
1164
|
+
file: File;
|
|
1165
|
+
progress?: number;
|
|
1166
|
+
error?: string;
|
|
1167
|
+
}[];
|
|
1168
|
+
onRemove?: (file: File) => void;
|
|
1169
|
+
className?: string;
|
|
1170
|
+
label?: string;
|
|
1171
|
+
}
|
|
1172
|
+
declare function FileDropzone({ accept, multiple, maxSize, onFiles, files, onRemove, className, label, }: FileDropzoneProps): react_jsx_runtime.JSX.Element;
|
|
1173
|
+
|
|
1174
|
+
interface KanbanCard {
|
|
1175
|
+
id: string;
|
|
1176
|
+
title: string;
|
|
1177
|
+
description?: string;
|
|
1178
|
+
assignee?: {
|
|
1179
|
+
name: string;
|
|
1180
|
+
avatar?: string;
|
|
1181
|
+
};
|
|
1182
|
+
badge?: React$1.ReactNode;
|
|
1183
|
+
meta?: React$1.ReactNode;
|
|
1184
|
+
}
|
|
1185
|
+
interface KanbanColumn {
|
|
1186
|
+
id: string;
|
|
1187
|
+
title: string;
|
|
1188
|
+
cards: KanbanCard[];
|
|
1189
|
+
color?: string;
|
|
1190
|
+
}
|
|
1191
|
+
/**
|
|
1192
|
+
* KanbanBoard — accessible drag-drop kanban (column reorder + cross-column).
|
|
1193
|
+
* Uses @dnd-kit. Ships full keyboard navigation. (TIER 5)
|
|
1194
|
+
*/
|
|
1195
|
+
declare function KanbanBoard({ columns: initialColumns, onChange, onAddCard, className, }: {
|
|
1196
|
+
columns: KanbanColumn[];
|
|
1197
|
+
onChange: (columns: KanbanColumn[]) => void;
|
|
1198
|
+
onAddCard?: (columnId: string) => void;
|
|
1199
|
+
className?: string;
|
|
1200
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1201
|
+
|
|
1202
|
+
interface TimelineEvent {
|
|
1203
|
+
id: string;
|
|
1204
|
+
time: string;
|
|
1205
|
+
title: string;
|
|
1206
|
+
description?: string;
|
|
1207
|
+
icon?: React$1.ReactNode;
|
|
1208
|
+
tone?: 'primary' | 'success' | 'warning' | 'destructive' | 'muted';
|
|
1209
|
+
}
|
|
1210
|
+
/**
|
|
1211
|
+
* Timeline — vertical event timeline. (TIER 5)
|
|
1212
|
+
*/
|
|
1213
|
+
declare function Timeline({ events, className, emptyMessage, }: {
|
|
1214
|
+
events: TimelineEvent[];
|
|
1215
|
+
className?: string;
|
|
1216
|
+
emptyMessage?: string;
|
|
1217
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1218
|
+
|
|
1219
|
+
interface Comment {
|
|
1220
|
+
id: string;
|
|
1221
|
+
author: {
|
|
1222
|
+
id: string;
|
|
1223
|
+
name: string;
|
|
1224
|
+
avatar?: string;
|
|
1225
|
+
};
|
|
1226
|
+
body: string;
|
|
1227
|
+
timestamp: string;
|
|
1228
|
+
reactions?: Record<string, number>;
|
|
1229
|
+
replies?: Comment[];
|
|
1230
|
+
}
|
|
1231
|
+
/**
|
|
1232
|
+
* CommentThread — threaded comments with reply + reactions + mention support.
|
|
1233
|
+
* @mention parsing renders mentions as styled spans (parent supplies links).
|
|
1234
|
+
* (TIER 5)
|
|
1235
|
+
*/
|
|
1236
|
+
declare function CommentThread({ comments, onReply, onReact, className, depth, }: {
|
|
1237
|
+
comments: Comment[];
|
|
1238
|
+
onReply?: (parentId: string, body: string) => void;
|
|
1239
|
+
onReact?: (id: string, emoji: string) => void;
|
|
1240
|
+
className?: string;
|
|
1241
|
+
depth?: number;
|
|
1242
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1243
|
+
|
|
1244
|
+
interface CalendarEvent {
|
|
1245
|
+
id: string;
|
|
1246
|
+
date: string;
|
|
1247
|
+
title: string;
|
|
1248
|
+
tone?: 'primary' | 'success' | 'warning' | 'destructive';
|
|
1249
|
+
}
|
|
1250
|
+
/**
|
|
1251
|
+
* CalendarGrid — month view calendar with event dots + click-to-select.
|
|
1252
|
+
* Pure SVG/HTML, no DnD here (heavy DnD belongs to a separate Calendar prod
|
|
1253
|
+
* component for booking flows). (TIER 5)
|
|
1254
|
+
*/
|
|
1255
|
+
declare function CalendarGrid({ month, year, events, selected, onSelectDate, className, }: {
|
|
1256
|
+
month: number;
|
|
1257
|
+
year: number;
|
|
1258
|
+
events?: CalendarEvent[];
|
|
1259
|
+
selected?: string;
|
|
1260
|
+
onSelectDate?: (iso: string) => void;
|
|
1261
|
+
className?: string;
|
|
1262
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1263
|
+
|
|
1264
|
+
/**
|
|
1265
|
+
* VideoPlayer — accessible HTML5 video with custom controls + chapters slot.
|
|
1266
|
+
* Renders captions/track elements when provided. (TIER 7)
|
|
1267
|
+
*/
|
|
1268
|
+
interface VideoChapter {
|
|
1269
|
+
start: number;
|
|
1270
|
+
title: string;
|
|
1271
|
+
}
|
|
1272
|
+
interface VideoCaption {
|
|
1273
|
+
src: string;
|
|
1274
|
+
srcLang: string;
|
|
1275
|
+
label: string;
|
|
1276
|
+
default?: boolean;
|
|
1277
|
+
}
|
|
1278
|
+
interface VideoPlayerProps {
|
|
1279
|
+
src: string;
|
|
1280
|
+
poster?: string;
|
|
1281
|
+
chapters?: VideoChapter[];
|
|
1282
|
+
captions?: VideoCaption[];
|
|
1283
|
+
className?: string;
|
|
1284
|
+
ariaLabel?: string;
|
|
1285
|
+
}
|
|
1286
|
+
declare function VideoPlayer({ src, poster, chapters, captions, className, ariaLabel, }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
|
|
1287
|
+
|
|
1288
|
+
/**
|
|
1289
|
+
* QRCodeView — generate a QR code as a data URL via `qrcode`.
|
|
1290
|
+
* (TIER 7)
|
|
1291
|
+
*/
|
|
1292
|
+
declare function QRCodeView({ value, size, className, ariaLabel, level, }: {
|
|
1293
|
+
value: string;
|
|
1294
|
+
size?: number;
|
|
1295
|
+
className?: string;
|
|
1296
|
+
ariaLabel?: string;
|
|
1297
|
+
level?: 'L' | 'M' | 'Q' | 'H';
|
|
1298
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1299
|
+
|
|
1300
|
+
interface GalleryImage {
|
|
1301
|
+
src: string;
|
|
1302
|
+
alt: string;
|
|
1303
|
+
caption?: string;
|
|
1304
|
+
}
|
|
1305
|
+
/**
|
|
1306
|
+
* ImageGallery — masonry grid + lightbox overlay with prev/next + ESC close.
|
|
1307
|
+
* Lightweight, no extra deps. (TIER 7)
|
|
1308
|
+
*/
|
|
1309
|
+
declare function ImageGallery({ images, className, columns, }: {
|
|
1310
|
+
images: GalleryImage[];
|
|
1311
|
+
className?: string;
|
|
1312
|
+
columns?: 2 | 3 | 4 | 5;
|
|
1313
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1314
|
+
|
|
1315
|
+
interface DiffLine {
|
|
1316
|
+
type: 'add' | 'remove' | 'context';
|
|
1317
|
+
content: string;
|
|
1318
|
+
oldLine?: number;
|
|
1319
|
+
newLine?: number;
|
|
1320
|
+
}
|
|
1321
|
+
/**
|
|
1322
|
+
* DiffViewer — side-by-side or unified line diff renderer.
|
|
1323
|
+
* Accepts pre-computed DiffLine[] (caller can use jsdiff or any algo).
|
|
1324
|
+
* (TIER 9)
|
|
1325
|
+
*/
|
|
1326
|
+
declare function DiffViewer({ lines, variant, className, }: {
|
|
1327
|
+
lines: DiffLine[];
|
|
1328
|
+
variant?: 'unified' | 'split';
|
|
1329
|
+
className?: string;
|
|
1330
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1331
|
+
|
|
1332
|
+
/**
|
|
1333
|
+
* JsonTree — collapsible JSON viewer with type-coloring.
|
|
1334
|
+
* (TIER 9)
|
|
1335
|
+
*/
|
|
1336
|
+
declare function JsonTree({ value, name, depth, defaultOpen, className, }: {
|
|
1337
|
+
value: unknown;
|
|
1338
|
+
name?: string;
|
|
1339
|
+
depth?: number;
|
|
1340
|
+
defaultOpen?: boolean;
|
|
1341
|
+
className?: string;
|
|
1342
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
1343
|
+
|
|
1344
|
+
/**
|
|
1345
|
+
* Universal file parsers — promise-based, runtime-safe, generic typing.
|
|
1346
|
+
* (TIER 9)
|
|
1347
|
+
*/
|
|
1348
|
+
declare function parseCSV<T = Record<string, string>>(file: File | string, options?: {
|
|
1349
|
+
header?: boolean;
|
|
1350
|
+
delimiter?: string;
|
|
1351
|
+
}): Promise<{
|
|
1352
|
+
data: T[];
|
|
1353
|
+
errors: string[];
|
|
1354
|
+
}>;
|
|
1355
|
+
declare function exportCSV<T extends Record<string, unknown>>(rows: T[]): string;
|
|
1356
|
+
declare function parseExcel(file: File | ArrayBuffer): Promise<Record<string, unknown[]>>;
|
|
1357
|
+
declare function exportExcel<T extends Record<string, unknown>>(sheets: Record<string, T[]>, filename: string): Promise<void>;
|
|
1358
|
+
declare function parseJSON<T = unknown>(file: File | string): Promise<T>;
|
|
1359
|
+
declare function parseTOML(file: File | string): Promise<Record<string, unknown>>;
|
|
1360
|
+
declare function parseXML(file: File | string): Promise<Record<string, unknown>>;
|
|
1361
|
+
|
|
1362
|
+
/**
|
|
1363
|
+
* MarkdownView — react-markdown wrapper preset for Heuresys docs.
|
|
1364
|
+
* GFM tables/strikethrough/tasklists, KaTeX math, custom code blocks slot.
|
|
1365
|
+
* (TIER 10)
|
|
1366
|
+
*/
|
|
1367
|
+
declare function MarkdownView({ content, className, components, }: {
|
|
1368
|
+
content: string;
|
|
1369
|
+
className?: string;
|
|
1370
|
+
components?: React$1.ComponentProps<typeof ReactMarkdown>['components'];
|
|
1371
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1372
|
+
|
|
1373
|
+
/**
|
|
1374
|
+
* MermaidDiagram — render mermaid source as SVG via data-URL image.
|
|
1375
|
+
*
|
|
1376
|
+
* Implementation: mermaid produces SVG markup which we encode as a data URL
|
|
1377
|
+
* and assign to an <img> src. This avoids any HTML injection path entirely
|
|
1378
|
+
* since the browser parses the SVG as an image (no script execution).
|
|
1379
|
+
*
|
|
1380
|
+
* Supports flowchart/sequence/class/state/ER/Gantt/Sankey diagrams.
|
|
1381
|
+
* (TIER 10)
|
|
1382
|
+
*/
|
|
1383
|
+
declare function MermaidDiagram({ source, className, ariaLabel, }: {
|
|
1384
|
+
source: string;
|
|
1385
|
+
className?: string;
|
|
1386
|
+
ariaLabel?: string;
|
|
1387
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1388
|
+
|
|
1389
|
+
declare const VARIANTS: {
|
|
1390
|
+
readonly info: {
|
|
1391
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1392
|
+
readonly label: "Info";
|
|
1393
|
+
readonly className: "border-info/40 bg-info/10 text-info";
|
|
1394
|
+
};
|
|
1395
|
+
readonly warning: {
|
|
1396
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1397
|
+
readonly label: "Warning";
|
|
1398
|
+
readonly className: "border-warning/40 bg-warning/10 text-warning";
|
|
1399
|
+
};
|
|
1400
|
+
readonly tip: {
|
|
1401
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1402
|
+
readonly label: "Tip";
|
|
1403
|
+
readonly className: "border-success/40 bg-success/10 text-success";
|
|
1404
|
+
};
|
|
1405
|
+
readonly danger: {
|
|
1406
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1407
|
+
readonly label: "Danger";
|
|
1408
|
+
readonly className: "border-destructive/40 bg-destructive/10 text-destructive";
|
|
1409
|
+
};
|
|
1410
|
+
readonly note: {
|
|
1411
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1412
|
+
readonly label: "Note";
|
|
1413
|
+
readonly className: "border-border bg-muted/40 text-foreground";
|
|
1414
|
+
};
|
|
1415
|
+
readonly quote: {
|
|
1416
|
+
readonly icon: React$1.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
1417
|
+
readonly label: "Quote";
|
|
1418
|
+
readonly className: "border-l-4 border-primary bg-primary/5 text-foreground";
|
|
1419
|
+
};
|
|
1420
|
+
};
|
|
1421
|
+
type AdmonitionVariant = keyof typeof VARIANTS;
|
|
1422
|
+
/**
|
|
1423
|
+
* Admonition — callout block for markdown / docs.
|
|
1424
|
+
* Variants: info / warning / tip / danger / note / quote.
|
|
1425
|
+
* (TIER 10)
|
|
1426
|
+
*/
|
|
1427
|
+
declare function Admonition({ variant, title, children, className, }: {
|
|
1428
|
+
variant?: AdmonitionVariant;
|
|
1429
|
+
title?: string;
|
|
1430
|
+
children: React$1.ReactNode;
|
|
1431
|
+
className?: string;
|
|
1432
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1433
|
+
|
|
1434
|
+
interface TocItem {
|
|
1435
|
+
id: string;
|
|
1436
|
+
level: number;
|
|
1437
|
+
text: string;
|
|
1438
|
+
}
|
|
1439
|
+
/**
|
|
1440
|
+
* TableOfContents — auto-generated from h1-h6 in a target container, with
|
|
1441
|
+
* scroll-spy active highlight via IntersectionObserver. (TIER 10)
|
|
1442
|
+
*/
|
|
1443
|
+
declare function TableOfContents({ containerSelector, className, }: {
|
|
1444
|
+
containerSelector?: string;
|
|
1445
|
+
className?: string;
|
|
1446
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
1447
|
+
|
|
1448
|
+
/**
|
|
1449
|
+
* ChatProvider — provider-agnostic AI chat interface.
|
|
1450
|
+
*
|
|
1451
|
+
* Supports streaming via SSE/fetch. Concrete adapters live in:
|
|
1452
|
+
* - @heuresys/ui/ai/adapters/anthropic
|
|
1453
|
+
* - @heuresys/ui/ai/adapters/openai
|
|
1454
|
+
* - @heuresys/ui/ai/adapters/google
|
|
1455
|
+
*
|
|
1456
|
+
* Tools/agent steps and message history rendered by sibling components
|
|
1457
|
+
* (Chatbot, AgentSteps, ToolCallView). (TIER 8)
|
|
1458
|
+
*/
|
|
1459
|
+
type ChatRole = 'system' | 'user' | 'assistant' | 'tool';
|
|
1460
|
+
interface ChatMessage {
|
|
1461
|
+
id: string;
|
|
1462
|
+
role: ChatRole;
|
|
1463
|
+
content: string;
|
|
1464
|
+
timestamp: string;
|
|
1465
|
+
toolCalls?: ToolCall[];
|
|
1466
|
+
toolResults?: ToolResult[];
|
|
1467
|
+
reasoning?: string;
|
|
1468
|
+
}
|
|
1469
|
+
interface ToolCall {
|
|
1470
|
+
id: string;
|
|
1471
|
+
name: string;
|
|
1472
|
+
input: Record<string, unknown>;
|
|
1473
|
+
}
|
|
1474
|
+
interface ToolResult {
|
|
1475
|
+
toolCallId: string;
|
|
1476
|
+
output: unknown;
|
|
1477
|
+
error?: string;
|
|
1478
|
+
}
|
|
1479
|
+
interface ChatProviderAdapter {
|
|
1480
|
+
id: string;
|
|
1481
|
+
name: string;
|
|
1482
|
+
send(messages: ChatMessage[], opts?: {
|
|
1483
|
+
signal?: AbortSignal;
|
|
1484
|
+
}): AsyncIterable<{
|
|
1485
|
+
type: 'text-delta' | 'tool-call' | 'tool-result' | 'done' | 'error';
|
|
1486
|
+
delta?: string;
|
|
1487
|
+
toolCall?: ToolCall;
|
|
1488
|
+
toolResult?: ToolResult;
|
|
1489
|
+
error?: string;
|
|
1490
|
+
}>;
|
|
1491
|
+
}
|
|
1492
|
+
interface ChatContextValue {
|
|
1493
|
+
messages: ChatMessage[];
|
|
1494
|
+
send: (text: string) => Promise<void>;
|
|
1495
|
+
isStreaming: boolean;
|
|
1496
|
+
abort: () => void;
|
|
1497
|
+
clear: () => void;
|
|
1498
|
+
adapter: ChatProviderAdapter;
|
|
1499
|
+
}
|
|
1500
|
+
declare function ChatProvider({ adapter, initialMessages, children, }: {
|
|
1501
|
+
adapter: ChatProviderAdapter;
|
|
1502
|
+
initialMessages?: ChatMessage[];
|
|
1503
|
+
children: React$1.ReactNode;
|
|
1504
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1505
|
+
declare function useChat(): ChatContextValue;
|
|
1506
|
+
|
|
1507
|
+
/**
|
|
1508
|
+
* Chatbot — UI shell for ChatProvider. Streams assistant responses, renders
|
|
1509
|
+
* markdown, shows tool calls inline, exposes abort + clear.
|
|
1510
|
+
* (TIER 8)
|
|
1511
|
+
*/
|
|
1512
|
+
declare function Chatbot({ className }: {
|
|
1513
|
+
className?: string;
|
|
1514
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1515
|
+
|
|
1516
|
+
/**
|
|
1517
|
+
* ToolCallView — collapsible card showing a tool call + its result.
|
|
1518
|
+
* (TIER 8)
|
|
1519
|
+
*/
|
|
1520
|
+
declare function ToolCallView({ call, result, className, }: {
|
|
1521
|
+
call: ToolCall;
|
|
1522
|
+
result?: ToolResult;
|
|
1523
|
+
className?: string;
|
|
1524
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1525
|
+
|
|
1526
|
+
/**
|
|
1527
|
+
* VoiceInput — Web Speech API recognition + waveform visualization.
|
|
1528
|
+
* Falls back gracefully when SpeechRecognition is unavailable (Safari etc.).
|
|
1529
|
+
* (TIER 8)
|
|
1530
|
+
*/
|
|
1531
|
+
declare function VoiceInput({ onTranscript, language, className, }: {
|
|
1532
|
+
onTranscript: (text: string, isFinal: boolean) => void;
|
|
1533
|
+
language?: string;
|
|
1534
|
+
className?: string;
|
|
1535
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1536
|
+
|
|
1537
|
+
/**
|
|
1538
|
+
* Locale-aware formatters via Intl API. (TIER 11)
|
|
1539
|
+
*/
|
|
1540
|
+
declare function formatCurrency(value: number, currency?: string, locale?: string): string;
|
|
1541
|
+
declare function formatNumber(value: number, options?: Intl.NumberFormatOptions, locale?: string): string;
|
|
1542
|
+
declare function formatPercent(value: number, fractionDigits?: number, locale?: string): string;
|
|
1543
|
+
declare function formatDate(date: Date | string, options?: Intl.DateTimeFormatOptions, locale?: string): string;
|
|
1544
|
+
declare function formatDateTime(date: Date | string, locale?: string): string;
|
|
1545
|
+
declare function formatRelativeTime(date: Date | string, locale?: string): string;
|
|
1546
|
+
declare function formatList(items: string[], locale?: string, type?: 'conjunction' | 'disjunction'): string;
|
|
1547
|
+
declare const SUPPORTED_LOCALES: readonly [{
|
|
1548
|
+
readonly code: "it-IT";
|
|
1549
|
+
readonly label: "Italiano";
|
|
1550
|
+
}, {
|
|
1551
|
+
readonly code: "en-US";
|
|
1552
|
+
readonly label: "English (US)";
|
|
1553
|
+
}, {
|
|
1554
|
+
readonly code: "en-GB";
|
|
1555
|
+
readonly label: "English (UK)";
|
|
1556
|
+
}, {
|
|
1557
|
+
readonly code: "fr-FR";
|
|
1558
|
+
readonly label: "Français";
|
|
1559
|
+
}, {
|
|
1560
|
+
readonly code: "de-DE";
|
|
1561
|
+
readonly label: "Deutsch";
|
|
1562
|
+
}, {
|
|
1563
|
+
readonly code: "es-ES";
|
|
1564
|
+
readonly label: "Español";
|
|
1565
|
+
}, {
|
|
1566
|
+
readonly code: "pt-PT";
|
|
1567
|
+
readonly label: "Português";
|
|
1568
|
+
}];
|
|
1569
|
+
|
|
1570
|
+
/**
|
|
1571
|
+
* LanguagePicker — locale switcher with flag/label.
|
|
1572
|
+
* RTL-aware (sets dir attribute when ar/he/fa selected).
|
|
1573
|
+
* (TIER 11)
|
|
1574
|
+
*/
|
|
1575
|
+
declare function LanguagePicker({ value, onChange, locales, className, }: {
|
|
1576
|
+
value: string;
|
|
1577
|
+
onChange: (code: string) => void;
|
|
1578
|
+
locales?: ReadonlyArray<{
|
|
1579
|
+
code: string;
|
|
1580
|
+
label: string;
|
|
1581
|
+
}>;
|
|
1582
|
+
className?: string;
|
|
1583
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1584
|
+
|
|
1585
|
+
/**
|
|
1586
|
+
* SkipLink — keyboard-only "Skip to main content" link, visible on focus.
|
|
1587
|
+
* (TIER 12)
|
|
1588
|
+
*/
|
|
1589
|
+
declare function SkipLink({ href, label, className, }: {
|
|
1590
|
+
href?: string;
|
|
1591
|
+
label?: string;
|
|
1592
|
+
className?: string;
|
|
1593
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1594
|
+
|
|
1595
|
+
/**
|
|
1596
|
+
* AccessibilityPanel — user-controlled a11y preferences toolbar.
|
|
1597
|
+
* Persists settings to localStorage and applies CSS classes/data-attrs to <html>.
|
|
1598
|
+
* (TIER 12)
|
|
1599
|
+
*/
|
|
1600
|
+
declare function AccessibilityPanel({ className }: {
|
|
1601
|
+
className?: string;
|
|
1602
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1603
|
+
|
|
1604
|
+
declare function LiveRegionProvider({ children }: {
|
|
1605
|
+
children: React$1.ReactNode;
|
|
1606
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1607
|
+
declare function useAnnounce(): (msg: string, urgency?: 'polite' | 'assertive') => void;
|
|
1608
|
+
|
|
1609
|
+
/**
|
|
1610
|
+
* PerfMonitor — embedded FPS + memory + dom-node-count overlay.
|
|
1611
|
+
* Useful in development builds. Pin to a corner.
|
|
1612
|
+
* (TIER 13)
|
|
1613
|
+
*/
|
|
1614
|
+
declare function PerfMonitor({ position, className, }: {
|
|
1615
|
+
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
1616
|
+
className?: string;
|
|
1617
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1618
|
+
|
|
1619
|
+
/**
|
|
1620
|
+
* Hero sections — 5 layout variants for marketing landing pages.
|
|
1621
|
+
* (TIER 14)
|
|
1622
|
+
*/
|
|
1623
|
+
declare function HeroSplit({ eyebrow, title, description, primaryCta, secondaryCta, imageSrc, imageAlt, className, }: {
|
|
1624
|
+
eyebrow?: string;
|
|
1625
|
+
title: string;
|
|
1626
|
+
description: string;
|
|
1627
|
+
primaryCta?: {
|
|
1628
|
+
label: string;
|
|
1629
|
+
onClick?: () => void;
|
|
1630
|
+
href?: string;
|
|
1631
|
+
};
|
|
1632
|
+
secondaryCta?: {
|
|
1633
|
+
label: string;
|
|
1634
|
+
onClick?: () => void;
|
|
1635
|
+
href?: string;
|
|
1636
|
+
};
|
|
1637
|
+
imageSrc: string;
|
|
1638
|
+
imageAlt: string;
|
|
1639
|
+
className?: string;
|
|
1640
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1641
|
+
declare function HeroCentered({ title, description, primaryCta, secondaryCta, className, }: {
|
|
1642
|
+
title: string;
|
|
1643
|
+
description: string;
|
|
1644
|
+
primaryCta?: {
|
|
1645
|
+
label: string;
|
|
1646
|
+
onClick?: () => void;
|
|
1647
|
+
href?: string;
|
|
1648
|
+
};
|
|
1649
|
+
secondaryCta?: {
|
|
1650
|
+
label: string;
|
|
1651
|
+
onClick?: () => void;
|
|
1652
|
+
href?: string;
|
|
1653
|
+
};
|
|
1654
|
+
className?: string;
|
|
1655
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1656
|
+
declare function HeroVideoBackground({ videoSrc, poster, title, description, primaryCta, className, }: {
|
|
1657
|
+
videoSrc: string;
|
|
1658
|
+
poster?: string;
|
|
1659
|
+
title: string;
|
|
1660
|
+
description: string;
|
|
1661
|
+
primaryCta?: {
|
|
1662
|
+
label: string;
|
|
1663
|
+
onClick?: () => void;
|
|
1664
|
+
href?: string;
|
|
1665
|
+
};
|
|
1666
|
+
className?: string;
|
|
1667
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1668
|
+
|
|
1669
|
+
/**
|
|
1670
|
+
* AnimatedNumber — count-up to a target value with easing.
|
|
1671
|
+
* Respects prefers-reduced-motion (snaps directly to value).
|
|
1672
|
+
* (TIER 15)
|
|
1673
|
+
*/
|
|
1674
|
+
declare function AnimatedNumber({ value, duration, decimals, prefix, suffix, className, }: {
|
|
1675
|
+
value: number;
|
|
1676
|
+
duration?: number;
|
|
1677
|
+
decimals?: number;
|
|
1678
|
+
prefix?: string;
|
|
1679
|
+
suffix?: string;
|
|
1680
|
+
className?: string;
|
|
1681
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1682
|
+
|
|
1683
|
+
/**
|
|
1684
|
+
* Text effects — typewriter, gradient, shimmer, marquee.
|
|
1685
|
+
* (TIER 15)
|
|
1686
|
+
*/
|
|
1687
|
+
declare function Typewriter({ text, speed, className, onComplete, }: {
|
|
1688
|
+
text: string;
|
|
1689
|
+
speed?: number;
|
|
1690
|
+
className?: string;
|
|
1691
|
+
onComplete?: () => void;
|
|
1692
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1693
|
+
declare function GradientText({ children, from, to, className, }: {
|
|
1694
|
+
children: React$1.ReactNode;
|
|
1695
|
+
from?: string;
|
|
1696
|
+
to?: string;
|
|
1697
|
+
className?: string;
|
|
1698
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1699
|
+
declare function Marquee({ children, speed, reverse, pauseOnHover, className, }: {
|
|
1700
|
+
children: React$1.ReactNode;
|
|
1701
|
+
speed?: number;
|
|
1702
|
+
reverse?: boolean;
|
|
1703
|
+
pauseOnHover?: boolean;
|
|
1704
|
+
className?: string;
|
|
1705
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1706
|
+
|
|
1707
|
+
/**
|
|
1708
|
+
* ThreeScene — minimal three.js viewer with OrbitControls.
|
|
1709
|
+
* Pass children as <mesh>, <group>, etc. (TIER 16)
|
|
1710
|
+
*/
|
|
1711
|
+
declare function ThreeScene({ children, className, height, cameraPosition, ariaLabel, }: {
|
|
1712
|
+
children?: React$1.ReactNode;
|
|
1713
|
+
className?: string;
|
|
1714
|
+
height?: number | string;
|
|
1715
|
+
cameraPosition?: [number, number, number];
|
|
1716
|
+
ariaLabel?: string;
|
|
1717
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1718
|
+
|
|
1719
|
+
declare const pillVariants: (props?: ({
|
|
1720
|
+
tone?: "warn" | "info" | "down" | "ok" | null | undefined;
|
|
1721
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1722
|
+
type IntegrationHealthTone = 'ok' | 'warn' | 'down' | 'info';
|
|
1723
|
+
interface IntegrationHealthPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children'>, VariantProps<typeof pillVariants> {
|
|
1724
|
+
label?: string;
|
|
1725
|
+
pulse?: boolean;
|
|
1726
|
+
showDot?: boolean;
|
|
1727
|
+
}
|
|
1728
|
+
declare function IntegrationHealthPill({ tone, label, pulse, showDot, className, ...props }: IntegrationHealthPillProps): react_jsx_runtime.JSX.Element;
|
|
1729
|
+
|
|
1730
|
+
type KpiRingTone = 'primary' | 'success' | 'warning' | 'destructive';
|
|
1731
|
+
interface KpiRingThresholds {
|
|
1732
|
+
/** value ≥ goodAt → success */
|
|
1733
|
+
goodAt?: number;
|
|
1734
|
+
/** value ≥ warnAt → warning (else destructive) */
|
|
1735
|
+
warnAt?: number;
|
|
1736
|
+
}
|
|
1737
|
+
interface KpiRingProps {
|
|
1738
|
+
value: number;
|
|
1739
|
+
max?: number;
|
|
1740
|
+
min?: number;
|
|
1741
|
+
label: string;
|
|
1742
|
+
sublabel?: string;
|
|
1743
|
+
unit?: string;
|
|
1744
|
+
/** previous-period delta in percent points */
|
|
1745
|
+
trend?: number;
|
|
1746
|
+
/** threshold-based tone resolution; ignored if `tone` is set explicitly */
|
|
1747
|
+
thresholds?: KpiRingThresholds;
|
|
1748
|
+
/** override threshold-based resolution */
|
|
1749
|
+
tone?: KpiRingTone;
|
|
1750
|
+
size?: number;
|
|
1751
|
+
thickness?: number;
|
|
1752
|
+
variant?: RadialGaugeProps['variant'];
|
|
1753
|
+
className?: string;
|
|
1754
|
+
}
|
|
1755
|
+
declare function KpiRing({ value, max, min, label, sublabel, unit, trend, thresholds, tone, size, thickness, variant, className, }: KpiRingProps): react_jsx_runtime.JSX.Element;
|
|
1756
|
+
|
|
1757
|
+
type SuccessionRisk = 'low' | 'medium' | 'high' | 'critical';
|
|
1758
|
+
type SuccessionReadiness = 'ready-now' | '1-2y' | '3-5y' | 'not-ready';
|
|
1759
|
+
interface SuccessionCardProps {
|
|
1760
|
+
candidateName: string;
|
|
1761
|
+
candidateAvatarUrl?: string;
|
|
1762
|
+
currentRole: string;
|
|
1763
|
+
targetRole: string;
|
|
1764
|
+
/** 0-100 readiness percentage */
|
|
1765
|
+
readinessPercent: number;
|
|
1766
|
+
readiness?: SuccessionReadiness;
|
|
1767
|
+
risk?: SuccessionRisk;
|
|
1768
|
+
/** ISO date or human label */
|
|
1769
|
+
readyBy?: string;
|
|
1770
|
+
className?: string;
|
|
1771
|
+
}
|
|
1772
|
+
declare function SuccessionCard({ candidateName, candidateAvatarUrl, currentRole, targetRole, readinessPercent, readiness, risk, readyBy, className, }: SuccessionCardProps): react_jsx_runtime.JSX.Element;
|
|
1773
|
+
|
|
1774
|
+
type CareerStageStatus = 'past' | 'current' | 'future';
|
|
1775
|
+
interface CareerStage {
|
|
1776
|
+
id: string;
|
|
1777
|
+
label: string;
|
|
1778
|
+
/** ISO year or display label */
|
|
1779
|
+
year?: string;
|
|
1780
|
+
description?: string;
|
|
1781
|
+
status?: CareerStageStatus;
|
|
1782
|
+
}
|
|
1783
|
+
interface CareerArcProps {
|
|
1784
|
+
stages: CareerStage[];
|
|
1785
|
+
/** Index of current stage; ignored if stages already define `status` */
|
|
1786
|
+
currentIndex?: number;
|
|
1787
|
+
className?: string;
|
|
1788
|
+
}
|
|
1789
|
+
declare function CareerArc({ stages, currentIndex, className }: CareerArcProps): react_jsx_runtime.JSX.Element;
|
|
1790
|
+
|
|
1791
|
+
interface KgMiniGraphLegendItem {
|
|
1792
|
+
group: string;
|
|
1793
|
+
label: string;
|
|
1794
|
+
color: string;
|
|
1795
|
+
}
|
|
1796
|
+
interface KgMiniGraphProps {
|
|
1797
|
+
nodes: NetworkGraphProps['nodes'];
|
|
1798
|
+
edges: NetworkGraphProps['edges'];
|
|
1799
|
+
/** Smaller default than NetworkGraph (200px vs 400px) */
|
|
1800
|
+
height?: number | string;
|
|
1801
|
+
layout?: NetworkGraphProps['layout'];
|
|
1802
|
+
/** Optional legend to render below the canvas */
|
|
1803
|
+
legend?: KgMiniGraphLegendItem[];
|
|
1804
|
+
ariaLabel?: string;
|
|
1805
|
+
className?: string;
|
|
1806
|
+
}
|
|
1807
|
+
declare function KgMiniGraph({ nodes, edges, height, layout, legend, ariaLabel, className, }: KgMiniGraphProps): react_jsx_runtime.JSX.Element;
|
|
1808
|
+
|
|
1809
|
+
interface SkillHeatmapAxis {
|
|
1810
|
+
id: string;
|
|
1811
|
+
label: string;
|
|
1812
|
+
}
|
|
1813
|
+
interface SkillHeatmapCell {
|
|
1814
|
+
rowId: string;
|
|
1815
|
+
colId: string;
|
|
1816
|
+
/** 0-100 coverage / proficiency / count normalized */
|
|
1817
|
+
value: number;
|
|
1818
|
+
/** optional human label to render inside the cell (overrides numeric) */
|
|
1819
|
+
display?: string;
|
|
1820
|
+
}
|
|
1821
|
+
interface SkillHeatmapProps {
|
|
1822
|
+
rows: SkillHeatmapAxis[];
|
|
1823
|
+
cols: SkillHeatmapAxis[];
|
|
1824
|
+
cells: SkillHeatmapCell[];
|
|
1825
|
+
/** caption for screen readers */
|
|
1826
|
+
caption?: string;
|
|
1827
|
+
/** show numeric value inside cell */
|
|
1828
|
+
showValue?: boolean;
|
|
1829
|
+
/** override default sequential scale */
|
|
1830
|
+
colorScale?: (value: number) => string;
|
|
1831
|
+
onCellClick?: (cell: SkillHeatmapCell) => void;
|
|
1832
|
+
className?: string;
|
|
1833
|
+
}
|
|
1834
|
+
declare function SkillHeatmap({ rows, cols, cells, caption, showValue, colorScale, onCellClick, className, }: SkillHeatmapProps): react_jsx_runtime.JSX.Element;
|
|
1835
|
+
|
|
1836
|
+
interface CapabilityRadarAxis {
|
|
1837
|
+
id: string;
|
|
1838
|
+
label: string;
|
|
1839
|
+
}
|
|
1840
|
+
interface CapabilityRadarSeries {
|
|
1841
|
+
id: string;
|
|
1842
|
+
label: string;
|
|
1843
|
+
/** Same length as `axes`, values 0-max */
|
|
1844
|
+
values: number[];
|
|
1845
|
+
/** Override stroke/fill color */
|
|
1846
|
+
color?: string;
|
|
1847
|
+
}
|
|
1848
|
+
interface CapabilityRadarProps {
|
|
1849
|
+
axes: CapabilityRadarAxis[];
|
|
1850
|
+
series: CapabilityRadarSeries[];
|
|
1851
|
+
max?: number;
|
|
1852
|
+
size?: number;
|
|
1853
|
+
rings?: number;
|
|
1854
|
+
showLegend?: boolean;
|
|
1855
|
+
className?: string;
|
|
1856
|
+
}
|
|
1857
|
+
declare function CapabilityRadar({ axes, series, max, size, rings, showLegend, className, }: CapabilityRadarProps): react_jsx_runtime.JSX.Element;
|
|
1858
|
+
|
|
1859
|
+
interface RbacRole$1 {
|
|
1860
|
+
id: string;
|
|
1861
|
+
label: string;
|
|
1862
|
+
/** Optional ordering hint, e.g. -1 SUPERUSER → 6 EMPLOYEE */
|
|
1863
|
+
level?: number;
|
|
1864
|
+
}
|
|
1865
|
+
interface RbacArea {
|
|
1866
|
+
id: string;
|
|
1867
|
+
label: string;
|
|
1868
|
+
}
|
|
1869
|
+
type RbacPermissionLevel = 'none' | 'read' | 'write' | 'admin' | 'owner';
|
|
1870
|
+
interface RbacAssignment {
|
|
1871
|
+
roleId: string;
|
|
1872
|
+
areaId: string;
|
|
1873
|
+
level: RbacPermissionLevel;
|
|
1874
|
+
}
|
|
1875
|
+
interface RbacMatrixProps {
|
|
1876
|
+
roles: RbacRole$1[];
|
|
1877
|
+
areas: RbacArea[];
|
|
1878
|
+
assignments: RbacAssignment[];
|
|
1879
|
+
/** Display-only mode (no onChange; no controls) */
|
|
1880
|
+
readonly?: boolean;
|
|
1881
|
+
onChange?: (assignment: RbacAssignment) => void;
|
|
1882
|
+
className?: string;
|
|
1883
|
+
}
|
|
1884
|
+
declare function RbacMatrix({ roles, areas, assignments, readonly, onChange, className, }: RbacMatrixProps): react_jsx_runtime.JSX.Element;
|
|
1885
|
+
|
|
1886
|
+
/**
|
|
1887
|
+
* HeuresysWordmark — canonical brand wordmark.
|
|
1888
|
+
*
|
|
1889
|
+
* Spec (Heuresys Brand Identity, L25 + L27):
|
|
1890
|
+
* - Lowercase "heuresys" (8 lettere)
|
|
1891
|
+
* - "y" highlighted in `var(--accent)`
|
|
1892
|
+
* - Body color depends on variant:
|
|
1893
|
+
* • default: Inter 700, body in `var(--ink)` (μ-architect header)
|
|
1894
|
+
* • brand: Exo 2 700, body in `var(--brand-blue)` (login-aurora hero, marketing surfaces)
|
|
1895
|
+
* • relative (L28): Inter 700, body in `var(--logo-body, var(--ink))` (themed surfaces)
|
|
1896
|
+
*
|
|
1897
|
+
* The "y" letter is wrapped in <span class="wm-y"> so consumers can tweak
|
|
1898
|
+
* via CSS if needed. Default styling is provided.
|
|
1899
|
+
*/
|
|
1900
|
+
type WordmarkVariant = 'default' | 'brand' | 'relative';
|
|
1901
|
+
type WordmarkSize = 'sm' | 'md' | 'lg' | 'xl' | 'hero';
|
|
1902
|
+
interface HeuresysWordmarkProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
1903
|
+
variant?: WordmarkVariant;
|
|
1904
|
+
size?: WordmarkSize | number;
|
|
1905
|
+
/**
|
|
1906
|
+
* Optional render-as. Defaults to "span". Use "h1" for hero contexts (login).
|
|
1907
|
+
*/
|
|
1908
|
+
as?: 'span' | 'div' | 'h1' | 'h2' | 'p';
|
|
1909
|
+
/**
|
|
1910
|
+
* Optional aria-label override. Default: "heuresys".
|
|
1911
|
+
*/
|
|
1912
|
+
'aria-label'?: string;
|
|
1913
|
+
}
|
|
1914
|
+
declare function HeuresysWordmark({ variant, size, as, className, style, 'aria-label': ariaLabel, ...rest }: HeuresysWordmarkProps): react_jsx_runtime.JSX.Element;
|
|
1915
|
+
|
|
1916
|
+
interface ESCOTreeNode {
|
|
1917
|
+
uri: string;
|
|
1918
|
+
code: string | null;
|
|
1919
|
+
label: string;
|
|
1920
|
+
iscoCode: string | null;
|
|
1921
|
+
hasChildren: boolean;
|
|
1922
|
+
parentUri: string | null;
|
|
1923
|
+
}
|
|
1924
|
+
interface ESCOTreeNavigatorProps {
|
|
1925
|
+
nodes: ESCOTreeNode[];
|
|
1926
|
+
/** Called when the user expands a parent for the first time. Resolves to its children. */
|
|
1927
|
+
onExpand?: (parentUri: string) => Promise<ESCOTreeNode[]>;
|
|
1928
|
+
onSelect?: (node: ESCOTreeNode) => void;
|
|
1929
|
+
}
|
|
1930
|
+
declare function ESCOTreeNavigator({ nodes, onExpand, onSelect }: ESCOTreeNavigatorProps): react_jsx_runtime.JSX.Element;
|
|
1931
|
+
|
|
1932
|
+
interface KGNode {
|
|
1933
|
+
id: string;
|
|
1934
|
+
label: string;
|
|
1935
|
+
group?: string;
|
|
1936
|
+
}
|
|
1937
|
+
interface KGEdge {
|
|
1938
|
+
id: string;
|
|
1939
|
+
source: string;
|
|
1940
|
+
target: string;
|
|
1941
|
+
label?: string;
|
|
1942
|
+
}
|
|
1943
|
+
interface KGGraphCanvasProps {
|
|
1944
|
+
nodes: KGNode[];
|
|
1945
|
+
edges: KGEdge[];
|
|
1946
|
+
emptyState?: string;
|
|
1947
|
+
}
|
|
1948
|
+
declare function KGGraphCanvas({ nodes, edges, emptyState }: KGGraphCanvasProps): react_jsx_runtime.JSX.Element;
|
|
1949
|
+
|
|
1950
|
+
type SAPJobStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' | 'rolled_back';
|
|
1951
|
+
interface SAPJobSummary {
|
|
1952
|
+
id: string;
|
|
1953
|
+
jobName: string;
|
|
1954
|
+
jobType: string;
|
|
1955
|
+
status: SAPJobStatus;
|
|
1956
|
+
progressPercent: number | null;
|
|
1957
|
+
totalRecords: number | null;
|
|
1958
|
+
successCount: number | null;
|
|
1959
|
+
errorCount: number | null;
|
|
1960
|
+
startedAt: string | null;
|
|
1961
|
+
completedAt: string | null;
|
|
1962
|
+
}
|
|
1963
|
+
interface SAPDeltaEntry {
|
|
1964
|
+
timestamp: string;
|
|
1965
|
+
kind: 'success' | 'error' | 'warning';
|
|
1966
|
+
count: number;
|
|
1967
|
+
message: string | null;
|
|
1968
|
+
}
|
|
1969
|
+
interface SAPSyncPanelProps {
|
|
1970
|
+
jobs: SAPJobSummary[];
|
|
1971
|
+
delta: SAPDeltaEntry[];
|
|
1972
|
+
emptyJobsLabel?: string;
|
|
1973
|
+
}
|
|
1974
|
+
declare function SAPSyncPanel({ jobs, delta, emptyJobsLabel }: SAPSyncPanelProps): react_jsx_runtime.JSX.Element;
|
|
1975
|
+
|
|
1976
|
+
/**
|
|
1977
|
+
* HeuresysMark — the symbol-only variant of the Heuresys wordmark.
|
|
1978
|
+
*
|
|
1979
|
+
* Renders just the lowercase "y" in `var(--accent)` (purple) at a square aspect
|
|
1980
|
+
* ratio. Used for: favicon source, collapsed sidebar, loading spinner center,
|
|
1981
|
+
* app icon. See `wordmark.tsx` for the full wordmark.
|
|
1982
|
+
*
|
|
1983
|
+
* Spec: docs/10_graphic_assets_and_icon_system.md § Default brand logo.
|
|
1984
|
+
*/
|
|
1985
|
+
interface HeuresysMarkProps extends React$1.SVGAttributes<SVGSVGElement> {
|
|
1986
|
+
size?: number;
|
|
1987
|
+
/** Override the "y" color. Defaults to `var(--accent)`. */
|
|
1988
|
+
color?: string;
|
|
1989
|
+
}
|
|
1990
|
+
declare function HeuresysMark({ size, color, className, ...rest }: HeuresysMarkProps): react_jsx_runtime.JSX.Element;
|
|
1991
|
+
|
|
1992
|
+
/**
|
|
1993
|
+
* HeuresysLogoBadge — the small uppercase suffix tag rendered next to the
|
|
1994
|
+
* Heuresys wordmark in product surfaces (e.g. "advanced", "beta", "enterprise").
|
|
1995
|
+
*
|
|
1996
|
+
* Bordered, uppercase, tracking-wider, `text-muted-foreground` so it stays
|
|
1997
|
+
* subordinate to the wordmark. Token-driven (`--border`, `--card`,
|
|
1998
|
+
* `--muted-foreground`) so palette/theme switches propagate.
|
|
1999
|
+
*
|
|
2000
|
+
* Source: extracted from apps/web/src/components/SystemHealthDashboard.tsx
|
|
2001
|
+
* per ADR-0013 R2.
|
|
2002
|
+
*/
|
|
2003
|
+
interface HeuresysLogoBadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
2004
|
+
children: React$1.ReactNode;
|
|
2005
|
+
}
|
|
2006
|
+
declare function HeuresysLogoBadge({ children, className, ...rest }: HeuresysLogoBadgeProps): react_jsx_runtime.JSX.Element;
|
|
2007
|
+
|
|
2008
|
+
/**
|
|
2009
|
+
* StatusIcon — discriminated-tone wrapper for any lucide-react icon component.
|
|
2010
|
+
*
|
|
2011
|
+
* Maps a semantic `tone` to a token-driven foreground color
|
|
2012
|
+
* (`--muted-foreground`, `--info`, `--success`, `--warning`, `--danger`).
|
|
2013
|
+
* Use for status indicators, alerts, validation feedback. Per ADR-0008
|
|
2014
|
+
* (lucide outline) and ADR-0013 R2 (portability invariant).
|
|
2015
|
+
*
|
|
2016
|
+
* Source: ux-design/heuresys_uxix_brand_identity_bundle_v1/docs/10_graphic_assets_and_icon_system.md
|
|
2017
|
+
* § Status icon semantic tones.
|
|
2018
|
+
*
|
|
2019
|
+
* @example
|
|
2020
|
+
* import { CheckCircle } from "lucide-react";
|
|
2021
|
+
* <StatusIcon icon={CheckCircle} tone="success" />
|
|
2022
|
+
*/
|
|
2023
|
+
type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'disabled';
|
|
2024
|
+
interface StatusIconProps {
|
|
2025
|
+
/** The lucide-react icon component to render (e.g. `CheckCircle`). */
|
|
2026
|
+
icon: React$1.ComponentType<{
|
|
2027
|
+
className?: string;
|
|
2028
|
+
size?: number;
|
|
2029
|
+
}>;
|
|
2030
|
+
/** Semantic tone. Default: "neutral". */
|
|
2031
|
+
tone?: StatusTone;
|
|
2032
|
+
/** Pixel size. Default: 20. */
|
|
2033
|
+
size?: number;
|
|
2034
|
+
className?: string;
|
|
2035
|
+
}
|
|
2036
|
+
declare function StatusIcon({ icon: Icon, tone, size, className, }: StatusIconProps): react_jsx_runtime.JSX.Element;
|
|
2037
|
+
|
|
2038
|
+
/**
|
|
2039
|
+
* DashboardShell — canonical 3-row grid (header 64px / content 1fr / footer 44px)
|
|
2040
|
+
* with inner 2-column grid for sidebar + main.
|
|
2041
|
+
*
|
|
2042
|
+
* Spec: docs/07_sidebar_specification.md § "State management".
|
|
2043
|
+
*
|
|
2044
|
+
* The middle row uses an inner grid with `data-shell="grid"` so the sidebar
|
|
2045
|
+
* client component can mutate `grid-template-columns` inline (with !important)
|
|
2046
|
+
* for collapse/expand. The initial inline style is set here to avoid FOUC and
|
|
2047
|
+
* to work around a Chrome quirk on `transition: grid-template-columns`.
|
|
2048
|
+
*
|
|
2049
|
+
* Children prop receives [<sidebar>, <main>] as JSX or you can supply slots.
|
|
2050
|
+
*/
|
|
2051
|
+
interface DashboardShellProps {
|
|
2052
|
+
header: React$1.ReactNode;
|
|
2053
|
+
sidebar: React$1.ReactNode;
|
|
2054
|
+
footer: React$1.ReactNode;
|
|
2055
|
+
children: React$1.ReactNode;
|
|
2056
|
+
/** Initial sidebar width in px. Default 260. */
|
|
2057
|
+
initialSidebarWidth?: number;
|
|
2058
|
+
className?: string;
|
|
2059
|
+
}
|
|
2060
|
+
declare function DashboardShell({ header, sidebar, footer, children, initialSidebarWidth, className, }: DashboardShellProps): react_jsx_runtime.JSX.Element;
|
|
2061
|
+
|
|
2062
|
+
/**
|
|
2063
|
+
* DashboardHeader — full composition.
|
|
2064
|
+
* Spec: docs/06_header_specification.md (extended).
|
|
2065
|
+
*
|
|
2066
|
+
* Slots:
|
|
2067
|
+
* left: hamburger | logo | breadcrumb
|
|
2068
|
+
* middle: command palette trigger (⌘K)
|
|
2069
|
+
* right: language | palette dropdown | theme toggle | user identity card
|
|
2070
|
+
*
|
|
2071
|
+
* All sub-elements are rendered by this component but can be overridden via
|
|
2072
|
+
* `leftExtras` and `rightExtras` slots (rendered after the default content).
|
|
2073
|
+
*/
|
|
2074
|
+
type HeaderBreadcrumb = ReadonlyArray<Readonly<{
|
|
2075
|
+
label: string;
|
|
2076
|
+
href?: string;
|
|
2077
|
+
}>>;
|
|
2078
|
+
interface UserIdentity {
|
|
2079
|
+
initials: string;
|
|
2080
|
+
username: string;
|
|
2081
|
+
role: string;
|
|
2082
|
+
/** Tailwind color token without the leading `text-` prefix. Default "warning". */
|
|
2083
|
+
roleTone?: string;
|
|
2084
|
+
}
|
|
2085
|
+
interface DashboardHeaderProps {
|
|
2086
|
+
breadcrumb?: HeaderBreadcrumb;
|
|
2087
|
+
user?: UserIdentity;
|
|
2088
|
+
language?: 'IT' | 'EN';
|
|
2089
|
+
onToggleLanguage?: () => void;
|
|
2090
|
+
onOpenMenu?: () => void;
|
|
2091
|
+
onOpenCommandPalette?: () => void;
|
|
2092
|
+
className?: string;
|
|
2093
|
+
/** Override the default wordmark logo with a custom node (e.g. the canonical
|
|
2094
|
+
* two-color SVG inline used in the SUPERUSER prototype). */
|
|
2095
|
+
logo?: React$1.ReactNode;
|
|
2096
|
+
/** Optional trailing badge next to the logo (e.g. "advanced" product chip). */
|
|
2097
|
+
logoBadge?: React$1.ReactNode;
|
|
2098
|
+
leftExtras?: React$1.ReactNode;
|
|
2099
|
+
rightExtras?: React$1.ReactNode;
|
|
2100
|
+
}
|
|
2101
|
+
declare function DashboardHeader({ breadcrumb, user, language, onToggleLanguage, onOpenMenu, onOpenCommandPalette, className, logo, logoBadge, leftExtras, rightExtras, }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
|
|
2102
|
+
|
|
2103
|
+
/**
|
|
2104
|
+
* DashboardSidebar — collapsible side navigation.
|
|
2105
|
+
* Spec: docs/07_sidebar_specification.md.
|
|
2106
|
+
*
|
|
2107
|
+
* The sidebar consumes a `groups` prop (each group has id, label, optional
|
|
2108
|
+
* aux label, and a list of nav items). The collapse state lives on
|
|
2109
|
+
* `body[data-sidebar="collapsed"]` and is mirrored on the shell grid via
|
|
2110
|
+
* inline `style="grid-template-columns:..."` with !important (Chrome quirk).
|
|
2111
|
+
*
|
|
2112
|
+
* To embed custom content (e.g. DBSupervisorSidebar) inside a group, pass a
|
|
2113
|
+
* `customGroup` slot. To replace the footer card, pass `footerSlot`.
|
|
2114
|
+
*/
|
|
2115
|
+
interface NavItem {
|
|
2116
|
+
id: string;
|
|
2117
|
+
label: ReactNode;
|
|
2118
|
+
href: string;
|
|
2119
|
+
icon?: ReactNode;
|
|
2120
|
+
aux?: ReactNode;
|
|
2121
|
+
active?: boolean;
|
|
2122
|
+
}
|
|
2123
|
+
interface NavGroup {
|
|
2124
|
+
id: string;
|
|
2125
|
+
label: ReactNode;
|
|
2126
|
+
items?: ReadonlyArray<NavItem>;
|
|
2127
|
+
/** Render a custom <ul> body in place of `items` (e.g. DBSupervisorSidebar). */
|
|
2128
|
+
customContent?: ReactNode;
|
|
2129
|
+
/** Initial expanded state. Default true. */
|
|
2130
|
+
defaultExpanded?: boolean;
|
|
2131
|
+
}
|
|
2132
|
+
interface DashboardSidebarProps {
|
|
2133
|
+
groups: ReadonlyArray<NavGroup>;
|
|
2134
|
+
/** Optional override for the build-info card at the bottom. */
|
|
2135
|
+
footerSlot?: ReactNode;
|
|
2136
|
+
className?: string;
|
|
2137
|
+
}
|
|
2138
|
+
declare function DashboardSidebar({ groups, footerSlot, className }: DashboardSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2139
|
+
|
|
2140
|
+
/**
|
|
2141
|
+
* DashboardFooter — universal footer rule.
|
|
2142
|
+
* Spec: docs/08_footer_specification.md.
|
|
2143
|
+
*
|
|
2144
|
+
* Left area is FIXED across every Heuresys surface: © year · heuresys.com ·
|
|
2145
|
+
* 5 outlined social icons in canonical order (LinkedIn → GitHub → Discord →
|
|
2146
|
+
* Facebook → X).
|
|
2147
|
+
*
|
|
2148
|
+
* Right area is context-specific: build info on system-health, env on tenant
|
|
2149
|
+
* dashboards, empty on login/landing. Pass via `rightSlot`.
|
|
2150
|
+
*/
|
|
2151
|
+
interface SocialLink {
|
|
2152
|
+
id: 'linkedin' | 'github' | 'discord' | 'facebook' | 'x';
|
|
2153
|
+
href: string;
|
|
2154
|
+
label: string;
|
|
2155
|
+
}
|
|
2156
|
+
interface DashboardFooterProps {
|
|
2157
|
+
rightSlot?: ReactNode;
|
|
2158
|
+
/** Override the canonical 5 socials. Order is preserved. */
|
|
2159
|
+
socials?: ReadonlyArray<SocialLink>;
|
|
2160
|
+
websiteHref?: string;
|
|
2161
|
+
className?: string;
|
|
2162
|
+
}
|
|
2163
|
+
declare function DashboardFooter({ rightSlot, socials, websiteHref, className, }: DashboardFooterProps): react_jsx_runtime.JSX.Element;
|
|
2164
|
+
|
|
2165
|
+
/**
|
|
2166
|
+
* Palette dropdown listbox — canonical implementation.
|
|
2167
|
+
* Spec: docs/06_header_specification.md § "Interactive specification — palette switcher".
|
|
2168
|
+
*
|
|
2169
|
+
* 4 ratified presets. Active palette HSL values written to `--palette-1..4`
|
|
2170
|
+
* on `<html>` via inline style. Selection persisted in localStorage.
|
|
2171
|
+
*/
|
|
2172
|
+
type PaletteIdx = 0 | 1 | 2 | 3;
|
|
2173
|
+
type PalettePreset = {
|
|
2174
|
+
readonly name: string;
|
|
2175
|
+
readonly vars: readonly [string, string, string, string];
|
|
2176
|
+
};
|
|
2177
|
+
declare const PALETTES: readonly PalettePreset[];
|
|
2178
|
+
declare function applyPalette(idx: PaletteIdx): void;
|
|
2179
|
+
declare function PaletteDropdown(): react_jsx_runtime.JSX.Element;
|
|
2180
|
+
|
|
2181
|
+
type GroupToggleProps = Readonly<{
|
|
2182
|
+
groupId: string;
|
|
2183
|
+
label: React.ReactNode;
|
|
2184
|
+
children: React.ReactNode;
|
|
2185
|
+
className?: string;
|
|
2186
|
+
}>;
|
|
2187
|
+
declare function GroupToggle({ groupId, label, children, className }: GroupToggleProps): react_jsx_runtime.JSX.Element;
|
|
2188
|
+
|
|
2189
|
+
/**
|
|
2190
|
+
* Persistent alert banner with CTAs.
|
|
2191
|
+
* Spec: docs/13_best_practices_for_modern_saas_ui.md § "Alert banners".
|
|
2192
|
+
*
|
|
2193
|
+
* Variants: warning (default) / danger / info / success.
|
|
2194
|
+
* Always includes ≥1 CTA; dismiss is optional.
|
|
2195
|
+
*/
|
|
2196
|
+
type AlertVariant = "warning" | "danger" | "info" | "success";
|
|
2197
|
+
type AlertAction = Readonly<{
|
|
2198
|
+
label: string;
|
|
2199
|
+
onClick: () => void;
|
|
2200
|
+
variant?: "primary" | "ghost";
|
|
2201
|
+
}>;
|
|
2202
|
+
type AlertBannerProps = Readonly<{
|
|
2203
|
+
variant?: AlertVariant;
|
|
2204
|
+
icon?: ReactNode;
|
|
2205
|
+
title: ReactNode;
|
|
2206
|
+
meta?: ReactNode;
|
|
2207
|
+
details?: ReactNode;
|
|
2208
|
+
actions?: ReadonlyArray<AlertAction>;
|
|
2209
|
+
onDismiss?: () => void;
|
|
2210
|
+
}>;
|
|
2211
|
+
declare function AlertBanner({ variant, icon, title, meta, details, actions, onDismiss }: AlertBannerProps): react_jsx_runtime.JSX.Element;
|
|
2212
|
+
|
|
2213
|
+
/**
|
|
2214
|
+
* Data table with optional cross-hair affordance.
|
|
2215
|
+
* Spec: docs/13_best_practices_for_modern_saas_ui.md § "Table cross-hair pattern".
|
|
2216
|
+
*
|
|
2217
|
+
* When enableCrossHair=true, attaches mouseenter/leave handlers on every
|
|
2218
|
+
* <th> and <td> to highlight column + cell intersection. Row hover is
|
|
2219
|
+
* handled by global CSS rule on tbody tr:hover.
|
|
2220
|
+
*
|
|
2221
|
+
* For tables in @heuresys/ui consider data-table.tsx (TanStack) instead;
|
|
2222
|
+
* this component is for the brand bundle showcase / raw HTML scenarios.
|
|
2223
|
+
*/
|
|
2224
|
+
type DataTableWithCrossHairProps = Readonly<{
|
|
2225
|
+
caption?: ReactNode;
|
|
2226
|
+
enableCrossHair?: boolean;
|
|
2227
|
+
children: ReactNode;
|
|
2228
|
+
className?: string;
|
|
2229
|
+
}>;
|
|
2230
|
+
declare function DataTableWithCrossHair({ caption, enableCrossHair, children, className, }: DataTableWithCrossHairProps): react_jsx_runtime.JSX.Element;
|
|
2231
|
+
|
|
2232
|
+
/**
|
|
2233
|
+
* TimeRangeSelector — controlled pill row for dashboard time-range selection.
|
|
2234
|
+
*
|
|
2235
|
+
* Renders an inline radiogroup of options (default 15m / 1h / 24h / 7d / 30d).
|
|
2236
|
+
* Active option uses `--accent` background; inactive uses `--muted-foreground`
|
|
2237
|
+
* with hover transition. Token-driven so palette/theme switches propagate.
|
|
2238
|
+
*
|
|
2239
|
+
* Source: extracted from apps/web/src/components/SystemHealthDashboard.tsx
|
|
2240
|
+
* (lines 180-186 of pre-promotion commit) per ADR-0013 R2.
|
|
2241
|
+
*
|
|
2242
|
+
* @example
|
|
2243
|
+
* const [range, setRange] = useState("24h");
|
|
2244
|
+
* <TimeRangeSelector value={range} onChange={setRange} />
|
|
2245
|
+
*/
|
|
2246
|
+
interface TimeRangeOption {
|
|
2247
|
+
value: string;
|
|
2248
|
+
label: string;
|
|
2249
|
+
}
|
|
2250
|
+
interface TimeRangeSelectorProps {
|
|
2251
|
+
/** Available options. Default: 15m / 1h / 24h / 7d / 30d. */
|
|
2252
|
+
options?: TimeRangeOption[];
|
|
2253
|
+
/** Currently selected option value. */
|
|
2254
|
+
value: string;
|
|
2255
|
+
/** Called when user picks an option. */
|
|
2256
|
+
onChange?: (value: string) => void;
|
|
2257
|
+
className?: string;
|
|
2258
|
+
/** Accessible label for the radiogroup. */
|
|
2259
|
+
ariaLabel?: string;
|
|
2260
|
+
}
|
|
2261
|
+
declare function TimeRangeSelector({ options, value, onChange, className, ariaLabel, }: TimeRangeSelectorProps): react_jsx_runtime.JSX.Element;
|
|
2262
|
+
|
|
2263
|
+
/**
|
|
2264
|
+
* PageActions — Refresh + Export button pair rendered in dashboard page headers.
|
|
2265
|
+
*
|
|
2266
|
+
* Refresh: outlined secondary, hover lifts to accent. Export: solid primary
|
|
2267
|
+
* with download glyph. Both buttons are token-driven (`--border`, `--card`,
|
|
2268
|
+
* `--accent`, `--primary`, `--background`). Either action can be omitted.
|
|
2269
|
+
*
|
|
2270
|
+
* Source: extracted from apps/web/src/components/SystemHealthDashboard.tsx
|
|
2271
|
+
* (lines 188-212 of pre-promotion commit) per ADR-0013 R2.
|
|
2272
|
+
*/
|
|
2273
|
+
interface PageActionsProps {
|
|
2274
|
+
/** If provided, shows the Refresh button wired to this handler. */
|
|
2275
|
+
onRefresh?: () => void;
|
|
2276
|
+
/** If provided, shows the Export button wired to this handler. */
|
|
2277
|
+
onExport?: () => void;
|
|
2278
|
+
/** Refresh button label. Default: "Aggiorna". */
|
|
2279
|
+
refreshLabel?: string;
|
|
2280
|
+
/** Export button label. Default: "Export report". */
|
|
2281
|
+
exportLabel?: string;
|
|
2282
|
+
className?: string;
|
|
2283
|
+
}
|
|
2284
|
+
declare function PageActions({ onRefresh, onExport, refreshLabel, exportLabel, className, }: PageActionsProps): react_jsx_runtime.JSX.Element;
|
|
2285
|
+
|
|
2286
|
+
/**
|
|
2287
|
+
* KPI strip — 5-card horizontal grid with sparklines.
|
|
2288
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 2.
|
|
2289
|
+
*/
|
|
2290
|
+
type KpiCardData = Readonly<{
|
|
2291
|
+
label: string;
|
|
2292
|
+
value: ReactNode;
|
|
2293
|
+
unit?: ReactNode;
|
|
2294
|
+
icon?: ReactNode;
|
|
2295
|
+
iconTone?: "success" | "warning" | "danger" | "info" | "palette-1" | "palette-2" | "palette-3" | "palette-4";
|
|
2296
|
+
sparkline?: ReadonlyArray<number>;
|
|
2297
|
+
sparklineTone?: "success" | "warning" | "danger" | "info" | "primary";
|
|
2298
|
+
footerLeft?: ReactNode;
|
|
2299
|
+
footerRight?: ReactNode;
|
|
2300
|
+
/** Replace the default sparkline/footer slot with a custom body. */
|
|
2301
|
+
body?: ReactNode;
|
|
2302
|
+
}>;
|
|
2303
|
+
type KPIStripProps = Readonly<{
|
|
2304
|
+
items: ReadonlyArray<KpiCardData>;
|
|
2305
|
+
}>;
|
|
2306
|
+
declare function KPIStrip({ items }: KPIStripProps): react_jsx_runtime.JSX.Element;
|
|
2307
|
+
declare function KpiCard(props: KpiCardData): react_jsx_runtime.JSX.Element;
|
|
2308
|
+
|
|
2309
|
+
/**
|
|
2310
|
+
* Live log stream — tailing ol with .log-line items.
|
|
2311
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 8.
|
|
2312
|
+
*/
|
|
2313
|
+
type LogLevel = "info" | "warn" | "error" | "debug" | "trace";
|
|
2314
|
+
type LogEntry = Readonly<{
|
|
2315
|
+
timestamp: string;
|
|
2316
|
+
level: LogLevel;
|
|
2317
|
+
source: string;
|
|
2318
|
+
sourceTone?: "primary" | "palette-1" | "palette-2" | "palette-3" | "palette-4" | "success" | "warning" | "info" | "muted";
|
|
2319
|
+
message: ReactNode;
|
|
2320
|
+
meta?: ReactNode;
|
|
2321
|
+
}>;
|
|
2322
|
+
type LogStreamProps = Readonly<{
|
|
2323
|
+
entries: ReadonlyArray<LogEntry>;
|
|
2324
|
+
title?: string;
|
|
2325
|
+
sourceLabel?: string;
|
|
2326
|
+
activeFilter?: LogLevel | "all";
|
|
2327
|
+
totalCount?: number;
|
|
2328
|
+
windowLabel?: string;
|
|
2329
|
+
connected?: boolean;
|
|
2330
|
+
onFilterChange?: (level: LogLevel | "all") => void;
|
|
2331
|
+
onPauseToggle?: () => void;
|
|
2332
|
+
paused?: boolean;
|
|
2333
|
+
}>;
|
|
2334
|
+
declare function LogStream({ entries, title, sourceLabel, activeFilter, totalCount, windowLabel, connected, onFilterChange, onPauseToggle, paused }: LogStreamProps): react_jsx_runtime.JSX.Element;
|
|
2335
|
+
|
|
2336
|
+
/**
|
|
2337
|
+
* Audit feed — ul divide-y of icon-wrapped events.
|
|
2338
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 9.
|
|
2339
|
+
*/
|
|
2340
|
+
type AuditTone = "success" | "warning" | "danger" | "info" | "palette-1" | "palette-2" | "palette-3";
|
|
2341
|
+
type AuditEvent = Readonly<{
|
|
2342
|
+
icon: ReactNode;
|
|
2343
|
+
tone: AuditTone;
|
|
2344
|
+
title: ReactNode;
|
|
2345
|
+
description?: ReactNode;
|
|
2346
|
+
meta?: ReactNode;
|
|
2347
|
+
}>;
|
|
2348
|
+
type AuditFeedProps = Readonly<{
|
|
2349
|
+
events: ReadonlyArray<AuditEvent>;
|
|
2350
|
+
title?: string;
|
|
2351
|
+
subtitle?: string;
|
|
2352
|
+
onViewAll?: () => void;
|
|
2353
|
+
}>;
|
|
2354
|
+
declare function AuditFeed({ events, title, subtitle, onViewAll }: AuditFeedProps): react_jsx_runtime.JSX.Element;
|
|
2355
|
+
|
|
2356
|
+
/**
|
|
2357
|
+
* Incident timeline — ol space-y with vertical chain + ring dots.
|
|
2358
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 5.
|
|
2359
|
+
*/
|
|
2360
|
+
type IncidentSeverity = "P1" | "P2" | "P3";
|
|
2361
|
+
type IncidentStatus = "ACTIVE" | "RESOLVED" | "ACKNOWLEDGED";
|
|
2362
|
+
type IncidentItem = Readonly<{
|
|
2363
|
+
severity: IncidentSeverity;
|
|
2364
|
+
status: IncidentStatus;
|
|
2365
|
+
title: ReactNode;
|
|
2366
|
+
description?: ReactNode;
|
|
2367
|
+
meta?: ReactNode;
|
|
2368
|
+
}>;
|
|
2369
|
+
type IncidentTimelineProps = Readonly<{
|
|
2370
|
+
items: ReadonlyArray<IncidentItem>;
|
|
2371
|
+
title?: string;
|
|
2372
|
+
subtitle?: string;
|
|
2373
|
+
counts?: {
|
|
2374
|
+
p1?: number;
|
|
2375
|
+
p2?: number;
|
|
2376
|
+
p3?: number;
|
|
2377
|
+
};
|
|
2378
|
+
onViewFullLog?: () => void;
|
|
2379
|
+
}>;
|
|
2380
|
+
declare function IncidentTimeline({ items, title, subtitle, counts, onViewFullLog }: IncidentTimelineProps): react_jsx_runtime.JSX.Element;
|
|
2381
|
+
|
|
2382
|
+
/**
|
|
2383
|
+
* SQL slow query top-N table.
|
|
2384
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 6.
|
|
2385
|
+
*/
|
|
2386
|
+
type SqlSlowRow = Readonly<{
|
|
2387
|
+
rank: number;
|
|
2388
|
+
query: ReactNode;
|
|
2389
|
+
queryNote?: ReactNode;
|
|
2390
|
+
tenant: ReactNode;
|
|
2391
|
+
tenantTone?: "warning" | "palette-1" | "palette-2" | "palette-3" | "muted";
|
|
2392
|
+
calls: number;
|
|
2393
|
+
p95Ms: number;
|
|
2394
|
+
meanMs: number;
|
|
2395
|
+
totalTimeBarPct: number;
|
|
2396
|
+
totalTimeTone?: "danger" | "warning" | "palette-2";
|
|
2397
|
+
totalTimeLabel: ReactNode;
|
|
2398
|
+
lastSeen: ReactNode;
|
|
2399
|
+
}>;
|
|
2400
|
+
type SQLSlowQueryTableProps = Readonly<{
|
|
2401
|
+
rows: ReadonlyArray<SqlSlowRow>;
|
|
2402
|
+
totalTracked?: number;
|
|
2403
|
+
sampleSince?: string;
|
|
2404
|
+
totalCaptured?: string;
|
|
2405
|
+
onResetStats?: () => void;
|
|
2406
|
+
onOpenExplain?: (row: SqlSlowRow) => void;
|
|
2407
|
+
}>;
|
|
2408
|
+
declare function SQLSlowQueryTable({ rows, totalTracked, sampleSince, totalCaptured, onResetStats, onOpenExplain }: SQLSlowQueryTableProps): react_jsx_runtime.JSX.Element;
|
|
2409
|
+
|
|
2410
|
+
/**
|
|
2411
|
+
* RBAC permissions matrix — sticky first column + tri-state cells.
|
|
2412
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 7.
|
|
2413
|
+
*/
|
|
2414
|
+
type RbacState = "granted" | "scoped" | "denied";
|
|
2415
|
+
type RbacRole = Readonly<{
|
|
2416
|
+
code: string;
|
|
2417
|
+
tone: "warning" | "palette-1" | "palette-2" | "palette-3" | "muted-foreground";
|
|
2418
|
+
label?: string;
|
|
2419
|
+
}>;
|
|
2420
|
+
type RbacRow = Readonly<{
|
|
2421
|
+
permission: string;
|
|
2422
|
+
description: string;
|
|
2423
|
+
states: ReadonlyArray<RbacState>;
|
|
2424
|
+
scopeTitles?: ReadonlyArray<string | undefined>;
|
|
2425
|
+
}>;
|
|
2426
|
+
type RBACMatrixProps = Readonly<{
|
|
2427
|
+
roles: ReadonlyArray<RbacRole>;
|
|
2428
|
+
rows: ReadonlyArray<RbacRow>;
|
|
2429
|
+
lastReload?: string;
|
|
2430
|
+
totalMappings?: number;
|
|
2431
|
+
totalRoles?: number;
|
|
2432
|
+
totalPermissions?: number;
|
|
2433
|
+
onExportCsv?: () => void;
|
|
2434
|
+
onViewFull?: () => void;
|
|
2435
|
+
}>;
|
|
2436
|
+
declare function RBACMatrix({ roles, rows, lastReload, totalMappings, totalRoles, totalPermissions, onExportCsv, onViewFull }: RBACMatrixProps): react_jsx_runtime.JSX.Element;
|
|
2437
|
+
|
|
2438
|
+
/**
|
|
2439
|
+
* Tenant fleet table — cross-tenant operational status.
|
|
2440
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 3.
|
|
2441
|
+
*/
|
|
2442
|
+
type TenantStatus = "healthy" | "degraded" | "down";
|
|
2443
|
+
type TenantRow = Readonly<{
|
|
2444
|
+
code: string;
|
|
2445
|
+
initials: string;
|
|
2446
|
+
initialsTone: "palette-1" | "palette-2" | "palette-3" | "palette-4" | "warning";
|
|
2447
|
+
tenantId: string;
|
|
2448
|
+
status: TenantStatus;
|
|
2449
|
+
users: number;
|
|
2450
|
+
tables: number;
|
|
2451
|
+
errors1h: number;
|
|
2452
|
+
lastActivity: string;
|
|
2453
|
+
poolUtilPct: number;
|
|
2454
|
+
}>;
|
|
2455
|
+
type TenantFleetTableProps = Readonly<{
|
|
2456
|
+
rows: ReadonlyArray<TenantRow>;
|
|
2457
|
+
title?: string;
|
|
2458
|
+
subtitle?: string;
|
|
2459
|
+
onOpenDetail?: (row: TenantRow) => void;
|
|
2460
|
+
onSearch?: (query: string) => void;
|
|
2461
|
+
onOpenFilters?: () => void;
|
|
2462
|
+
}>;
|
|
2463
|
+
declare function TenantFleetTable({ rows, title, subtitle, onOpenDetail, onSearch, onOpenFilters, }: TenantFleetTableProps): react_jsx_runtime.JSX.Element;
|
|
2464
|
+
|
|
2465
|
+
/**
|
|
2466
|
+
* Error rate breakdown — stacked status bar + top erroring endpoints.
|
|
2467
|
+
* Spec: docs/16_system_health_admin_dashboard_patterns.md § 4.
|
|
2468
|
+
*/
|
|
2469
|
+
type StatusBucket = "2xx" | "3xx" | "4xx" | "5xx";
|
|
2470
|
+
type EndpointRow = Readonly<{
|
|
2471
|
+
method: "GET" | "POST" | "PATCH" | "DELETE" | "PUT";
|
|
2472
|
+
path: string;
|
|
2473
|
+
scope?: string;
|
|
2474
|
+
statusBadge: ReactNode;
|
|
2475
|
+
statusTone: "danger" | "warning" | "muted";
|
|
2476
|
+
sparkline: ReadonlyArray<number>;
|
|
2477
|
+
sparklineTone: "danger" | "warning" | "primary" | "muted";
|
|
2478
|
+
delta?: ReactNode;
|
|
2479
|
+
deltaTone?: "danger" | "warning" | "success" | "muted-foreground";
|
|
2480
|
+
}>;
|
|
2481
|
+
type ErrorRateBreakdownProps = Readonly<{
|
|
2482
|
+
overallRate: ReactNode;
|
|
2483
|
+
overallUnit?: ReactNode;
|
|
2484
|
+
overallDelta?: ReactNode;
|
|
2485
|
+
overallDeltaTone?: "warning" | "danger" | "success";
|
|
2486
|
+
totalRequests?: number;
|
|
2487
|
+
distribution: Readonly<Record<StatusBucket, number>>;
|
|
2488
|
+
endpoints: ReadonlyArray<EndpointRow>;
|
|
2489
|
+
onViewAll?: () => void;
|
|
2490
|
+
}>;
|
|
2491
|
+
declare function ErrorRateBreakdown({ overallRate, overallUnit, overallDelta, overallDeltaTone, totalRequests, distribution, endpoints, onViewAll }: ErrorRateBreakdownProps): react_jsx_runtime.JSX.Element;
|
|
2492
|
+
|
|
2493
|
+
/**
|
|
2494
|
+
* DB Supervisor sidebar entry — special palette-2 callout + sub-tree preview.
|
|
2495
|
+
* Spec: docs/07_sidebar_specification.md § "DB Supervisor sidebar entry — special variant"
|
|
2496
|
+
* + docs/16_system_health_admin_dashboard_patterns.md § 11.
|
|
2497
|
+
*
|
|
2498
|
+
* Renders ONLY the <li> + sub-tree of the DB Supervisor entry. The enclosing
|
|
2499
|
+
* group toggle (collapse for "Database") is provided by the parent
|
|
2500
|
+
* <DashboardSidebar> group entry — passing this as `customContent` means
|
|
2501
|
+
* the outer group already has its toggle, so we must NOT wrap with another
|
|
2502
|
+
* GroupToggle here (that would create a nested duplicate toggle button).
|
|
2503
|
+
*/
|
|
2504
|
+
type DBSubItem = Readonly<{
|
|
2505
|
+
label: string;
|
|
2506
|
+
count: string;
|
|
2507
|
+
}>;
|
|
2508
|
+
declare const DB_SUBITEMS: ReadonlyArray<DBSubItem>;
|
|
2509
|
+
declare function DBSupervisorSidebar(): react_jsx_runtime.JSX.Element;
|
|
2510
|
+
|
|
2511
|
+
/**
|
|
2512
|
+
* Heuresys table cross-hair helper.
|
|
2513
|
+
*
|
|
2514
|
+
* Source: ux-design/prototypes/superuser-system-health.html
|
|
2515
|
+
* Doctrine: docs/13_best_practices_for_modern_saas_ui.md +
|
|
2516
|
+
* docs/16_system_health_admin_dashboard_patterns.md
|
|
2517
|
+
*
|
|
2518
|
+
* Attaches `mouseenter` / `mouseleave` handlers on every `<th>` (header)
|
|
2519
|
+
* and `<td>` (body cell) of the table so that hovering a cell highlights
|
|
2520
|
+
* its column and its column header. The row highlight is handled by
|
|
2521
|
+
* `tbody tr:hover` CSS rule globally (see hover-affordance.css).
|
|
2522
|
+
*
|
|
2523
|
+
* Returns an `unbind()` function for React useEffect cleanup.
|
|
2524
|
+
*/
|
|
2525
|
+
type CrossHairBindings = () => void;
|
|
2526
|
+
declare function attachCrossHair(table: HTMLTableElement): CrossHairBindings;
|
|
2527
|
+
|
|
2528
|
+
export { AccessibilityPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AchievementBadge, type AchievementBadgeProps, ActivityFeed, type ActivityFeedItem, ActivityRing, type ActivityRingProps, Admonition, type AdmonitionVariant, type AlertAction, AlertBanner, type AlertBannerProps, type AlertVariant, AnimatedNumber, AppShell, type AppShellNavItem, type AppShellProps, AppSwitcher, type AppSwitcherApp, type AuditEvent, AuditFeed, type AuditFeedProps, type AuditTone, AuroraBackground, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Banner, type BannerProps, BentoCell, type BentoCellProps, BentoGrid, type BentoGridProps, type BrandIdentity, type BreadcrumbItem, Breadcrumbs, Button, type ButtonProps, type CalendarEvent, CalendarGrid, CapabilityRadar, type CapabilityRadarAxis, type CapabilityRadarProps, type CapabilityRadarSeries, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CareerArc, type CareerArcProps, type CareerStage, type CareerStageStatus, Center, type ChatMessage, ChatProvider, type ChatProviderAdapter, type ChatRole, Chatbot, Checkbox, Cluster, type ColorModes, type ColorSystem, CommandPalette, type Comment, CommentThread, ConfettiButton, Cover, type CrossHairBindings, type DBSubItem, DBSupervisorSidebar, DB_SUBITEMS, DEFAULT_THEME_STATE, DashboardFooter, type DashboardFooterProps, DashboardHeader, type DashboardHeaderProps, type RbacRole as DashboardRbacRole, DashboardShell, type DashboardShellProps, DashboardSidebar, type DashboardSidebarProps, DataTable, type DataTableProps, DataTableWithCrossHair, type DataTableWithCrossHairProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DiffLine, DiffViewer, DotGrid, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EChartsCard, type EChartsCardProps, ESCOTreeNavigator, type ESCOTreeNavigatorProps, type ESCOTreeNode, type EffectsConfig, EmptyState, type EmptyStateProps, type EndpointRow, ErrorRateBreakdown, type ErrorRateBreakdownProps, ErrorState, type ErrorStateProps, FAB, type FABProps, FadeIn, FileDropzone, type FileDropzoneProps, FilterBar, type FilterBarProps, type FilterChip, FormWizard, type FormWizardProps, type FormWizardStep, Frame, type GalleryImage, GlassCard, type GlassCardProps, GradientText, Grid, GroupToggle, type GroupToggleProps, type HeaderBreadcrumb, HeroCentered, HeroSplit, HeroVideoBackground, HeuresysLogoBadge, type HeuresysLogoBadgeProps, HeuresysMark, type HeuresysMarkProps, HeuresysWordmark, type HeuresysWordmarkProps, IbanInput, type IconographyConfig, ImageGallery, type IncidentItem, type IncidentSeverity, type IncidentStatus, IncidentTimeline, type IncidentTimelineProps, Input, type InputProps, IntegrationHealthPill, type IntegrationHealthPillProps, type IntegrationHealthTone, JsonTree, type KGEdge, KGGraphCanvas, type KGGraphCanvasProps, type KGNode, KPIStrip, type KPIStripProps, KanbanBoard, type KanbanCard, type KanbanColumn, KeyboardShortcutsModal, KgMiniGraph, type KgMiniGraphLegendItem, type KgMiniGraphProps, KpiCard, type KpiCardData, KpiRing, type KpiRingProps, type KpiRingThresholds, type KpiRingTone, LanguagePicker, LinearGauge, type LinearGaugeProps, LiveRegionProvider, type LogEntry, type LogLevel, LogStream, type LogStreamProps, LottiePlayer, type LottiePlayerProps, MarkdownView, Marquee, MegaMenu, type MegaMenuColumn, type MegaMenuTrigger, MermaidDiagram, MeshGradient, MobileBottomNav, type MobileNavItem, MoneyInput, type MoneyInputProps, type MotionConfig, type NavGroup, type NavItem, NetworkGraph, type NetworkGraphProps, NeumorphicCard, type NeumorphicCardProps, NoiseOverlay, type Notification, NotificationCenter, type OKLCH, OnboardingTour, OtpInput, type OtpInputProps, PALETTES, PageActions, type PageActionsProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PaletteDropdown, type PaletteIdx, type PalettePreset, PasswordStrengthMeter, PerfMonitor, PhoneInputField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, QRCodeView, RBACMatrix, type RBACMatrixProps, RadialGauge, type RadialGaugeProps, type RbacArea, type RbacAssignment, RbacMatrix, type RbacMatrixProps, type RbacPermissionLevel, type RbacRole$1 as RbacRole, type RbacRow, type RbacState, type SAPDeltaEntry, type SAPJobStatus, type SAPJobSummary, SAPSyncPanel, type SAPSyncPanelProps, SQLSlowQueryTable, type SQLSlowQueryTableProps, STARTER_PRESETS, SUPPORTED_LOCALES, ScaleIn, type ShortcutGroup, SignaturePadField, type SignaturePadFieldProps, Skeleton, SkillHeatmap, type SkillHeatmapAxis, type SkillHeatmapCell, type SkillHeatmapProps, SkipLink, SlideIn, type SocialLink, type SpacingLayout, Sparkline, type SparklineProps, Spinner, type SqlSlowRow, Stack, StaggerChildren, StaggerItem, StatsCard, type StatsCardProps, type StatusBucket, StatusIcon, type StatusIconProps, type StatusTone, Stepper, type StepperProps, type StepperStep, SuccessionCard, type SuccessionCardProps, type SuccessionReadiness, type SuccessionRisk, Switch, Switcher, type TabItem, TableOfContents, Tabs, TabsContent, TabsList, TabsOverflow, TabsTrigger, TaxIdInput, type TenantRow as TenantFleetRow, TenantFleetTable, type TenantFleetTableProps, type TenantRow, type TenantStatus, type ThemeBuilderState, ThemeBuilderWizard, type ThemePreset, ThemeProvider, ThemeToggle, ThreeScene, TiltCard, type TimeRangeOption, TimeRangeSelector, type TimeRangeSelectorProps, Timeline, type TimelineEvent, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, type TocItem, type ToolCall, ToolCallView, type ToolResult, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TourStep, Typewriter, type Typography as TypographyConfig, type UserIdentity, type VideoCaption, type VideoChapter, VideoPlayer, type VideoPlayerProps, VoiceInput, WinLossSparkline, type WordmarkSize, type WordmarkVariant, applyPalette, attachCrossHair, badgeVariants, buttonVariants, cn, downloadAsFile, echartsPresets, exportCSV, exportExcel, exportFigmaTokens, exportTailwindConfig, exportThemeProvider, exportTokensCss, exportTokensJson, findPreset, formatCurrency, formatDate, formatDateTime, formatList, formatNumber, formatPercent, formatRelativeTime, oklch, buildScale as oklchBuildScale, contrastRatio as oklchContrast, harmony as oklchHarmony, luminance as oklchLuminance, simulateColorBlind as oklchSimulateColorBlind, toCss as oklchToCss, toHex as oklchToHex, toRgb as oklchToRgb, parseCSV, parseExcel, parseJSON, parseTOML, parseXML, toastVariants, useAnnounce, useChat, useConfetti, useGlobalCmdK, useShortcutsModal, useTheme };
|