@knkcs/anker 1.7.0 → 1.8.1

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

@@ -6,10 +6,10 @@ import { text_input_default } from '../chunk-OU6H3KU4.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, Search, PanelLeftOpen, PanelLeftClose, 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';
@@ -1798,19 +1798,65 @@ 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__ */ jsx(
+    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
+    }
+  ) });
+};
 SidebarRoot.displayName = "Sidebar";
 var SidebarHeader = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "4", borderBottomWidth: "1px", borderBottomColor: "border", children });
 SidebarHeader.displayName = "Sidebar.Header";
@@ -1818,55 +1864,109 @@ 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,
+var SidebarLogo = ({ wordmark, subtitle }) => {
+  const { collapsed, toggle } = useSidebarContext();
+  const toggleButton = /* @__PURE__ */ jsx(
+    IconButton,
     {
-      as: "span",
-      fontSize: "lg",
-      fontWeight: "bold",
-      color: "primary.700",
-      letterSpacing: "tight",
-      children: wordmark
+      "data-testid": "sidebar-toggle",
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      variant: "ghost",
+      size: "sm",
+      onClick: toggle,
+      children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { size: 16 }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 16 })
     }
-  ),
-  subtitle && /* @__PURE__ */ jsx(
-    Text,
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        Heading,
+        {
+          as: "span",
+          fontSize: "lg",
+          fontWeight: "bold",
+          color: "primary.700",
+          letterSpacing: "tight",
+          children: wordmark.charAt(0)
+        }
+      ),
+      toggleButton
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
-      fontSize: "2xs",
-      fontWeight: "semibold",
-      letterSpacing: "wider",
-      textTransform: "uppercase",
-      color: "muted",
-      mt: "0.5",
-      children: subtitle
+      direction: "row",
+      align: "center",
+      justify: "space-between",
+      gap: "2",
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { mb: subtitle ? "0" : "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
+            }
+          )
+        ] }),
+        toggleButton
+      ]
     }
-  )
-] });
+  );
+};
 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)",
@@ -1880,7 +1980,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",
@@ -1894,9 +1994,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",
@@ -1906,26 +2008,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(
@@ -1935,9 +2041,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,
             {
@@ -1954,7 +2060,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,
               {
@@ -2644,6 +2750,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