@knkcs/anker 1.0.0 → 1.2.0

package/dist/components/index.js

@@ -1,19 +1,119 @@
 import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
 import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.js';
-import { Tooltip, MenuRoot, MenuTrigger, MenuContent, MenuItem, Table } from '../chunk-2QFOWHTU.js';
+import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Table } from '../chunk-2QFOWHTU.js';
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
 import { Button, IconButton } from '../chunk-SJ6YXNZW.js';
-import { Box, Flex, HStack, Text, Heading, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
-import { X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
+import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { PanelRightOpen, PanelRightClose, Search, X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { createContext, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
-import React2, { createContext as createContext$1, Children, useState, useMemo, useRef, useEffect, useCallback, useContext } from 'react';
+import React3, { createContext as createContext$1, useState, useEffect, Children, useMemo, useRef, useCallback, useContext } from 'react';
 import dayjs from 'dayjs';
 import { Link as Link$1 } from 'react-router-dom';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
+var SIZE_TO_WIDTH = {
+  md: "440px",
+  lg: "480px"
+};
+var DOT_PATTERN_BG = "radial-gradient(var(--chakra-colors-primary-200) 1px, transparent 1px)";
+var AuthCard = ({
+  logo,
+  topBarRight,
+  hideTopBar = false,
+  hideBackground = false,
+  eyebrow,
+  title,
+  subtitle,
+  size = "md",
+  footer,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Box, { "data-testid": "auth-card", "data-size": size, minH: "100vh", bg: "bg-canvas", children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": "auth-card-canvas",
+      "data-background": hideBackground ? "hidden" : "visible",
+      minH: "100vh",
+      bgImage: hideBackground ? void 0 : DOT_PATTERN_BG,
+      bgSize: "24px 24px",
+      children: [
+        !hideTopBar && /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            justify: "space-between",
+            px: "8",
+            py: "4",
+            bg: "bg-surface/85",
+            backdropFilter: "blur(4px)",
+            borderBottom: "1px solid",
+            borderColor: "border",
+            children: [
+              /* @__PURE__ */ jsx(Box, { children: logo }),
+              /* @__PURE__ */ jsx(Flex, { gap: "4", fontSize: "xs", color: "muted", children: topBarRight })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Flex, { justify: "center", pt: "16", px: "4", children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            w: "full",
+            maxW: SIZE_TO_WIDTH[size],
+            bg: "bg-surface",
+            borderRadius: "lg",
+            shadow: "md",
+            p: "8",
+            children: [
+              eyebrow && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  textStyle: "overline",
+                  color: "muted",
+                  textAlign: "center",
+                  mb: "2",
+                  children: eyebrow
+                }
+              ),
+              title && /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  as: "h3",
+                  size: "2xl",
+                  fontWeight: "semibold",
+                  color: "default",
+                  textAlign: "center",
+                  mb: "2",
+                  letterSpacing: "-0.02em",
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx(Text, { color: "muted", textAlign: "center", fontSize: "sm", mb: "6", children: subtitle }),
+              children,
+              footer && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  "data-testid": "auth-card-footer",
+                  mt: "6",
+                  pt: "4",
+                  borderTop: "1px solid",
+                  borderColor: "border",
+                  textAlign: "center",
+                  fontSize: "xs",
+                  color: "emphasized",
+                  children: footer
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+AuthCard.displayName = "AuthCard";
 var BulkAction = ({
   label,
   icon,
@@ -389,6 +489,118 @@ function ChipPickerInner(props) {
 }
 var ChipPicker = ChipPickerInner;
 ChipPicker.displayName = "ChipPicker";
+var COLLAPSED_WIDTH = "44px";
+var EXPANDED_WIDTH = "360px";
+var COLLAPSE_BREAKPOINT = 1440;
+function getInitialCollapsed(storageKey) {
+  if (typeof window === "undefined") return false;
+  if (storageKey) {
+    const stored = window.localStorage.getItem(storageKey);
+    if (stored === "true") return true;
+    if (stored === "false") return false;
+  }
+  return window.innerWidth < COLLAPSE_BREAKPOINT;
+}
+var ContextRailRoot = ({ storageKey, children }) => {
+  const [collapsed, setCollapsed] = useState(
+    () => getInitialCollapsed(storageKey)
+  );
+  useEffect(() => {
+    if (storageKey) {
+      window.localStorage.setItem(storageKey, String(collapsed));
+    }
+  }, [collapsed, storageKey]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "context-rail",
+      "data-collapsed": collapsed ? "true" : "false",
+      w: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
+      minH: "100vh",
+      bg: "bg-surface",
+      borderLeftWidth: "1px",
+      borderLeftColor: "border",
+      transition: "width 250ms ease-out",
+      overflow: "hidden",
+      position: "relative",
+      children: collapsed ? /* @__PURE__ */ jsx(Flex, { direction: "column", align: "center", pt: "3", gap: "3", children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "data-testid": "context-rail-toggle",
+          "aria-label": "Expand context rail",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setCollapsed(false),
+          children: /* @__PURE__ */ jsx(PanelRightOpen, { size: 16 })
+        }
+      ) }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", h: "full", children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "flex-end", px: "3", pt: "3", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-testid": "context-rail-toggle",
+            "aria-label": "Collapse context rail",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setCollapsed(true),
+            children: /* @__PURE__ */ jsx(PanelRightClose, { size: 16 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", px: "4", pb: "4", children })
+      ] })
+    }
+  );
+};
+ContextRailRoot.displayName = "ContextRail";
+var ContextRailHeader = ({
+  eyebrow,
+  title,
+  onClose: _onClose
+}) => /* @__PURE__ */ jsxs(Box, { mb: "4", children: [
+  eyebrow && /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: "2xs",
+      fontWeight: "semibold",
+      letterSpacing: "wider",
+      textTransform: "uppercase",
+      color: "muted",
+      mb: "1",
+      children: eyebrow
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Heading,
+    {
+      as: "h2",
+      fontSize: "lg",
+      fontWeight: "semibold",
+      color: "default",
+      letterSpacing: "-0.01em",
+      children: title
+    }
+  )
+] });
+ContextRailHeader.displayName = "ContextRail.Header";
+var ContextRailSection = ({
+  id,
+  icon,
+  label,
+  children
+}) => /* @__PURE__ */ jsxs(Box, { mb: "4", "data-section-id": id, children: [
+  /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mb: "2", children: [
+    icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", color: "muted", children: icon }),
+    /* @__PURE__ */ jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: "semibold", color: "default", children: label })
+  ] }),
+  /* @__PURE__ */ jsx(Box, { children })
+] });
+ContextRailSection.displayName = "ContextRail.Section";
+var ContextRailFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "4", pt: "4", borderTopWidth: "1px", borderTopColor: "border-muted", children });
+ContextRailFooter.displayName = "ContextRail.Footer";
+var ContextRail = Object.assign(ContextRailRoot, {
+  Header: ContextRailHeader,
+  Section: ContextRailSection,
+  Footer: ContextRailFooter
+});
 var ActionCell = ({ actions }) => {
   return /* @__PURE__ */ jsx(HStack, { gap: 1, children: actions.map((action) => /* @__PURE__ */ jsx(Tooltip, { content: action.label, children: action.href ? /* @__PURE__ */ jsx(
     IconButton,
@@ -988,7 +1200,7 @@ var FactBox = (props) => {
     expandLabel = "Expand",
     ...rest
   } = props;
-  const [show, setShow] = React2.useState(true);
+  const [show, setShow] = React3.useState(true);
   const handleToggle = () => {
     setShow(!show);
   };
@@ -1332,6 +1544,105 @@ var Modal = ({
   );
 };
 Modal.displayName = "Modal";
+var PageHeader = ({
+  breadcrumbs,
+  title,
+  subtitle,
+  actions,
+  eyebrow
+}) => {
+  const hasCrumbs = !!breadcrumbs && breadcrumbs.length > 0;
+  const hasActions = !!actions;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      py: "4",
+      px: "8",
+      borderBottomWidth: "1px",
+      borderBottomColor: "border",
+      bg: "bg-surface",
+      children: [
+        eyebrow && /* @__PURE__ */ jsx(
+          Text,
+          {
+            fontSize: "2xs",
+            fontWeight: "semibold",
+            letterSpacing: "wider",
+            textTransform: "uppercase",
+            color: "muted",
+            mb: "1",
+            children: eyebrow
+          }
+        ),
+        hasCrumbs && /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "data-testid": "page-header-breadcrumbs",
+            align: "center",
+            gap: "1",
+            mb: "1",
+            fontSize: "xs",
+            color: "muted",
+            children: breadcrumbs.map((c, idx) => {
+              const isLast = idx === breadcrumbs.length - 1;
+              const sep = !isLast ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u203A " }) : null;
+              const node = c.to ? /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: c.to,
+                  color: "muted",
+                  _hover: { color: "default" },
+                  children: c.label
+                },
+                `crumb-link-${c.label}`
+              ) : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "span",
+                  color: isLast ? "default" : "muted",
+                  fontWeight: isLast ? "medium" : "normal",
+                  children: c.label
+                },
+                `crumb-text-${c.label}`
+              );
+              return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+                node,
+                sep
+              ] }, `crumb-wrap-${c.label}`);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", gap: "4", children: [
+          /* @__PURE__ */ jsxs(Box, { flex: "1", minW: "0", children: [
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                as: "h1",
+                fontSize: "2xl",
+                fontWeight: "semibold",
+                color: "default",
+                letterSpacing: "-0.02em",
+                children: title
+              }
+            ),
+            subtitle && /* @__PURE__ */ jsx(
+              Text,
+              {
+                "data-testid": "page-header-subtitle",
+                fontSize: "sm",
+                color: "muted",
+                mt: "1",
+                children: subtitle
+              }
+            )
+          ] }),
+          hasActions && /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", flexShrink: 0, children: actions })
+        ] })
+      ]
+    }
+  );
+};
+PageHeader.displayName = "PageHeader";
 var SelectableCardThumbnail = ({
   height = "160px",
   children
@@ -1417,7 +1728,187 @@ SelectableCard.displayName = "SelectableCard";
 SelectableCard.Thumbnail = SelectableCardThumbnail;
 SelectableCard.Body = SelectableCardBody;
 SelectableCard.Footer = SelectableCardFooter;
-var SidebarSection = ({
+var SidebarRoot = ({ children }) => /* @__PURE__ */ jsx(
+  Flex,
+  {
+    "data-testid": "sidebar",
+    direction: "column",
+    w: "240px",
+    minH: "100vh",
+    bg: "bg-canvas",
+    borderRightWidth: "1px",
+    borderRightColor: "border",
+    children
+  }
+);
+SidebarRoot.displayName = "Sidebar";
+var SidebarHeader = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "4", borderBottomWidth: "1px", borderBottomColor: "border-muted", children });
+SidebarHeader.displayName = "Sidebar.Header";
+var SidebarBody = ({ children }) => /* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", py: "3", children });
+SidebarBody.displayName = "Sidebar.Body";
+var SidebarFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "3", borderTopWidth: "1px", borderTopColor: "border-muted", children });
+SidebarFooter.displayName = "Sidebar.Footer";
+var SidebarLogo = ({ wordmark, subtitle }) => /* @__PURE__ */ jsxs(Box, { mb: subtitle ? "3" : "0", children: [
+  /* @__PURE__ */ jsx(
+    Heading,
+    {
+      as: "span",
+      fontSize: "lg",
+      fontWeight: "bold",
+      color: "primary.700",
+      letterSpacing: "tight",
+      children: wordmark
+    }
+  ),
+  subtitle && /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: "2xs",
+      fontWeight: "semibold",
+      letterSpacing: "wider",
+      textTransform: "uppercase",
+      color: "muted",
+      mt: "0.5",
+      children: subtitle
+    }
+  )
+] });
+SidebarLogo.displayName = "Sidebar.Logo";
+var SidebarSlot = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "3", children });
+SidebarSlot.displayName = "Sidebar.Slot";
+var SidebarSection = ({ label, children }) => /* @__PURE__ */ jsxs(Box, { mb: "4", px: "3", children: [
+  /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: "2xs",
+      fontWeight: "semibold",
+      letterSpacing: "wider",
+      textTransform: "uppercase",
+      color: "muted",
+      px: "2",
+      mb: "1",
+      children: label
+    }
+  ),
+  /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "0.5", children })
+] });
+SidebarSection.displayName = "Sidebar.Section";
+var SidebarItem = ({ icon, children, asChild, active }) => {
+  const dataProps = {
+    "data-testid": "sidebar-item",
+    "data-active": active ? "true" : "false"
+  };
+  const styleProps = {
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    px: "3",
+    py: "2",
+    borderRadius: "md",
+    fontSize: "sm",
+    fontWeight: "medium",
+    color: active ? "primary.700" : "default",
+    bg: active ? "primary.50" : "transparent",
+    position: "relative",
+    textDecoration: "none"
+  };
+  const iconEl = icon ? /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", children: icon }) : null;
+  if (asChild) {
+    const child = React3.Children.only(children);
+    return React3.cloneElement(child, {
+      "data-active": active ? "true" : "false",
+      style: {
+        ...styleProps,
+        ...child.props.style
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxs(Box, { ...dataProps, ...styleProps, children: [
+    iconEl,
+    children
+  ] });
+};
+SidebarItem.displayName = "Sidebar.Item";
+var SidebarUserMenu = ({ user, children }) => {
+  const initials = (user.name ?? user.email ?? "").split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() ?? "").join("");
+  return /* @__PURE__ */ jsxs(MenuRoot, { children: [
+    /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": "sidebar-user-menu-trigger",
+        variant: "ghost",
+        size: "md",
+        w: "full",
+        justifyContent: "flex-start",
+        px: "2",
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "full", children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              align: "center",
+              justify: "center",
+              w: "32px",
+              h: "32px",
+              borderRadius: "full",
+              bg: "primary.700",
+              color: "white",
+              fontSize: "xs",
+              fontWeight: "semibold",
+              flexShrink: 0,
+              children: initials || "?"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { textAlign: "start", flex: "1", minW: "0", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fontSize: "sm",
+                fontWeight: "medium",
+                color: "default",
+                lineClamp: 1,
+                children: user.name ?? user.email
+              }
+            ),
+            user.email && user.name && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", lineClamp: 1, children: user.email })
+          ] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MenuContent, { portalled: false, children })
+  ] });
+};
+SidebarUserMenu.displayName = "Sidebar.UserMenu";
+var SidebarUserMenuItem = ({
+  asChild,
+  onClick,
+  children
+}) => {
+  if (asChild) {
+    const child = React3.Children.only(children);
+    return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React3.cloneElement(child, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      value: typeof children === "string" ? children : "item",
+      onClick,
+      children
+    }
+  );
+};
+SidebarUserMenuItem.displayName = "Sidebar.UserMenuItem";
+var Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Body: SidebarBody,
+  Footer: SidebarFooter,
+  Logo: SidebarLogo,
+  Slot: SidebarSlot,
+  Section: SidebarSection,
+  Item: SidebarItem,
+  UserMenu: SidebarUserMenu,
+  UserMenuItem: SidebarUserMenuItem
+});
+var SidebarSection2 = ({
   label,
   children,
   actionIcon,
@@ -1472,23 +1963,23 @@ var SidebarSection = ({
     /* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
   ] });
 };
-SidebarSection.displayName = "SidebarSection";
+SidebarSection2.displayName = "SidebarSection";
 var [StepperProvider, useStepperContext] = createContext({
   name: "StepperContext",
   errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
 });
 function useStepper(props) {
   const { step, onChange } = props;
-  const [activeIndex, setIndex] = React2.useState(-1);
-  const stepsRef = React2.useRef([]);
-  const registerStep = React2.useCallback((name) => {
+  const [activeIndex, setIndex] = React3.useState(-1);
+  const stepsRef = React3.useRef([]);
+  const registerStep = React3.useCallback((name) => {
     const newSteps = [...stepsRef.current];
     if (newSteps.indexOf(name) === -1) {
       newSteps.push(name);
     }
     stepsRef.current = newSteps;
   }, []);
-  const unregisterStep = React2.useCallback((name) => {
+  const unregisterStep = React3.useCallback((name) => {
     stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
   }, []);
   const setStep = useCallback((name) => {
@@ -1503,7 +1994,7 @@ function useStepper(props) {
   const prevStep = () => {
     setIndex(activeIndex - 1);
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (typeof step === "string") {
       setStep(step);
     } else if (typeof step === "number") {
@@ -1512,7 +2003,7 @@ function useStepper(props) {
       setIndex(0);
     }
   }, [step, activeIndex, setStep]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     onChange?.(activeIndex);
   }, [activeIndex, onChange]);
   const context = {
@@ -1534,7 +2025,7 @@ function useStepper(props) {
 function useStep(props) {
   const { name, isActive, isCompleted } = props;
   const { registerStep, unregisterStep, activeStep } = useStepperContext();
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!name) {
       return;
     }
@@ -1568,12 +2059,12 @@ function useStepperNextButton({
   };
 }
 function getChildOfType(children, type) {
-  return React2.Children.toArray(children).find(
+  return React3.Children.toArray(children).find(
     (item) => item.type === type
   );
 }
 function getChildrenOfType(children, type) {
-  return React2.Children.toArray(children).filter(
+  return React3.Children.toArray(children).filter(
     (item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
   );
 }
@@ -1780,6 +2271,95 @@ var TimelineTitle = Timeline.Title;
 TimelineTitle.displayName = "TimelineTitle";
 var TimelineDescription = Timeline.Description;
 TimelineDescription.displayName = "TimelineDescription";
+var ToolbarRoot = ({ children }) => /* @__PURE__ */ jsx(
+  Flex,
+  {
+    "data-testid": "toolbar",
+    align: "center",
+    gap: "4",
+    px: "4",
+    h: "48px",
+    bg: "bg-subtle",
+    borderBottomWidth: "1px",
+    borderBottomColor: "border",
+    children
+  }
+);
+ToolbarRoot.displayName = "Toolbar";
+var ToolbarSearch = ({
+  placeholder,
+  value,
+  onChange
+}) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "260px", position: "relative", children: [
+  /* @__PURE__ */ jsx(Box, { position: "absolute", left: "2", color: "muted", pointerEvents: "none", children: /* @__PURE__ */ jsx(Search, { size: 14 }) }),
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        height: "32px",
+        paddingLeft: "2rem",
+        paddingRight: "0.5rem",
+        width: "100%",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderRadius: "var(--chakra-radii-md)",
+        fontSize: "var(--chakra-font-sizes-sm)",
+        background: "var(--chakra-colors-bg-surface, white)",
+        outline: "none"
+      }
+    }
+  )
+] });
+ToolbarSearch.displayName = "Toolbar.Search";
+var ToolbarFilters = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", children });
+ToolbarFilters.displayName = "Toolbar.Filters";
+var ToolbarFilterChip = ({
+  icon,
+  active,
+  onClick,
+  children
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    "data-testid": "filter-chip",
+    "data-active": active ? "true" : "false",
+    onClick,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "0 10px",
+      height: "28px",
+      fontSize: "var(--chakra-font-sizes-xs)",
+      fontWeight: "var(--chakra-font-weights-medium)",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderRadius: "var(--chakra-radii-md)",
+      cursor: "pointer"
+    },
+    children: [
+      icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", children: icon }),
+      children
+    ]
+  }
+);
+ToolbarFilterChip.displayName = "Toolbar.FilterChip";
+var ToolbarRight = ({ children }) => /* @__PURE__ */ jsx(Flex, { align: "center", gap: "2", ml: "auto", children });
+ToolbarRight.displayName = "Toolbar.Right";
+var ToolbarCount = ({ children }) => /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", children });
+ToolbarCount.displayName = "Toolbar.Count";
+var Toolbar = Object.assign(ToolbarRoot, {
+  Search: ToolbarSearch,
+  Filters: ToolbarFilters,
+  FilterChip: ToolbarFilterChip,
+  Right: ToolbarRight,
+  Count: ToolbarCount
+});
 var TreeViewRoot = TreeView.Root;
 TreeViewRoot.displayName = "TreeViewRoot";
 var TreeViewTree = TreeView.Tree;
@@ -1968,6 +2548,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-export { ActionCell, 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 };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map