@knkcs/anker 2.3.1 → 2.4.0

package/CLAUDE-ANKER.md

@@ -89,9 +89,12 @@ Available templates:
 | `<ErrorPage>` | 404 / 500 / 403 |
 | `<LoadingPage>` | Initial app boot |
 | `<MaintenancePage>` | Service-down screens |
+| `<SubNavLayout>` | Multi-resource navigation inside a `<DetailPageTemplate>` tab body — grouped vertical nav (left) + detail pane (right) with collapse toggle and `localStorage` persistence. |
 
 **Rule:** if a template doesn't fit your page, file an issue — don't reinvent the layout.
 
+- For multi-resource navigation inside a tab body, use `<SubNavLayout>` rather than rolling your own master-detail. It owns collapse state, persistence, and the divider — wire `<NavList.Item asChild>` to `<NavLink>` for URL deep-linking.
+
 Full spec with composition diagrams, slot tables, and authoring rules: `docs/page-patterns.md` in the anker repo (linked from the GitHub Pages docs site).
 
 ---

package/dist/atoms/index.js

@@ -6,9 +6,9 @@ export { SearchInput } from '../chunk-E7KRPPCQ.js';
 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-JS7ZEZV3.js';
 export { Button, IconButton } from '../chunk-JS7ZEZV3.js';
-import { Spinner } from '../chunk-5YDCDC4B.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-L7SKAZX3.js → chunk-PLXVGYFW.js}

@@ -1,5 +1,6 @@
 import { Box, Flex, Text, Heading, Link } from './chunk-G4QMIXLC.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
 
 var SIZE_TO_WIDTH = {
   md: "440px",
@@ -101,6 +102,11 @@ var AuthCard = ({
   ) });
 };
 AuthCard.displayName = "AuthCard";
