@knkcs/anker 1.1.0 → 1.3.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/{chunk-QOLM5PLP.js → chunk-VAUYWBWI.js} +25 -20
- package/dist/chunk-VAUYWBWI.js.map +1 -0
- package/dist/components/index.d.ts +176 -1
- package/dist/components/index.js +501 -16
- package/dist/components/index.js.map +1 -1
- package/dist/primitives/index.js +1 -1
- package/dist/theme/index.d.ts +10 -3
- package/dist/theme/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-QOLM5PLP.js.map +0 -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,192 @@ 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(
|
|
1819
|
+
child,
|
|
1820
|
+
{
|
|
1821
|
+
"data-active": active ? "true" : "false",
|
|
1822
|
+
style: {
|
|
1823
|
+
...styleProps,
|
|
1824
|
+
...child.props.style
|
|
1825
|
+
}
|
|
1826
|
+
},
|
|
1827
|
+
iconEl,
|
|
1828
|
+
child.props.children
|
|
1829
|
+
);
|
|
1830
|
+
}
|
|
1831
|
+
return /* @__PURE__ */ jsxs(Box, { ...dataProps, ...styleProps, children: [
|
|
1832
|
+
iconEl,
|
|
1833
|
+
children
|
|
1834
|
+
] });
|
|
1835
|
+
};
|
|
1836
|
+
SidebarItem.displayName = "Sidebar.Item";
|
|
1837
|
+
var SidebarUserMenu = ({ user, children }) => {
|
|
1838
|
+
const initials = (user.name ?? user.email ?? "").split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() ?? "").join("");
|
|
1839
|
+
return /* @__PURE__ */ jsxs(MenuRoot, { children: [
|
|
1840
|
+
/* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
1841
|
+
Button,
|
|
1842
|
+
{
|
|
1843
|
+
"data-testid": "sidebar-user-menu-trigger",
|
|
1844
|
+
variant: "ghost",
|
|
1845
|
+
size: "md",
|
|
1846
|
+
w: "full",
|
|
1847
|
+
justifyContent: "flex-start",
|
|
1848
|
+
px: "2",
|
|
1849
|
+
children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "full", children: [
|
|
1850
|
+
/* @__PURE__ */ jsx(
|
|
1851
|
+
Flex,
|
|
1852
|
+
{
|
|
1853
|
+
align: "center",
|
|
1854
|
+
justify: "center",
|
|
1855
|
+
w: "32px",
|
|
1856
|
+
h: "32px",
|
|
1857
|
+
borderRadius: "full",
|
|
1858
|
+
bg: "primary.700",
|
|
1859
|
+
color: "white",
|
|
1860
|
+
fontSize: "xs",
|
|
1861
|
+
fontWeight: "semibold",
|
|
1862
|
+
flexShrink: 0,
|
|
1863
|
+
children: initials || "?"
|
|
1864
|
+
}
|
|
1865
|
+
),
|
|
1866
|
+
/* @__PURE__ */ jsxs(Box, { textAlign: "start", flex: "1", minW: "0", children: [
|
|
1867
|
+
/* @__PURE__ */ jsx(
|
|
1868
|
+
Text,
|
|
1869
|
+
{
|
|
1870
|
+
fontSize: "sm",
|
|
1871
|
+
fontWeight: "medium",
|
|
1872
|
+
color: "default",
|
|
1873
|
+
lineClamp: 1,
|
|
1874
|
+
children: user.name ?? user.email
|
|
1875
|
+
}
|
|
1876
|
+
),
|
|
1877
|
+
user.email && user.name && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", lineClamp: 1, children: user.email })
|
|
1878
|
+
] })
|
|
1879
|
+
] })
|
|
1880
|
+
}
|
|
1881
|
+
) }),
|
|
1882
|
+
/* @__PURE__ */ jsx(MenuContent, { portalled: false, children })
|
|
1883
|
+
] });
|
|
1884
|
+
};
|
|
1885
|
+
SidebarUserMenu.displayName = "Sidebar.UserMenu";
|
|
1886
|
+
var SidebarUserMenuItem = ({
|
|
1887
|
+
asChild,
|
|
1888
|
+
onClick,
|
|
1889
|
+
children
|
|
1890
|
+
}) => {
|
|
1891
|
+
if (asChild) {
|
|
1892
|
+
const child = React3.Children.only(children);
|
|
1893
|
+
return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React3.cloneElement(child, {}) });
|
|
1894
|
+
}
|
|
1895
|
+
return /* @__PURE__ */ jsx(
|
|
1896
|
+
MenuItem,
|
|
1897
|
+
{
|
|
1898
|
+
value: typeof children === "string" ? children : "item",
|
|
1899
|
+
onClick,
|
|
1900
|
+
children
|
|
1901
|
+
}
|
|
1902
|
+
);
|
|
1903
|
+
};
|
|
1904
|
+
SidebarUserMenuItem.displayName = "Sidebar.UserMenuItem";
|
|
1905
|
+
var Sidebar = Object.assign(SidebarRoot, {
|
|
1906
|
+
Header: SidebarHeader,
|
|
1907
|
+
Body: SidebarBody,
|
|
1908
|
+
Footer: SidebarFooter,
|
|
1909
|
+
Logo: SidebarLogo,
|
|
1910
|
+
Slot: SidebarSlot,
|
|
1911
|
+
Section: SidebarSection,
|
|
1912
|
+
Item: SidebarItem,
|
|
1913
|
+
UserMenu: SidebarUserMenu,
|
|
1914
|
+
UserMenuItem: SidebarUserMenuItem
|
|
1915
|
+
});
|
|
1916
|
+
var SidebarSection2 = ({
|
|
1521
1917
|
label,
|
|
1522
1918
|
children,
|
|
1523
1919
|
actionIcon,
|
|
@@ -1572,23 +1968,23 @@ var SidebarSection = ({
|
|
|
1572
1968
|
/* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
|
|
1573
1969
|
] });
|
|
1574
1970
|
};
|
|
1575
|
-
|
|
1971
|
+
SidebarSection2.displayName = "SidebarSection";
|
|
1576
1972
|
var [StepperProvider, useStepperContext] = createContext({
|
|
1577
1973
|
name: "StepperContext",
|
|
1578
1974
|
errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
|
|
1579
1975
|
});
|
|
1580
1976
|
function useStepper(props) {
|
|
1581
1977
|
const { step, onChange } = props;
|
|
1582
|
-
const [activeIndex, setIndex] =
|
|
1583
|
-
const stepsRef =
|
|
1584
|
-
const registerStep =
|
|
1978
|
+
const [activeIndex, setIndex] = React3.useState(-1);
|
|
1979
|
+
const stepsRef = React3.useRef([]);
|
|
1980
|
+
const registerStep = React3.useCallback((name) => {
|
|
1585
1981
|
const newSteps = [...stepsRef.current];
|
|
1586
1982
|
if (newSteps.indexOf(name) === -1) {
|
|
1587
1983
|
newSteps.push(name);
|
|
1588
1984
|
}
|
|
1589
1985
|
stepsRef.current = newSteps;
|
|
1590
1986
|
}, []);
|
|
1591
|
-
const unregisterStep =
|
|
1987
|
+
const unregisterStep = React3.useCallback((name) => {
|
|
1592
1988
|
stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
|
|
1593
1989
|
}, []);
|
|
1594
1990
|
const setStep = useCallback((name) => {
|
|
@@ -1603,7 +1999,7 @@ function useStepper(props) {
|
|
|
1603
1999
|
const prevStep = () => {
|
|
1604
2000
|
setIndex(activeIndex - 1);
|
|
1605
2001
|
};
|
|
1606
|
-
|
|
2002
|
+
React3.useEffect(() => {
|
|
1607
2003
|
if (typeof step === "string") {
|
|
1608
2004
|
setStep(step);
|
|
1609
2005
|
} else if (typeof step === "number") {
|
|
@@ -1612,7 +2008,7 @@ function useStepper(props) {
|
|
|
1612
2008
|
setIndex(0);
|
|
1613
2009
|
}
|
|
1614
2010
|
}, [step, activeIndex, setStep]);
|
|
1615
|
-
|
|
2011
|
+
React3.useEffect(() => {
|
|
1616
2012
|
onChange?.(activeIndex);
|
|
1617
2013
|
}, [activeIndex, onChange]);
|
|
1618
2014
|
const context = {
|
|
@@ -1634,7 +2030,7 @@ function useStepper(props) {
|
|
|
1634
2030
|
function useStep(props) {
|
|
1635
2031
|
const { name, isActive, isCompleted } = props;
|
|
1636
2032
|
const { registerStep, unregisterStep, activeStep } = useStepperContext();
|
|
1637
|
-
|
|
2033
|
+
React3.useEffect(() => {
|
|
1638
2034
|
if (!name) {
|
|
1639
2035
|
return;
|
|
1640
2036
|
}
|
|
@@ -1668,12 +2064,12 @@ function useStepperNextButton({
|
|
|
1668
2064
|
};
|
|
1669
2065
|
}
|
|
1670
2066
|
function getChildOfType(children, type) {
|
|
1671
|
-
return
|
|
2067
|
+
return React3.Children.toArray(children).find(
|
|
1672
2068
|
(item) => item.type === type
|
|
1673
2069
|
);
|
|
1674
2070
|
}
|
|
1675
2071
|
function getChildrenOfType(children, type) {
|
|
1676
|
-
return
|
|
2072
|
+
return React3.Children.toArray(children).filter(
|
|
1677
2073
|
(item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
|
|
1678
2074
|
);
|
|
1679
2075
|
}
|
|
@@ -1880,6 +2276,95 @@ var TimelineTitle = Timeline.Title;
|
|
|
1880
2276
|
TimelineTitle.displayName = "TimelineTitle";
|
|
1881
2277
|
var TimelineDescription = Timeline.Description;
|
|
1882
2278
|
TimelineDescription.displayName = "TimelineDescription";
|
|
2279
|
+
var ToolbarRoot = ({ children }) => /* @__PURE__ */ jsx(
|
|
2280
|
+
Flex,
|
|
2281
|
+
{
|
|
2282
|
+
"data-testid": "toolbar",
|
|
2283
|
+
align: "center",
|
|
2284
|
+
gap: "4",
|
|
2285
|
+
px: "4",
|
|
2286
|
+
h: "48px",
|
|
2287
|
+
bg: "bg-subtle",
|
|
2288
|
+
borderBottomWidth: "1px",
|
|
2289
|
+
borderBottomColor: "border",
|
|
2290
|
+
children
|
|
2291
|
+
}
|
|
2292
|
+
);
|
|
2293
|
+
ToolbarRoot.displayName = "Toolbar";
|
|
2294
|
+
var ToolbarSearch = ({
|
|
2295
|
+
placeholder,
|
|
2296
|
+
value,
|
|
2297
|
+
onChange
|
|
2298
|
+
}) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "260px", position: "relative", children: [
|
|
2299
|
+
/* @__PURE__ */ jsx(Box, { position: "absolute", left: "2", color: "muted", pointerEvents: "none", children: /* @__PURE__ */ jsx(Search, { size: 14 }) }),
|
|
2300
|
+
/* @__PURE__ */ jsx(
|
|
2301
|
+
"input",
|
|
2302
|
+
{
|
|
2303
|
+
type: "text",
|
|
2304
|
+
placeholder,
|
|
2305
|
+
value,
|
|
2306
|
+
onChange: (e) => onChange(e.target.value),
|
|
2307
|
+
style: {
|
|
2308
|
+
height: "32px",
|
|
2309
|
+
paddingLeft: "2rem",
|
|
2310
|
+
paddingRight: "0.5rem",
|
|
2311
|
+
width: "100%",
|
|
2312
|
+
borderWidth: "1px",
|
|
2313
|
+
borderStyle: "solid",
|
|
2314
|
+
borderRadius: "var(--chakra-radii-md)",
|
|
2315
|
+
fontSize: "var(--chakra-font-sizes-sm)",
|
|
2316
|
+
background: "var(--chakra-colors-bg-surface, white)",
|
|
2317
|
+
outline: "none"
|
|
2318
|
+
}
|
|
2319
|
+
}
|
|
2320
|
+
)
|
|
2321
|
+
] });
|
|
2322
|
+
ToolbarSearch.displayName = "Toolbar.Search";
|
|
2323
|
+
var ToolbarFilters = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", children });
|
|
2324
|
+
ToolbarFilters.displayName = "Toolbar.Filters";
|
|
2325
|
+
var ToolbarFilterChip = ({
|
|
2326
|
+
icon,
|
|
2327
|
+
active,
|
|
2328
|
+
onClick,
|
|
2329
|
+
children
|
|
2330
|
+
}) => /* @__PURE__ */ jsxs(
|
|
2331
|
+
"button",
|
|
2332
|
+
{
|
|
2333
|
+
type: "button",
|
|
2334
|
+
"data-testid": "filter-chip",
|
|
2335
|
+
"data-active": active ? "true" : "false",
|
|
2336
|
+
onClick,
|
|
2337
|
+
style: {
|
|
2338
|
+
display: "inline-flex",
|
|
2339
|
+
alignItems: "center",
|
|
2340
|
+
gap: "4px",
|
|
2341
|
+
padding: "0 10px",
|
|
2342
|
+
height: "28px",
|
|
2343
|
+
fontSize: "var(--chakra-font-sizes-xs)",
|
|
2344
|
+
fontWeight: "var(--chakra-font-weights-medium)",
|
|
2345
|
+
borderWidth: "1px",
|
|
2346
|
+
borderStyle: "solid",
|
|
2347
|
+
borderRadius: "var(--chakra-radii-md)",
|
|
2348
|
+
cursor: "pointer"
|
|
2349
|
+
},
|
|
2350
|
+
children: [
|
|
2351
|
+
icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", children: icon }),
|
|
2352
|
+
children
|
|
2353
|
+
]
|
|
2354
|
+
}
|
|
2355
|
+
);
|
|
2356
|
+
ToolbarFilterChip.displayName = "Toolbar.FilterChip";
|
|
2357
|
+
var ToolbarRight = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", ml: "auto", children });
|
|
2358
|
+
ToolbarRight.displayName = "Toolbar.Right";
|
|
2359
|
+
var ToolbarCount = ({ children }) => /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", children });
|
|
2360
|
+
ToolbarCount.displayName = "Toolbar.Count";
|
|
2361
|
+
var Toolbar = Object.assign(ToolbarRoot, {
|
|
2362
|
+
Search: ToolbarSearch,
|
|
2363
|
+
Filters: ToolbarFilters,
|
|
2364
|
+
FilterChip: ToolbarFilterChip,
|
|
2365
|
+
Right: ToolbarRight,
|
|
2366
|
+
Count: ToolbarCount
|
|
2367
|
+
});
|
|
1883
2368
|
var TreeViewRoot = TreeView.Root;
|
|
1884
2369
|
TreeViewRoot.displayName = "TreeViewRoot";
|
|
1885
2370
|
var TreeViewTree = TreeView.Tree;
|
|
@@ -2068,6 +2553,6 @@ var Widget = ({
|
|
|
2068
2553
|
};
|
|
2069
2554
|
Widget.displayName = "Widget";
|
|
2070
2555
|
|
|
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 };
|
|
2556
|
+
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
2557
|
//# sourceMappingURL=index.js.map
|
|
2073
2558
|
//# sourceMappingURL=index.js.map
|