@camtomlabs/malix-design-system 0.1.6 → 0.2.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 +39 -0
- package/dist/index.cjs +472 -217
- package/dist/index.d.cts +148 -80
- package/dist/index.d.ts +148 -80
- package/dist/index.js +470 -218
- package/package.json +15 -9
- package/src/styles.css +225 -55
- package/src/tokens.css +84 -18
- package/src/tokens.registry.json +34 -0
- package/stylelint.config.cjs +56 -0
- package/tailwind.preset.js +173 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default, { ReactNode } from 'react';
|
|
3
4
|
|
|
4
5
|
var version = 1;
|
|
5
6
|
var tokens = [
|
|
6
7
|
"--malix-background-main",
|
|
7
8
|
"--malix-surface",
|
|
8
9
|
"--malix-surface-secondary",
|
|
10
|
+
"--malix-surface-elevated",
|
|
9
11
|
"--malix-surface-hover",
|
|
12
|
+
"--malix-surface-active",
|
|
13
|
+
"--malix-surface-disabled",
|
|
14
|
+
"--malix-input-bg",
|
|
15
|
+
"--malix-input-autofill-bg",
|
|
10
16
|
"--malix-foreground",
|
|
11
17
|
"--malix-foreground-secondary",
|
|
12
18
|
"--malix-foreground-tertiary",
|
|
13
19
|
"--malix-foreground-disabled",
|
|
20
|
+
"--malix-placeholder",
|
|
14
21
|
"--malix-border",
|
|
15
22
|
"--malix-border-strong",
|
|
16
23
|
"--malix-border-focus",
|
|
24
|
+
"--malix-border-disabled",
|
|
17
25
|
"--malix-overlay",
|
|
26
|
+
"--malix-overlay-backdrop",
|
|
27
|
+
"--malix-focus-ring",
|
|
28
|
+
"--malix-z-dropdown",
|
|
29
|
+
"--malix-z-sticky",
|
|
30
|
+
"--malix-z-overlay",
|
|
31
|
+
"--malix-z-modal",
|
|
32
|
+
"--malix-z-tooltip",
|
|
33
|
+
"--malix-z-notification",
|
|
34
|
+
"--malix-primary",
|
|
35
|
+
"--malix-primary-bg",
|
|
18
36
|
"--malix-cta-primary-bg",
|
|
19
37
|
"--malix-primary-hover",
|
|
20
38
|
"--malix-primary-active",
|
|
@@ -32,12 +50,25 @@ var tokens = [
|
|
|
32
50
|
"--malix-info",
|
|
33
51
|
"--malix-info-light",
|
|
34
52
|
"--malix-info-foreground",
|
|
53
|
+
"--malix-table-header-bg",
|
|
54
|
+
"--malix-table-row-hover",
|
|
55
|
+
"--malix-table-border",
|
|
35
56
|
"--malix-glass-bg",
|
|
36
57
|
"--malix-glass-border",
|
|
37
58
|
"--malix-glass-blur",
|
|
38
59
|
"--malix-sidebar-bg",
|
|
39
60
|
"--malix-sidebar-hover-bg",
|
|
40
61
|
"--malix-sidebar-active-bg",
|
|
62
|
+
"--malix-card-bg",
|
|
63
|
+
"--malix-card-border",
|
|
64
|
+
"--malix-card-radius",
|
|
65
|
+
"--malix-input-border",
|
|
66
|
+
"--malix-nav-bg",
|
|
67
|
+
"--malix-nav-height",
|
|
68
|
+
"--malix-container-sm",
|
|
69
|
+
"--malix-container-md",
|
|
70
|
+
"--malix-container-lg",
|
|
71
|
+
"--malix-container-xl",
|
|
41
72
|
"--malix-space-xs",
|
|
42
73
|
"--malix-space-sm",
|
|
43
74
|
"--malix-space-md",
|
|
@@ -56,6 +87,10 @@ var tokens = [
|
|
|
56
87
|
"--malix-text-lg",
|
|
57
88
|
"--malix-text-xl",
|
|
58
89
|
"--malix-text-2xl",
|
|
90
|
+
"--malix-text-3xl",
|
|
91
|
+
"--malix-text-4xl",
|
|
92
|
+
"--malix-text-5xl",
|
|
93
|
+
"--malix-text-display",
|
|
59
94
|
"--malix-font-body",
|
|
60
95
|
"--malix-font-heading",
|
|
61
96
|
"--malix-weight-normal",
|
|
@@ -79,90 +114,94 @@ var tokens_registry = {
|
|
|
79
114
|
tokens: tokens
|
|
80
115
|
};
|
|
81
116
|
|
|
82
|
-
type DividerProps =
|
|
117
|
+
type DividerProps = React__default.HTMLAttributes<HTMLHRElement>;
|
|
83
118
|
declare function Divider({ className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
84
119
|
|
|
85
|
-
type AvatarProps =
|
|
120
|
+
type AvatarProps = React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
86
121
|
initials: string;
|
|
87
122
|
size?: number;
|
|
88
123
|
};
|
|
89
124
|
declare function Avatar({ initials, size, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
90
125
|
|
|
91
126
|
type PillVariant = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
|
|
92
|
-
type PillProps =
|
|
127
|
+
type PillProps = React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
93
128
|
variant?: PillVariant;
|
|
94
129
|
};
|
|
95
130
|
declare function Pill({ variant, children, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
|
|
96
131
|
|
|
97
|
-
type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost';
|
|
98
|
-
type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge';
|
|
99
|
-
type
|
|
132
|
+
type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' | 'danger';
|
|
133
|
+
type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge' | 'pill';
|
|
134
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
135
|
+
type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
100
136
|
hierarchy?: ButtonHierarchy;
|
|
101
137
|
variant?: ButtonVariant;
|
|
102
|
-
|
|
103
|
-
|
|
138
|
+
size?: ButtonSize;
|
|
139
|
+
icon?: React__default.ReactNode;
|
|
140
|
+
badge?: React__default.ReactNode;
|
|
104
141
|
loading?: boolean;
|
|
105
142
|
label?: string;
|
|
106
143
|
};
|
|
107
|
-
declare function Button({ hierarchy, variant, icon, badge, loading, disabled, children, label, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
144
|
+
declare function Button({ hierarchy, variant, size, icon, badge, loading, disabled, children, label, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
108
145
|
|
|
109
|
-
type InputProps =
|
|
110
|
-
leadingIcon?:
|
|
146
|
+
type InputProps = React__default.InputHTMLAttributes<HTMLInputElement> & {
|
|
147
|
+
leadingIcon?: React__default.ReactNode;
|
|
111
148
|
};
|
|
112
149
|
declare function Input({ leadingIcon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
113
150
|
declare function SearchInput(props: Omit<InputProps, 'type'>): react_jsx_runtime.JSX.Element;
|
|
114
151
|
|
|
115
|
-
type InputGroupProps =
|
|
152
|
+
type InputGroupProps = React__default.InputHTMLAttributes<HTMLInputElement> & {
|
|
116
153
|
label?: string;
|
|
117
154
|
helperText?: string;
|
|
118
|
-
leadingIcon?:
|
|
155
|
+
leadingIcon?: React__default.ReactNode;
|
|
119
156
|
error?: boolean;
|
|
120
157
|
};
|
|
121
158
|
declare function InputGroup({ label, helperText, leadingIcon, error, id, className, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
|
|
122
159
|
|
|
123
160
|
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
124
161
|
type TooltipProps = {
|
|
125
|
-
content:
|
|
126
|
-
children:
|
|
162
|
+
content: React__default.ReactNode;
|
|
163
|
+
children: React__default.ReactElement;
|
|
127
164
|
placement?: TooltipPlacement;
|
|
165
|
+
/** Render tooltip via portal to avoid overflow:hidden clipping */
|
|
166
|
+
usePortal?: boolean;
|
|
128
167
|
};
|
|
129
|
-
declare function Tooltip({ content, children, placement }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
168
|
+
declare function Tooltip({ content, children, placement, usePortal }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
130
169
|
|
|
131
|
-
type SidebarItemProps =
|
|
132
|
-
icon?:
|
|
170
|
+
type SidebarItemProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
171
|
+
icon?: React__default.ReactNode;
|
|
133
172
|
active?: boolean;
|
|
134
173
|
};
|
|
135
174
|
declare function SidebarItem({ icon, active, children, className, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
|
|
136
175
|
|
|
137
176
|
type FlyoutMenuItem = {
|
|
138
|
-
icon?:
|
|
177
|
+
icon?: React__default.ReactNode;
|
|
139
178
|
label: string;
|
|
140
179
|
active?: boolean;
|
|
141
180
|
onClick?: () => void;
|
|
142
181
|
};
|
|
143
|
-
type FlyoutMenuProps =
|
|
182
|
+
type FlyoutMenuProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
144
183
|
items: FlyoutMenuItem[];
|
|
145
184
|
};
|
|
146
185
|
declare function FlyoutMenu({ items, className, ...props }: FlyoutMenuProps): react_jsx_runtime.JSX.Element;
|
|
147
186
|
|
|
148
|
-
type SidebarPanelProps =
|
|
187
|
+
type SidebarPanelProps = React__default.HTMLAttributes<HTMLElement> & {
|
|
149
188
|
collapsed?: boolean;
|
|
150
|
-
logo?:
|
|
151
|
-
collapsedLogo?:
|
|
152
|
-
navigation?:
|
|
153
|
-
footer?:
|
|
189
|
+
logo?: React__default.ReactNode;
|
|
190
|
+
collapsedLogo?: React__default.ReactNode;
|
|
191
|
+
navigation?: React__default.ReactNode;
|
|
192
|
+
footer?: React__default.ReactNode;
|
|
154
193
|
onToggleCollapse?: () => void;
|
|
155
194
|
};
|
|
156
195
|
declare function SidebarPanel({ collapsed, logo, collapsedLogo, navigation, footer, onToggleCollapse, className, ...props }: SidebarPanelProps): react_jsx_runtime.JSX.Element;
|
|
157
196
|
|
|
158
|
-
type HeaderProps =
|
|
197
|
+
type HeaderProps = React__default.HTMLAttributes<HTMLElement> & {
|
|
159
198
|
pageTitle: string;
|
|
160
|
-
actions?:
|
|
199
|
+
actions?: React__default.ReactNode;
|
|
161
200
|
};
|
|
162
201
|
declare function Header({ pageTitle, actions, className, ...props }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
163
202
|
|
|
164
203
|
type CardLevel = 1 | 2 | 3;
|
|
165
|
-
type CardProps =
|
|
204
|
+
type CardProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
166
205
|
level?: CardLevel;
|
|
167
206
|
title?: string;
|
|
168
207
|
description?: string;
|
|
@@ -170,7 +209,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
170
209
|
declare function Card({ level, title, description, children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
171
210
|
|
|
172
211
|
type StatCardChangeType = 'positive' | 'negative' | 'neutral';
|
|
173
|
-
type StatCardProps =
|
|
212
|
+
type StatCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
174
213
|
label: string;
|
|
175
214
|
value: string;
|
|
176
215
|
change?: string;
|
|
@@ -178,7 +217,7 @@ type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
178
217
|
};
|
|
179
218
|
declare function StatCard({ label, value, change, changeType, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
|
|
180
219
|
|
|
181
|
-
type DateInputProps = Omit<
|
|
220
|
+
type DateInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
|
|
182
221
|
value?: string;
|
|
183
222
|
placeholder?: string;
|
|
184
223
|
onChange?: (value: string) => void;
|
|
@@ -191,7 +230,7 @@ type FilterTabItem = {
|
|
|
191
230
|
count?: number;
|
|
192
231
|
value: string;
|
|
193
232
|
};
|
|
194
|
-
type FilterTabsProps = Omit<
|
|
233
|
+
type FilterTabsProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
195
234
|
items: FilterTabItem[];
|
|
196
235
|
value: string;
|
|
197
236
|
onChange: (value: string) => void;
|
|
@@ -201,17 +240,17 @@ declare function FilterTabs({ items, value, onChange, className, ...props }: Fil
|
|
|
201
240
|
type BreadcrumbItem = {
|
|
202
241
|
label: string;
|
|
203
242
|
href?: string;
|
|
204
|
-
icon?:
|
|
243
|
+
icon?: React__default.ReactNode;
|
|
205
244
|
active?: boolean;
|
|
206
245
|
};
|
|
207
|
-
type BreadcrumbProps =
|
|
246
|
+
type BreadcrumbProps = React__default.HTMLAttributes<HTMLElement> & {
|
|
208
247
|
items: BreadcrumbItem[];
|
|
209
|
-
separator?:
|
|
248
|
+
separator?: React__default.ReactNode;
|
|
210
249
|
};
|
|
211
250
|
declare function Breadcrumb({ items, separator, className, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
212
251
|
|
|
213
252
|
type ProgressBarVariant = 'default' | 'success';
|
|
214
|
-
type ProgressBarProps =
|
|
253
|
+
type ProgressBarProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
215
254
|
value: number;
|
|
216
255
|
label?: string;
|
|
217
256
|
showPercent?: boolean;
|
|
@@ -219,18 +258,18 @@ type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
219
258
|
};
|
|
220
259
|
declare function ProgressBar({ value, label, showPercent, variant, className, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
|
|
221
260
|
|
|
222
|
-
type EmptyStateProps =
|
|
223
|
-
icon?:
|
|
261
|
+
type EmptyStateProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
262
|
+
icon?: React__default.ReactNode;
|
|
224
263
|
title: string;
|
|
225
264
|
description?: string;
|
|
226
|
-
action?:
|
|
265
|
+
action?: React__default.ReactNode;
|
|
227
266
|
};
|
|
228
267
|
declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
229
268
|
|
|
230
269
|
type StepStatus = 'completed' | 'active' | 'pending';
|
|
231
270
|
type StepItem = {
|
|
232
271
|
label: string;
|
|
233
|
-
icon?:
|
|
272
|
+
icon?: React__default.ReactNode;
|
|
234
273
|
status: StepStatus;
|
|
235
274
|
};
|
|
236
275
|
type StepperProps = {
|
|
@@ -239,7 +278,7 @@ type StepperProps = {
|
|
|
239
278
|
};
|
|
240
279
|
declare function Stepper({ steps, className }: StepperProps): react_jsx_runtime.JSX.Element;
|
|
241
280
|
|
|
242
|
-
type TextareaProps =
|
|
281
|
+
type TextareaProps = React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
243
282
|
label?: string;
|
|
244
283
|
helperText?: string;
|
|
245
284
|
error?: boolean;
|
|
@@ -257,18 +296,18 @@ type ChatInputProps = {
|
|
|
257
296
|
};
|
|
258
297
|
declare function ChatInput({ value, onChange, onSend, placeholder, disabled, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
|
|
259
298
|
|
|
260
|
-
type SectionHeaderProps =
|
|
299
|
+
type SectionHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
261
300
|
title: string;
|
|
262
301
|
description?: string;
|
|
263
|
-
actions?:
|
|
302
|
+
actions?: React__default.ReactNode;
|
|
264
303
|
};
|
|
265
304
|
declare function SectionHeader({ title, description, actions, className, ...props }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
|
|
266
305
|
|
|
267
|
-
type FileCardProps =
|
|
306
|
+
type FileCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
268
307
|
fileName: string;
|
|
269
308
|
meta?: string;
|
|
270
|
-
icon?:
|
|
271
|
-
onAction?:
|
|
309
|
+
icon?: React__default.ReactNode;
|
|
310
|
+
onAction?: React__default.MouseEventHandler<HTMLButtonElement>;
|
|
272
311
|
};
|
|
273
312
|
declare function FileCard({ fileName, meta, icon, onAction, className, ...props }: FileCardProps): react_jsx_runtime.JSX.Element;
|
|
274
313
|
|
|
@@ -276,7 +315,7 @@ type TabItem = {
|
|
|
276
315
|
label: string;
|
|
277
316
|
value: string;
|
|
278
317
|
};
|
|
279
|
-
type TabBarProps = Omit<
|
|
318
|
+
type TabBarProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
280
319
|
items: TabItem[];
|
|
281
320
|
value: string;
|
|
282
321
|
onChange: (value: string) => void;
|
|
@@ -284,7 +323,7 @@ type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
|
284
323
|
declare function TabBar({ items, value, onChange, className, ...props }: TabBarProps): react_jsx_runtime.JSX.Element;
|
|
285
324
|
|
|
286
325
|
type OperationStatusType = 'active' | 'completed' | 'failed' | 'pending';
|
|
287
|
-
type OperationStatusProps =
|
|
326
|
+
type OperationStatusProps = React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
288
327
|
status: OperationStatusType;
|
|
289
328
|
label?: string;
|
|
290
329
|
};
|
|
@@ -303,7 +342,7 @@ declare function ValidationAlert({ title, message, onClose, variant, className,
|
|
|
303
342
|
type SelectionCardProps = {
|
|
304
343
|
title: string;
|
|
305
344
|
description?: string;
|
|
306
|
-
icon?:
|
|
345
|
+
icon?: React__default.ReactNode;
|
|
307
346
|
active?: boolean;
|
|
308
347
|
onClick?: () => void;
|
|
309
348
|
className?: string;
|
|
@@ -314,7 +353,7 @@ type OverlayProps = {
|
|
|
314
353
|
open: boolean;
|
|
315
354
|
title: string;
|
|
316
355
|
onClose: () => void;
|
|
317
|
-
children:
|
|
356
|
+
children: React__default.ReactNode;
|
|
318
357
|
};
|
|
319
358
|
declare function Overlay({ open, title, onClose, children }: OverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
320
359
|
|
|
@@ -325,40 +364,56 @@ type ModalProps = {
|
|
|
325
364
|
onConfirm?: () => void;
|
|
326
365
|
confirmLabel?: string;
|
|
327
366
|
cancelLabel?: string;
|
|
328
|
-
children:
|
|
367
|
+
children: React__default.ReactNode;
|
|
329
368
|
};
|
|
330
369
|
declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): react_jsx_runtime.JSX.Element | null;
|
|
331
370
|
|
|
332
|
-
type
|
|
371
|
+
type ConfirmDialogVariant = 'default' | 'danger' | 'warning' | 'info';
|
|
372
|
+
type ConfirmDialogProps = {
|
|
373
|
+
open: boolean;
|
|
374
|
+
title: string;
|
|
375
|
+
description?: string;
|
|
376
|
+
onConfirm: () => void;
|
|
377
|
+
onCancel: () => void;
|
|
378
|
+
confirmLabel?: string;
|
|
379
|
+
cancelLabel?: string;
|
|
380
|
+
variant?: ConfirmDialogVariant;
|
|
381
|
+
icon?: React__default.ReactNode;
|
|
382
|
+
children?: React__default.ReactNode;
|
|
383
|
+
loading?: boolean;
|
|
384
|
+
};
|
|
385
|
+
declare function ConfirmDialog({ open, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, variant, icon, children, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
|
|
386
|
+
|
|
387
|
+
type GlassPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
333
388
|
title?: string;
|
|
334
389
|
onClose?: () => void;
|
|
335
390
|
};
|
|
336
391
|
declare function GlassPopover({ title, onClose, children, className, ...props }: GlassPopoverProps): react_jsx_runtime.JSX.Element;
|
|
337
392
|
|
|
338
|
-
type AccordionProps =
|
|
393
|
+
type AccordionProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
339
394
|
title: string;
|
|
340
|
-
children:
|
|
395
|
+
children: React__default.ReactNode;
|
|
341
396
|
defaultOpen?: boolean;
|
|
342
|
-
icon?:
|
|
397
|
+
icon?: React__default.ReactNode;
|
|
343
398
|
};
|
|
344
399
|
declare function Accordion({ title, children, defaultOpen, icon, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
345
400
|
|
|
346
401
|
type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
347
|
-
type BadgeProps =
|
|
402
|
+
type BadgeProps = React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
348
403
|
variant?: BadgeVariant;
|
|
349
404
|
dot?: boolean;
|
|
350
405
|
};
|
|
351
406
|
declare function Badge({ variant, dot, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
352
407
|
|
|
353
408
|
type BannerVariant = 'info' | 'success' | 'warning' | 'error';
|
|
354
|
-
type BannerProps =
|
|
409
|
+
type BannerProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
355
410
|
variant?: BannerVariant;
|
|
356
411
|
onClose?: () => void;
|
|
357
|
-
icon?:
|
|
412
|
+
icon?: React__default.ReactNode;
|
|
358
413
|
};
|
|
359
414
|
declare function Banner({ variant, onClose, icon, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
|
|
360
415
|
|
|
361
|
-
type CheckboxProps = Omit<
|
|
416
|
+
type CheckboxProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
362
417
|
checked?: boolean;
|
|
363
418
|
onChange?: (checked: boolean) => void;
|
|
364
419
|
disabled?: boolean;
|
|
@@ -367,7 +422,7 @@ type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> &
|
|
|
367
422
|
};
|
|
368
423
|
declare function Checkbox({ checked, onChange, disabled, label, indeterminate, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
369
424
|
|
|
370
|
-
type RadioProps = Omit<
|
|
425
|
+
type RadioProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
371
426
|
checked?: boolean;
|
|
372
427
|
onChange?: (value: string) => void;
|
|
373
428
|
disabled?: boolean;
|
|
@@ -377,7 +432,7 @@ type RadioProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
|
377
432
|
};
|
|
378
433
|
declare function Radio({ checked, onChange, disabled, label, name, value, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
379
434
|
|
|
380
|
-
type ToggleProps = Omit<
|
|
435
|
+
type ToggleProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
381
436
|
checked?: boolean;
|
|
382
437
|
onChange?: (checked: boolean) => void;
|
|
383
438
|
disabled?: boolean;
|
|
@@ -389,7 +444,7 @@ type SelectOption = {
|
|
|
389
444
|
value: string;
|
|
390
445
|
label: string;
|
|
391
446
|
};
|
|
392
|
-
type SelectProps = Omit<
|
|
447
|
+
type SelectProps = Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
|
|
393
448
|
placeholder?: string;
|
|
394
449
|
options?: SelectOption[];
|
|
395
450
|
onChange?: (value: string) => void;
|
|
@@ -397,7 +452,7 @@ type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange
|
|
|
397
452
|
};
|
|
398
453
|
declare function Select({ value, placeholder, options, onChange, disabled, filled, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
399
454
|
|
|
400
|
-
type SelectGroupProps =
|
|
455
|
+
type SelectGroupProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
401
456
|
label?: string;
|
|
402
457
|
helperText?: string;
|
|
403
458
|
error?: boolean;
|
|
@@ -408,7 +463,7 @@ type SegmentedControlItem = {
|
|
|
408
463
|
label: string;
|
|
409
464
|
value: string;
|
|
410
465
|
};
|
|
411
|
-
type SegmentedControlProps = Omit<
|
|
466
|
+
type SegmentedControlProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
412
467
|
items: SegmentedControlItem[];
|
|
413
468
|
value: string;
|
|
414
469
|
onChange: (value: string) => void;
|
|
@@ -419,10 +474,10 @@ type TableColumn = {
|
|
|
419
474
|
key: string;
|
|
420
475
|
header: string;
|
|
421
476
|
width?: string;
|
|
422
|
-
render?: (value: any, row: TableRow) =>
|
|
477
|
+
render?: (value: any, row: TableRow) => React__default.ReactNode;
|
|
423
478
|
};
|
|
424
479
|
type TableRow = Record<string, any>;
|
|
425
|
-
type DataTableProps =
|
|
480
|
+
type DataTableProps = React__default.HTMLAttributes<HTMLTableElement> & {
|
|
426
481
|
columns: TableColumn[];
|
|
427
482
|
data: TableRow[];
|
|
428
483
|
onRowClick?: (row: TableRow) => void;
|
|
@@ -442,13 +497,13 @@ type PaginationProps = {
|
|
|
442
497
|
declare function Pagination({ currentPage, totalPages, onPageChange, variant, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
443
498
|
|
|
444
499
|
type StatusDotVariant = 'success' | 'warning' | 'error' | 'default';
|
|
445
|
-
type StatusDotProps =
|
|
500
|
+
type StatusDotProps = React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
446
501
|
variant?: StatusDotVariant;
|
|
447
502
|
label: string;
|
|
448
503
|
};
|
|
449
504
|
declare function StatusDot({ variant, label, className, ...props }: StatusDotProps): react_jsx_runtime.JSX.Element;
|
|
450
505
|
|
|
451
|
-
type DropzoneProps =
|
|
506
|
+
type DropzoneProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
452
507
|
onDrop?: (files: File[]) => void;
|
|
453
508
|
accept?: string;
|
|
454
509
|
title?: string;
|
|
@@ -457,16 +512,16 @@ type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
457
512
|
};
|
|
458
513
|
declare function Dropzone({ onDrop, accept, title, hint, disabled, className, ...props }: DropzoneProps): react_jsx_runtime.JSX.Element;
|
|
459
514
|
|
|
460
|
-
type SplitPaneProps =
|
|
461
|
-
leftPanel:
|
|
462
|
-
rightPanel:
|
|
515
|
+
type SplitPaneProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
516
|
+
leftPanel: React__default.ReactNode;
|
|
517
|
+
rightPanel: React__default.ReactNode;
|
|
463
518
|
leftTitle?: string;
|
|
464
519
|
rightTitle?: string;
|
|
465
520
|
defaultSplit?: number;
|
|
466
521
|
};
|
|
467
522
|
declare function SplitPane({ leftPanel, rightPanel, leftTitle, rightTitle, defaultSplit, className, ...props }: SplitPaneProps): react_jsx_runtime.JSX.Element;
|
|
468
523
|
|
|
469
|
-
type PricingCardProps =
|
|
524
|
+
type PricingCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
470
525
|
planName: string;
|
|
471
526
|
price: string;
|
|
472
527
|
period?: string;
|
|
@@ -478,7 +533,7 @@ type PricingCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
478
533
|
};
|
|
479
534
|
declare function PricingCard({ planName, price, period, description, features, ctaLabel, onCtaClick, highlighted, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
|
|
480
535
|
|
|
481
|
-
type OnboardingPopoverProps =
|
|
536
|
+
type OnboardingPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
482
537
|
step: number;
|
|
483
538
|
totalSteps: number;
|
|
484
539
|
title: string;
|
|
@@ -489,7 +544,7 @@ type OnboardingPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
489
544
|
};
|
|
490
545
|
declare function OnboardingPopover({ step, totalSteps, title, description, onNext, onSkip, nextLabel, className, ...props }: OnboardingPopoverProps): react_jsx_runtime.JSX.Element;
|
|
491
546
|
|
|
492
|
-
type CreditsIndicatorProps =
|
|
547
|
+
type CreditsIndicatorProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
493
548
|
remaining: number;
|
|
494
549
|
label?: string;
|
|
495
550
|
};
|
|
@@ -499,7 +554,7 @@ type LanguageSelectorOption = {
|
|
|
499
554
|
value: string;
|
|
500
555
|
label: string;
|
|
501
556
|
};
|
|
502
|
-
type LanguageSelectorProps = Omit<
|
|
557
|
+
type LanguageSelectorProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
503
558
|
value: string;
|
|
504
559
|
options?: LanguageSelectorOption[];
|
|
505
560
|
onChange?: (value: string) => void;
|
|
@@ -507,14 +562,14 @@ type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChang
|
|
|
507
562
|
declare function LanguageSelector({ value, options, onChange, className, ...props }: LanguageSelectorProps): react_jsx_runtime.JSX.Element;
|
|
508
563
|
|
|
509
564
|
type UserProfileMenuItem = {
|
|
510
|
-
icon?:
|
|
565
|
+
icon?: React__default.ReactNode;
|
|
511
566
|
label: string;
|
|
512
567
|
onClick?: () => void;
|
|
513
568
|
};
|
|
514
|
-
type UserProfilePopoverProps =
|
|
569
|
+
type UserProfilePopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
515
570
|
name: string;
|
|
516
571
|
email: string;
|
|
517
|
-
avatar?:
|
|
572
|
+
avatar?: React__default.ReactNode;
|
|
518
573
|
menuItems?: UserProfileMenuItem[];
|
|
519
574
|
onLogout?: () => void;
|
|
520
575
|
credits?: number;
|
|
@@ -530,7 +585,7 @@ type ChatBubbleProps = {
|
|
|
530
585
|
/** Optional user initials shown as avatar next to user messages. */
|
|
531
586
|
avatarInitials?: string;
|
|
532
587
|
/** Override content via children instead of message prop. */
|
|
533
|
-
children?:
|
|
588
|
+
children?: React__default.ReactNode;
|
|
534
589
|
className?: string;
|
|
535
590
|
};
|
|
536
591
|
declare function ChatBubble({ variant, message, avatarInitials, children, className, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
|
|
@@ -559,4 +614,17 @@ type AIAssistantPanelProps = {
|
|
|
559
614
|
};
|
|
560
615
|
declare function AIAssistantPanel({ title, messages, onSend, onClose, placeholder, userInitials, disabled, className, }: AIAssistantPanelProps): react_jsx_runtime.JSX.Element;
|
|
561
616
|
|
|
562
|
-
|
|
617
|
+
type MalixTheme = 'light' | 'dark' | 'system';
|
|
618
|
+
interface MalixThemeContextValue {
|
|
619
|
+
theme: MalixTheme;
|
|
620
|
+
setTheme: (theme: MalixTheme) => void;
|
|
621
|
+
toggleTheme: () => void;
|
|
622
|
+
}
|
|
623
|
+
interface MalixThemeProviderProps {
|
|
624
|
+
children: ReactNode;
|
|
625
|
+
defaultTheme?: MalixTheme;
|
|
626
|
+
}
|
|
627
|
+
declare function MalixThemeProvider({ children, defaultTheme }: MalixThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<MalixThemeContextValue | null>>;
|
|
628
|
+
declare function useMalixTheme(): MalixThemeContextValue;
|
|
629
|
+
|
|
630
|
+
export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };
|