+var NavListModeContext = createContext(null);
+var NavListModeProvider = NavListModeContext.Provider;
+function useNavListMode() {
+  return useContext(NavListModeContext) ?? { collapsed: false };
+}
 var PageHeader = ({
   breadcrumbs,
   title,
@@ -211,6 +217,6 @@ var PageHeader = ({
 };
 PageHeader.displayName = "PageHeader";
 
-export { AuthCard, PageHeader };
-//# sourceMappingURL=chunk-L7SKAZX3.js.map
-//# sourceMappingURL=chunk-L7SKAZX3.js.map
+export { AuthCard, NavListModeProvider, PageHeader, useNavListMode };
+//# sourceMappingURL=chunk-PLXVGYFW.js.map
+//# sourceMappingURL=chunk-PLXVGYFW.js.map

package/dist/chunk-PLXVGYFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth-card.tsx","../src/components/nav-list/nav-list-context.tsx","../src/components/page-header.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-PLXVGYFW.js","sourcesContent":["// src/components/auth-card.tsx\nimport type React from \"react\";\nimport { Box, Flex } from \"../primitives/layout\";\nimport { Heading, Text } from \"../primitives/typography\";\n\nexport interface AuthCardProps {\n\t/** Logo or wordmark, far-left of the topbar. */\n\tlogo?: React.ReactNode;\n\t/** Right-side topbar content (help link, locale switcher, etc.). */\n\ttopBarRight?: React.ReactNode;\n\t/** Hide the topbar entirely (rare — e.g. embedded preview). */\n\thideTopBar?: boolean;\n\t/** Hide the dot-grid background (rare — e.g. printable). */\n\thideBackground?: boolean;\n\t/** Small uppercase eyebrow above the title. */\n\teyebrow?: React.ReactNode;\n\t/**\n\t * Card title. Accepts a string or inline element — the component wraps\n\t * it in an `<h3>` (semantic heading, 24px, semibold, default color).\n\t * Avoid passing block elements (e.g. `<div>`) or pre-built headings.\n\t */\n\ttitle?: React.ReactNode;\n\t/** Subtitle below title (14px, muted color, centered). */\n\tsubtitle?: React.ReactNode;\n\t/** Card width preset. md = 440px (default), lg = 480px. */\n\tsize?: \"md\" | \"lg\";\n\t/** Card footer slot. Bottom-bordered inside the card. */\n\tfooter?: React.ReactNode;\n\t/** Page content inside the card body. */\n\tchildren: React.ReactNode;\n}\n\nconst SIZE_TO_WIDTH: Record<NonNullable<AuthCardProps[\"size\"]>, string> = {\n\tmd: \"440px\",\n\tlg: \"480px\",\n};\n\nconst DOT_PATTERN_BG =\n\t\"radial-gradient(var(--chakra-colors-primary-200) 1px, transparent 1px)\";\n\nexport const AuthCard = ({\n\tlogo,\n\ttopBarRight,\n\thideTopBar = false,\n\thideBackground = false,\n\teyebrow,\n\ttitle,\n\tsubtitle,\n\tsize = \"md\",\n\tfooter,\n\tchildren,\n}: AuthCardProps) => {\n\treturn (\n\t\t<Box data-testid=\"auth-card\" data-size={size} minH=\"100vh\" bg=\"bg-canvas\">\n\t\t\t<Box\n\t\t\t\tdata-testid=\"auth-card-canvas\"\n\t\t\t\tdata-background={hideBackground ? \"hidden\" : \"visible\"}\n\t\t\t\tminH=\"100vh\"\n\t\t\t\tbgImage={hideBackground ? undefined : DOT_PATTERN_BG}\n\t\t\t\tbgSize=\"24px 24px\"\n\t\t\t>\n\t\t\t\t{!hideTopBar && (\n\t\t\t\t\t<Flex\n\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tpx=\"8\"\n\t\t\t\t\t\tpy=\"4\"\n\t\t\t\t\t\tbg=\"bg-surface/85\"\n\t\t\t\t\t\tbackdropFilter=\"blur(4px)\"\n\t\t\t\t\t\tborderBottom=\"1px solid\"\n\t\t\t\t\t\tborderColor=\"border\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Box>{logo}</Box>\n\t\t\t\t\t\t<Flex gap=\"4\" fontSize=\"xs\" color=\"muted\">\n\t\t\t\t\t\t\t{topBarRight}\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t)}\n\n\t\t\t\t<Flex justify=\"center\" pt=\"16\" px=\"4\">\n\t\t\t\t\t<Box\n\t\t\t\t\t\tw=\"full\"\n\t\t\t\t\t\tmaxW={SIZE_TO_WIDTH[size]}\n\t\t\t\t\t\tbg=\"bg-surface\"\n\t\t\t\t\t\tborderRadius=\"lg\"\n\t\t\t\t\t\tshadow=\"md\"\n\t\t\t\t\t\tp=\"8\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{eyebrow && (\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\ttextStyle=\"overline\"\n\t\t\t\t\t\t\t\tcolor=\"muted\"\n\t\t\t\t\t\t\t\ttextAlign=\"center\"\n\t\t\t\t\t\t\t\tmb=\"2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{eyebrow}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tas=\"h3\"\n\t\t\t\t\t\t\t\tsize=\"2xl\"\n\t\t\t\t\t\t\t\tfontWeight=\"semibold\"\n\t\t\t\t\t\t\t\tcolor=\"default\"\n\t\t\t\t\t\t\t\ttextAlign=\"center\"\n\t\t\t\t\t\t\t\tmb=\"2\"\n\t\t\t\t\t\t\t\tletterSpacing=\"-0.02em\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t\t<Text color=\"muted\" textAlign=\"center\" fontSize=\"sm\" mb=\"6\">\n\t\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{children}\n\n\t\t\t\t\t\t{footer && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tdata-testid=\"auth-card-footer\"\n\t\t\t\t\t\t\t\tmt=\"6\"\n\t\t\t\t\t\t\t\tpt=\"4\"\n\t\t\t\t\t\t\t\tborderTop=\"1px solid\"\n\t\t\t\t\t\t\t\tborderColor=\"border\"\n\t\t\t\t\t\t\t\ttextAlign=\"center\"\n\t\t\t\t\t\t\t\tfontSize=\"xs\"\n\t\t\t\t\t\t\t\tcolor=\"emphasized\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{footer}\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Box>\n\t\t\t\t</Flex>\n\t\t\t</Box>\n\t\t</Box>\n\t);\n};\nAuthCard.displayName = \"AuthCard\";\n","// src/components/nav-list/nav-list-context.tsx\nimport { createContext, useContext } from \"react\";\n\nexport interface NavListMode {\n\t/** When true, NavList items render icon-only with tooltips. */\n\tcollapsed: boolean;\n}\n\nconst NavListModeContext = createContext<NavListMode | null>(null);\n\nexport const NavListModeProvider = NavListModeContext.Provider;\n\n/**\n * Read the collapsed mode published by the nearest parent\n * (Sidebar, SubNavLayout, etc.). Returns `{ collapsed: false }`\n * when no provider is present — NavList is usable standalone.\n */\nexport function useNavListMode(): NavListMode {\n\treturn useContext(NavListModeContext) ?? { collapsed: false };\n}\n","// src/components/page-header.tsx\nimport type React from \"react\";\nimport { Box, Flex } from \"../primitives/layout\";\nimport { Heading, Link, Text } from \"../primitives/typography\";\n\nexport interface PageHeaderBreadcrumb {\n\tlabel: string;\n\tto?: string;\n}\n\nexport interface PageHeaderProps {\n\tbreadcrumbs?: PageHeaderBreadcrumb[];\n\ttitle: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tactions?: React.ReactNode;\n\tavatar?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\teyebrow?: React.ReactNode;\n\tmeta?: React.ReactNode;\n\ttabs?: React.ReactNode;\n}\n\nexport const PageHeader = ({\n\tbreadcrumbs,\n\ttitle,\n\tsubtitle,\n\tactions,\n\tavatar,\n\tbadges,\n\teyebrow,\n\tmeta,\n\ttabs,\n}: PageHeaderProps) => {\n\tconst hasCrumbs = !!breadcrumbs && breadcrumbs.length > 0;\n\tconst hasActions = !!actions;\n\n\treturn (\n\t\t<Box\n\t\t\tpy=\"4\"\n\t\t\tpx=\"8\"\n\t\t\tborderBottomWidth=\"1px\"\n\t\t\tborderBottomColor=\"border\"\n\t\t\tbg=\"bg-surface\"\n\t\t>\n\t\t\t{eyebrow && (\n\t\t\t\t<Text\n\t\t\t\t\tfontSize=\"2xs\"\n\t\t\t\t\tfontWeight=\"semibold\"\n\t\t\t\t\tletterSpacing=\"wider\"\n\t\t\t\t\ttextTransform=\"uppercase\"\n\t\t\t\t\tcolor=\"muted\"\n\t\t\t\t\tmb=\"1\"\n\t\t\t\t>\n\t\t\t\t\t{eyebrow}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t{hasCrumbs && (\n\t\t\t\t<Flex\n\t\t\t\t\tdata-testid=\"page-header-breadcrumbs\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"1\"\n\t\t\t\t\tmb=\"1\"\n\t\t\t\t\tfontSize=\"xs\"\n\t\t\t\t\tcolor=\"muted\"\n\t\t\t\t>\n\t\t\t\t\t{breadcrumbs.map((c, idx) => {\n\t\t\t\t\t\tconst isLast = idx === breadcrumbs.length - 1;\n\t\t\t\t\t\tconst sep = !isLast ? <span aria-hidden> › </span> : null;\n\t\t\t\t\t\tconst node = c.to ? (\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tkey={`crumb-link-${c.label}`}\n\t\t\t\t\t\t\t\thref={c.to}\n\t\t\t\t\t\t\t\tcolor=\"muted\"\n\t\t\t\t\t\t\t\t_hover={{ color: \"default\" }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{c.label}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tkey={`crumb-text-${c.label}`}\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tcolor={isLast ? \"default\" : \"muted\"}\n\t\t\t\t\t\t\t\tfontWeight={isLast ? \"medium\" : \"normal\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{c.label}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex key={`crumb-wrap-${c.label}`} align=\"center\" gap=\"1\">\n\t\t\t\t\t\t\t\t{node}\n\t\t\t\t\t\t\t\t{sep}\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</Flex>\n\t\t\t)}\n\n\t\t\t<Flex align=\"flex-start\" justify=\"space-between\" gap=\"4\">\n\t\t\t\t{avatar && (\n\t\t\t\t\t<Box data-testid=\"page-header-avatar\" flexShrink={0}>\n\t\t\t\t\t\t{avatar}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t\t<Box flex=\"1\" minW=\"0\">\n\t\t\t\t\t<Flex align=\"center\" gap=\"2\" wrap=\"wrap\">\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tfontSize=\"2xl\"\n\t\t\t\t\t\t\tfontWeight=\"semibold\"\n\t\t\t\t\t\t\tcolor=\"default\"\n\t\t\t\t\t\t\tletterSpacing=\"-0.02em\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t{badges && (\n\t\t\t\t\t\t\t<Flex data-testid=\"page-header-badges\" align=\"center\" gap=\"2\">\n\t\t\t\t\t\t\t\t{badges}\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tdata-testid=\"page-header-subtitle\"\n\t\t\t\t\t\t\tfontSize=\"sm\"\n\t\t\t\t\t\t\tcolor=\"muted\"\n\t\t\t\t\t\t\tmt=\"1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t)}\n\t\t\t\t\t{meta && (\n\t\t\t\t\t\t<Box data-testid=\"page-header-meta\" mt=\"2\">\n\t\t\t\t\t\t\t{meta}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t)}\n\t\t\t\t</Box>\n\t\t\t\t{hasActions && (\n\t\t\t\t\t<Flex align=\"center\" gap=\"2\" flexShrink={0}>\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</Flex>\n\t\t\t\t)}\n\t\t\t</Flex>\n\t\t\t{tabs && (\n\t\t\t\t<Box data-testid=\"page-header-tabs\" mt=\"4\" mx=\"-8\" mb=\"-4\">\n\t\t\t\t\t{tabs}\n\t\t\t\t</Box>\n\t\t\t)}\n\t\t</Box>\n\t);\n};\nPageHeader.displayName = \"PageHeader\";\n"]}

package/dist/components/index.d.ts

@@ -631,6 +631,51 @@ interface ModalProps extends Omit<DialogRootProps, "open" | "onOpenChange"> {
 }
 declare const Modal: React.FC<ModalProps>;
 
+interface NavListProps {
+    "aria-label"?: string;
+    children: ReactNode;
+}
+interface NavListGroupProps {
+    label?: string;
+    children: ReactNode;
+}
+interface NavListItemProps {
+    icon?: ReactNode;
+    count?: number | string;
+    active?: boolean;
+    asChild?: boolean;
+    /** Override tooltip text when the parent is collapsed. */
+    label?: string;
+    /** data-testid for the root element (non-asChild branch). Defaults to "nav-list-item". */
+    testId?: string;
+    children: ReactNode;
+}
+declare const NavList: {
+    ({ children, ...rest }: NavListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Group: {
+        ({ label, children }: NavListGroupProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ icon, count, active, asChild, label, testId, children, }: NavListItemProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+interface NavListMode {
+    /** When true, NavList items render icon-only with tooltips. */
+    collapsed: boolean;
+}
+declare const NavListModeProvider: React$1.Provider<NavListMode | null>;
+/**
+ * Read the collapsed mode published by the nearest parent
+ * (Sidebar, SubNavLayout, etc.). Returns `{ collapsed: false }`
+ * when no provider is present — NavList is usable standalone.
+ */
+declare function useNavListMode(): NavListMode;
+
 interface PaginationProps {
     /** Current page (1-based). */
     page: number;
@@ -1058,4 +1103,4 @@ interface WidgetProps {
 }
 declare const Widget: React__default.FC<WidgetProps>;
 
-export { ActionCell, type ActionCellAction, type ActionCellProps, 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, DescriptionList, type DescriptionListProps, type DescriptionListRowProps, DeviceCell, type DeviceCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, IdentityCell, type IdentityCellProps, InlineCreatableList, type InlineCreatableListProps, KnkLogo, type KnkLogoProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, 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, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, type ActionCellAction, type ActionCellProps, 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, DescriptionList, type DescriptionListProps, type DescriptionListRowProps, DeviceCell, type DeviceCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, IdentityCell, type IdentityCellProps, InlineCreatableList, type InlineCreatableListProps, KnkLogo, type KnkLogoProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NavList, type NavListGroupProps, type NavListItemProps, type NavListMode, NavListModeProvider, type NavListProps, NumberCell, type NumberCellProps, 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, formatUserAgent, parseUserAgent, pluralize, truncateText, useNavListMode, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };

package/dist/components/index.js

@@ -3,14 +3,15 @@ import { formatRelativeDateTime, StatusBadge } from '../chunk-ETY43HAI.js';
 import { Tooltip, MenuItem, MenuRoot, MenuTrigger, MenuContent, Badge, Avatar, Table } from '../chunk-2ZWZ2WAS.js';
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
+import { useNavListMode, NavListModeProvider } from '../chunk-PLXVGYFW.js';
+export { AuthCard, NavListModeProvider, PageHeader, useNavListMode } from '../chunk-PLXVGYFW.js';
 import { Button, IconButton } from '../chunk-JS7ZEZV3.js';
-export { AuthCard, PageHeader } from '../chunk-L7SKAZX3.js';
-import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, VStack, Link, Spacer, Stack } from '../chunk-G4QMIXLC.js';
+import { Box, Flex, Stack, Text, Heading, HStack, Grid, GridItem, Code, VStack, Link, Spacer } from '../chunk-G4QMIXLC.js';
 import { PanelRightOpen, PanelRightClose, ChevronRight, PanelLeftOpen, PanelLeftClose, Search, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext as createContext$1, Timeline, TreeView, chakra, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
-import React5, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, Children } from 'react';
+import React6, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, Children } from 'react';
 import dayjs from 'dayjs';
 import { Link as Link$1 } from 'react-router-dom';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -398,7 +399,7 @@ function useContextRailMode() {
 }
 var RAIL_ATOM = /* @__PURE__ */ Symbol.for("anker.contextRail.atom");
 function isRailAtom(child) {
-  if (!React5.isValidElement(child)) return false;
+  if (!React6.isValidElement(child)) return false;
   const type = child.type;
   if (typeof type !== "function") return false;
   return type.railAtom === RAIL_ATOM;
@@ -704,7 +705,7 @@ var ContextRailRoot = ({ storageKey, children }) => {
             overflowY: "auto",
             children
           }
-        ) : /* @__PURE__ */ jsx(Box, { h: "full", overflowY: "auto", px: "4", pt: "4", pb: "4", children })
+        ) : /* @__PURE__ */ jsx(Stack, { h: "full", overflowY: "auto", px: "4", pt: "4", pb: "4", gap: "3", children })
       ]
     }
   ) }) });
