@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.
@@ -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,187 @@ 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(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
- SidebarSection.displayName = "SidebarSection";
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] = React2.useState(-1);
1583
- const stepsRef = React2.useRef([]);
1584
- const registerStep = React2.useCallback((name) => {
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 = React2.useCallback((name) => {
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
- React2.useEffect(() => {
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
- React2.useEffect(() => {
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
- React2.useEffect(() => {
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 React2.Children.toArray(children).find(
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 React2.Children.toArray(children).filter(
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