@knkcs/anker 1.6.0 → 1.8.0

package/dist/atoms/index.d.ts

@@ -12,14 +12,14 @@ type ButtonProps = Omit<ButtonProps$1, "variant"> & {
     variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain" | "primary" | "secondary" | "link" | "link-gray" | undefined;
 };
 declare const Button: {
-    ({ ref, ...props }: ButtonProps & {
+    ({ ref, colorPalette, ...props }: ButtonProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 declare const IconButton: {
-    ({ ref, ...props }: IconButtonProps & {
+    ({ ref, colorPalette, ...props }: IconButtonProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/atoms/index.js

@@ -7,8 +7,8 @@ import { Textarea } from '../chunk-NFZMG6ZL.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
 export { text_input_default as TextInput } from '../chunk-OU6H3KU4.js';
 import { Spinner } from '../chunk-5YDCDC4B.js';
-import { IconButton, Button } from '../chunk-SJ6YXNZW.js';
-export { Button, IconButton } from '../chunk-SJ6YXNZW.js';
+import { IconButton, Button } from '../chunk-JS7ZEZV3.js';
+export { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 import { Text, Box, Stack as Stack$1, Flex, HStack, Heading } from '../chunk-G4QMIXLC.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { DataList as DataList$1, Icon, Circle, useCheckboxGroup, Stack, Box as Box$1, Clipboard, IconButton as IconButton$1, Input, chakra, ButtonGroup, Button as Button$1, Square } from '@chakra-ui/react';

package/dist/{chunk-SJ6YXNZW.js → chunk-JS7ZEZV3.js}

@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 // src/atoms/button/button.tsx
 var Button = ({
   ref,
+  colorPalette = "primary",
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
@@ -11,6 +12,7 @@ var Button = ({
     {
       size: "md",
       variant: "secondary",
+      colorPalette,
       ref,
       ...props
     }
@@ -19,12 +21,22 @@ var Button = ({
 Button.displayName = "Button";
 var IconButton = ({
   ref,
+  colorPalette = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(IconButton$1, { size: "md", variant: "ghost", ref, ...props });
+  return /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      size: "md",
+      variant: "ghost",
+      colorPalette,
+      ref,
+      ...props
+    }
+  );
 };
 IconButton.displayName = "IconButton";
 
 export { Button, IconButton };
-//# sourceMappingURL=chunk-SJ6YXNZW.js.map
-//# sourceMappingURL=chunk-SJ6YXNZW.js.map
+//# sourceMappingURL=chunk-JS7ZEZV3.js.map
+//# sourceMappingURL=chunk-JS7ZEZV3.js.map

package/dist/chunk-JS7ZEZV3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/button/button.tsx","../src/atoms/button/icon-button.tsx"],"names":["ChakraButton","jsx","ChakraIconButton"],"mappings":";;;;AAsBO,IAAM,SAAS,CAAC;AAAA,EACtB,GAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,GAAG;AACJ,CAAA,KAA4D;AAC3D,EAAA,uBACC,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,YAAA;AAAA,MACA,GAAA;AAAA,MACC,GAAI;AAAA;AAAA,GACN;AAEF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AC9Bd,IAAM,aAAa,CAAC;AAAA,EAC1B,GAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,GAAG;AACJ,CAAA,KAAgE;AAC/D,EAAA,uBACCC,GAAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,YAAA;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACL;AAEF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-JS7ZEZV3.js","sourcesContent":["import {\n\tButton as ChakraButton,\n\ttype ButtonProps as ChakraButtonProps,\n} from \"@chakra-ui/react\";\n\n// Extend ButtonProps to include custom variants defined in the @knkcs/anker\n// theme (primary, secondary, link-gray) that are not in Chakra's default types.\nexport type ButtonProps = Omit<ChakraButtonProps, \"variant\"> & {\n\tvariant?:\n\t\t| \"solid\"\n\t\t| \"subtle\"\n\t\t| \"surface\"\n\t\t| \"outline\"\n\t\t| \"ghost\"\n\t\t| \"plain\"\n\t\t| \"primary\"\n\t\t| \"secondary\"\n\t\t| \"link\"\n\t\t| \"link-gray\"\n\t\t| undefined;\n};\n\nexport const Button = ({\n\tref,\n\tcolorPalette = \"primary\",\n\t...props\n}: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n\treturn (\n\t\t<ChakraButton\n\t\t\tsize=\"md\"\n\t\t\tvariant={\"secondary\" as ChakraButtonProps[\"variant\"]}\n\t\t\tcolorPalette={colorPalette}\n\t\t\tref={ref}\n\t\t\t{...(props as ChakraButtonProps)}\n\t\t/>\n\t);\n};\nButton.displayName = \"Button\";\n","import {\n\tIconButton as ChakraIconButton,\n\ttype IconButtonProps,\n} from \"@chakra-ui/react\";\n\nexport type { IconButtonProps };\n\nexport const IconButton = ({\n\tref,\n\tcolorPalette = \"primary\",\n\t...props\n}: IconButtonProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n\treturn (\n\t\t<ChakraIconButton\n\t\t\tsize=\"md\"\n\t\t\tvariant=\"ghost\"\n\t\t\tcolorPalette={colorPalette}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nIconButton.displayName = \"IconButton\";\n"]}

package/dist/components/index.d.ts

@@ -575,7 +575,14 @@ declare const SelectableCard: {
     };
 };
 
+interface SidebarContextValue {
+    collapsed: boolean;
+    toggle: () => void;
+}
+declare function useSidebarContext(): SidebarContextValue;
 interface SidebarProps {
+    storageKey?: string;
+    defaultCollapsed?: boolean;
     children: React__default.ReactNode;
 }
 interface SidebarLogoProps {
@@ -591,6 +598,7 @@ interface SidebarItemProps {
     children: React__default.ReactNode;
     asChild?: boolean;
     active?: boolean;
+    label?: string;
 }
 interface SidebarUserMenuProps {
     user: {
@@ -605,7 +613,7 @@ interface SidebarUserMenuItemProps {
     children: React__default.ReactNode;
 }
 declare const Sidebar: {
-    ({ children }: SidebarProps): react_jsx_runtime.JSX.Element;
+    ({ storageKey, defaultCollapsed, children, }: SidebarProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 } & {
     Header: {
@@ -641,7 +649,7 @@ declare const Sidebar: {
         displayName: string;
     };
     Item: {
-        ({ icon, children, asChild, active }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+        ({ icon, children, asChild, active, label, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     UserMenu: {
@@ -935,4 +943,4 @@ interface WidgetProps {
 }
 declare const Widget: React__default.FC<WidgetProps>;
 
-export { ActionCell, type ActionCellAction, type ActionCellProps, AuthCard, type AuthCardProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, InlineCreatableList, type InlineCreatableListProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, PageHeader, type PageHeaderBreadcrumb, type PageHeaderProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, pluralize, truncateText, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, type ActionCellAction, type ActionCellProps, AuthCard, type AuthCardProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, InlineCreatableList, type InlineCreatableListProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, PageHeader, type PageHeaderBreadcrumb, type PageHeaderProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };

package/dist/components/index.js

@@ -3,13 +3,13 @@ import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.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 { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 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, ChevronRight, Search, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
+import { PanelRightOpen, PanelRightClose, ChevronRight, PanelLeftOpen, PanelLeftClose, Search, X, Ellipsis, Plus, ChevronLeft, 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 React3, { createContext as createContext$1, useState, useEffect, Children, useMemo, useRef, useCallback, useContext } from 'react';
+import React3, { createContext as createContext$1, useState, useEffect, useMemo, Children, 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';
@@ -1035,6 +1035,9 @@ function DataTableInner(props) {
   const selectionColumn = useMemo(
     () => ({
       id: "_select",
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
       header: ({ table: table2 }) => /* @__PURE__ */ jsxs(
         Checkbox.Root,
         {
@@ -1092,6 +1095,7 @@ function DataTableInner(props) {
       /* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const sorted = header.column.getIsSorted();
+        const isSelectCol = header.column.id === "_select";
         return /* @__PURE__ */ jsx(
           Table.ColumnHeader,
           {
@@ -1107,6 +1111,7 @@ function DataTableInner(props) {
                 header.column.getToggleSortingHandler()?.(e);
               }
             } : void 0,
+            style: isSelectCol ? { width: header.column.getSize() } : void 0,
             children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
               header.isPlaceholder ? null : flexRender(
                 header.column.columnDef.header,
@@ -1136,10 +1141,17 @@ function DataTableInner(props) {
                 onRowClick(row.original);
               }
             } : void 0,
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(
-              cell.column.columnDef.cell,
-              cell.getContext()
-            ) }, cell.id))
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+              Table.Cell,
+              {
+                style: cell.column.id === "_select" ? { width: cell.column.getSize() } : void 0,
+                children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            ))
           },
           row.id
         )),
@@ -1786,19 +1798,78 @@ SelectableCard.displayName = "SelectableCard";
 SelectableCard.Thumbnail = SelectableCardThumbnail;
 SelectableCard.Body = SelectableCardBody;
 SelectableCard.Footer = SelectableCardFooter;
-var SidebarRoot = ({ children }) => /* @__PURE__ */ jsx(
-  Flex,
-  {
-    "data-testid": "sidebar",
-    direction: "column",
-    w: "240px",
-    minH: "100vh",
-    bg: "bg-canvas",
-    borderRightWidth: "1px",
-    borderRightColor: "border",
-    children
+var COLLAPSED_WIDTH2 = "64px";
+var EXPANDED_WIDTH2 = "240px";
+var COLLAPSE_BREAKPOINT2 = 1440;
+var SidebarContext = React3.createContext(null);
+function useSidebarContext() {
+  const ctx = React3.useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error("useSidebarContext must be used inside <Sidebar>");
   }
-);
+  return ctx;
+}
+function getInitialCollapsed2(storageKey, defaultCollapsed) {
+  if (typeof window === "undefined") return defaultCollapsed ?? false;
+  if (storageKey) {
+    const stored = window.localStorage.getItem(storageKey);
+    if (stored === "true") return true;
+    if (stored === "false") return false;
+  }
+  if (defaultCollapsed !== void 0) return defaultCollapsed;
+  return window.innerWidth < COLLAPSE_BREAKPOINT2;
+}
+var SidebarRoot = ({
+  storageKey,
+  defaultCollapsed,
+  children
+}) => {
+  const [collapsed, setCollapsed] = useState(
+    () => getInitialCollapsed2(storageKey, defaultCollapsed)
+  );
+  useEffect(() => {
+    if (storageKey) {
+      window.localStorage.setItem(storageKey, String(collapsed));
+    }
+  }, [collapsed, storageKey]);
+  const ctx = useMemo(
+    () => ({
+      collapsed,
+      toggle: () => setCollapsed((c) => !c)
+    }),
+    [collapsed]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      "data-testid": "sidebar",
+      "data-collapsed": collapsed ? "true" : "false",
+      direction: "column",
+      w: collapsed ? COLLAPSED_WIDTH2 : EXPANDED_WIDTH2,
+      minH: "100vh",
+      bg: "bg-canvas",
+      borderRightWidth: "1px",
+      borderRightColor: "border",
+      transition: "width 250ms ease-out",
+      overflow: "hidden",
+      position: "relative",
+      children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "flex-end", px: "2", pt: "2", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-testid": "sidebar-toggle",
+            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setCollapsed((c) => !c),
+            children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { size: 16 }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 16 })
+          }
+        ) }),
+        children
+      ]
+    }
+  ) });
+};
 SidebarRoot.displayName = "Sidebar";
 var SidebarHeader = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "4", borderBottomWidth: "1px", borderBottomColor: "border", children });
 SidebarHeader.displayName = "Sidebar.Header";
@@ -1806,55 +1877,82 @@ var SidebarBody = ({ children }) => /* @__PURE__ */ jsx(Box, { flex: "1", overfl
 SidebarBody.displayName = "Sidebar.Body";
 var SidebarFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "3", borderTopWidth: "1px", borderTopColor: "border", 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
-    }
-  )
-] });
+var SidebarLogo = ({ wordmark, subtitle }) => {
+  const { collapsed } = useSidebarContext();
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Heading,
+      {
+        as: "span",
+        fontSize: "lg",
+        fontWeight: "bold",
+        color: "primary.700",
+        letterSpacing: "tight",
+        children: wordmark.charAt(0)
+      }
+    ) });
+  }
+  return /* @__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 })
-] });
+var SidebarSection = ({ label, children }) => {
+  const { collapsed } = useSidebarContext();
+  return /* @__PURE__ */ jsxs(Box, { mb: "4", px: "3", children: [
+    !collapsed && /* @__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 }) => {
+var SidebarItem = ({
+  icon,
+  children,
+  asChild,
+  active,
+  label
+}) => {
+  const { collapsed } = useSidebarContext();
   const itemStyle = {
     display: "flex",
     alignItems: "center",
+    justifyContent: collapsed ? "center" : "flex-start",
     gap: "var(--chakra-spacing-2)",
     paddingInline: "var(--chakra-spacing-3)",
     paddingBlock: "var(--chakra-spacing-2)",
@@ -1868,7 +1966,7 @@ var SidebarItem = ({ icon, children, asChild, active }) => {
     textDecoration: "none"
   };
   const iconEl = icon ? /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", flexShrink: 0, children: icon }) : null;
-  const activeTab = active ? /* @__PURE__ */ jsx(
+  const activeTab = active && !collapsed ? /* @__PURE__ */ jsx(
     "span",
     {
       "aria-hidden": "true",
@@ -1882,9 +1980,11 @@ var SidebarItem = ({ icon, children, asChild, active }) => {
       }
     }
   ) : null;
+  const tooltipLabel = label || (typeof children === "string" ? children : "");
+  const wrapTooltip = (node) => collapsed && tooltipLabel ? /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel, positioning: { placement: "right" }, children: node }) : node;
   if (asChild) {
     const child = React3.Children.only(children);
-    return React3.cloneElement(
+    const cloned = React3.cloneElement(
       child,
       {
         "data-active": active ? "true" : "false",
@@ -1894,26 +1994,30 @@ var SidebarItem = ({ icon, children, asChild, active }) => {
         }
       },
       iconEl,
-      child.props.children,
+      collapsed ? null : child.props.children,
       activeTab
     );
+    return wrapTooltip(cloned);
   }
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      "data-testid": "sidebar-item",
-      "data-active": active ? "true" : "false",
-      style: itemStyle,
-      children: [
-        iconEl,
-        children,
-        activeTab
-      ]
-    }
+  return wrapTooltip(
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        "data-testid": "sidebar-item",
+        "data-active": active ? "true" : "false",
+        style: itemStyle,
+        children: [
+          iconEl,
+          !collapsed && children,
+          activeTab
+        ]
+      }
+    )
   );
 };
 SidebarItem.displayName = "Sidebar.Item";
 var SidebarUserMenu = ({ user, children }) => {
+  const { collapsed } = useSidebarContext();
   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(
@@ -1923,9 +2027,9 @@ var SidebarUserMenu = ({ user, children }) => {
         variant: "ghost",
         size: "md",
         w: "full",
-        justifyContent: "flex-start",
+        justifyContent: collapsed ? "center" : "flex-start",
         px: "2",
-        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: "full", children: [
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", w: collapsed ? "auto" : "full", children: [
           /* @__PURE__ */ jsx(
             Flex,
             {
@@ -1942,7 +2046,7 @@ var SidebarUserMenu = ({ user, children }) => {
               children: initials || "?"
             }
           ),
-          /* @__PURE__ */ jsxs(Box, { textAlign: "start", flex: "1", minW: "0", children: [
+          !collapsed && /* @__PURE__ */ jsxs(Box, { textAlign: "start", flex: "1", minW: "0", children: [
             /* @__PURE__ */ jsx(
               Text,
               {
@@ -2632,6 +2736,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-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 };
+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, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map