@@ -753,7 +754,7 @@ var ContextRailSection = ({
   const { collapsed } = useContextRailMode();
   const [open, setOpen] = useState(defaultOpen);
   if (collapsed) {
-    const atomChildren = React5.Children.toArray(children).filter(isRailAtom);
+    const atomChildren = React6.Children.toArray(children).filter(isRailAtom);
     if (atomChildren.length === 0) return null;
     return /* @__PURE__ */ jsx(Fragment, { children: atomChildren });
   }
@@ -813,7 +814,7 @@ var ContextRailSection = ({
           ),
           action && /* @__PURE__ */ jsx(Box, { py: "3", children: action })
         ] }),
-        open && /* @__PURE__ */ jsx(Box, { pb: "3", children })
+        open && /* @__PURE__ */ jsx(Stack, { pb: "3", gap: "2", children })
       ]
     }
   );
@@ -1583,7 +1584,7 @@ var FactBox = (props) => {
     expandLabel = "Expand",
     ...rest
   } = props;
-  const [show, setShow] = React5.useState(true);
+  const [show, setShow] = React6.useState(true);
   const handleToggle = () => {
     setShow(!show);
   };
@@ -1961,6 +1962,127 @@ var Modal = ({
   );
 };
 Modal.displayName = "Modal";
