@caratlogic/design-system 0.1.7 → 0.1.8

package/dist/components/layouts/AppShell/DashboardShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/DashboardShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAuC/C,OAAO,KAAK,EAMV,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AAgW1B,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkDlD,CAAC"}
+{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/DashboardShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAwC/C,OAAO,KAAK,EAMV,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AA8X1B,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkDlD,CAAC"}

package/dist/components/molecules/Sidebar/Sidebar.parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.parts.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Sidebar/Sidebar.parts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.parts.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Sidebar/Sidebar.parts.tsx"],"names":[],"mappings":"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"}

package/dist/index.cjs.js

@@ -57479,7 +57479,11 @@ const SidebarInset = React__namespace.forwardRef(({ className, ...props }, ref)
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.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';
@@ -57505,6 +57509,21 @@ const SidebarMenu = React__namespace.forwardRef(({ className, ...props }, ref) =
 SidebarMenu.displayName = 'SidebarMenu';
 const SidebarMenuItem = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.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__namespace.useState(false);
+    React__namespace.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: {
@@ -57527,13 +57546,15 @@ const SidebarMenuButton = React__namespace.forwardRef(({ asChild = false, isActi
     const { state } = useSidebar();
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsxRuntime.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 (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }), collapsed ? (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null] }));
+    const tooltipContent = collapsed ? (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null;
+    return (jsxRuntime.jsxs(Tooltip, { open: !!tooltipContent && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }), tooltipContent] }));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
 const SidebarMenuAction = React__namespace.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
@@ -57557,9 +57578,10 @@ const SidebarMenuSubButton = React__namespace.forwardRef(({ asChild = false, siz
     const Comp = asChild ? reactSlot.Slot : 'a';
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsxRuntime.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 (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
+    return (jsxRuntime.jsxs(Tooltip, { open: !!truncatedText && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Collapsible = CollapsiblePrimitive__namespace.Root;
@@ -65829,6 +65851,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 = () => (jsxRuntime.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);
@@ -65840,13 +65871,31 @@ const BrandHeader = ({ brand }) => {
 const NavLeaf = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const active = isPathActive(currentPath, item.path);
-    return (jsxRuntime.jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsxRuntime.jsx(ActiveRail, {}), jsxRuntime.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 && jsxRuntime.jsx(Icon, {}), jsxRuntime.jsx("span", { children: item.label })] }), item.badge != null && (jsxRuntime.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 (jsxRuntime.jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsxRuntime.jsx(ActiveRail, {}), jsxRuntime.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 && jsxRuntime.jsx(Icon, {}), jsxRuntime.jsx("span", { children: item.label })] }), item.badge != null && (jsxRuntime.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 (jsxRuntime.jsx(Collapsible, { asChild: true, defaultOpen: parentActive, children: jsxRuntime.jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxRuntime.jsxs("div", { className: cn(parentActive &&
+    const { collapsed, expandSidebar } = useCollapsedSidebar();
+    const [open, setOpen] = React.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 (jsxRuntime.jsx(Collapsible, { asChild: true, open: open, onOpenChange: handleOpenChange, children: jsxRuntime.jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxRuntime.jsxs("div", { className: cn(parentActive &&
                         'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [parentActive && jsxRuntime.jsx(ActiveRail, {}), jsxRuntime.jsx(CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuButton, { isActive: parentActive, tooltip: item.label, className: cn(parentActive &&
                                     'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsxRuntime.jsx(Icon, {}), jsxRuntime.jsx("span", { children: item.label }), jsxRuntime.jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" })] }) })] }), jsxRuntime.jsx(CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { children: children.map((sub) => {
                             const SubIcon = sub.icon;