@northslopetech/altitude-ui 2.0.14 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +809 -142
- package/dist/index.d.ts +809 -142
- package/dist/index.js +1248 -168
- package/dist/index.mjs +1228 -168
- package/package.json +4 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,66 +1,146 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
6
|
-
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
7
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
9
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
8
10
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
11
|
+
import { Table as Table$1 } from '@tanstack/react-table';
|
|
9
12
|
|
|
13
|
+
/**
|
|
14
|
+
* Button variant styles.
|
|
15
|
+
*/
|
|
10
16
|
declare const buttonVariants: (props?: ({
|
|
11
17
|
variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
|
|
12
18
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
13
19
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
14
|
-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
20
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
15
21
|
asChild?: boolean;
|
|
16
|
-
icon?: React.ReactNode;
|
|
22
|
+
icon?: React$1.ReactNode;
|
|
17
23
|
iconPosition?: "left" | "right";
|
|
18
24
|
}
|
|
19
|
-
|
|
25
|
+
/**
|
|
26
|
+
* Button component with multiple variants and sizes.
|
|
27
|
+
* @param {boolean} [props.asChild] - Render as child element (using Radix Slot)
|
|
28
|
+
* @param {React.ReactNode} [props.icon] - Icon element to display
|
|
29
|
+
* @param {"left" | "right"} [props.iconPosition] - Position of icon relative to text
|
|
30
|
+
* @param {string} [props.variant] - Visual style variant
|
|
31
|
+
* @param {string} [props.size] - Button size
|
|
32
|
+
*/
|
|
33
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
20
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Typography variant styles using design system tokens.
|
|
37
|
+
*/
|
|
21
38
|
declare const typographyVariants: (props?: ({
|
|
22
39
|
variant?: "display-xl" | "display-lg" | "display-md" | "display-sm" | "display-xs" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-xl" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-xl" | "label-xl-bold" | "label-lg" | "label-lg-bold" | "label-md" | "label-md-bold" | "label-sm" | "label-sm-bold" | "label-xs" | "label-xs-bold" | null | undefined;
|
|
23
40
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
24
|
-
interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
|
|
25
|
-
as?: React.ElementType;
|
|
41
|
+
interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
|
|
42
|
+
as?: React$1.ElementType;
|
|
26
43
|
}
|
|
27
|
-
|
|
44
|
+
/**
|
|
45
|
+
* Typography component for rendering text with design system styles.
|
|
46
|
+
* @param {React.ElementType} [props.as] - Custom HTML element to render
|
|
47
|
+
* @param {string} [props.variant] - Typography variant from design tokens
|
|
48
|
+
*/
|
|
49
|
+
declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
|
|
28
50
|
|
|
51
|
+
/**
|
|
52
|
+
* Select trigger variant styles.
|
|
53
|
+
*/
|
|
29
54
|
declare const selectTriggerVariants: (props?: ({
|
|
30
55
|
width?: "default" | "compact" | "fill" | null | undefined;
|
|
31
56
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
57
|
+
/**
|
|
58
|
+
* Select content variant styles.
|
|
59
|
+
*/
|
|
32
60
|
declare const selectContentVariants: (props?: ({
|
|
33
61
|
position?: "popper" | "item-aligned" | null | undefined;
|
|
34
62
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
63
|
+
/**
|
|
64
|
+
* Select root component.
|
|
65
|
+
*/
|
|
66
|
+
declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
|
|
67
|
+
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
69
|
+
interface SelectTriggerProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
|
|
39
70
|
className?: string;
|
|
40
|
-
children?: React.ReactNode;
|
|
71
|
+
children?: React$1.ReactNode;
|
|
41
72
|
width?: "default" | "fill" | "compact";
|
|
42
73
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
74
|
+
/**
|
|
75
|
+
* Select trigger button component.
|
|
76
|
+
* @param {string} [props.width] - Width variant (default, fill, or compact)
|
|
77
|
+
* @param {string} [props.className] - Additional CSS classes
|
|
78
|
+
* @param {React.ReactNode} [props.children] - Trigger content
|
|
79
|
+
*/
|
|
80
|
+
declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
81
|
+
declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
82
|
+
declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
83
|
+
interface SelectContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "position">, VariantProps<typeof selectContentVariants> {
|
|
47
84
|
}
|
|
48
|
-
declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
49
|
-
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
-
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
51
|
-
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
85
|
+
declare const SelectContent: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
86
|
+
declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
87
|
+
declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
88
|
+
declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* @fileoverview FormField component for Altitude UI.
|
|
92
|
+
*/
|
|
52
93
|
|
|
53
94
|
interface FormFieldProps {
|
|
54
95
|
label?: string;
|
|
55
96
|
helperText?: string;
|
|
56
97
|
error?: boolean;
|
|
57
98
|
required?: boolean;
|
|
58
|
-
children: React.ReactNode;
|
|
99
|
+
children: React$1.ReactNode;
|
|
59
100
|
className?: string;
|
|
60
101
|
id?: string;
|
|
61
102
|
compact?: boolean;
|
|
62
103
|
}
|
|
63
|
-
|
|
104
|
+
/**
|
|
105
|
+
* FormField wrapper component for consistent form input styling.
|
|
106
|
+
* @param {string} [props.label] - Field label text
|
|
107
|
+
* @param {string} [props.helperText] - Helper or error message text
|
|
108
|
+
* @param {boolean} [props.error] - Whether field has an error
|
|
109
|
+
* @param {boolean} [props.required] - Whether field is required
|
|
110
|
+
* @param {React.ReactNode} props.children - Form input element
|
|
111
|
+
* @param {boolean} [props.compact] - Use compact layout with floating label
|
|
112
|
+
*/
|
|
113
|
+
declare const FormField: React$1.ForwardRefExoticComponent<FormFieldProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
114
|
+
|
|
115
|
+
declare function Label({ className, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
116
|
+
|
|
117
|
+
declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): react_jsx_runtime.JSX.Element;
|
|
118
|
+
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
119
|
+
variant?: "legend" | "label";
|
|
120
|
+
}): react_jsx_runtime.JSX.Element;
|
|
121
|
+
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
122
|
+
declare const fieldVariants: (props?: ({
|
|
123
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
124
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
125
|
+
declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
|
|
126
|
+
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
127
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
|
|
128
|
+
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
129
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
|
|
130
|
+
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
131
|
+
children?: React.ReactNode;
|
|
132
|
+
}): react_jsx_runtime.JSX.Element;
|
|
133
|
+
declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
|
|
134
|
+
errors?: Array<{
|
|
135
|
+
message?: string;
|
|
136
|
+
} | undefined>;
|
|
137
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
138
|
+
|
|
139
|
+
declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* @fileoverview DatePicker component for Altitude UI.
|
|
143
|
+
*/
|
|
64
144
|
|
|
65
145
|
interface DatePickerProps {
|
|
66
146
|
value?: Date;
|
|
@@ -72,13 +152,26 @@ interface DatePickerProps {
|
|
|
72
152
|
minDate?: Date;
|
|
73
153
|
maxDate?: Date;
|
|
74
154
|
}
|
|
75
|
-
|
|
155
|
+
/**
|
|
156
|
+
* DatePicker component with input field and calendar popover.
|
|
157
|
+
* @param {Date} [props.value] - Controlled date value
|
|
158
|
+
* @param {function} [props.onValueChange] - Callback when date changes
|
|
159
|
+
* @param {Date | string | number} [props.defaultValue] - Default date value
|
|
160
|
+
* @param {boolean} [props.disabled] - Whether picker is disabled
|
|
161
|
+
* @param {string} [props.placeholder] - Input placeholder text
|
|
162
|
+
* @param {Date} [props.minDate] - Minimum selectable date
|
|
163
|
+
* @param {Date} [props.maxDate] - Maximum selectable date
|
|
164
|
+
*/
|
|
165
|
+
declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
76
166
|
|
|
167
|
+
/**
|
|
168
|
+
* Upload variant styles for different states.
|
|
169
|
+
*/
|
|
77
170
|
declare const uploadVariants: (props?: ({
|
|
78
171
|
state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
|
|
79
172
|
disabled?: boolean | null | undefined;
|
|
80
173
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
81
|
-
interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onError"> {
|
|
174
|
+
interface UploadProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onError"> {
|
|
82
175
|
onFileSelect?: (files: File[]) => void;
|
|
83
176
|
acceptedFileTypes?: string[];
|
|
84
177
|
disabled?: boolean;
|
|
@@ -88,160 +181,734 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onErro
|
|
|
88
181
|
selectedFiles?: File[];
|
|
89
182
|
maxFileSize?: number;
|
|
90
183
|
}
|
|
91
|
-
|
|
184
|
+
/**
|
|
185
|
+
* Upload component with drag-and-drop functionality.
|
|
186
|
+
* @param {function} [props.onFileSelect] - Callback when files are selected
|
|
187
|
+
* @param {string[]} [props.acceptedFileTypes] - Accepted MIME types
|
|
188
|
+
* @param {boolean} [props.disabled] - Whether upload is disabled
|
|
189
|
+
* @param {string} [props.state] - Current upload state
|
|
190
|
+
* @param {number} [props.progress] - Upload progress percentage (0-100)
|
|
191
|
+
* @param {string} [props.errorMessage] - Error message to display
|
|
192
|
+
* @param {File[]} [props.selectedFiles] - Currently selected files
|
|
193
|
+
* @param {number} [props.maxFileSize] - Maximum file size in bytes
|
|
194
|
+
*/
|
|
195
|
+
declare const Upload: React$1.ForwardRefExoticComponent<UploadProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
92
196
|
|
|
197
|
+
/**
|
|
198
|
+
* Checkbox variant styles.
|
|
199
|
+
*/
|
|
93
200
|
declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
94
|
-
interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
|
|
201
|
+
interface CheckboxProps extends React$1.ComponentProps<typeof CheckboxPrimitive.Root> {
|
|
95
202
|
className?: string;
|
|
96
203
|
}
|
|
97
|
-
|
|
204
|
+
/**
|
|
205
|
+
* Checkbox component with Altitude design system styling.
|
|
206
|
+
* @param {boolean} [props.checked] - Controlled checked state
|
|
207
|
+
* @param {function} [props.onCheckedChange] - Callback when checked state changes
|
|
208
|
+
* @param {boolean} [props.disabled] - Whether checkbox is disabled
|
|
209
|
+
* @param {string} [props.className] - Additional CSS classes
|
|
210
|
+
*/
|
|
211
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
98
212
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
213
|
+
/**
|
|
214
|
+
* @fileoverview Input component for Altitude UI.
|
|
215
|
+
*/
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Props for standard text input.
|
|
219
|
+
*/
|
|
220
|
+
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "style"> {
|
|
103
221
|
className?: string;
|
|
104
|
-
style?: React.CSSProperties;
|
|
222
|
+
style?: React$1.CSSProperties;
|
|
105
223
|
onClear?: () => void;
|
|
106
224
|
showClear?: boolean;
|
|
107
225
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
interface
|
|
116
|
-
|
|
117
|
-
ref?: React.Ref<HTMLInputElement>;
|
|
118
|
-
}): JSX.Element;
|
|
119
|
-
(props: TextareaFieldProps & {
|
|
120
|
-
ref?: React.Ref<HTMLTextAreaElement>;
|
|
121
|
-
}): JSX.Element;
|
|
226
|
+
/**
|
|
227
|
+
* Input component for single-line text entry.
|
|
228
|
+
* @param {function} [props.onClear] - Callback when clear button is clicked
|
|
229
|
+
* @param {boolean} [props.showClear] - Whether to show clear button
|
|
230
|
+
*/
|
|
231
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
232
|
+
|
|
233
|
+
interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
234
|
+
error?: boolean;
|
|
122
235
|
}
|
|
123
|
-
declare const
|
|
236
|
+
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
124
237
|
|
|
238
|
+
/**
|
|
239
|
+
* Badge variant styles.
|
|
240
|
+
*/
|
|
125
241
|
declare const badgeVariants: (props?: ({
|
|
126
242
|
variant?: "error" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | null | undefined;
|
|
127
243
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
128
|
-
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
244
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
129
245
|
}
|
|
130
|
-
|
|
246
|
+
/**
|
|
247
|
+
* Badge component for status and informational labels.
|
|
248
|
+
* @param {string} [props.variant] - Badge color variant
|
|
249
|
+
*/
|
|
250
|
+
declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
131
251
|
|
|
252
|
+
/**
|
|
253
|
+
* Tabs trigger variant styles.
|
|
254
|
+
*/
|
|
132
255
|
declare const tabsVariants: (props?: ({
|
|
133
256
|
variant?: "default" | null | undefined;
|
|
134
257
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
135
|
-
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
258
|
+
interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
136
259
|
value: string;
|
|
137
260
|
onValueChange: (value: string) => void;
|
|
138
261
|
variant?: "default";
|
|
139
262
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
263
|
+
/**
|
|
264
|
+
* Tabs root component.
|
|
265
|
+
* @param {string} props.value - Currently active tab value
|
|
266
|
+
* @param {function} props.onValueChange - Callback when active tab changes
|
|
267
|
+
* @param {string} [props.variant] - Visual variant
|
|
268
|
+
*/
|
|
269
|
+
declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
270
|
+
interface TabsListProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
271
|
+
children: React$1.ReactNode;
|
|
143
272
|
}
|
|
144
|
-
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
145
|
-
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof tabsVariants> {
|
|
273
|
+
declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
274
|
+
interface TabsTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof tabsVariants> {
|
|
146
275
|
value: string;
|
|
147
276
|
}
|
|
148
|
-
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
149
|
-
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
277
|
+
declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
278
|
+
interface TabsContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
150
279
|
value: string;
|
|
151
280
|
}
|
|
152
|
-
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
281
|
+
declare const TabsContent: React$1.ForwardRefExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
153
282
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
283
|
+
/**
|
|
284
|
+
* DropdownMenu root component.
|
|
285
|
+
*/
|
|
286
|
+
declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
287
|
+
interface DropdownMenuTriggerProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {
|
|
288
|
+
icon?: React$1.ReactNode;
|
|
157
289
|
}
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
declare const
|
|
163
|
-
declare const
|
|
290
|
+
/**
|
|
291
|
+
* DropdownMenuTrigger component.
|
|
292
|
+
* @param {React.ReactNode} [props.icon] - Custom icon element
|
|
293
|
+
*/
|
|
294
|
+
declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
295
|
+
declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
296
|
+
declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
297
|
+
declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
298
|
+
declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
299
|
+
declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
164
300
|
inset?: boolean;
|
|
165
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
166
|
-
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
167
|
-
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
168
|
-
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
301
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
302
|
+
declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
303
|
+
declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
304
|
+
declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
169
305
|
inset?: boolean;
|
|
170
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
171
|
-
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
172
|
-
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
173
|
-
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
306
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
307
|
+
declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
308
|
+
declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
309
|
+
declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
174
310
|
inset?: boolean;
|
|
175
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
176
|
-
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
311
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
177
313
|
declare const DropdownMenuShortcut: {
|
|
178
|
-
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
314
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
179
315
|
displayName: string;
|
|
180
316
|
};
|
|
181
317
|
|
|
318
|
+
/**
|
|
319
|
+
* @fileoverview Icon components for Altitude UI.
|
|
320
|
+
*/
|
|
321
|
+
|
|
322
|
+
/**
|
|
323
|
+
* Icon color variant type.
|
|
324
|
+
*/
|
|
182
325
|
type IconVariant = "dark" | "light" | "gray" | "error" | "warning";
|
|
183
|
-
interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
326
|
+
interface IconProps extends React$1.SVGProps<SVGSVGElement> {
|
|
184
327
|
className?: string;
|
|
185
328
|
variant?: IconVariant;
|
|
186
329
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
declare const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
declare const
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
declare const
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
declare const
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
declare const
|
|
207
|
-
declare const
|
|
208
|
-
declare const
|
|
209
|
-
declare const
|
|
210
|
-
declare const
|
|
211
|
-
declare const
|
|
212
|
-
declare const
|
|
213
|
-
declare const
|
|
214
|
-
declare const
|
|
215
|
-
declare const
|
|
216
|
-
declare const
|
|
217
|
-
declare const
|
|
218
|
-
declare const
|
|
219
|
-
declare const
|
|
220
|
-
declare const
|
|
221
|
-
declare const
|
|
222
|
-
declare const
|
|
223
|
-
declare const
|
|
224
|
-
declare const
|
|
225
|
-
declare const
|
|
226
|
-
declare const
|
|
227
|
-
declare const
|
|
228
|
-
declare const
|
|
229
|
-
declare const
|
|
230
|
-
declare const
|
|
231
|
-
declare const
|
|
232
|
-
declare const
|
|
233
|
-
declare const
|
|
234
|
-
declare const
|
|
235
|
-
declare const
|
|
236
|
-
declare const
|
|
237
|
-
declare const
|
|
238
|
-
declare const
|
|
239
|
-
declare const
|
|
240
|
-
declare const
|
|
241
|
-
declare const
|
|
242
|
-
declare const
|
|
243
|
-
declare const
|
|
244
|
-
declare const
|
|
245
|
-
declare const
|
|
246
|
-
|
|
247
|
-
|
|
330
|
+
/**
|
|
331
|
+
* X (close) icon component.
|
|
332
|
+
*/
|
|
333
|
+
declare const X: React$1.FC<IconProps>;
|
|
334
|
+
/**
|
|
335
|
+
* Lock icon component.
|
|
336
|
+
*/
|
|
337
|
+
declare const Lock: React$1.FC<IconProps>;
|
|
338
|
+
/**
|
|
339
|
+
* Check icon component (circle with checkmark).
|
|
340
|
+
*/
|
|
341
|
+
declare const Check: React$1.FC<IconProps>;
|
|
342
|
+
/**
|
|
343
|
+
* ChevronDown icon component (downward pointing chevron).
|
|
344
|
+
*/
|
|
345
|
+
declare const ChevronDown: React$1.FC<IconProps>;
|
|
346
|
+
/**
|
|
347
|
+
* ChevronUp icon component (upward pointing chevron).
|
|
348
|
+
*/
|
|
349
|
+
declare const ChevronUp: React$1.FC<IconProps>;
|
|
350
|
+
declare const Calendar: React$1.FC<IconProps>;
|
|
351
|
+
declare const ChevronLeft: React$1.FC<IconProps>;
|
|
352
|
+
declare const ChevronRight: React$1.FC<IconProps>;
|
|
353
|
+
declare const CheckIcon: React$1.FC<IconProps>;
|
|
354
|
+
declare const ArrowDown: React$1.FC<IconProps>;
|
|
355
|
+
declare const ArrowUp: React$1.FC<IconProps>;
|
|
356
|
+
declare const ArrowLeft: React$1.FC<IconProps>;
|
|
357
|
+
declare const ArrowRight: React$1.FC<IconProps>;
|
|
358
|
+
declare const Bell: React$1.FC<IconProps>;
|
|
359
|
+
declare const Bookmark: React$1.FC<IconProps>;
|
|
360
|
+
declare const CaretDown: React$1.FC<IconProps>;
|
|
361
|
+
declare const CaretLeft: React$1.FC<IconProps>;
|
|
362
|
+
declare const CaretRight: React$1.FC<IconProps>;
|
|
363
|
+
declare const CaretUp: React$1.FC<IconProps>;
|
|
364
|
+
declare const Chat: React$1.FC<IconProps>;
|
|
365
|
+
declare const CheckmarkCircle: React$1.FC<IconProps>;
|
|
366
|
+
declare const CheckmarkSquare: React$1.FC<IconProps>;
|
|
367
|
+
declare const Close: React$1.FC<IconProps>;
|
|
368
|
+
declare const CloseSmall: React$1.FC<IconProps>;
|
|
369
|
+
declare const Cog: React$1.FC<IconProps>;
|
|
370
|
+
declare const Credentials: React$1.FC<IconProps>;
|
|
371
|
+
declare const Doc: React$1.FC<IconProps>;
|
|
372
|
+
declare const Dollar: React$1.FC<IconProps>;
|
|
373
|
+
declare const Edit: React$1.FC<IconProps>;
|
|
374
|
+
declare const Envelope: React$1.FC<IconProps>;
|
|
375
|
+
declare const Exclamation: React$1.FC<IconProps>;
|
|
376
|
+
declare const EyeClosed: React$1.FC<IconProps>;
|
|
377
|
+
declare const EyeOpen: React$1.FC<IconProps>;
|
|
378
|
+
declare const Filter: React$1.FC<IconProps>;
|
|
379
|
+
declare const FilterDescending: React$1.FC<IconProps>;
|
|
380
|
+
declare const GraphBar: React$1.FC<IconProps>;
|
|
381
|
+
declare const GraphDonut: React$1.FC<IconProps>;
|
|
382
|
+
declare const GraphLine: React$1.FC<IconProps>;
|
|
383
|
+
declare const GraphPie: React$1.FC<IconProps>;
|
|
384
|
+
declare const HamburgerMenu: React$1.FC<IconProps>;
|
|
385
|
+
declare const Home: React$1.FC<IconProps>;
|
|
386
|
+
declare const Information: React$1.FC<IconProps>;
|
|
387
|
+
declare const Location: React$1.FC<IconProps>;
|
|
388
|
+
declare const MagnifyingGlass: React$1.FC<IconProps>;
|
|
389
|
+
declare const Minus: React$1.FC<IconProps>;
|
|
390
|
+
declare const Plus: React$1.FC<IconProps>;
|
|
391
|
+
declare const MoreMenu: React$1.FC<IconProps>;
|
|
392
|
+
declare const Phone: React$1.FC<IconProps>;
|
|
393
|
+
declare const QuestionCircle: React$1.FC<IconProps>;
|
|
394
|
+
declare const Share: React$1.FC<IconProps>;
|
|
395
|
+
declare const Star: React$1.FC<IconProps>;
|
|
396
|
+
declare const Statement: React$1.FC<IconProps>;
|
|
397
|
+
declare const TableIcon: React$1.FC<IconProps>;
|
|
398
|
+
declare const Trash: React$1.FC<IconProps>;
|
|
399
|
+
declare const User: React$1.FC<IconProps>;
|
|
400
|
+
declare const UserMulti: React$1.FC<IconProps>;
|
|
401
|
+
declare const Warning: React$1.FC<IconProps>;
|
|
402
|
+
declare const Wrench: React$1.FC<IconProps>;
|
|
403
|
+
declare const Logout: React$1.FC<IconProps>;
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
* @fileoverview Chart utilities for Altitude UI chart components.
|
|
407
|
+
* Provides color palettes, constants, and helper functions for data visualization.
|
|
408
|
+
*
|
|
409
|
+
* All colors reference CSS variables from altitude-tokens for consistent theming.
|
|
410
|
+
*
|
|
411
|
+
*/
|
|
412
|
+
/**
|
|
413
|
+
* Chart color scheme mapping keys to color values.
|
|
414
|
+
* Used for creating consistent color schemes across different chart types.
|
|
415
|
+
*/
|
|
416
|
+
interface ChartColorScheme {
|
|
417
|
+
[key: string]: string;
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* Legend item structure for chart legends.
|
|
421
|
+
*
|
|
422
|
+
* @interface LegendItem
|
|
423
|
+
* @property {string} key - Unique identifier for the legend item
|
|
424
|
+
* @property {string} color - Color value (hex or CSS variable)
|
|
425
|
+
* @property {string} [label] - Optional display label (defaults to key if not provided)
|
|
426
|
+
*/
|
|
427
|
+
interface LegendItem {
|
|
428
|
+
key: string;
|
|
429
|
+
color: string;
|
|
430
|
+
label?: string;
|
|
431
|
+
}
|
|
432
|
+
/**
|
|
433
|
+
* Chart color constants using CSS variables from altitude-tokens.
|
|
434
|
+
* Provides semantic color names and palette arrays for different chart types.
|
|
435
|
+
*
|
|
436
|
+
* @constant CHART_COLORS
|
|
437
|
+
*/
|
|
438
|
+
declare const CHART_COLORS: {
|
|
439
|
+
readonly SUCCESS: "var(--color-success)";
|
|
440
|
+
readonly ERROR: "var(--color-error)";
|
|
441
|
+
readonly WARNING: "var(--color-warning)";
|
|
442
|
+
readonly SECONDARY: "var(--color-secondary)";
|
|
443
|
+
readonly PRIMARY: "var(--color-primary)";
|
|
444
|
+
readonly CATEGORICAL: readonly ["var(--color-chart-color-palette-categorical-1)", "var(--color-chart-color-palette-categorical-2)", "var(--color-chart-color-palette-categorical-3)", "var(--color-chart-color-palette-categorical-4)", "var(--color-chart-color-palette-categorical-5)"];
|
|
445
|
+
readonly PERFORMANCE: readonly ["var(--color-chart-color-palette-performance-1)", "var(--color-chart-color-palette-performance-2)", "var(--color-chart-color-palette-performance-3)", "var(--color-chart-color-palette-performance-4)", "var(--color-chart-color-palette-performance-5)"];
|
|
446
|
+
readonly HEATMAP: readonly ["var(--color-chart-color-palette-heatmap-1)", "var(--color-chart-color-palette-heatmap-2)", "var(--color-chart-color-palette-heatmap-3)", "var(--color-chart-color-palette-heatmap-4)", "var(--color-chart-color-palette-heatmap-5)"];
|
|
447
|
+
};
|
|
448
|
+
/**
|
|
449
|
+
* Pre-defined color schemes for common chart scenarios.
|
|
450
|
+
* Provides consistent color mappings for frequently used chart types.
|
|
451
|
+
*
|
|
452
|
+
* @constant COLOR_SCHEMES
|
|
453
|
+
*/
|
|
454
|
+
declare const COLOR_SCHEMES: {
|
|
455
|
+
readonly passFail: {
|
|
456
|
+
readonly PASS: "var(--color-success)";
|
|
457
|
+
readonly FAIL: "var(--color-error)";
|
|
458
|
+
};
|
|
459
|
+
readonly targetVsAchieved: {
|
|
460
|
+
readonly TARGET: "var(--color-secondary)";
|
|
461
|
+
readonly ACHIEVED: "var(--color-success)";
|
|
462
|
+
};
|
|
463
|
+
readonly performance: {
|
|
464
|
+
readonly HIGH: "var(--color-chart-color-palette-performance-1)";
|
|
465
|
+
readonly MEDIUM_HIGH: "var(--color-chart-color-palette-performance-2)";
|
|
466
|
+
readonly MEDIUM: "var(--color-chart-color-palette-performance-3)";
|
|
467
|
+
readonly MEDIUM_LOW: "var(--color-chart-color-palette-performance-4)";
|
|
468
|
+
readonly LOW: "var(--color-chart-color-palette-performance-5)";
|
|
469
|
+
};
|
|
470
|
+
};
|
|
471
|
+
/**
|
|
472
|
+
* Chart dimensions and layout constants for consistent sizing.
|
|
473
|
+
* Defines standard heights, margins, and axis dimensions.
|
|
474
|
+
*
|
|
475
|
+
* @constant CHART_CONSTANTS
|
|
476
|
+
*/
|
|
477
|
+
declare const CHART_CONSTANTS: {
|
|
478
|
+
readonly STANDARD_HEIGHT: 400;
|
|
479
|
+
readonly LARGE_HEIGHT: 500;
|
|
480
|
+
readonly SMALL_HEIGHT: 300;
|
|
481
|
+
readonly MARGIN: {
|
|
482
|
+
readonly top: 20;
|
|
483
|
+
readonly right: 30;
|
|
484
|
+
readonly left: 20;
|
|
485
|
+
readonly bottom: 5;
|
|
486
|
+
};
|
|
487
|
+
readonly AXIS_HEIGHT_STANDARD: 30;
|
|
488
|
+
readonly AXIS_HEIGHT_ROTATED: 60;
|
|
489
|
+
readonly AXIS_WIDTH_STANDARD: 60;
|
|
490
|
+
readonly AXIS_WIDTH_YAXIS: 80;
|
|
491
|
+
readonly PIE_CHART_CENTER_X: 300;
|
|
492
|
+
readonly PIE_CHART_CENTER_Y: 200;
|
|
493
|
+
};
|
|
494
|
+
/**
|
|
495
|
+
* Gets a color from the categorical palette by index.
|
|
496
|
+
* Wraps around if index exceeds palette length.
|
|
497
|
+
*
|
|
498
|
+
* @param index - Index of the color to retrieve
|
|
499
|
+
* @returns CSS color value (CSS variable reference)
|
|
500
|
+
*
|
|
501
|
+
* @example
|
|
502
|
+
* ```typescript
|
|
503
|
+
* const color1 = getSeriesColor(0); // First categorical color
|
|
504
|
+
* const color2 = getSeriesColor(1); // Second categorical color
|
|
505
|
+
* const color6 = getSeriesColor(5); // Wraps to first color
|
|
506
|
+
* ```
|
|
507
|
+
*/
|
|
508
|
+
declare const getSeriesColor: (index: number) => string;
|
|
509
|
+
/**
|
|
510
|
+
* Gets a color from the performance palette by index.
|
|
511
|
+
* Performance colors go from high (green) to low (red).
|
|
512
|
+
*
|
|
513
|
+
* @param index - Index of the color to retrieve (0 = high performance, 4 = low performance)
|
|
514
|
+
* @returns CSS color value (CSS variable reference)
|
|
515
|
+
*
|
|
516
|
+
* @example
|
|
517
|
+
* ```typescript
|
|
518
|
+
* const highColor = getPerformanceColor(0); // Green
|
|
519
|
+
* const midColor = getPerformanceColor(2); // Yellow
|
|
520
|
+
* const lowColor = getPerformanceColor(4); // Red
|
|
521
|
+
* ```
|
|
522
|
+
*/
|
|
523
|
+
declare const getPerformanceColor: (index: number) => string;
|
|
524
|
+
/**
|
|
525
|
+
* Gets a color from the heatmap palette by index.
|
|
526
|
+
* Heatmap colors go from light to dark for intensity visualization.
|
|
527
|
+
*
|
|
528
|
+
* @param index - Index of the color to retrieve (0 = lightest, 4 = darkest)
|
|
529
|
+
* @returns CSS color value (CSS variable reference)
|
|
530
|
+
*
|
|
531
|
+
* @example
|
|
532
|
+
* ```typescript
|
|
533
|
+
* const lightColor = getHeatmapColor(0); // Lightest
|
|
534
|
+
* const darkColor = getHeatmapColor(4); // Darkest
|
|
535
|
+
* ```
|
|
536
|
+
*/
|
|
537
|
+
declare const getHeatmapColor: (index: number) => string;
|
|
538
|
+
/**
|
|
539
|
+
* Creates an array of legend items from a color scheme object.
|
|
540
|
+
*
|
|
541
|
+
* @param colorScheme - Object mapping keys to color values
|
|
542
|
+
* @returns Array of legend items with key, color, and label
|
|
543
|
+
*
|
|
544
|
+
* @example
|
|
545
|
+
* ```typescript
|
|
546
|
+
* const scheme = { PASS: '#00ff00', FAIL: '#ff0000' };
|
|
547
|
+
* const items = createLegendItems(scheme);
|
|
548
|
+
* // Returns: [
|
|
549
|
+
* // { key: 'PASS', color: '#00ff00', label: 'PASS' },
|
|
550
|
+
* // { key: 'FAIL', color: '#ff0000', label: 'FAIL' }
|
|
551
|
+
* // ]
|
|
552
|
+
* ```
|
|
553
|
+
*/
|
|
554
|
+
declare const createLegendItems: (colorScheme: ChartColorScheme) => LegendItem[];
|
|
555
|
+
/**
|
|
556
|
+
* Calculates appropriate Y-axis width based on the maximum value length in the data.
|
|
557
|
+
* Ensures labels don't get cut off for large numbers or long text.
|
|
558
|
+
*
|
|
559
|
+
* @param data - Array of data objects
|
|
560
|
+
* @param yAxisKey - Key name for the Y-axis value in data objects
|
|
561
|
+
* @returns Calculated width in pixels
|
|
562
|
+
*
|
|
563
|
+
* @example
|
|
564
|
+
* ```typescript
|
|
565
|
+
* const data = [{ value: 1000000 }, { value: 2000000 }];
|
|
566
|
+
* const width = calculateYAxisWidth(data, 'value'); // Returns ~80px
|
|
567
|
+
* ```
|
|
568
|
+
*/
|
|
569
|
+
declare const calculateYAxisWidth: (data: unknown[], yAxisKey: string) => number;
|
|
570
|
+
/**
|
|
571
|
+
* Formats a decimal value as a percentage string.
|
|
572
|
+
*
|
|
573
|
+
* @param value - Decimal value (e.g., 0.456 for 45.6%)
|
|
574
|
+
* @param decimals - Number of decimal places (default: 1)
|
|
575
|
+
* @returns Formatted percentage string
|
|
576
|
+
*
|
|
577
|
+
* @example
|
|
578
|
+
* ```typescript
|
|
579
|
+
* formatPercentage(0.456); // "45.6%"
|
|
580
|
+
* formatPercentage(0.456, 2); // "45.60%"
|
|
581
|
+
* formatPercentage(0.5, 0); // "50%"
|
|
582
|
+
* ```
|
|
583
|
+
*/
|
|
584
|
+
declare const formatPercentage: (value: number, decimals?: number) => string;
|
|
585
|
+
/**
|
|
586
|
+
* Formats large numbers with K (thousands) or M (millions) suffixes.
|
|
587
|
+
*
|
|
588
|
+
* @param value - Number to format
|
|
589
|
+
* @returns Formatted string with suffix
|
|
590
|
+
*
|
|
591
|
+
* @example
|
|
592
|
+
* ```typescript
|
|
593
|
+
* formatLargeNumber(500); // "500"
|
|
594
|
+
* formatLargeNumber(1500); // "1.5K"
|
|
595
|
+
* formatLargeNumber(1500000); // "1.5M"
|
|
596
|
+
* formatLargeNumber(2345678); // "2.3M"
|
|
597
|
+
* ```
|
|
598
|
+
*/
|
|
599
|
+
declare const formatLargeNumber: (value: number) => string;
|
|
600
|
+
|
|
601
|
+
interface ChartLegendProps {
|
|
602
|
+
items: LegendItem[];
|
|
603
|
+
x?: number;
|
|
604
|
+
y?: number;
|
|
605
|
+
className?: string;
|
|
606
|
+
}
|
|
607
|
+
/**
|
|
608
|
+
* ChartLegend component for displaying chart series in a legend.
|
|
609
|
+
* @param {LegendItem[]} props.items - Array of legend items with key, color, and label
|
|
610
|
+
* @param {number} [props.x] - X position
|
|
611
|
+
* @param {number} [props.y] - Y position
|
|
612
|
+
* @param {string} [props.className] - Additional CSS classes
|
|
613
|
+
*/
|
|
614
|
+
declare function ChartLegend({ items, x, y, className, }: ChartLegendProps): react_jsx_runtime.JSX.Element;
|
|
615
|
+
|
|
616
|
+
/**
|
|
617
|
+
* Label props from Recharts.
|
|
618
|
+
* @internal
|
|
619
|
+
*/
|
|
620
|
+
interface LabelProps {
|
|
621
|
+
viewBox?: {
|
|
622
|
+
x: number;
|
|
623
|
+
y: number;
|
|
624
|
+
width: number;
|
|
625
|
+
height: number;
|
|
626
|
+
};
|
|
627
|
+
}
|
|
628
|
+
/**
|
|
629
|
+
* Tick props from Recharts.
|
|
630
|
+
* @internal
|
|
631
|
+
*/
|
|
632
|
+
interface TickProps {
|
|
633
|
+
x: number;
|
|
634
|
+
y: number;
|
|
635
|
+
payload: {
|
|
636
|
+
value: string | number;
|
|
637
|
+
};
|
|
638
|
+
}
|
|
639
|
+
/**
|
|
640
|
+
* Creates a custom X-axis label component.
|
|
641
|
+
*
|
|
642
|
+
* @param text - Label text to display
|
|
643
|
+
* @param yOffset - Vertical offset from axis (default: 40)
|
|
644
|
+
* @returns React component for X-axis label
|
|
645
|
+
*/
|
|
646
|
+
declare const createCustomXAxisLabel: (text: string, yOffset?: number) => {
|
|
647
|
+
({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
|
|
648
|
+
displayName: string;
|
|
649
|
+
};
|
|
650
|
+
/**
|
|
651
|
+
* Creates a custom Y-axis label component.
|
|
652
|
+
*
|
|
653
|
+
* @param text - Label text to display
|
|
654
|
+
* @param leftMargin - Left margin offset
|
|
655
|
+
* @returns React component for Y-axis label
|
|
656
|
+
*/
|
|
657
|
+
declare const createCustomYAxisLabel: (text: string, leftMargin?: number) => {
|
|
658
|
+
({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
|
|
659
|
+
displayName: string;
|
|
660
|
+
};
|
|
661
|
+
/**
|
|
662
|
+
* Creates a custom Y-axis label component for right-side axis.
|
|
663
|
+
*
|
|
664
|
+
* @param text - Label text to display
|
|
665
|
+
* @returns React component for right Y-axis label
|
|
666
|
+
*/
|
|
667
|
+
declare const createCustomYAxisRightLabel: (text: string) => {
|
|
668
|
+
({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
|
|
669
|
+
displayName: string;
|
|
670
|
+
};
|
|
671
|
+
/**
|
|
672
|
+
* Custom X-axis tick component
|
|
673
|
+
*/
|
|
674
|
+
declare const customXAxisTick: (props: TickProps) => react_jsx_runtime.JSX.Element;
|
|
675
|
+
/**
|
|
676
|
+
* Custom X-axis tick component with rotated text
|
|
677
|
+
*/
|
|
678
|
+
declare const customXAxisTickRotated: (props: TickProps) => react_jsx_runtime.JSX.Element;
|
|
679
|
+
/**
|
|
680
|
+
* Custom Y-axis tick component
|
|
681
|
+
*/
|
|
682
|
+
declare const customYAxisTick: (props: TickProps) => react_jsx_runtime.JSX.Element;
|
|
683
|
+
|
|
684
|
+
interface TooltipContainerProps {
|
|
685
|
+
children: ReactNode;
|
|
686
|
+
className?: string;
|
|
687
|
+
}
|
|
688
|
+
/**
|
|
689
|
+
* TooltipContainer component for wrapping tooltip content.
|
|
690
|
+
* @param {ReactNode} props.children - Tooltip content
|
|
691
|
+
* @param {string} [props.className] - Additional CSS classes
|
|
692
|
+
*/
|
|
693
|
+
declare function TooltipContainer({ children, className, }: TooltipContainerProps): react_jsx_runtime.JSX.Element;
|
|
694
|
+
/**
|
|
695
|
+
* TooltipItem component props.
|
|
696
|
+
*
|
|
697
|
+
* @interface TooltipItemProps
|
|
698
|
+
* @property {string} color - Color indicator for the data series
|
|
699
|
+
* @property {string} label - Label text
|
|
700
|
+
* @property {string | number} value - Value to display
|
|
701
|
+
* @property {string} [className] - Additional CSS classes
|
|
702
|
+
*/
|
|
703
|
+
interface TooltipItemProps {
|
|
704
|
+
color: string;
|
|
705
|
+
label: string;
|
|
706
|
+
value: string | number;
|
|
707
|
+
className?: string;
|
|
708
|
+
}
|
|
709
|
+
/**
|
|
710
|
+
* TooltipItem component for displaying a single data point in a tooltip.
|
|
711
|
+
* Shows color indicator, label, and value.
|
|
712
|
+
*/
|
|
713
|
+
declare function TooltipItem({ color, label, value, className, }: TooltipItemProps): react_jsx_runtime.JSX.Element;
|
|
714
|
+
/**
|
|
715
|
+
* GenericTooltip component props.
|
|
716
|
+
*
|
|
717
|
+
* @interface GenericTooltipProps
|
|
718
|
+
* @property {string} [title] - Tooltip title
|
|
719
|
+
* @property {Array} items - Array of tooltip items with color, label, and value
|
|
720
|
+
* @property {string} [className] - Additional CSS classes
|
|
721
|
+
*/
|
|
722
|
+
interface GenericTooltipProps {
|
|
723
|
+
title?: string;
|
|
724
|
+
items: Array<{
|
|
725
|
+
color: string;
|
|
726
|
+
label: string;
|
|
727
|
+
value: string | number;
|
|
728
|
+
}>;
|
|
729
|
+
className?: string;
|
|
730
|
+
}
|
|
731
|
+
/**
|
|
732
|
+
* GenericTooltip component for displaying multiple data points.
|
|
733
|
+
* Used as the default tooltip for all chart components.
|
|
734
|
+
*/
|
|
735
|
+
declare function GenericTooltip({ title, items, className, }: GenericTooltipProps): react_jsx_runtime.JSX.Element;
|
|
736
|
+
|
|
737
|
+
/**
|
|
738
|
+
* BarChart data item structure.
|
|
739
|
+
* Can contain any string or number properties.
|
|
740
|
+
*/
|
|
741
|
+
interface BarChartData {
|
|
742
|
+
[key: string]: string | number;
|
|
743
|
+
}
|
|
744
|
+
/**
|
|
745
|
+
* BarChart component props.
|
|
746
|
+
*
|
|
747
|
+
* @interface BarChartProps
|
|
748
|
+
* @property {BarChartData[]} data - Array of data items
|
|
749
|
+
* @property {string} xAxisKey - Key for X-axis values from data
|
|
750
|
+
* @property {string} yAxisKey - Key for Y-axis values from data
|
|
751
|
+
* @property {string} title - Chart title
|
|
752
|
+
* @property {string} [xAxisLabel] - X-axis label
|
|
753
|
+
* @property {string} [yAxisLabel] - Y-axis label
|
|
754
|
+
* @property {string} [barColor] - Bar color (default: primary color)
|
|
755
|
+
* @property {function} [onDataPointClick] - Click handler for bars
|
|
756
|
+
* @property {string} [className] - Additional CSS classes
|
|
757
|
+
* @property {boolean} [rotateXAxisLabels] - Whether to rotate X-axis labels
|
|
758
|
+
* @property {boolean} [showLegend] - Whether to show legend
|
|
759
|
+
* @property {LegendItem[]} [legendItems] - Custom legend items
|
|
760
|
+
* @property {"vertical" | "horizontal"} [layout] - Chart layout orientation
|
|
761
|
+
* @property {"category" | "number"} [xAxisType] - X-axis type
|
|
762
|
+
* @property {"category" | "number"} [yAxisType] - Y-axis type
|
|
763
|
+
* @property {string} [barDataKey] - Custom bar data key
|
|
764
|
+
*/
|
|
765
|
+
interface BarChartProps {
|
|
766
|
+
data: BarChartData[];
|
|
767
|
+
xAxisKey: string;
|
|
768
|
+
yAxisKey: string;
|
|
769
|
+
title: string;
|
|
770
|
+
xAxisLabel?: string;
|
|
771
|
+
yAxisLabel?: string;
|
|
772
|
+
barColor?: string;
|
|
773
|
+
onDataPointClick?: (data: BarChartData) => void;
|
|
774
|
+
className?: string;
|
|
775
|
+
rotateXAxisLabels?: boolean;
|
|
776
|
+
showLegend?: boolean;
|
|
777
|
+
legendItems?: LegendItem[];
|
|
778
|
+
layout?: "vertical" | "horizontal";
|
|
779
|
+
xAxisType?: "category" | "number";
|
|
780
|
+
yAxisType?: "category" | "number";
|
|
781
|
+
barDataKey?: string;
|
|
782
|
+
}
|
|
783
|
+
/**
|
|
784
|
+
* BarChart component for visualizing data as vertical or horizontal bars.
|
|
785
|
+
* @param {BarChartData[]} props.data - Array of data items
|
|
786
|
+
* @param {string} props.xAxisKey - Key for X-axis values from data
|
|
787
|
+
* @param {string} props.yAxisKey - Key for Y-axis values from data
|
|
788
|
+
* @param {string} props.title - Chart title
|
|
789
|
+
* @param {string} [props.xAxisLabel] - X-axis label
|
|
790
|
+
* @param {string} [props.yAxisLabel] - Y-axis label
|
|
791
|
+
* @param {string} [props.barColor] - Bar color
|
|
792
|
+
* @param {function} [props.onDataPointClick] - Click handler for bars
|
|
793
|
+
* @param {boolean} [props.showLegend] - Whether to show legend
|
|
794
|
+
* @param {string} [props.layout] - Chart layout (vertical or horizontal)
|
|
795
|
+
*/
|
|
796
|
+
declare const BarChart: React$1.ForwardRefExoticComponent<BarChartProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
797
|
+
|
|
798
|
+
/**
|
|
799
|
+
* LineChart data item structure.
|
|
800
|
+
* Can contain any string or number properties.
|
|
801
|
+
*/
|
|
802
|
+
interface LineChartData {
|
|
803
|
+
[key: string]: string | number;
|
|
804
|
+
}
|
|
805
|
+
/**
|
|
806
|
+
* Line series configuration.
|
|
807
|
+
*
|
|
808
|
+
* @interface LineSeries
|
|
809
|
+
* @property {string} dataKey - Key for series values from data
|
|
810
|
+
* @property {string} [color] - Line color (auto-assigned if not provided)
|
|
811
|
+
* @property {number} [strokeWidth] - Line thickness
|
|
812
|
+
* @property {boolean} [dot] - Whether to show dots at data points
|
|
813
|
+
* @property {boolean} [activeDot] - Whether to show active dot on hover
|
|
814
|
+
*/
|
|
815
|
+
interface LineSeries {
|
|
816
|
+
dataKey: string;
|
|
817
|
+
color?: string;
|
|
818
|
+
strokeWidth?: number;
|
|
819
|
+
dot?: boolean;
|
|
820
|
+
activeDot?: boolean;
|
|
821
|
+
}
|
|
822
|
+
interface LineChartProps {
|
|
823
|
+
data: LineChartData[];
|
|
824
|
+
xAxisKey: string;
|
|
825
|
+
series: LineSeries[];
|
|
826
|
+
title: string;
|
|
827
|
+
xAxisLabel?: string;
|
|
828
|
+
yAxisLabel?: string;
|
|
829
|
+
onDataPointClick?: (data: LineChartData) => void;
|
|
830
|
+
className?: string;
|
|
831
|
+
showLegend?: boolean;
|
|
832
|
+
legendItems?: LegendItem[];
|
|
833
|
+
}
|
|
834
|
+
/**
|
|
835
|
+
* LineChart component for visualizing time series and trends.
|
|
836
|
+
* @param {LineChartData[]} props.data - Array of data items
|
|
837
|
+
* @param {string} props.xAxisKey - Key for X-axis values from data
|
|
838
|
+
* @param {LineSeries[]} props.series - Array of line series configurations
|
|
839
|
+
* @param {string} props.title - Chart title
|
|
840
|
+
* @param {string} [props.xAxisLabel] - X-axis label
|
|
841
|
+
* @param {string} [props.yAxisLabel] - Y-axis label
|
|
842
|
+
* @param {function} [props.onDataPointClick] - Click handler for data points
|
|
843
|
+
* @param {boolean} [props.showLegend] - Whether to show legend
|
|
844
|
+
*/
|
|
845
|
+
declare const LineChart: React$1.ForwardRefExoticComponent<LineChartProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
846
|
+
|
|
847
|
+
/**
|
|
848
|
+
* PieChart data item structure.
|
|
849
|
+
*
|
|
850
|
+
* @interface PieChartData
|
|
851
|
+
* @property {string} name - Segment name/label
|
|
852
|
+
* @property {number} value - Segment value
|
|
853
|
+
* @property {string} [color] - Custom segment color (auto-assigned if not provided)
|
|
854
|
+
*/
|
|
855
|
+
interface PieChartData {
|
|
856
|
+
name: string;
|
|
857
|
+
value: number;
|
|
858
|
+
color?: string;
|
|
859
|
+
[key: string]: string | number | undefined;
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* Pie label rendering props from Recharts.
|
|
863
|
+
* @internal
|
|
864
|
+
*/
|
|
865
|
+
interface PieLabelProps {
|
|
866
|
+
cx: number;
|
|
867
|
+
cy: number;
|
|
868
|
+
midAngle: number;
|
|
869
|
+
innerRadius: number;
|
|
870
|
+
outerRadius: number;
|
|
871
|
+
percent: number;
|
|
872
|
+
name: string;
|
|
873
|
+
value: number;
|
|
874
|
+
}
|
|
875
|
+
interface PieChartProps {
|
|
876
|
+
data: PieChartData[];
|
|
877
|
+
title: string;
|
|
878
|
+
onDataPointClick?: (data: PieChartData) => void;
|
|
879
|
+
className?: string;
|
|
880
|
+
showLegend?: boolean;
|
|
881
|
+
legendItems?: LegendItem[];
|
|
882
|
+
innerRadius?: string | number;
|
|
883
|
+
outerRadius?: string | number;
|
|
884
|
+
showLabels?: boolean;
|
|
885
|
+
}
|
|
886
|
+
/**
|
|
887
|
+
* PieChart component for visualizing proportional data.
|
|
888
|
+
* @param {PieChartData[]} props.data - Array of data segments
|
|
889
|
+
* @param {string} props.title - Chart title
|
|
890
|
+
* @param {function} [props.onDataPointClick] - Click handler for segments
|
|
891
|
+
* @param {boolean} [props.showLegend] - Whether to show legend
|
|
892
|
+
* @param {string | number} [props.innerRadius] - Inner radius (use >0 for donut chart)
|
|
893
|
+
* @param {string | number} [props.outerRadius] - Outer radius
|
|
894
|
+
* @param {boolean} [props.showLabels] - Whether to show percentage labels
|
|
895
|
+
*/
|
|
896
|
+
declare const PieChart: React$1.ForwardRefExoticComponent<PieChartProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
897
|
+
|
|
898
|
+
interface TableProps<T> {
|
|
899
|
+
table: Table$1<T>;
|
|
900
|
+
className?: string;
|
|
901
|
+
showPagination?: boolean;
|
|
902
|
+
paginationClassName?: string;
|
|
903
|
+
}
|
|
904
|
+
/**
|
|
905
|
+
* Table component for displaying tabular data.
|
|
906
|
+
* @template T - Type of data in table rows
|
|
907
|
+
* @param {TanStackTable<T>} props.table - TanStack Table instance
|
|
908
|
+
* @param {string} [props.className] - Additional CSS classes
|
|
909
|
+
* @param {boolean} [props.showPagination] - Whether to show pagination controls
|
|
910
|
+
* @param {string} [props.paginationClassName] - Additional CSS classes for pagination
|
|
911
|
+
*/
|
|
912
|
+
declare function Table<T>({ table, className, showPagination, paginationClassName, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
913
|
+
|
|
914
|
+
export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Badge, type BadgeProps, BarChart, type BarChartData, type BarChartProps, Bell, Bookmark, Button, type ButtonProps, CHART_COLORS, CHART_CONSTANTS, COLOR_SCHEMES, Calendar, CaretDown, CaretLeft, CaretRight, CaretUp, type ChartColorScheme, ChartLegend, type ChartLegendProps, Chat, Check, CheckIcon, Checkbox, type CheckboxProps, CheckmarkCircle, CheckmarkSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, CloseSmall, Cog, Credentials, DatePicker, type DatePickerProps, Doc, Dollar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownMenuTriggerProps, Edit, Envelope, Exclamation, EyeClosed, EyeOpen, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Filter, FilterDescending, FormField, type FormFieldProps, GenericTooltip, type GenericTooltipProps, GraphBar, GraphDonut, GraphLine, GraphPie, HamburgerMenu, Home, type IconProps, type IconVariant, Information, Input, type InputProps, Label, type LabelProps, type LegendItem, LineChart, type LineChartData, type LineChartProps, type LineSeries, Location, Lock, Logout, MagnifyingGlass, Minus, MoreMenu, Phone, PieChart, type PieChartData, type PieChartProps, type PieLabelProps, Plus, QuestionCircle, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Share, Star, Statement, Table, TableIcon, type TableProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type TickProps, TooltipContainer, type TooltipContainerProps, TooltipItem, type TooltipItemProps, Trash, Typography, type TypographyProps, Upload, type UploadProps, User, UserMulti, Warning, Wrench, X, badgeVariants, buttonVariants, calculateYAxisWidth, checkboxVariants, createCustomXAxisLabel, createCustomYAxisLabel, createCustomYAxisRightLabel, createLegendItems, customXAxisTick, customXAxisTickRotated, customYAxisTick, formatLargeNumber, formatPercentage, getHeatmapColor, getPerformanceColor, getSeriesColor, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };
|