+var NavListRoot = ({ children, ...rest }) => /* @__PURE__ */ jsx(Box, { as: "nav", "aria-label": rest["aria-label"], children });
+NavListRoot.displayName = "NavList";
+var NavListGroup = ({ label, children }) => {
+  const { collapsed } = useNavListMode();
+  return /* @__PURE__ */ jsxs(Box, { mb: "2", px: "2", children: [
+    label && !collapsed && /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: "2xs",
+        fontWeight: "semibold",
+        letterSpacing: "wider",
+        textTransform: "uppercase",
+        color: "subtle",
+        px: "2",
+        pt: "2",
+        pb: "1",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "0.5", children })
+  ] });
+};
+NavListGroup.displayName = "NavList.Group";
+var NavListItem = ({
+  icon,
+  count,
+  active,
+  asChild,
+  label,
+  testId = "nav-list-item",
+  children
+}) => {
+  const { collapsed } = useNavListMode();
+  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)",
+    borderRadius: "var(--chakra-radii-sm)",
+    fontSize: "var(--chakra-font-sizes-sm)",
+    fontWeight: active ? "var(--chakra-font-weights-medium)" : "var(--chakra-font-weights-normal)",
+    color: active ? "var(--chakra-colors-primary-700)" : "var(--chakra-colors-default)",
+    background: active ? "var(--chakra-colors-bg-surface)" : "transparent",
+    boxShadow: active ? "inset 0 0 0 1px var(--chakra-colors-border), 0 1px 2px rgba(0,0,0,0.04)" : void 0,
+    position: "relative",
+    textDecoration: "none",
+    cursor: "pointer"
+  };
+  const iconEl = icon ? /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", flexShrink: 0, children: icon }) : null;
+  const countEl = count !== void 0 && !collapsed ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      fontSize: "xs",
+      color: active ? "primary.700" : "subtle",
+      flexShrink: 0,
+      marginInlineStart: "auto",
+      style: { fontVariantNumeric: "tabular-nums" },
+      children: count
+    }
+  ) : null;
+  const pillEl = active && !collapsed ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: 3,
+        height: 14,
+        background: "var(--chakra-colors-primary-700)",
+        borderRadius: 999,
+        flexShrink: 0,
+        marginInlineStart: count !== void 0 ? "var(--chakra-spacing-2)" : "auto"
+      }
+    }
+  ) : 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 = React6.Children.only(children);
+    const cloned = React6.cloneElement(
+      child,
+      {
+        "data-active": active ? "true" : "false",
+        "aria-current": active ? "page" : void 0,
+        style: {
+          ...itemStyle,
+          ...child.props.style
+        }
+      },
+      iconEl,
+      collapsed ? null : child.props.children,
+      countEl,
+      pillEl
+    );
+    return wrapTooltip(cloned);
+  }
+  return wrapTooltip(
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        "data-testid": testId,
+        "data-active": active ? "true" : "false",
+        "aria-current": active ? "page" : void 0,
+        style: itemStyle,
+        children: [
+          iconEl,
+          !collapsed && children,
+          countEl,
+          pillEl
+        ]
+      }
+    )
+  );
+};
+NavListItem.displayName = "NavList.Item";
+var NavList = Object.assign(NavListRoot, {
+  Group: NavListGroup,
+  Item: NavListItem
+});
 var SelectableCardThumbnail = ({
   height = "160px",
   children
@@ -2049,9 +2171,9 @@ SelectableCard.Footer = SelectableCardFooter;
 var COLLAPSED_WIDTH2 = "64px";
 var EXPANDED_WIDTH2 = "240px";
 var COLLAPSE_BREAKPOINT2 = 1440;
-var SidebarContext = React5.createContext(null);
+var SidebarContext = React6.createContext(null);
 function useSidebarContext() {
-  const ctx = React5.useContext(SidebarContext);
+  const ctx = React6.useContext(SidebarContext);
   if (!ctx) {
     throw new Error("useSidebarContext must be used inside <Sidebar>");
   }
@@ -2088,7 +2210,7 @@ var SidebarRoot = ({
     }),
     [collapsed, toggle]
   );
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(NavListModeProvider, { value: { collapsed }, children: /* @__PURE__ */ jsxs(
     Box,
     {
       position: "relative",
@@ -2136,7 +2258,7 @@ var SidebarRoot = ({
         )
       ]
     }
-  ) });
+  ) }) });
 };
 SidebarRoot.displayName = "Sidebar";
 var SidebarHeader = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "4", borderBottomWidth: "1px", borderBottomColor: "border", children });
