@knkcs/anker 1.1.0 → 1.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/dist/components/index.d.ts +176 -1
- package/dist/components/index.js +496 -16
- package/dist/components/index.js.map +1 -1
- package/package.json +1 -1
package/dist/components/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
|
|
2
2
|
import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.js';
|
|
3
|
-
import {
|
|
3
|
+
import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Table } from '../chunk-2QFOWHTU.js';
|
|
4
4
|
import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
|
|
5
5
|
import { text_input_default } from '../chunk-OU6H3KU4.js';
|
|
6
6
|
import { Button, IconButton } from '../chunk-SJ6YXNZW.js';
|
|
7
7
|
import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
|
|
8
8
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
9
|
-
import { X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
|
|
9
|
+
import { PanelRightOpen, PanelRightClose, Search, X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
|
|
10
10
|
import { createContext, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
|
|
11
11
|
export { createTreeCollection } from '@chakra-ui/react';
|
|
12
|
-
import
|
|
12
|
+
import React3, { createContext as createContext$1, useState, useEffect, Children, useMemo, useRef, useCallback, useContext } from 'react';
|
|
13
13
|
import dayjs from 'dayjs';
|
|
14
14
|
import { Link as Link$1 } from 'react-router-dom';
|
|
15
15
|
import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
@@ -489,6 +489,118 @@ function ChipPickerInner(props) {
|
|
|
489
489
|
}
|
|
490
490
|
var ChipPicker = ChipPickerInner;
|
|
491
491
|
ChipPicker.displayName = "ChipPicker";
|
|
492
|
+
var COLLAPSED_WIDTH = "44px";
|
|
493
|
+
var EXPANDED_WIDTH = "360px";
|
|
494
|
+
var COLLAPSE_BREAKPOINT = 1440;
|
|
495
|
+
function getInitialCollapsed(storageKey) {
|
|
496
|
+
if (typeof window === "undefined") return false;
|
|
497
|
+
if (storageKey) {
|
|
498
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
499
|
+
if (stored === "true") return true;
|
|
500
|
+
if (stored === "false") return false;
|
|
501
|
+
}
|
|
502
|
+
return window.innerWidth < COLLAPSE_BREAKPOINT;
|
|
503
|
+
}
|
|
504
|
+
var ContextRailRoot = ({ storageKey, children }) => {
|
|
505
|
+
const [collapsed, setCollapsed] = useState(
|
|
506
|
+
() => getInitialCollapsed(storageKey)
|
|
507
|
+
);
|
|
508
|
+
useEffect(() => {
|
|
509
|
+
if (storageKey) {
|
|
510
|
+
window.localStorage.setItem(storageKey, String(collapsed));
|
|
511
|
+
}
|
|
512
|
+
}, [collapsed, storageKey]);
|
|
513
|
+
return /* @__PURE__ */ jsx(
|
|
514
|
+
Box,
|
|
515
|
+
{
|
|
516
|
+
"data-testid": "context-rail",
|
|
517
|
+
"data-collapsed": collapsed ? "true" : "false",
|
|
518
|
+
w: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
|
|
519
|
+
minH: "100vh",
|
|
520
|
+
bg: "bg-surface",
|
|
521
|
+
borderLeftWidth: "1px",
|
|
522
|
+
borderLeftColor: "border",
|
|
523
|
+
transition: "width 250ms ease-out",
|
|
524
|
+
overflow: "hidden",
|
|
525
|
+
position: "relative",
|
|
526
|
+
children: collapsed ? /* @__PURE__ */ jsx(Flex, { direction: "column", align: "center", pt: "3", gap: "3", children: /* @__PURE__ */ jsx(
|
|
527
|
+
IconButton,
|
|
528
|
+
{
|
|
529
|
+
"data-testid": "context-rail-toggle",
|
|
530
|
+
"aria-label": "Expand context rail",
|
|
531
|
+
variant: "ghost",
|
|
532
|
+
size: "sm",
|
|
533
|
+
onClick: () => setCollapsed(false),
|
|
534
|
+
children: /* @__PURE__ */ jsx(PanelRightOpen, { size: 16 })
|
|
535
|
+
}
|
|
536
|
+
) }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", h: "full", children: [
|
|
537
|
+
/* @__PURE__ */ jsx(Flex, { justify: "flex-end", px: "3", pt: "3", children: /* @__PURE__ */ jsx(
|
|
538
|
+
IconButton,
|
|
539
|
+
{
|
|
540
|
+
"data-testid": "context-rail-toggle",
|
|
541
|
+
"aria-label": "Collapse context rail",
|
|
542
|
+
variant: "ghost",
|
|
543
|
+
size: "sm",
|
|
544
|
+
onClick: () => setCollapsed(true),
|
|
545
|
+
children: /* @__PURE__ */ jsx(PanelRightClose, { size: 16 })
|
|
546
|
+
}
|
|
547
|
+
) }),
|
|
548
|
+
/* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", px: "4", pb: "4", children })
|
|
549
|
+
] })
|
|
550
|
+
}
|
|
551
|
+
);
|
|
552
|
+
};
|
|
553
|
+
ContextRailRoot.displayName = "ContextRail";
|
|
554
|
+
var ContextRailHeader = ({
|
|
555
|
+
eyebrow,
|
|
556
|
+
title,
|
|
557
|
+
onClose: _onClose
|
|
558
|
+
}) => /* @__PURE__ */ jsxs(Box, { mb: "4", children: [
|
|
559
|
+
eyebrow && /* @__PURE__ */ jsx(
|
|
560
|
+
Text,
|
|
561
|
+
{
|
|
562
|
+
fontSize: "2xs",
|
|
563
|
+
fontWeight: "semibold",
|
|
564
|
+
letterSpacing: "wider",
|
|
565
|
+
textTransform: "uppercase",
|
|
566
|
+
color: "muted",
|
|
567
|
+
mb: "1",
|
|
568
|
+
children: eyebrow
|
|
569
|
+
}
|
|
570
|
+
),
|
|
571
|
+
/* @__PURE__ */ jsx(
|
|
572
|
+
Heading,
|
|
573
|
+
{
|
|
574
|
+
as: "h2",
|
|
575
|
+
fontSize: "lg",
|
|
576
|
+
fontWeight: "semibold",
|
|
577
|
+
color: "default",
|
|
578
|
+
letterSpacing: "-0.01em",
|
|
579
|
+
children: title
|
|
580
|
+
}
|
|
581
|
+
)
|
|
582
|
+
] });
|
|
583
|
+
ContextRailHeader.displayName = "ContextRail.Header";
|
|
584
|
+
var ContextRailSection = ({
|
|
585
|
+
id,
|
|
586
|
+
icon,
|
|
587
|
+
label,
|
|
588
|
+
children
|
|
589
|
+
}) => /* @__PURE__ */ jsxs(Box, { mb: "4", "data-section-id": id, children: [
|
|
590
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mb: "2", children: [
|
|
591
|
+
icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", color: "muted", children: icon }),
|
|
592
|
+
/* @__PURE__ */ jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: "semibold", color: "default", children: label })
|
|
593
|
+
] }),
|
|
594
|
+
/* @__PURE__ */ jsx(Box, { children })
|
|
595
|
+
] });
|
|
596
|
+
ContextRailSection.displayName = "ContextRail.Section";
|
|
597
|
+
var ContextRailFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "4", pt: "4", borderTopWidth: "1px", borderTopColor: "border-muted", children });
|
|
598
|
+
ContextRailFooter.displayName = "ContextRail.Footer";
|
|
599
|
+
var ContextRail = Object.assign(ContextRailRoot, {
|
|
600
|
+
Header: ContextRailHeader,
|
|
601
|
+
Section: ContextRailSection,
|
|
602
|
+
Footer: ContextRailFooter
|
|
603
|
+
});
|
|
492
604
|
var ActionCell = ({ actions }) => {
|
|
493
605
|
return /* @__PURE__ */ jsx(HStack, { gap: 1, children: actions.map((action) => /* @__PURE__ */ jsx(Tooltip, { content: action.label, children: action.href ? /* @__PURE__ */ jsx(
|
|
494
606
|
IconButton,
|
|
@@ -1088,7 +1200,7 @@ var FactBox = (props) => {
|
|
|
1088
1200
|
expandLabel = "Expand",
|
|
1089
1201
|
...rest
|
|
1090
1202
|
} = props;
|
|
1091
|
-
const [show, setShow] =
|
|
1203
|
+
const [show, setShow] = React3.useState(true);
|
|
1092
1204
|
const handleToggle = () => {
|
|
1093
1205
|
setShow(!show);
|
|
1094
1206
|
};
|
|
@@ -1432,6 +1544,105 @@ var Modal = ({
|
|
|
1432
1544
|
);
|
|
1433
1545
|
};
|
|
1434
1546
|
Modal.displayName = "Modal";
|
|
1547
|
+
var PageHeader = ({
|
|
1548
|
+
breadcrumbs,
|
|
1549
|
+
title,
|
|
1550
|
+
subtitle,
|
|
1551
|
+
actions,
|
|
1552
|
+
eyebrow
|
|
1553
|
+
}) => {
|
|
1554
|
+
const hasCrumbs = !!breadcrumbs && breadcrumbs.length > 0;
|
|
1555
|
+
const hasActions = !!actions;
|
|
1556
|
+
return /* @__PURE__ */ jsxs(
|
|
1557
|
+
Box,
|
|
1558
|
+
{
|
|
1559
|
+
py: "4",
|
|
1560
|
+
px: "8",
|
|
1561
|
+
borderBottomWidth: "1px",
|
|
1562
|
+
borderBottomColor: "border",
|
|
1563
|
+
bg: "bg-surface",
|
|
1564
|
+
children: [
|
|
1565
|
+
eyebrow && /* @__PURE__ */ jsx(
|
|
1566
|
+
Text,
|
|
1567
|
+
{
|
|
1568
|
+
fontSize: "2xs",
|
|
1569
|
+
fontWeight: "semibold",
|
|
1570
|
+
letterSpacing: "wider",
|
|
1571
|
+
textTransform: "uppercase",
|
|
1572
|
+
color: "muted",
|
|
1573
|
+
mb: "1",
|
|
1574
|
+
children: eyebrow
|
|
1575
|
+
}
|
|
1576
|
+
),
|
|
1577
|
+
hasCrumbs && /* @__PURE__ */ jsx(
|
|
1578
|
+
Flex,
|
|
1579
|
+
{
|
|
1580
|
+
"data-testid": "page-header-breadcrumbs",
|
|
1581
|
+
align: "center",
|
|
1582
|
+
gap: "1",
|
|
1583
|
+
mb: "1",
|
|
1584
|
+
fontSize: "xs",
|
|
1585
|
+
color: "muted",
|
|
1586
|
+
children: breadcrumbs.map((c, idx) => {
|
|
1587
|
+
const isLast = idx === breadcrumbs.length - 1;
|
|
1588
|
+
const sep = !isLast ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u203A " }) : null;
|
|
1589
|
+
const node = c.to ? /* @__PURE__ */ jsx(
|
|
1590
|
+
Link,
|
|
1591
|
+
{
|
|
1592
|
+
href: c.to,
|
|
1593
|
+
color: "muted",
|
|
1594
|
+
_hover: { color: "default" },
|
|
1595
|
+
children: c.label
|
|
1596
|
+
},
|
|
1597
|
+
`crumb-link-${c.label}`
|
|
1598
|
+
) : /* @__PURE__ */ jsx(
|
|
1599
|
+
Text,
|
|
1600
|
+
{
|
|
1601
|
+
as: "span",
|
|
1602
|
+
color: isLast ? "default" : "muted",
|
|
1603
|
+
fontWeight: isLast ? "medium" : "normal",
|
|
1604
|
+
children: c.label
|
|
1605
|
+
},
|
|
1606
|
+
`crumb-text-${c.label}`
|
|
1607
|
+
);
|
|
1608
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
|
|
1609
|
+
node,
|
|
1610
|
+
sep
|
|
1611
|
+
] }, `crumb-wrap-${c.label}`);
|
|
1612
|
+
})
|
|
1613
|
+
}
|
|
1614
|
+
),
|
|
1615
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", gap: "4", children: [
|
|
1616
|
+
/* @__PURE__ */ jsxs(Box, { flex: "1", minW: "0", children: [
|
|
1617
|
+
/* @__PURE__ */ jsx(
|
|
1618
|
+
Heading,
|
|
1619
|
+
{
|
|
1620
|
+
as: "h1",
|
|
1621
|
+
fontSize: "2xl",
|
|
1622
|
+
fontWeight: "semibold",
|
|
1623
|
+
color: "default",
|
|
1624
|
+
letterSpacing: "-0.02em",
|
|
1625
|
+
children: title
|
|
1626
|
+
}
|
|
1627
|
+
),
|
|
1628
|
+
subtitle && /* @__PURE__ */ jsx(
|
|
1629
|
+
Text,
|
|
1630
|
+
{
|
|
1631
|
+
"data-testid": "page-header-subtitle",
|
|
1632
|
+
fontSize: "sm",
|
|
1633
|
+
color: "muted",
|
|
1634
|
+
mt: "1",
|
|
1635
|
+
children: subtitle
|
|
1636
|
+
}
|
|
1637
|
+
)
|
|
1638
|
+
] }),
|
|
1639
|
+
hasActions && /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", flexShrink: 0, children: actions })
|
|
1640
|
+
] })
|
|
1641
|
+
]
|
|
1642
|
+
}
|
|
1643
|
+
);
|
|
1644
|
+
};
|
|
1645
|
+
PageHeader.displayName = "PageHeader";
|
|
1435
1646
|
var SelectableCardThumbnail = ({
|
|
1436
1647
|
height = "160px",
|
|
1437
1648
|
children
|
|
@@ -1517,7 +1728,187 @@ SelectableCard.displayName = "SelectableCard";
|
|
|
1517
1728
|
SelectableCard.Thumbnail = SelectableCardThumbnail;
|
|
1518
1729
|
SelectableCard.Body = SelectableCardBody;
|
|
1519
1730
|
SelectableCard.Footer = SelectableCardFooter;
|
|
1520
|
-
var
|
|
1731
|
+
var SidebarRoot = ({ children }) => /* @__PURE__ */ jsx(
|
|
1732
|
+
Flex,
|
|
1733
|
+
{
|
|
1734
|
+
"data-testid": "sidebar",
|
|
1735
|
+
direction: "column",
|
|
1736
|
+
w: "240px",
|
|
1737
|
+
minH: "100vh",
|
|
1738
|
+
bg: "bg-canvas",
|
|
1739
|
+
borderRightWidth: "1px",
|
|
1740
|
+
borderRightColor: "border",
|
|
1741
|
+
children
|
|
1742
|
+
}
|
|
1743
|
+
);
|
|
1744
|
+
SidebarRoot.displayName = "Sidebar";
|
|
1745
|
+
var SidebarHeader = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "4", borderBottomWidth: "1px", borderBottomColor: "border-muted", children });
|
|
1746
|
+
SidebarHeader.displayName = "Sidebar.Header";
|
|
1747
|
+
var SidebarBody = ({ children }) => /* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", py: "3", children });
|
|
1748
|
+
SidebarBody.displayName = "Sidebar.Body";
|
|
1749
|
+
var SidebarFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "3", borderTopWidth: "1px", borderTopColor: "border-muted", children });
|
|
1750
|
+
SidebarFooter.displayName = "Sidebar.Footer";
|
|
1751
|
+
var SidebarLogo = ({ wordmark, subtitle }) => /* @__PURE__ */ jsxs(Box, { mb: subtitle ? "3" : "0", children: [
|
|
1752
|
+
/* @__PURE__ */ jsx(
|
|
1753
|
+
Heading,
|
|
1754
|
+
{
|
|
1755
|
+
as: "span",
|
|
1756
|
+
fontSize: "lg",
|
|
1757
|
+
fontWeight: "bold",
|
|
1758
|
+
color: "primary.700",
|
|
1759
|
+
letterSpacing: "tight",
|
|
1760
|
+
children: wordmark
|
|
1761
|
+
}
|
|
1762
|
+
),
|
|
1763
|
+
subtitle && /* @__PURE__ */ jsx(
|
|
1764
|
+
Text,
|
|
1765
|
+
{
|
|
1766
|
+
fontSize: "2xs",
|
|
1767
|
+
fontWeight: "semibold",
|
|
1768
|
+
letterSpacing: "wider",
|
|
1769
|
+
textTransform: "uppercase",
|
|
1770
|
+
color: "muted",
|
|
1771
|
+
mt: "0.5",
|
|
1772
|
+
children: subtitle
|
|
1773
|
+
}
|
|
1774
|
+
)
|
|
1775
|
+
] });
|
|
1776
|
+
SidebarLogo.displayName = "Sidebar.Logo";
|
|
1777
|
+
var SidebarSlot = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "3", children });
|
|
1778
|
+
SidebarSlot.displayName = "Sidebar.Slot";
|
|
1779
|
+
var SidebarSection = ({ label, children }) => /* @__PURE__ */ jsxs(Box, { mb: "4", px: "3", children: [
|
|
1780
|
+
/* @__PURE__ */ jsx(
|
|
1781
|
+
Text,
|
|
1782
|
+
{
|
|
1783
|
+
fontSize: "2xs",
|
|
1784
|
+
fontWeight: "semibold",
|
|
1785
|
+
letterSpacing: "wider",
|
|
1786
|
+
textTransform: "uppercase",
|
|
1787
|
+
color: "muted",
|
|
1788
|
+
px: "2",
|
|
1789
|
+
mb: "1",
|
|
1790
|
+
children: label
|
|
1791
|
+
}
|
|
1792
|
+
),
|
|
1793
|
+
/* @__PURE__ */ jsx(Flex, { direction: "column", gap: "0.5", children })
|
|
1794
|
+
] });
|
|
1795
|
+
SidebarSection.displayName = "Sidebar.Section";
|
|
1796
|
+
var SidebarItem = ({ icon, children, asChild, active }) => {
|
|
1797
|
+
const dataProps = {
|
|
1798
|
+
"data-testid": "sidebar-item",
|
|
1799
|
+
"data-active": active ? "true" : "false"
|
|
1800
|
+
};
|
|
1801
|
+
const styleProps = {
|
|
1802
|
+
display: "flex",
|
|
1803
|
+
alignItems: "center",
|
|
1804
|
+
gap: "2",
|
|
1805
|
+
px: "3",
|
|
1806
|
+
py: "2",
|
|
1807
|
+
borderRadius: "md",
|
|
1808
|
+
fontSize: "sm",
|
|
1809
|
+
fontWeight: "medium",
|
|
1810
|
+
color: active ? "primary.700" : "default",
|
|
1811
|
+
bg: active ? "primary.50" : "transparent",
|
|
1812
|
+
position: "relative",
|
|
1813
|
+
textDecoration: "none"
|
|
1814
|
+
};
|
|
1815
|
+
const iconEl = icon ? /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", children: icon }) : null;
|
|
1816
|
+
if (asChild) {
|
|
1817
|
+
const child = React3.Children.only(children);
|
|
1818
|
+
return React3.cloneElement(child, {
|
|
1819
|
+
"data-active": active ? "true" : "false",
|
|
1820
|
+
style: {
|
|
1821
|
+
...styleProps,
|
|
1822
|
+
...child.props.style
|
|
1823
|
+
}
|
|
1824
|
+
});
|
|
1825
|
+
}
|
|
1826
|
+
return /* @__PURE__ */ jsxs(Box, { ...dataProps, ...styleProps, children: [
|
|
1827
|
+
iconEl,
|
|
1828
|
+
children
|
|
1829
|
+
] });
|
|
1830
|
+
};
|
|
1831
|
+
SidebarItem.displayName = "Sidebar.Item";
|
|
1832
|
+
var SidebarUserMenu = ({ user, children }) => {
|
|
1833
|
+
const initials = (user.name ?? user.email ?? "").split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() ?? "").join("");
|
|
1834
|
+
return /* @__PURE__ */ jsxs(MenuRoot, { children: [
|
|
1835
|
+
/* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
1836
|
+
Button,
|
|
1837
|
+
{
|
|
1838
|
+
"data-testid": "sidebar-user-menu-trigger",
|
|
1839
|
+
variant: "ghost",
|
|
1840
|
+
size: "md",
|
|
1841
|
+
w: "full",
|
|
1842
|
+
justifyContent: "flex-start",
|
|
1843
|
+
px: "2",
|
|
1844
|
+
children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "full", children: [
|
|
1845
|
+
/* @__PURE__ */ jsx(
|
|
1846
|
+
Flex,
|
|
1847
|
+
{
|
|
1848
|
+
align: "center",
|
|
1849
|
+
justify: "center",
|
|
1850
|
+
w: "32px",
|
|
1851
|
+
h: "32px",
|
|
1852
|
+
borderRadius: "full",
|
|
1853
|
+
bg: "primary.700",
|
|
1854
|
+
color: "white",
|
|
1855
|
+
fontSize: "xs",
|
|
1856
|
+
fontWeight: "semibold",
|
|
1857
|
+
flexShrink: 0,
|
|
1858
|
+
children: initials || "?"
|
|
1859
|
+
}
|
|
1860
|
+
),
|
|
1861
|
+
/* @__PURE__ */ jsxs(Box, { textAlign: "start", flex: "1", minW: "0", children: [
|
|
1862
|
+
/* @__PURE__ */ jsx(
|
|
1863
|
+
Text,
|
|
1864
|
+
{
|
|
1865
|
+
fontSize: "sm",
|
|
1866
|
+
fontWeight: "medium",
|
|
1867
|
+
color: "default",
|
|
1868
|
+
lineClamp: 1,
|
|
1869
|
+
children: user.name ?? user.email
|
|
1870
|
+
}
|
|
1871
|
+
),
|
|
1872
|
+
user.email && user.name && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", lineClamp: 1, children: user.email })
|
|
1873
|
+
] })
|
|
1874
|
+
] })
|
|
1875
|
+
}
|
|
1876
|
+
) }),
|
|
1877
|
+
/* @__PURE__ */ jsx(MenuContent, { portalled: false, children })
|
|
1878
|
+
] });
|
|
1879
|
+
};
|
|
1880
|
+
SidebarUserMenu.displayName = "Sidebar.UserMenu";
|
|
1881
|
+
var SidebarUserMenuItem = ({
|
|
1882
|
+
asChild,
|
|
1883
|
+
onClick,
|
|
1884
|
+
children
|
|
1885
|
+
}) => {
|
|
1886
|
+
if (asChild) {
|
|
1887
|
+
const child = React3.Children.only(children);
|
|
1888
|
+
return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React3.cloneElement(child, {}) });
|
|
1889
|
+
}
|
|
1890
|
+
return /* @__PURE__ */ jsx(
|
|
1891
|
+
MenuItem,
|
|
1892
|
+
{
|
|
1893
|
+
value: typeof children === "string" ? children : "item",
|
|
1894
|
+
onClick,
|
|
1895
|
+
children
|
|
1896
|
+
}
|
|
1897
|
+
);
|
|
1898
|
+
};
|
|
1899
|
+
SidebarUserMenuItem.displayName = "Sidebar.UserMenuItem";
|
|
1900
|
+
var Sidebar = Object.assign(SidebarRoot, {
|
|
1901
|
+
Header: SidebarHeader,
|
|
1902
|
+
Body: SidebarBody,
|
|
1903
|
+
Footer: SidebarFooter,
|
|
1904
|
+
Logo: SidebarLogo,
|
|
1905
|
+
Slot: SidebarSlot,
|
|
1906
|
+
Section: SidebarSection,
|
|
1907
|
+
Item: SidebarItem,
|
|
1908
|
+
UserMenu: SidebarUserMenu,
|
|
1909
|
+
UserMenuItem: SidebarUserMenuItem
|
|
1910
|
+
});
|
|
1911
|
+
var SidebarSection2 = ({
|
|
1521
1912
|
label,
|
|
1522
1913
|
children,
|
|
1523
1914
|
actionIcon,
|
|
@@ -1572,23 +1963,23 @@ var SidebarSection = ({
|
|
|
1572
1963
|
/* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
|
|
1573
1964
|
] });
|
|
1574
1965
|
};
|
|
1575
|
-
|
|
1966
|
+
SidebarSection2.displayName = "SidebarSection";
|
|
1576
1967
|
var [StepperProvider, useStepperContext] = createContext({
|
|
1577
1968
|
name: "StepperContext",
|
|
1578
1969
|
errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
|
|
1579
1970
|
});
|
|
1580
1971
|
function useStepper(props) {
|
|
1581
1972
|
const { step, onChange } = props;
|
|
1582
|
-
const [activeIndex, setIndex] =
|
|
1583
|
-
const stepsRef =
|
|
1584
|
-
const registerStep =
|
|
1973
|
+
const [activeIndex, setIndex] = React3.useState(-1);
|
|
1974
|
+
const stepsRef = React3.useRef([]);
|
|
1975
|
+
const registerStep = React3.useCallback((name) => {
|
|
1585
1976
|
const newSteps = [...stepsRef.current];
|
|
1586
1977
|
if (newSteps.indexOf(name) === -1) {
|
|
1587
1978
|
newSteps.push(name);
|
|
1588
1979
|
}
|
|
1589
1980
|
stepsRef.current = newSteps;
|
|
1590
1981
|
}, []);
|
|
1591
|
-
const unregisterStep =
|
|
1982
|
+
const unregisterStep = React3.useCallback((name) => {
|
|
1592
1983
|
stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
|
|
1593
1984
|
}, []);
|
|
1594
1985
|
const setStep = useCallback((name) => {
|
|
@@ -1603,7 +1994,7 @@ function useStepper(props) {
|
|
|
1603
1994
|
const prevStep = () => {
|
|
1604
1995
|
setIndex(activeIndex - 1);
|
|
1605
1996
|
};
|
|
1606
|
-
|
|
1997
|
+
React3.useEffect(() => {
|
|
1607
1998
|
if (typeof step === "string") {
|
|
1608
1999
|
setStep(step);
|
|
1609
2000
|
} else if (typeof step === "number") {
|
|
@@ -1612,7 +2003,7 @@ function useStepper(props) {
|
|
|
1612
2003
|
setIndex(0);
|
|
1613
2004
|
}
|
|
1614
2005
|
}, [step, activeIndex, setStep]);
|
|
1615
|
-
|
|
2006
|
+
React3.useEffect(() => {
|
|
1616
2007
|
onChange?.(activeIndex);
|
|
1617
2008
|
}, [activeIndex, onChange]);
|
|
1618
2009
|
const context = {
|
|
@@ -1634,7 +2025,7 @@ function useStepper(props) {
|
|
|
1634
2025
|
function useStep(props) {
|
|
1635
2026
|
const { name, isActive, isCompleted } = props;
|
|
1636
2027
|
const { registerStep, unregisterStep, activeStep } = useStepperContext();
|
|
1637
|
-
|
|
2028
|
+
React3.useEffect(() => {
|
|
1638
2029
|
if (!name) {
|
|
1639
2030
|
return;
|
|
1640
2031
|
}
|
|
@@ -1668,12 +2059,12 @@ function useStepperNextButton({
|
|
|
1668
2059
|
};
|
|
1669
2060
|
}
|
|
1670
2061
|
function getChildOfType(children, type) {
|
|
1671
|
-
return
|
|
2062
|
+
return React3.Children.toArray(children).find(
|
|
1672
2063
|
(item) => item.type === type
|
|
1673
2064
|
);
|
|
1674
2065
|
}
|
|
1675
2066
|
function getChildrenOfType(children, type) {
|
|
1676
|
-
return
|
|
2067
|
+
return React3.Children.toArray(children).filter(
|
|
1677
2068
|
(item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
|
|
1678
2069
|
);
|
|
1679
2070
|
}
|
|
@@ -1880,6 +2271,95 @@ var TimelineTitle = Timeline.Title;
|
|
|
1880
2271
|
TimelineTitle.displayName = "TimelineTitle";
|
|
1881
2272
|
var TimelineDescription = Timeline.Description;
|
|
1882
2273
|
TimelineDescription.displayName = "TimelineDescription";
|
|
2274
|
+
var ToolbarRoot = ({ children }) => /* @__PURE__ */ jsx(
|
|
2275
|
+
Flex,
|
|
2276
|
+
{
|
|
2277
|
+
"data-testid": "toolbar",
|
|
2278
|
+
align: "center",
|
|
2279
|
+
gap: "4",
|
|
2280
|
+
px: "4",
|
|
2281
|
+
h: "48px",
|
|
2282
|
+
bg: "bg-subtle",
|
|
2283
|
+
borderBottomWidth: "1px",
|
|
2284
|
+
borderBottomColor: "border",
|
|
2285
|
+
children
|
|
2286
|
+
}
|
|
2287
|
+
);
|
|
2288
|
+
ToolbarRoot.displayName = "Toolbar";
|
|
2289
|
+
var ToolbarSearch = ({
|
|
2290
|
+
placeholder,
|
|
2291
|
+
value,
|
|
2292
|
+
onChange
|
|
2293
|
+
}) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "260px", position: "relative", children: [
|
|
2294
|
+
/* @__PURE__ */ jsx(Box, { position: "absolute", left: "2", color: "muted", pointerEvents: "none", children: /* @__PURE__ */ jsx(Search, { size: 14 }) }),
|
|
2295
|
+
/* @__PURE__ */ jsx(
|
|
2296
|
+
"input",
|
|
2297
|
+
{
|
|
2298
|
+
type: "text",
|
|
2299
|
+
placeholder,
|
|
2300
|
+
value,
|
|
2301
|
+
onChange: (e) => onChange(e.target.value),
|
|
2302
|
+
style: {
|
|
2303
|
+
height: "32px",
|
|
2304
|
+
paddingLeft: "2rem",
|
|
2305
|
+
paddingRight: "0.5rem",
|
|
2306
|
+
width: "100%",
|
|
2307
|
+
borderWidth: "1px",
|
|
2308
|
+
borderStyle: "solid",
|
|
2309
|
+
borderRadius: "var(--chakra-radii-md)",
|
|
2310
|
+
fontSize: "var(--chakra-font-sizes-sm)",
|
|
2311
|
+
background: "var(--chakra-colors-bg-surface, white)",
|
|
2312
|
+
outline: "none"
|
|
2313
|
+
}
|
|
2314
|
+
}
|
|
2315
|
+
)
|
|
2316
|
+
] });
|
|
2317
|
+
ToolbarSearch.displayName = "Toolbar.Search";
|
|
2318
|
+
var ToolbarFilters = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", children });
|
|
2319
|
+
ToolbarFilters.displayName = "Toolbar.Filters";
|
|
2320
|
+
var ToolbarFilterChip = ({
|
|
2321
|
+
icon,
|
|
2322
|
+
active,
|
|
2323
|
+
onClick,
|
|
2324
|
+
children
|
|
2325
|
+
}) => /* @__PURE__ */ jsxs(
|
|
2326
|
+
"button",
|
|
2327
|
+
{
|
|
2328
|
+
type: "button",
|
|
2329
|
+
"data-testid": "filter-chip",
|
|
2330
|
+
"data-active": active ? "true" : "false",
|
|
2331
|
+
onClick,
|
|
2332
|
+
style: {
|
|
2333
|
+
display: "inline-flex",
|
|
2334
|
+
alignItems: "center",
|
|
2335
|
+
gap: "4px",
|
|
2336
|
+
padding: "0 10px",
|
|
2337
|
+
height: "28px",
|
|
2338
|
+
fontSize: "var(--chakra-font-sizes-xs)",
|
|
2339
|
+
fontWeight: "var(--chakra-font-weights-medium)",
|
|
2340
|
+
borderWidth: "1px",
|
|
2341
|
+
borderStyle: "solid",
|
|
2342
|
+
borderRadius: "var(--chakra-radii-md)",
|
|
2343
|
+
cursor: "pointer"
|
|
2344
|
+
},
|
|
2345
|
+
children: [
|
|
2346
|
+
icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", children: icon }),
|
|
2347
|
+
children
|
|
2348
|
+
]
|
|
2349
|
+
}
|
|
2350
|
+
);
|
|
2351
|
+
ToolbarFilterChip.displayName = "Toolbar.FilterChip";
|
|
2352
|
+
var ToolbarRight = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", ml: "auto", children });
|
|
2353
|
+
ToolbarRight.displayName = "Toolbar.Right";
|
|
2354
|
+
var ToolbarCount = ({ children }) => /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", children });
|
|
2355
|
+
ToolbarCount.displayName = "Toolbar.Count";
|
|
2356
|
+
var Toolbar = Object.assign(ToolbarRoot, {
|
|
2357
|
+
Search: ToolbarSearch,
|
|
2358
|
+
Filters: ToolbarFilters,
|
|
2359
|
+
FilterChip: ToolbarFilterChip,
|
|
2360
|
+
Right: ToolbarRight,
|
|
2361
|
+
Count: ToolbarCount
|
|
2362
|
+
});
|
|
1883
2363
|
var TreeViewRoot = TreeView.Root;
|
|
1884
2364
|
TreeViewRoot.displayName = "TreeViewRoot";
|
|
1885
2365
|
var TreeViewTree = TreeView.Tree;
|
|
@@ -2068,6 +2548,6 @@ var Widget = ({
|
|
|
2068
2548
|
};
|
|
2069
2549
|
Widget.displayName = "Widget";
|
|
2070
2550
|
|
|
2071
|
-
export { ActionCell, AuthCard, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, CountCell, DataTable, DateCell, DrawerRoot, FactBox, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, pluralize, truncateText, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
|
|
2551
|
+
export { ActionCell, AuthCard, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DrawerRoot, FactBox, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, PageHeader, Pagination, SelectableCard, Sidebar, SidebarSection2 as SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, Toolbar, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, pluralize, truncateText, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
|
|
2072
2552
|
//# sourceMappingURL=index.js.map
|
|
2073
2553
|
//# sourceMappingURL=index.js.map
|