@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.
@@ -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 { Tooltip, MenuRoot, MenuTrigger, MenuContent, MenuItem, Table } from '../chunk-2QFOWHTU.js';
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 React2, { createContext as createContext$1, Children, useState, useMemo, useRef, useEffect, useCallback, useContext } from 'react';
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] = React2.useState(true);
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 SidebarSection = ({
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
- SidebarSection.displayName = "SidebarSection";
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] = React2.useState(-1);
1583
- const stepsRef = React2.useRef([]);
1584
- const registerStep = React2.useCallback((name) => {
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 = React2.useCallback((name) => {
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
- React2.useEffect(() => {
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
- React2.useEffect(() => {
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
- React2.useEffect(() => {
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 React2.Children.toArray(children).find(
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 React2.Children.toArray(children).filter(
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