@@ -2167,25 +2289,7 @@ var SidebarLogo = ({ productName }) => {
 SidebarLogo.displayName = "Sidebar.Logo";
 var SidebarSlot = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "3", children });
 SidebarSlot.displayName = "Sidebar.Slot";
-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 })
-  ] });
-};
+var SidebarSection = ({ label, children }) => /* @__PURE__ */ jsx(NavList.Group, { label, children });
 SidebarSection.displayName = "Sidebar.Section";
 var SidebarItem = ({
   icon,
@@ -2193,74 +2297,17 @@ var SidebarItem = ({
   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)",
-    borderRadius: "var(--chakra-radii-sm)",
-    fontSize: "var(--chakra-font-sizes-sm)",
-    fontWeight: active ? "var(--chakra-font-weights-medium)" : "var(--chakra-font-weights-normal)",
-    color: active ? "var(--chakra-colors-primary-700)" : "var(--chakra-colors-default)",
-    background: active ? "var(--chakra-colors-bg-surface)" : "transparent",
-    boxShadow: active ? "inset 0 0 0 1px var(--chakra-colors-border), 0 1px 2px rgba(0,0,0,0.04)" : void 0,
-    position: "relative",
-    textDecoration: "none"
-  };
-  const iconEl = icon ? /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", flexShrink: 0, children: icon }) : null;
-  const activeTab = active && !collapsed ? /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      style: {
-        width: 3,
-        height: 14,
-        background: "var(--chakra-colors-primary-700)",
-        borderRadius: 999,
-        flexShrink: 0,
-        marginInlineStart: "auto"
-      }
-    }
-  ) : 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 = React5.Children.only(children);
-    const cloned = React5.cloneElement(
-      child,
-      {
-        "data-active": active ? "true" : "false",
-        style: {
-          ...itemStyle,
-          ...child.props.style
-        }
-      },
-      iconEl,
-      collapsed ? null : child.props.children,
-      activeTab
-    );
-    return wrapTooltip(cloned);
+}) => /* @__PURE__ */ jsx(
+  NavList.Item,
+  {
+    icon,
+    active,
+    asChild,
+    label,
+    testId: "sidebar-item",
+    children
   }
-  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();
@@ -2318,8 +2365,8 @@ var SidebarUserMenuItem = ({
   children
 }) => {
   if (asChild) {
-    const child = React5.Children.only(children);
-    return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React5.cloneElement(child, {}) });
+    const child = React6.Children.only(children);
+    return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React6.cloneElement(child, {}) });
   }
   return /* @__PURE__ */ jsx(
     MenuItem,
@@ -2404,16 +2451,16 @@ var [StepperProvider, useStepperContext] = createContext$1({
 });
 function useStepper(props) {
   const { step, onChange } = props;
-  const [activeIndex, setIndex] = React5.useState(-1);
-  const stepsRef = React5.useRef([]);
-  const registerStep = React5.useCallback((name) => {
+  const [activeIndex, setIndex] = React6.useState(-1);
+  const stepsRef = React6.useRef([]);
+  const registerStep = React6.useCallback((name) => {
     const newSteps = [...stepsRef.current];
     if (newSteps.indexOf(name) === -1) {
       newSteps.push(name);
     }
     stepsRef.current = newSteps;
   }, []);
-  const unregisterStep = React5.useCallback((name) => {
+  const unregisterStep = React6.useCallback((name) => {
     stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
   }, []);
   const setStep = useCallback((name) => {
@@ -2428,7 +2475,7 @@ function useStepper(props) {
   const prevStep = () => {
     setIndex(activeIndex - 1);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (typeof step === "string") {
       setStep(step);
     } else if (typeof step === "number") {
@@ -2437,7 +2484,7 @@ function useStepper(props) {
       setIndex(0);
     }
   }, [step, activeIndex, setStep]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     onChange?.(activeIndex);
   }, [activeIndex, onChange]);
   const context = {
@@ -2459,7 +2506,7 @@ function useStepper(props) {
 function useStep(props) {
   const { name, isActive, isCompleted } = props;
   const { registerStep, unregisterStep, activeStep } = useStepperContext();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!name) {
       return;
     }
@@ -2493,12 +2540,12 @@ function useStepperNextButton({
   };
 }
 function getChildOfType(children, type) {
-  return React5.Children.toArray(children).find(
+  return React6.Children.toArray(children).find(
     (item) => item.type === type
   );
 }
 function getChildrenOfType(children, type) {
-  return React5.Children.toArray(children).filter(
+  return React6.Children.toArray(children).filter(
     (item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
   );
 }
@@ -2982,6 +3029,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DescriptionList, DeviceCell, DrawerRoot, FactBox, IdentityCell, InlineCreatableList, KnkLogo, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, 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, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DescriptionList, DeviceCell, DrawerRoot, FactBox, IdentityCell, InlineCreatableList, KnkLogo, LabeledSwitch, LinkCell, MenuCell, Modal, NavList, NumberCell, 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, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map