@caratlogic/design-system 0.1.7 → 0.1.8

package/dist/index.esm.js

@@ -57449,7 +57449,11 @@ const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("ma
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = React.forwardRef(({ className, ...props }, ref) => (jsx("input", { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background text-sm shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props })));
 SidebarInput.displayName = 'SidebarInput';
-const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 pr-1 pt-3 pb-4 pl-4', className), ...props })));
+const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "header", 
+    /* Icon mode drops the asymmetric pl-4/pr-1 (which is there for the expanded
+       brand + collapse button row) so a centred brand lands on the same axis as
+       the nav icons below it. */
+    className: cn('flex flex-col gap-2 pr-1 pt-3 pb-4 pl-4 group-data-[collapsible=icon]:px-0', className), ...props })));
 SidebarHeader.displayName = 'SidebarHeader';
 const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 pr-1 py-4 pl-4', className), ...props })));
 SidebarFooter.displayName = 'SidebarFooter';
@@ -57475,6 +57479,21 @@ const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (jsx("ul"
 SidebarMenu.displayName = 'SidebarMenu';
 const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (jsx("li", { ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props })));
 SidebarMenuItem.displayName = 'SidebarMenuItem';
+/**
+ * Owns a nav tooltip's open state so every tooltip closes when the sidebar
+ * expands or collapses. The width transition slides buttons out from under a
+ * stationary pointer without firing `pointerleave`, so Radix otherwise keeps
+ * each tooltip it opened on the way in — they surface together the moment the
+ * rail renders them, and only a fresh hover dismisses them one by one.
+ */
+const useSidebarTooltipOpen = () => {
+    const { state } = useSidebar();
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+        setOpen(false);
+    }, [state]);
+    return { open, setOpen };
+};
 const sidebarMenuButtonVariants = cva('peer/menu-button relative flex h-9 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-sm px-2.5 py-1.5 text-left text-sm text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-active-bg data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-active-bg data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span]:hidden [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
@@ -57497,13 +57516,15 @@ const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false,
     const { state } = useSidebar();
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsx(Comp, { ref: setRef, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
     // Tooltip when collapsed (icon-only) OR when the expanded label is clipped.
     // The Tooltip structure stays mounted and only the content is conditional,
     // so toggling it never remounts the button.
     const collapsed = !!tooltip && state === 'collapsed';
     const collapsedProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
-    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), collapsed ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null] }));
+    const tooltipContent = collapsed ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null;
+    return (jsxs(Tooltip, { open: !!tooltipContent && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsx(TooltipTrigger, { asChild: true, children: button }), tooltipContent] }));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
 const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
@@ -57527,9 +57548,10 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', i
     const Comp = asChild ? Slot : 'a';
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsx(Comp, { ref: setRef, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('relative flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-sm pl-3 pr-1 py-1.5 text-left text-sidebar-foreground/80 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
     // Keep the Tooltip mounted; render the content only when the label is clipped.
-    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
+    return (jsxs(Tooltip, { open: !!truncatedText && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Collapsible = CollapsiblePrimitive.Root;
@@ -65799,6 +65821,15 @@ const DEFAULT_SIDEBAR_WIDTH = '248px';
 /** Green pill marking the active top-level item. Rendered in-flow as the row's
  *  first flex child (hidden when the sidebar collapses to icons). */
 const ActiveRail = () => (jsx("span", { "aria-hidden": "true", className: "pointer-events-none h-9 w-[4px] shrink-0 rounded-full bg-sidebar-primary group-data-[collapsible=icon]:hidden" }));
+/** Collapsed, the rail is also the way back into the menu: clicking any nav
+ *  item opens the sidebar, not just the brand. */
+const useCollapsedSidebar = () => {
+    const { state, isMobile, setOpen } = useSidebar();
+    return {
+        collapsed: !isMobile && state === 'collapsed',
+        expandSidebar: () => setOpen(true),
+    };
+};
 const BrandHeader = ({ brand }) => {
     const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
     const expanded = state === 'expanded' || (isMobile && openMobile);
@@ -65810,13 +65841,31 @@ const BrandHeader = ({ brand }) => {
 const NavLeaf = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const active = isPathActive(currentPath, item.path);
-    return (jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsx(ActiveRail, {}), jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => item.path && onNavigate(item.path), className: cn(active && 'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label })] }), item.badge != null && (jsx(SidebarMenuBadge, { className: "h-5 w-5 min-w-5 rounded-full border border-primary bg-primary/10 p-0 text-primary", children: item.badge }))] }));
+    const { collapsed, expandSidebar } = useCollapsedSidebar();
+    return (jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsx(ActiveRail, {}), jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => {
+                    if (collapsed)
+                        expandSidebar();
+                    if (item.path)
+                        onNavigate(item.path);
+                }, className: cn(active && 'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label })] }), item.badge != null && (jsx(SidebarMenuBadge, { className: "h-5 w-5 min-w-5 rounded-full border border-primary bg-primary/10 p-0 text-primary", children: item.badge }))] }));
 };
 const NavParent = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const children = (item.children ?? []).filter((s) => s.visible !== false);
     const parentActive = children.some((s) => isPathActive(currentPath, s.path));
-    return (jsx(Collapsible, { asChild: true, defaultOpen: parentActive, children: jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxs("div", { className: cn(parentActive &&
+    const { collapsed, expandSidebar } = useCollapsedSidebar();
+    const [open, setOpen] = useState(parentActive);
+    // Collapsed, the sub-menu is hidden, so a click opens the sidebar and this
+    // group instead of silently toggling something the user cannot see.
+    const handleOpenChange = (next) => {
+        if (!collapsed) {
+            setOpen(next);
+            return;
+        }
+        expandSidebar();
+        setOpen(true);
+    };
+    return (jsx(Collapsible, { asChild: true, open: open, onOpenChange: handleOpenChange, children: jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxs("div", { className: cn(parentActive &&
                         'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [parentActive && jsx(ActiveRail, {}), jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { isActive: parentActive, tooltip: item.label, className: cn(parentActive &&
                                     'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" })] }) })] }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { children: children.map((sub) => {
                             const SubIcon = sub.icon;