opus-react 0.2.22 → 0.2.24
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 +190 -115
- package/dist/index.cjs +3399 -497
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +3458 -89
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +543 -4
- package/dist/index.d.ts +543 -4
- package/dist/index.js +3362 -498
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ type Theme = "light" | "dark";
|
|
|
5
5
|
type FieldMode = "stacked" | "flagged";
|
|
6
6
|
type LabelPosition = "left" | "right";
|
|
7
7
|
type ChoiceShape = "round" | "square";
|
|
8
|
+
type ChoiceControlSize = "lg" | "md" | "sm";
|
|
8
9
|
type ChipInputVariant = "filled" | "outlined" | "soft" | "glass" | "gradient";
|
|
9
10
|
type ChipInputPreset = "chip-input" | "tag-input" | "token-input";
|
|
10
11
|
type ChoiceOption = {
|
|
@@ -114,16 +115,20 @@ declare function FieldShell({ children, className, compactControl, error, fitCon
|
|
|
114
115
|
|
|
115
116
|
type CheckboxFieldProps = {
|
|
116
117
|
checked: boolean;
|
|
118
|
+
className?: string;
|
|
117
119
|
error?: string;
|
|
120
|
+
fitContent?: boolean;
|
|
118
121
|
help?: string;
|
|
119
122
|
id: string;
|
|
120
123
|
label: string;
|
|
121
124
|
labelPosition?: LabelPosition;
|
|
125
|
+
labelVisuallyHidden?: boolean;
|
|
122
126
|
mode?: FieldMode;
|
|
123
127
|
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
124
128
|
shape?: ChoiceShape;
|
|
129
|
+
size?: ChoiceControlSize;
|
|
125
130
|
};
|
|
126
|
-
declare function CheckboxField({ checked, error, help, id, label, labelPosition, mode, onChange, shape, }: CheckboxFieldProps): react.JSX.Element;
|
|
131
|
+
declare function CheckboxField({ checked, className, error, fitContent, help, id, label, labelPosition, labelVisuallyHidden, mode, onChange, shape, size, }: CheckboxFieldProps): react.JSX.Element;
|
|
127
132
|
|
|
128
133
|
type ColorFieldProps = {
|
|
129
134
|
error?: string;
|
|
@@ -203,9 +208,10 @@ type RadioGroupProps = {
|
|
|
203
208
|
name: string;
|
|
204
209
|
onChange: (value: string) => void;
|
|
205
210
|
shape?: ChoiceShape;
|
|
211
|
+
size?: ChoiceControlSize;
|
|
206
212
|
value: string | null;
|
|
207
213
|
};
|
|
208
|
-
declare function RadioGroup({ children, error, help, id, label, labelPosition, mode, name, onChange, shape, value, }: RadioGroupProps): react.JSX.Element;
|
|
214
|
+
declare function RadioGroup({ children, error, help, id, label, labelPosition, mode, name, onChange, shape, size, value, }: RadioGroupProps): react.JSX.Element;
|
|
209
215
|
type RadioProps = {
|
|
210
216
|
children?: ReactNode;
|
|
211
217
|
error?: string;
|
|
@@ -245,9 +251,10 @@ type RangeFieldProps = {
|
|
|
245
251
|
mode?: FieldMode;
|
|
246
252
|
step?: number;
|
|
247
253
|
value: number;
|
|
254
|
+
valueUnit?: string;
|
|
248
255
|
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
249
256
|
};
|
|
250
|
-
declare function RangeField({ error, help, id, label, labelPosition, max, min, mode, step, value, onChange, }: RangeFieldProps): react.JSX.Element;
|
|
257
|
+
declare function RangeField({ error, help, id, label, labelPosition, max, min, mode, step, value, valueUnit, onChange, }: RangeFieldProps): react.JSX.Element;
|
|
251
258
|
|
|
252
259
|
type SelectFieldProps = {
|
|
253
260
|
error?: string;
|
|
@@ -1288,6 +1295,538 @@ type PropertyGridProps = {
|
|
|
1288
1295
|
};
|
|
1289
1296
|
declare function PropertyGrid({ items }: PropertyGridProps): react.JSX.Element;
|
|
1290
1297
|
|
|
1298
|
+
type StackAlign = "start" | "center" | "end" | "stretch";
|
|
1299
|
+
type StackJustify = "start" | "center" | "end" | "between" | "around";
|
|
1300
|
+
type StackDirection = "row" | "column";
|
|
1301
|
+
type StackProps = {
|
|
1302
|
+
align?: StackAlign;
|
|
1303
|
+
children: ReactNode;
|
|
1304
|
+
className?: string;
|
|
1305
|
+
direction?: StackDirection;
|
|
1306
|
+
gap?: number | string;
|
|
1307
|
+
justify?: StackJustify;
|
|
1308
|
+
style?: CSSProperties;
|
|
1309
|
+
wrap?: boolean;
|
|
1310
|
+
};
|
|
1311
|
+
declare function Stack({ align, children, className, direction, gap, justify, style, wrap, }: StackProps): react.JSX.Element;
|
|
1312
|
+
|
|
1313
|
+
type ColumnsDirection = "column" | "row";
|
|
1314
|
+
type ColumnsProps = {
|
|
1315
|
+
children: ReactNode;
|
|
1316
|
+
className?: string;
|
|
1317
|
+
columns?: number;
|
|
1318
|
+
direction?: ColumnsDirection;
|
|
1319
|
+
gap?: number | string;
|
|
1320
|
+
style?: CSSProperties;
|
|
1321
|
+
};
|
|
1322
|
+
declare function Columns({ children, className, columns, direction, gap, style, }: ColumnsProps): react.JSX.Element;
|
|
1323
|
+
|
|
1324
|
+
type GridProps = {
|
|
1325
|
+
children: ReactNode;
|
|
1326
|
+
className?: string;
|
|
1327
|
+
columns?: number | string;
|
|
1328
|
+
gap?: number | string;
|
|
1329
|
+
minItemWidth?: number | string;
|
|
1330
|
+
style?: CSSProperties;
|
|
1331
|
+
};
|
|
1332
|
+
declare function Grid({ children, className, columns, gap, minItemWidth, style, }: GridProps): react.JSX.Element;
|
|
1333
|
+
|
|
1334
|
+
type SplitterOrientation = "horizontal" | "vertical";
|
|
1335
|
+
type SplitterProps = {
|
|
1336
|
+
children: [ReactNode, ReactNode];
|
|
1337
|
+
className?: string;
|
|
1338
|
+
defaultSize?: number;
|
|
1339
|
+
minSize?: number;
|
|
1340
|
+
onSizeChange?: (size: number) => void;
|
|
1341
|
+
orientation?: SplitterOrientation;
|
|
1342
|
+
size?: number;
|
|
1343
|
+
style?: CSSProperties;
|
|
1344
|
+
};
|
|
1345
|
+
declare function Splitter({ children, className, defaultSize, minSize, onSizeChange, orientation, size: controlledSize, style, }: SplitterProps): react.JSX.Element;
|
|
1346
|
+
|
|
1347
|
+
type ResizablePanelProps = {
|
|
1348
|
+
children: ReactNode;
|
|
1349
|
+
className?: string;
|
|
1350
|
+
defaultHeight?: number;
|
|
1351
|
+
defaultWidth?: number;
|
|
1352
|
+
maxHeight?: number;
|
|
1353
|
+
maxWidth?: number;
|
|
1354
|
+
minHeight?: number;
|
|
1355
|
+
minWidth?: number;
|
|
1356
|
+
onResize?: (size: {
|
|
1357
|
+
height: number;
|
|
1358
|
+
width: number;
|
|
1359
|
+
}) => void;
|
|
1360
|
+
style?: CSSProperties;
|
|
1361
|
+
};
|
|
1362
|
+
declare function ResizablePanel({ children, className, defaultHeight, defaultWidth, maxHeight, maxWidth, minHeight, minWidth, onResize, style, }: ResizablePanelProps): react.JSX.Element;
|
|
1363
|
+
|
|
1364
|
+
type DockLayoutProps = {
|
|
1365
|
+
bottom?: ReactNode;
|
|
1366
|
+
children: ReactNode;
|
|
1367
|
+
className?: string;
|
|
1368
|
+
left?: ReactNode;
|
|
1369
|
+
right?: ReactNode;
|
|
1370
|
+
style?: CSSProperties;
|
|
1371
|
+
top?: ReactNode;
|
|
1372
|
+
};
|
|
1373
|
+
declare function DockLayout({ bottom, children, className, left, right, style, top, }: DockLayoutProps): react.JSX.Element;
|
|
1374
|
+
|
|
1375
|
+
type ScrollAreaProps = {
|
|
1376
|
+
children: ReactNode;
|
|
1377
|
+
className?: string;
|
|
1378
|
+
maxHeight?: number | string;
|
|
1379
|
+
orientation?: "vertical" | "horizontal" | "both";
|
|
1380
|
+
style?: CSSProperties;
|
|
1381
|
+
};
|
|
1382
|
+
declare function ScrollArea({ children, className, maxHeight, orientation, style, }: ScrollAreaProps): react.JSX.Element;
|
|
1383
|
+
|
|
1384
|
+
type AspectRatioProps = {
|
|
1385
|
+
children: ReactNode;
|
|
1386
|
+
className?: string;
|
|
1387
|
+
ratio?: number | string;
|
|
1388
|
+
style?: CSSProperties;
|
|
1389
|
+
};
|
|
1390
|
+
declare function AspectRatio({ children, className, ratio, style }: AspectRatioProps): react.JSX.Element;
|
|
1391
|
+
|
|
1392
|
+
type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
1393
|
+
type ContainerProps = {
|
|
1394
|
+
children: ReactNode;
|
|
1395
|
+
className?: string;
|
|
1396
|
+
padded?: boolean;
|
|
1397
|
+
size?: ContainerSize;
|
|
1398
|
+
style?: CSSProperties;
|
|
1399
|
+
};
|
|
1400
|
+
declare function Container({ children, className, padded, size, style, }: ContainerProps): react.JSX.Element;
|
|
1401
|
+
|
|
1402
|
+
type SpacerProps = {
|
|
1403
|
+
axis?: "x" | "y" | "both";
|
|
1404
|
+
className?: string;
|
|
1405
|
+
flex?: boolean | number;
|
|
1406
|
+
size?: number | string;
|
|
1407
|
+
style?: CSSProperties;
|
|
1408
|
+
};
|
|
1409
|
+
declare function Spacer({ axis, className, flex, size, style }: SpacerProps): react.JSX.Element;
|
|
1410
|
+
|
|
1411
|
+
type BreadcrumbItem = {
|
|
1412
|
+
href?: string;
|
|
1413
|
+
id: string;
|
|
1414
|
+
label: string;
|
|
1415
|
+
};
|
|
1416
|
+
type BreadcrumbProps = {
|
|
1417
|
+
items: BreadcrumbItem[];
|
|
1418
|
+
onNavigate?: (id: string) => void;
|
|
1419
|
+
separator?: ReactNode;
|
|
1420
|
+
};
|
|
1421
|
+
declare function Breadcrumb({ items, onNavigate, separator }: BreadcrumbProps): react.JSX.Element;
|
|
1422
|
+
|
|
1423
|
+
type PaginationProps = {
|
|
1424
|
+
page: number;
|
|
1425
|
+
pageCount: number;
|
|
1426
|
+
onPageChange: (page: number) => void;
|
|
1427
|
+
siblingCount?: number;
|
|
1428
|
+
};
|
|
1429
|
+
declare function Pagination({ page, pageCount, onPageChange, siblingCount }: PaginationProps): react.JSX.Element;
|
|
1430
|
+
|
|
1431
|
+
type PageHeaderProps = {
|
|
1432
|
+
actions?: ReactNode;
|
|
1433
|
+
breadcrumbs?: ReactNode;
|
|
1434
|
+
description?: string;
|
|
1435
|
+
eyebrow?: string;
|
|
1436
|
+
title: string;
|
|
1437
|
+
};
|
|
1438
|
+
declare function PageHeader({ actions, breadcrumbs, description, eyebrow, title }: PageHeaderProps): react.JSX.Element;
|
|
1439
|
+
|
|
1440
|
+
type ToolbarProps = {
|
|
1441
|
+
children: ReactNode;
|
|
1442
|
+
className?: string;
|
|
1443
|
+
dense?: boolean;
|
|
1444
|
+
end?: ReactNode;
|
|
1445
|
+
label?: string;
|
|
1446
|
+
start?: ReactNode;
|
|
1447
|
+
};
|
|
1448
|
+
declare function Toolbar({ children, className, dense, end, label, start }: ToolbarProps): react.JSX.Element;
|
|
1449
|
+
|
|
1450
|
+
type BottomNavigationItem = {
|
|
1451
|
+
href?: string;
|
|
1452
|
+
icon?: ReactNode;
|
|
1453
|
+
id: string;
|
|
1454
|
+
label: string;
|
|
1455
|
+
};
|
|
1456
|
+
type BottomNavigationProps = {
|
|
1457
|
+
items: BottomNavigationItem[];
|
|
1458
|
+
onChange?: (id: string) => void;
|
|
1459
|
+
value: string;
|
|
1460
|
+
};
|
|
1461
|
+
declare function BottomNavigation({ items, onChange, value }: BottomNavigationProps): react.JSX.Element;
|
|
1462
|
+
|
|
1463
|
+
type NavigationRailItem = {
|
|
1464
|
+
href?: string;
|
|
1465
|
+
icon?: ReactNode;
|
|
1466
|
+
id: string;
|
|
1467
|
+
label: string;
|
|
1468
|
+
};
|
|
1469
|
+
type NavigationRailProps = {
|
|
1470
|
+
collapsed?: boolean;
|
|
1471
|
+
items: NavigationRailItem[];
|
|
1472
|
+
onChange?: (id: string) => void;
|
|
1473
|
+
value: string;
|
|
1474
|
+
};
|
|
1475
|
+
declare function NavigationRail({ collapsed, items, onChange, value }: NavigationRailProps): react.JSX.Element;
|
|
1476
|
+
|
|
1477
|
+
type SplitButtonAction = {
|
|
1478
|
+
disabled?: boolean;
|
|
1479
|
+
id: string;
|
|
1480
|
+
label: string;
|
|
1481
|
+
};
|
|
1482
|
+
type SplitButtonProps = {
|
|
1483
|
+
actions: SplitButtonAction[];
|
|
1484
|
+
children: ReactNode;
|
|
1485
|
+
disabled?: boolean;
|
|
1486
|
+
onActionSelect?: (id: string) => void;
|
|
1487
|
+
onClick?: () => void;
|
|
1488
|
+
variant?: ButtonVariant;
|
|
1489
|
+
};
|
|
1490
|
+
declare function SplitButton({ actions, children, disabled, onActionSelect, onClick, variant, }: SplitButtonProps): react.JSX.Element;
|
|
1491
|
+
|
|
1492
|
+
type FloatingActionButtonSize = "sm" | "md" | "lg";
|
|
1493
|
+
type FloatingActionButtonPosition = "end" | "start" | "inline";
|
|
1494
|
+
type FloatingActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1495
|
+
extended?: boolean;
|
|
1496
|
+
icon?: ReactNode;
|
|
1497
|
+
label: string;
|
|
1498
|
+
position?: FloatingActionButtonPosition;
|
|
1499
|
+
size?: FloatingActionButtonSize;
|
|
1500
|
+
};
|
|
1501
|
+
declare function FloatingActionButton({ className, extended, icon, label, position, size, type, ...props }: FloatingActionButtonProps): react.JSX.Element;
|
|
1502
|
+
|
|
1503
|
+
type TileTone = "purple" | "blue";
|
|
1504
|
+
type TileProps = {
|
|
1505
|
+
className?: string;
|
|
1506
|
+
href?: string;
|
|
1507
|
+
icon: string;
|
|
1508
|
+
label: string;
|
|
1509
|
+
onClick?: () => void;
|
|
1510
|
+
role?: string;
|
|
1511
|
+
tone?: TileTone;
|
|
1512
|
+
withGradients?: boolean;
|
|
1513
|
+
};
|
|
1514
|
+
declare function Tile({ className, href, icon, label, onClick, role, tone, withGradients, }: TileProps): react.JSX.Element;
|
|
1515
|
+
|
|
1516
|
+
type TilesLayout = "fill" | "fixed";
|
|
1517
|
+
type TileItem = {
|
|
1518
|
+
href?: string;
|
|
1519
|
+
icon: string;
|
|
1520
|
+
id: string;
|
|
1521
|
+
label: string;
|
|
1522
|
+
onClick?: () => void;
|
|
1523
|
+
tone?: TileTone;
|
|
1524
|
+
};
|
|
1525
|
+
type TilesProps = {
|
|
1526
|
+
className?: string;
|
|
1527
|
+
items: TileItem[];
|
|
1528
|
+
layout?: TilesLayout;
|
|
1529
|
+
};
|
|
1530
|
+
declare function Tiles({ className, items, layout }: TilesProps): react.JSX.Element;
|
|
1531
|
+
|
|
1532
|
+
type StatTileTrend = "up" | "down";
|
|
1533
|
+
type StatTileTone = "purple" | "blue";
|
|
1534
|
+
type StatTileProps = {
|
|
1535
|
+
className?: string;
|
|
1536
|
+
comparison?: string;
|
|
1537
|
+
icon: string;
|
|
1538
|
+
label: string;
|
|
1539
|
+
onClick?: () => void;
|
|
1540
|
+
role?: string;
|
|
1541
|
+
tone?: StatTileTone;
|
|
1542
|
+
trend?: StatTileTrend;
|
|
1543
|
+
trendValue?: string;
|
|
1544
|
+
value: string;
|
|
1545
|
+
};
|
|
1546
|
+
declare function StatTile({ className, comparison, icon, label, onClick, role, tone, trend, trendValue, value, }: StatTileProps): react.JSX.Element;
|
|
1547
|
+
|
|
1548
|
+
type StatTileItem = {
|
|
1549
|
+
comparison?: string;
|
|
1550
|
+
icon: string;
|
|
1551
|
+
id: string;
|
|
1552
|
+
label: string;
|
|
1553
|
+
onClick?: () => void;
|
|
1554
|
+
tone?: StatTileTone;
|
|
1555
|
+
trend?: StatTileTrend;
|
|
1556
|
+
trendValue?: string;
|
|
1557
|
+
value: string;
|
|
1558
|
+
};
|
|
1559
|
+
type StatTilesProps = {
|
|
1560
|
+
className?: string;
|
|
1561
|
+
items: StatTileItem[];
|
|
1562
|
+
layout?: TilesLayout;
|
|
1563
|
+
};
|
|
1564
|
+
declare function StatTiles({ className, items, layout }: StatTilesProps): react.JSX.Element;
|
|
1565
|
+
|
|
1566
|
+
type PipelineStage = {
|
|
1567
|
+
displayValue: string;
|
|
1568
|
+
id: string;
|
|
1569
|
+
label: string;
|
|
1570
|
+
percentage: number;
|
|
1571
|
+
value: number;
|
|
1572
|
+
};
|
|
1573
|
+
type PipelineOverviewProps = {
|
|
1574
|
+
className?: string;
|
|
1575
|
+
onPeriodChange?: (period: string) => void;
|
|
1576
|
+
period?: string;
|
|
1577
|
+
periodOptions?: string[];
|
|
1578
|
+
stages: PipelineStage[];
|
|
1579
|
+
totalLabel?: string;
|
|
1580
|
+
totalValue: string;
|
|
1581
|
+
};
|
|
1582
|
+
declare function PipelineOverview({ className, onPeriodChange, period, periodOptions, stages, totalLabel, totalValue, }: PipelineOverviewProps): react.JSX.Element;
|
|
1583
|
+
|
|
1584
|
+
type DealsOverTimePalette = "blue" | "purple";
|
|
1585
|
+
|
|
1586
|
+
type DealsOverTimePoint = {
|
|
1587
|
+
label: string;
|
|
1588
|
+
tooltipLabel?: string;
|
|
1589
|
+
value: number;
|
|
1590
|
+
};
|
|
1591
|
+
type DealsOverTimeProps = {
|
|
1592
|
+
className?: string;
|
|
1593
|
+
data: DealsOverTimePoint[];
|
|
1594
|
+
maxValue?: number;
|
|
1595
|
+
onPeriodChange?: (period: string) => void;
|
|
1596
|
+
palette?: DealsOverTimePalette;
|
|
1597
|
+
period?: string;
|
|
1598
|
+
periodOptions?: string[];
|
|
1599
|
+
title?: string;
|
|
1600
|
+
valueLabel?: string;
|
|
1601
|
+
};
|
|
1602
|
+
declare function DealsOverTime({ className, data, maxValue, onPeriodChange, palette, period, periodOptions, title, valueLabel, }: DealsOverTimeProps): react.JSX.Element;
|
|
1603
|
+
|
|
1604
|
+
type UpcomingTaskItem = {
|
|
1605
|
+
completed?: boolean;
|
|
1606
|
+
id: string;
|
|
1607
|
+
subtitle: string;
|
|
1608
|
+
time: string;
|
|
1609
|
+
title: string;
|
|
1610
|
+
};
|
|
1611
|
+
type UpcomingTasksProps = {
|
|
1612
|
+
checkboxSize?: "lg" | "md" | "sm";
|
|
1613
|
+
className?: string;
|
|
1614
|
+
footerHref?: string;
|
|
1615
|
+
footerLabel?: string;
|
|
1616
|
+
onFooterClick?: () => void;
|
|
1617
|
+
onTaskClick?: (task: UpcomingTaskItem) => void;
|
|
1618
|
+
onTaskCompleteChange?: (task: UpcomingTaskItem, completed: boolean) => void;
|
|
1619
|
+
tasks: UpcomingTaskItem[];
|
|
1620
|
+
title?: string;
|
|
1621
|
+
};
|
|
1622
|
+
declare function UpcomingTasks({ checkboxSize, className, footerHref, footerLabel, onFooterClick, onTaskClick, onTaskCompleteChange, tasks, title, }: UpcomingTasksProps): react.JSX.Element;
|
|
1623
|
+
|
|
1624
|
+
type RecentActivityIconTone = "blue" | "green" | "orange";
|
|
1625
|
+
type RecentActivityItem = {
|
|
1626
|
+
icon: string;
|
|
1627
|
+
iconTone: RecentActivityIconTone;
|
|
1628
|
+
id: string;
|
|
1629
|
+
subtitle: string;
|
|
1630
|
+
time: string;
|
|
1631
|
+
title: string;
|
|
1632
|
+
};
|
|
1633
|
+
type RecentActivityProps = {
|
|
1634
|
+
className?: string;
|
|
1635
|
+
footerHref?: string;
|
|
1636
|
+
footerLabel?: string;
|
|
1637
|
+
items: RecentActivityItem[];
|
|
1638
|
+
onFooterClick?: () => void;
|
|
1639
|
+
onItemClick?: (item: RecentActivityItem) => void;
|
|
1640
|
+
title?: string;
|
|
1641
|
+
};
|
|
1642
|
+
declare function RecentActivity({ className, footerHref, footerLabel, items, onFooterClick, onItemClick, title, }: RecentActivityProps): react.JSX.Element;
|
|
1643
|
+
|
|
1644
|
+
type TopPerformingUserItem = {
|
|
1645
|
+
displayValue: string;
|
|
1646
|
+
id: string;
|
|
1647
|
+
name: string;
|
|
1648
|
+
src?: string;
|
|
1649
|
+
value: number;
|
|
1650
|
+
};
|
|
1651
|
+
type TopPerformingUsersProps = {
|
|
1652
|
+
className?: string;
|
|
1653
|
+
footerHref?: string;
|
|
1654
|
+
footerLabel?: string;
|
|
1655
|
+
onFooterClick?: () => void;
|
|
1656
|
+
onPersonClick?: (person: TopPerformingUserItem) => void;
|
|
1657
|
+
title?: string;
|
|
1658
|
+
users: TopPerformingUserItem[];
|
|
1659
|
+
};
|
|
1660
|
+
declare function TopPerformingUsers({ className, footerHref, footerLabel, onFooterClick, onPersonClick, title, users, }: TopPerformingUsersProps): react.JSX.Element;
|
|
1661
|
+
|
|
1662
|
+
type DashboardContentContainerWidth = "full" | "widget";
|
|
1663
|
+
type DashboardContentContainerProps = {
|
|
1664
|
+
children: ReactNode;
|
|
1665
|
+
className?: string;
|
|
1666
|
+
"data-component"?: string;
|
|
1667
|
+
title?: string;
|
|
1668
|
+
width?: DashboardContentContainerWidth;
|
|
1669
|
+
};
|
|
1670
|
+
declare function DashboardContentContainer({ children, className, "data-component": dataComponent, title, width, }: DashboardContentContainerProps): react.JSX.Element;
|
|
1671
|
+
|
|
1672
|
+
type PropertyInspectorValue = string | number | boolean | null | undefined | {
|
|
1673
|
+
options: string[];
|
|
1674
|
+
value: string;
|
|
1675
|
+
};
|
|
1676
|
+
type PropertyInspectorItem = {
|
|
1677
|
+
group?: string;
|
|
1678
|
+
id: string;
|
|
1679
|
+
label: string;
|
|
1680
|
+
readOnly?: boolean;
|
|
1681
|
+
value: PropertyInspectorValue;
|
|
1682
|
+
};
|
|
1683
|
+
type PropertyInspectorProps = {
|
|
1684
|
+
items: PropertyInspectorItem[];
|
|
1685
|
+
onChange?: (id: string, value: PropertyInspectorValue) => void;
|
|
1686
|
+
searchable?: boolean;
|
|
1687
|
+
};
|
|
1688
|
+
declare function PropertyInspector({ items, onChange, searchable }: PropertyInspectorProps): react.JSX.Element;
|
|
1689
|
+
|
|
1690
|
+
type FilterOperator = "eq" | "neq" | "contains" | "gt" | "lt" | "empty";
|
|
1691
|
+
type FilterCondition = {
|
|
1692
|
+
field: string;
|
|
1693
|
+
id: string;
|
|
1694
|
+
operator: FilterOperator;
|
|
1695
|
+
value: string;
|
|
1696
|
+
};
|
|
1697
|
+
type FilterBuilderProps = {
|
|
1698
|
+
conditions: FilterCondition[];
|
|
1699
|
+
fields: string[];
|
|
1700
|
+
onChange: (conditions: FilterCondition[]) => void;
|
|
1701
|
+
};
|
|
1702
|
+
declare function FilterBuilder({ conditions, fields, onChange }: FilterBuilderProps): react.JSX.Element;
|
|
1703
|
+
|
|
1704
|
+
type QueryOperator = "eq" | "neq" | "contains" | "gt" | "lt" | "in";
|
|
1705
|
+
type QueryCombinator = "and" | "or";
|
|
1706
|
+
type QueryRule = {
|
|
1707
|
+
field: string;
|
|
1708
|
+
id: string;
|
|
1709
|
+
operator: QueryOperator;
|
|
1710
|
+
value: string;
|
|
1711
|
+
};
|
|
1712
|
+
type QueryGroup = {
|
|
1713
|
+
combinator: QueryCombinator;
|
|
1714
|
+
id: string;
|
|
1715
|
+
rules: QueryRule[];
|
|
1716
|
+
};
|
|
1717
|
+
type QueryBuilderProps = {
|
|
1718
|
+
fields: string[];
|
|
1719
|
+
group: QueryGroup;
|
|
1720
|
+
onChange: (group: QueryGroup) => void;
|
|
1721
|
+
};
|
|
1722
|
+
declare function QueryBuilder({ fields, group, onChange }: QueryBuilderProps): react.JSX.Element;
|
|
1723
|
+
|
|
1724
|
+
type RuleEffect = "allow" | "deny" | "notify" | "route";
|
|
1725
|
+
type RuleDefinition = {
|
|
1726
|
+
conditions: string;
|
|
1727
|
+
effect: RuleEffect;
|
|
1728
|
+
enabled: boolean;
|
|
1729
|
+
id: string;
|
|
1730
|
+
name: string;
|
|
1731
|
+
priority: number;
|
|
1732
|
+
};
|
|
1733
|
+
type RuleBuilderProps = {
|
|
1734
|
+
onChange: (rules: RuleDefinition[]) => void;
|
|
1735
|
+
rules: RuleDefinition[];
|
|
1736
|
+
};
|
|
1737
|
+
declare function RuleBuilder({ onChange, rules }: RuleBuilderProps): react.JSX.Element;
|
|
1738
|
+
|
|
1739
|
+
type PermissionLevel = "none" | "read" | "write" | "admin";
|
|
1740
|
+
type PermissionsMatrixProps = {
|
|
1741
|
+
onChange: (role: string, resource: string, level: PermissionLevel) => void;
|
|
1742
|
+
permissions: Record<string, Record<string, PermissionLevel>>;
|
|
1743
|
+
resources: string[];
|
|
1744
|
+
roles: string[];
|
|
1745
|
+
};
|
|
1746
|
+
declare function PermissionsMatrix({ onChange, permissions, resources, roles }: PermissionsMatrixProps): react.JSX.Element;
|
|
1747
|
+
|
|
1748
|
+
type DualListItem = {
|
|
1749
|
+
id: string;
|
|
1750
|
+
label: string;
|
|
1751
|
+
};
|
|
1752
|
+
type DualListBuilderProps = {
|
|
1753
|
+
available: DualListItem[];
|
|
1754
|
+
availableTitle?: string;
|
|
1755
|
+
onChange: (selectedIds: string[]) => void;
|
|
1756
|
+
selectedIds: string[];
|
|
1757
|
+
selectedTitle?: string;
|
|
1758
|
+
};
|
|
1759
|
+
declare function DualListBuilder({ available, availableTitle, onChange, selectedIds, selectedTitle, }: DualListBuilderProps): react.JSX.Element;
|
|
1760
|
+
|
|
1761
|
+
type SchedulerEvent = {
|
|
1762
|
+
day: number;
|
|
1763
|
+
id: string;
|
|
1764
|
+
startHour: number;
|
|
1765
|
+
title: string;
|
|
1766
|
+
durationHours?: number;
|
|
1767
|
+
tone?: "accent" | "success" | "warning" | "danger";
|
|
1768
|
+
};
|
|
1769
|
+
type SchedulerProps = {
|
|
1770
|
+
days?: string[];
|
|
1771
|
+
endHour?: number;
|
|
1772
|
+
events: SchedulerEvent[];
|
|
1773
|
+
startHour?: number;
|
|
1774
|
+
};
|
|
1775
|
+
declare function Scheduler({ days, endHour, events, startHour, }: SchedulerProps): react.JSX.Element;
|
|
1776
|
+
|
|
1777
|
+
type KanbanCard = {
|
|
1778
|
+
id: string;
|
|
1779
|
+
title: string;
|
|
1780
|
+
meta?: string;
|
|
1781
|
+
tone?: "default" | "accent" | "success" | "warning" | "danger";
|
|
1782
|
+
};
|
|
1783
|
+
type KanbanColumn = {
|
|
1784
|
+
id: string;
|
|
1785
|
+
title: string;
|
|
1786
|
+
cardIds: string[];
|
|
1787
|
+
};
|
|
1788
|
+
type KanbanBoardProps = {
|
|
1789
|
+
cards: Record<string, KanbanCard>;
|
|
1790
|
+
columns: KanbanColumn[];
|
|
1791
|
+
onChange?: (columns: KanbanColumn[]) => void;
|
|
1792
|
+
};
|
|
1793
|
+
declare function KanbanBoard({ cards, columns, onChange }: KanbanBoardProps): react.JSX.Element;
|
|
1794
|
+
|
|
1795
|
+
type CalendarEvent = {
|
|
1796
|
+
date: string;
|
|
1797
|
+
id: string;
|
|
1798
|
+
title: string;
|
|
1799
|
+
tone?: "accent" | "success" | "warning" | "danger";
|
|
1800
|
+
};
|
|
1801
|
+
type CalendarProps = {
|
|
1802
|
+
events?: CalendarEvent[];
|
|
1803
|
+
month?: number;
|
|
1804
|
+
onSelectDate?: (date: string) => void;
|
|
1805
|
+
selectedDate?: string;
|
|
1806
|
+
year?: number;
|
|
1807
|
+
};
|
|
1808
|
+
declare function Calendar({ events, month: controlledMonth, onSelectDate, selectedDate, year: controlledYear, }: CalendarProps): react.JSX.Element;
|
|
1809
|
+
|
|
1810
|
+
type ResourcePlannerItem = {
|
|
1811
|
+
end: number;
|
|
1812
|
+
id: string;
|
|
1813
|
+
label: string;
|
|
1814
|
+
resourceId: string;
|
|
1815
|
+
start: number;
|
|
1816
|
+
tone?: "accent" | "success" | "warning" | "danger";
|
|
1817
|
+
};
|
|
1818
|
+
type ResourcePlannerResource = {
|
|
1819
|
+
id: string;
|
|
1820
|
+
label: string;
|
|
1821
|
+
};
|
|
1822
|
+
type ResourcePlannerProps = {
|
|
1823
|
+
endHour?: number;
|
|
1824
|
+
items: ResourcePlannerItem[];
|
|
1825
|
+
resources: ResourcePlannerResource[];
|
|
1826
|
+
startHour?: number;
|
|
1827
|
+
};
|
|
1828
|
+
declare function ResourcePlanner({ endHour, items, resources, startHour, }: ResourcePlannerProps): react.JSX.Element;
|
|
1829
|
+
|
|
1291
1830
|
type ContentTimelineItem = {
|
|
1292
1831
|
description?: string;
|
|
1293
1832
|
status?: ContentTimelineStatus;
|
|
@@ -1668,4 +2207,4 @@ type SankeyLinkDef = {
|
|
|
1668
2207
|
};
|
|
1669
2208
|
declare const demoSankeyLinks: SankeyLinkDef[];
|
|
1670
2209
|
|
|
1671
|
-
export { type AccentColor, AccentColorPicker, Accordion, AccordionGroup, type AccordionGroupType, Alert, type AlertStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarShape, type AvatarSize, Badge, type BadgeSize, type BadgeTone, type BadgeVariant, Button, type ButtonVariant, Card, Carousel, CascaderField, type CascaderOption, CatalogIcon, Chart, type ChartDatum, type ChartPalette, type ChartSeries, type ChartVariant, CheckboxField, ChipInput, ChipInputField, type ChipInputPreset, type ChipInputVariant, type ChoiceOption, type ChoiceShape, Clipboard, ClipboardProvider, ColorField, CommandPalette, type CommandPaletteItem, ContentTimeline, type ContentTimelineItem, type ContentTimelineStatus, ContextMenuProvider, ContextMenuTarget, CopyButton, CountryPickerField, DEFAULT_TOAST_DURATION_MS, DataGrid, type DataGridColumn, type DataGridLayout, type DataGridPivotConfig, type DataGridRow, type DataGridRowHeaderColumn, DateField, type DateInputType, DescriptionList, type DescriptionListItem, type DescriptionListLayout, Dialog, type DialogActionSet, type DialogResult, Divider, type DividerOrientation, type DividerTone, Drawer, DrawerDefaultActions, type DrawerSide, DropdownMenu, DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuPlacement, type ElementSize, EmptyState, type EmptyStateIcon, type FieldMode, FieldShell, FileField, FilterSelectField, type FilterSelectGroup, FocusTrap, type GalleryImage, Gauge, type GaugeFooterItem, type GaugeTrend, type GaugeVariant, HiddenField, type HotkeyCombo, HotkeyManager, Icon, IconPicker, type IconSize, type IconTone, ImageGallery, ImageThumbnail, type ImageThumbnailSize, IntersectionObserver, JsonViewer, KeyboardShortcut, type KeyboardShortcutSize, type LabelPosition, Lightbox, List, type ListItem, MasonryGrid, type MasonryGridItem, MegaMenu, type MegaMenuConfig, type MegaMenuFeatured, type MegaMenuItem, type MegaMenuSection, MetricTile, Modal, ModalDefaultActions, type ModalSize, type ModelAsset, ModelGallery, ModelLightbox, ModelThumbnail, type ModelThumbnailSize, ModelViewer, MultiSelectField, NumberField, OpusThemeProvider, Panel, type PasswordRequirement, PasswordStrengthField, type PhoneCountry, PhoneNumberField, Popover, type PopoverPlacement, Portal, PortalHost, ProgressBar, ProgressRing, PropertyGrid, type PropertyGridItem, Radio, RadioGroup, RangeField, RatingField, type RatingVariant, ResizeObserver, RichTextField, Section, type SectionAlign, type SectionColumns, type SectionGap, type SectionJustify, type SectionLayoutPreset, type SectionSidebar, type SectionSidebarRatio, type SectionSpan, type SectionStackBelow, type SectionTemplate, type SectionWidth, SegmentedControlField, SelectField, ShowMore, type ShowToastOptions, Sidebar, SidebarGroup, SidebarHeader, SidebarLayout, SidebarLink, SidebarNav, type SidebarSide, Skeleton, type SkeletonAnimation, type SkeletonVariant, SliderRangeField, Sparkline, Speedometer, Spinner, type SpinnerSize, type SpinnerTone, StatCard, type StatCardTrend, Statistic, type StatisticTrend, StatusIndicator, type StatusIndicatorState, type SurfaceDensity, type SurfaceTone, SwitchField, type TabItem, Table, type TableColumn, type TableDensity, type TableRow, Tabs, type TabsOrientation, type TabsVariant, TextAreaField, TextField, type Theme, OpusThemeProvider as ThemeProvider, ThemeSwitcher, ThemeToggleField, Toast, type ToastHorizontalPosition, ToastProvider, type ToastVerticalPosition, type ToastViewportPosition, Tooltip, TopNavigation, type TopNavigationBarMenu, type TopNavigationDropdownMenu, type TopNavigationMegaMenu, TopNavigationMenu, type TopNavigationMenuConfig, type TopNavigationSelectItem, TransferListField, TreeSelectField, type TreeSelectNode, TreeView, type TreeViewNode, TrendBadge, type TrendBadgeDirection, VisuallyHidden, accentColors, cartesianSpecializedVariants, countryCodeToFlag, createAccentStyle, defaultMegaMenuFeatured, defaultMegaMenuMenus, defaultMegaMenuSections, defaultTopNavigationBarMenus, defaultTopNavigationMegaMenus, defaultTopNavigationMenus, demoSankeyLinks, fieldInputAriaProps, countries as phoneCountries, useAccentPreference, useClipboard, useContextMenu, useFieldShellAria, useHotkey, useHotkeyManager, useIntersectionObserver, useOpusTheme, usePortalHost, useResizeObserver, useToast, useTopNavigation, worldMapRegionIds };
|
|
2210
|
+
export { type AccentColor, AccentColorPicker, Accordion, AccordionGroup, type AccordionGroupType, Alert, type AlertStatus, AspectRatio, type AspectRatioProps, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarShape, type AvatarSize, Badge, type BadgeSize, type BadgeTone, type BadgeVariant, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, Carousel, CascaderField, type CascaderOption, CatalogIcon, Chart, type ChartDatum, type ChartPalette, type ChartSeries, type ChartVariant, CheckboxField, ChipInput, ChipInputField, type ChipInputPreset, type ChipInputVariant, type ChoiceControlSize, type ChoiceOption, type ChoiceShape, Clipboard, ClipboardProvider, ColorField, Columns, type ColumnsDirection, type ColumnsProps, CommandPalette, type CommandPaletteItem, Container, type ContainerProps, type ContainerSize, ContentTimeline, type ContentTimelineItem, type ContentTimelineStatus, ContextMenuProvider, ContextMenuTarget, CopyButton, CountryPickerField, DEFAULT_TOAST_DURATION_MS, DashboardContentContainer, type DashboardContentContainerProps, type DashboardContentContainerWidth, DataGrid, type DataGridColumn, type DataGridLayout, type DataGridPivotConfig, type DataGridRow, type DataGridRowHeaderColumn, DateField, type DateInputType, DealsOverTime, type DealsOverTimePoint, type DealsOverTimeProps, DescriptionList, type DescriptionListItem, type DescriptionListLayout, Dialog, type DialogActionSet, type DialogResult, Divider, type DividerOrientation, type DividerTone, DockLayout, type DockLayoutProps, Drawer, DrawerDefaultActions, type DrawerSide, DropdownMenu, DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuPlacement, DualListBuilder, type DualListBuilderProps, type DualListItem, type ElementSize, EmptyState, type EmptyStateIcon, type FieldMode, FieldShell, FileField, FilterBuilder, type FilterBuilderProps, type FilterCondition, type FilterOperator, FilterSelectField, type FilterSelectGroup, FloatingActionButton, type FloatingActionButtonPosition, type FloatingActionButtonProps, type FloatingActionButtonSize, FocusTrap, type GalleryImage, Gauge, type GaugeFooterItem, type GaugeTrend, type GaugeVariant, Grid, type GridProps, HiddenField, type HotkeyCombo, HotkeyManager, Icon, IconPicker, type IconSize, type IconTone, ImageGallery, ImageThumbnail, type ImageThumbnailSize, IntersectionObserver, JsonViewer, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, KeyboardShortcut, type KeyboardShortcutSize, type LabelPosition, Lightbox, List, type ListItem, MasonryGrid, type MasonryGridItem, MegaMenu, type MegaMenuConfig, type MegaMenuFeatured, type MegaMenuItem, type MegaMenuSection, MetricTile, Modal, ModalDefaultActions, type ModalSize, type ModelAsset, ModelGallery, ModelLightbox, ModelThumbnail, type ModelThumbnailSize, ModelViewer, MultiSelectField, NavigationRail, type NavigationRailItem, type NavigationRailProps, NumberField, OpusThemeProvider, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Panel, type PasswordRequirement, PasswordStrengthField, type PermissionLevel, PermissionsMatrix, type PermissionsMatrixProps, type PhoneCountry, PhoneNumberField, PipelineOverview, type PipelineOverviewProps, type PipelineStage, Popover, type PopoverPlacement, Portal, PortalHost, ProgressBar, ProgressRing, PropertyGrid, type PropertyGridItem, PropertyInspector, type PropertyInspectorItem, type PropertyInspectorValue, QueryBuilder, type QueryBuilderProps, type QueryCombinator, type QueryGroup, type QueryOperator, type QueryRule, Radio, RadioGroup, RangeField, RatingField, type RatingVariant, RecentActivity, type RecentActivityItem, type RecentActivityProps, ResizablePanel, type ResizablePanelProps, ResizeObserver, ResourcePlanner, type ResourcePlannerItem, type ResourcePlannerProps, type ResourcePlannerResource, RichTextField, RuleBuilder, type RuleBuilderProps, type RuleDefinition, type RuleEffect, Scheduler, type SchedulerEvent, type SchedulerProps, ScrollArea, type ScrollAreaProps, Section, type SectionAlign, type SectionColumns, type SectionGap, type SectionJustify, type SectionLayoutPreset, type SectionSidebar, type SectionSidebarRatio, type SectionSpan, type SectionStackBelow, type SectionTemplate, type SectionWidth, SegmentedControlField, SelectField, ShowMore, type ShowToastOptions, Sidebar, SidebarGroup, SidebarHeader, SidebarLayout, SidebarLink, SidebarNav, type SidebarSide, Skeleton, type SkeletonAnimation, type SkeletonVariant, SliderRangeField, Spacer, type SpacerProps, Sparkline, Speedometer, Spinner, type SpinnerSize, type SpinnerTone, SplitButton, type SplitButtonAction, type SplitButtonProps, Splitter, type SplitterOrientation, type SplitterProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, StatCard, type StatCardTrend, StatTile, type StatTileItem, type StatTileProps, type StatTileTone, type StatTileTrend, StatTiles, type StatTilesProps, Statistic, type StatisticTrend, StatusIndicator, type StatusIndicatorState, type SurfaceDensity, type SurfaceTone, SwitchField, type TabItem, Table, type TableColumn, type TableDensity, type TableRow, Tabs, type TabsOrientation, type TabsVariant, TextAreaField, TextField, type Theme, OpusThemeProvider as ThemeProvider, ThemeSwitcher, ThemeToggleField, Tile, type TileItem, type TileProps, type TileTone, Tiles, type TilesLayout, type TilesProps, Toast, type ToastHorizontalPosition, ToastProvider, type ToastVerticalPosition, type ToastViewportPosition, Toolbar, type ToolbarProps, Tooltip, TopNavigation, type TopNavigationBarMenu, type TopNavigationDropdownMenu, type TopNavigationMegaMenu, TopNavigationMenu, type TopNavigationMenuConfig, type TopNavigationSelectItem, type TopPerformingUserItem, TopPerformingUsers, type TopPerformingUsersProps, TransferListField, TreeSelectField, type TreeSelectNode, TreeView, type TreeViewNode, TrendBadge, type TrendBadgeDirection, type UpcomingTaskItem, UpcomingTasks, type UpcomingTasksProps, VisuallyHidden, accentColors, cartesianSpecializedVariants, countryCodeToFlag, createAccentStyle, defaultMegaMenuFeatured, defaultMegaMenuMenus, defaultMegaMenuSections, defaultTopNavigationBarMenus, defaultTopNavigationMegaMenus, defaultTopNavigationMenus, demoSankeyLinks, fieldInputAriaProps, countries as phoneCountries, useAccentPreference, useClipboard, useContextMenu, useFieldShellAria, useHotkey, useHotkeyManager, useIntersectionObserver, useOpusTheme, usePortalHost, useResizeObserver, useToast, useTopNavigation, worldMapRegionIds };
|