@wealthx/shadcn 1.5.33 → 1.5.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,8 +27,8 @@ import {
27
27
  ChevronRight,
28
28
  Info,
29
29
  LogOut,
30
- PanelLeftClose,
31
- PanelLeftOpen
30
+ Pin,
31
+ PinOff
32
32
  } from "lucide-react";
33
33
  import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
34
34
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -230,42 +230,53 @@ function CollapsibleNavItem({
230
230
  function SidebarNav({
231
231
  items,
232
232
  userName = "Anonymous User",
233
- collapsed = false,
234
233
  logo,
235
234
  logoCollapsed,
236
235
  metricsGroups,
237
236
  onNavigate,
238
237
  onLogout,
239
- onCollapsedChange,
238
+ defaultLocked = false,
239
+ onLockedChange,
240
240
  className
241
241
  }) {
242
+ const [isLocked, setIsLocked] = React.useState(defaultLocked);
243
+ const [isHovered, setIsHovered] = React.useState(false);
244
+ const isExpanded = isLocked || isHovered;
242
245
  const [userMenuOpen, setUserMenuOpen] = React.useState(false);
243
246
  const navScrollRef = React.useRef(null);
244
247
  const expandedScrollRef = React.useRef(0);
248
+ const handleLockToggle = () => {
249
+ const next = !isLocked;
250
+ setIsLocked(next);
251
+ onLockedChange == null ? void 0 : onLockedChange(next);
252
+ };
245
253
  React.useEffect(() => {
246
- if (collapsed) setUserMenuOpen(false);
247
- }, [collapsed]);
254
+ if (!isExpanded) setUserMenuOpen(false);
255
+ }, [isExpanded]);
248
256
  React.useLayoutEffect(() => {
249
257
  const nav = navScrollRef.current;
250
258
  if (!nav) return;
251
- if (!collapsed) {
259
+ if (isExpanded) {
252
260
  nav.scrollTop = expandedScrollRef.current;
253
261
  }
254
262
  return () => {
255
- if (!collapsed && nav) {
263
+ if (isExpanded && nav) {
256
264
  expandedScrollRef.current = nav.scrollTop;
257
265
  }
258
266
  };
259
- }, [collapsed]);
267
+ }, [isExpanded]);
260
268
  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
261
269
  "nav",
262
270
  {
263
271
  "data-slot": "sidebar-nav",
264
- "data-collapsed": collapsed,
272
+ "data-expanded": isExpanded,
273
+ "data-locked": isLocked,
274
+ onMouseEnter: () => setIsHovered(true),
275
+ onMouseLeave: () => setIsHovered(false),
265
276
  className: cn(
266
277
  "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
267
278
  "transition-all duration-200 ease-in-out",
268
- collapsed ? "w-14" : "w-[279px]",
279
+ isExpanded ? "w-[279px]" : "w-14",
269
280
  className
270
281
  ),
271
282
  children: [
@@ -277,7 +288,7 @@ function SidebarNav({
277
288
  alt: "Logo",
278
289
  className: cn(
279
290
  "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
280
- collapsed ? "opacity-0" : "opacity-100"
291
+ !isExpanded ? "opacity-0" : "opacity-100"
281
292
  )
282
293
  }
283
294
  ),
@@ -288,7 +299,7 @@ function SidebarNav({
288
299
  alt: "Logo",
289
300
  className: cn(
290
301
  "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
291
- collapsed ? "opacity-100" : "opacity-0"
302
+ !isExpanded ? "opacity-100" : "opacity-0"
292
303
  )
293
304
  }
294
305
  )
@@ -298,7 +309,7 @@ function SidebarNav({
298
309
  "div",
299
310
  {
300
311
  className: cn(
301
- collapsed ? "opacity-0 pointer-events-none" : "opacity-100"
312
+ !isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
302
313
  ),
303
314
  children: /* @__PURE__ */ jsx(
304
315
  Accordion,
@@ -355,12 +366,12 @@ function SidebarNav({
355
366
  )
356
367
  }
357
368
  ),
358
- /* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ jsx(
369
+ /* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ jsx(
359
370
  "div",
360
371
  {
361
372
  className: cn(
362
373
  "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
363
- collapsed ? "opacity-100" : "opacity-0 pointer-events-none"
374
+ !isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
364
375
  ),
365
376
  children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
366
377
  }
@@ -369,7 +380,7 @@ function SidebarNav({
369
380
  !!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ jsx(
370
381
  Accordion,
371
382
  {
372
- value: !collapsed ? ["metrics"] : [],
383
+ value: isExpanded ? ["metrics"] : [],
373
384
  onValueChange: () => {
374
385
  },
375
386
  children: /* @__PURE__ */ jsx(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ jsx(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ jsx(MetricsGroup, { group }, i)) }) })
@@ -380,7 +391,7 @@ function SidebarNav({
380
391
  CollapsibleNavItem,
381
392
  {
382
393
  item,
383
- collapsed,
394
+ collapsed: !isExpanded,
384
395
  onNavigate
385
396
  },
386
397
  item.href
@@ -388,45 +399,39 @@ function SidebarNav({
388
399
  SidebarNavItemView,
389
400
  {
390
401
  item,
391
- collapsed,
402
+ collapsed: !isExpanded,
392
403
  onNavigate
393
404
  },
394
405
  item.href
395
406
  )
396
407
  ) }),
397
- onCollapsedChange && /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/15 bg-white/8", children: /* @__PURE__ */ jsx(
408
+ /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ jsx(
398
409
  NavTooltip,
399
410
  {
400
- label: collapsed ? "Expand" : "Collapse",
401
- collapsed,
411
+ label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
412
+ collapsed: !isExpanded,
402
413
  children: /* @__PURE__ */ jsxs(
403
414
  Button,
404
415
  {
405
416
  type: "button",
406
417
  variant: "ghost",
407
- onClick: () => onCollapsedChange(!collapsed),
418
+ onClick: handleLockToggle,
408
419
  className: cn(
409
- "h-12 w-full justify-start gap-3 px-3 py-3 transition-colors",
420
+ "h-12 w-full items-center gap-3 py-3 transition-colors",
410
421
  "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
411
- collapsed && "justify-center px-2"
422
+ isExpanded ? "justify-start px-3" : "justify-center px-2",
423
+ isLocked && "text-primary"
412
424
  ),
413
425
  children: [
414
- collapsed ? /* @__PURE__ */ jsx(
415
- PanelLeftOpen,
426
+ isLocked ? /* @__PURE__ */ jsx(Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ jsx(
427
+ PinOff,
416
428
  {
417
429
  size: 24,
418
430
  strokeWidth: 1.75,
419
- className: "shrink-0"
420
- }
421
- ) : /* @__PURE__ */ jsx(
422
- PanelLeftClose,
423
- {
424
- size: 24,
425
- strokeWidth: 1.75,
426
- className: "shrink-0"
431
+ className: "shrink-0 opacity-60"
427
432
  }
428
433
  ),
429
- !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Collapse" })
434
+ isExpanded && /* @__PURE__ */ jsx("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
430
435
  ]
431
436
  }
432
437
  )
@@ -559,42 +559,53 @@ function CollapsibleNavItem({
559
559
  function SidebarNav({
560
560
  items,
561
561
  userName = "Anonymous User",
562
- collapsed = false,
563
562
  logo,
564
563
  logoCollapsed,
565
564
  metricsGroups,
566
565
  onNavigate,
567
566
  onLogout,
568
- onCollapsedChange,
567
+ defaultLocked = false,
568
+ onLockedChange,
569
569
  className
570
570
  }) {
571
+ const [isLocked, setIsLocked] = React3.useState(defaultLocked);
572
+ const [isHovered, setIsHovered] = React3.useState(false);
573
+ const isExpanded = isLocked || isHovered;
571
574
  const [userMenuOpen, setUserMenuOpen] = React3.useState(false);
572
575
  const navScrollRef = React3.useRef(null);
573
576
  const expandedScrollRef = React3.useRef(0);
577
+ const handleLockToggle = () => {
578
+ const next = !isLocked;
579
+ setIsLocked(next);
580
+ onLockedChange == null ? void 0 : onLockedChange(next);
581
+ };
574
582
  React3.useEffect(() => {
575
- if (collapsed) setUserMenuOpen(false);
576
- }, [collapsed]);
583
+ if (!isExpanded) setUserMenuOpen(false);
584
+ }, [isExpanded]);
577
585
  React3.useLayoutEffect(() => {
578
586
  const nav = navScrollRef.current;
579
587
  if (!nav) return;
580
- if (!collapsed) {
588
+ if (isExpanded) {
581
589
  nav.scrollTop = expandedScrollRef.current;
582
590
  }
583
591
  return () => {
584
- if (!collapsed && nav) {
592
+ if (isExpanded && nav) {
585
593
  expandedScrollRef.current = nav.scrollTop;
586
594
  }
587
595
  };
588
- }, [collapsed]);
596
+ }, [isExpanded]);
589
597
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
590
598
  "nav",
591
599
  {
592
600
  "data-slot": "sidebar-nav",
593
- "data-collapsed": collapsed,
601
+ "data-expanded": isExpanded,
602
+ "data-locked": isLocked,
603
+ onMouseEnter: () => setIsHovered(true),
604
+ onMouseLeave: () => setIsHovered(false),
594
605
  className: cn(
595
606
  "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
596
607
  "transition-all duration-200 ease-in-out",
597
- collapsed ? "w-14" : "w-[279px]",
608
+ isExpanded ? "w-[279px]" : "w-14",
598
609
  className
599
610
  ),
600
611
  children: [
@@ -606,7 +617,7 @@ function SidebarNav({
606
617
  alt: "Logo",
607
618
  className: cn(
608
619
  "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
609
- collapsed ? "opacity-0" : "opacity-100"
620
+ !isExpanded ? "opacity-0" : "opacity-100"
610
621
  )
611
622
  }
612
623
  ),
@@ -617,7 +628,7 @@ function SidebarNav({
617
628
  alt: "Logo",
618
629
  className: cn(
619
630
  "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
620
- collapsed ? "opacity-100" : "opacity-0"
631
+ !isExpanded ? "opacity-100" : "opacity-0"
621
632
  )
622
633
  }
623
634
  )
@@ -627,7 +638,7 @@ function SidebarNav({
627
638
  "div",
628
639
  {
629
640
  className: cn(
630
- collapsed ? "opacity-0 pointer-events-none" : "opacity-100"
641
+ !isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
631
642
  ),
632
643
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
633
644
  Accordion,
@@ -684,12 +695,12 @@ function SidebarNav({
684
695
  )
685
696
  }
686
697
  ),
687
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
698
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
688
699
  "div",
689
700
  {
690
701
  className: cn(
691
702
  "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
692
- collapsed ? "opacity-100" : "opacity-0 pointer-events-none"
703
+ !isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
693
704
  ),
694
705
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
695
706
  }
@@ -698,7 +709,7 @@ function SidebarNav({
698
709
  !!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
699
710
  Accordion,
700
711
  {
701
- value: !collapsed ? ["metrics"] : [],
712
+ value: isExpanded ? ["metrics"] : [],
702
713
  onValueChange: () => {
703
714
  },
704
715
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MetricsGroup, { group }, i)) }) })
@@ -709,7 +720,7 @@ function SidebarNav({
709
720
  CollapsibleNavItem,
710
721
  {
711
722
  item,
712
- collapsed,
723
+ collapsed: !isExpanded,
713
724
  onNavigate
714
725
  },
715
726
  item.href
@@ -717,45 +728,39 @@ function SidebarNav({
717
728
  SidebarNavItemView,
718
729
  {
719
730
  item,
720
- collapsed,
731
+ collapsed: !isExpanded,
721
732
  onNavigate
722
733
  },
723
734
  item.href
724
735
  )
725
736
  ) }),
726
- onCollapsedChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
737
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
727
738
  NavTooltip,
728
739
  {
729
- label: collapsed ? "Expand" : "Collapse",
730
- collapsed,
740
+ label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
741
+ collapsed: !isExpanded,
731
742
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
732
743
  Button,
733
744
  {
734
745
  type: "button",
735
746
  variant: "ghost",
736
- onClick: () => onCollapsedChange(!collapsed),
747
+ onClick: handleLockToggle,
737
748
  className: cn(
738
- "h-12 w-full justify-start gap-3 px-3 py-3 transition-colors",
749
+ "h-12 w-full items-center gap-3 py-3 transition-colors",
739
750
  "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
740
- collapsed && "justify-center px-2"
751
+ isExpanded ? "justify-start px-3" : "justify-center px-2",
752
+ isLocked && "text-primary"
741
753
  ),
742
754
  children: [
743
- collapsed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
744
- import_lucide_react3.PanelLeftOpen,
745
- {
746
- size: 24,
747
- strokeWidth: 1.75,
748
- className: "shrink-0"
749
- }
750
- ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
751
- import_lucide_react3.PanelLeftClose,
755
+ isLocked ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
756
+ import_lucide_react3.PinOff,
752
757
  {
753
758
  size: 24,
754
759
  strokeWidth: 1.75,
755
- className: "shrink-0"
760
+ className: "shrink-0 opacity-60"
756
761
  }
757
762
  ),
758
- !collapsed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm", children: "Collapse" })
763
+ isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
759
764
  ]
760
765
  }
761
766
  )
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SidebarNav
3
- } from "../../chunk-RSEVIQEO.mjs";
3
+ } from "../../chunk-E432NK23.mjs";
4
4
  import "../../chunk-3S6KVFF5.mjs";
5
5
  import "../../chunk-XYSRRDBH.mjs";
6
6
  import "../../chunk-FRCTOAKZ.mjs";
package/dist/index.js CHANGED
@@ -23310,42 +23310,53 @@ function CollapsibleNavItem({
23310
23310
  function SidebarNav({
23311
23311
  items,
23312
23312
  userName = "Anonymous User",
23313
- collapsed = false,
23314
23313
  logo,
23315
23314
  logoCollapsed,
23316
23315
  metricsGroups,
23317
23316
  onNavigate,
23318
23317
  onLogout,
23319
- onCollapsedChange,
23318
+ defaultLocked = false,
23319
+ onLockedChange,
23320
23320
  className
23321
23321
  }) {
23322
+ const [isLocked, setIsLocked] = React51.useState(defaultLocked);
23323
+ const [isHovered, setIsHovered] = React51.useState(false);
23324
+ const isExpanded = isLocked || isHovered;
23322
23325
  const [userMenuOpen, setUserMenuOpen] = React51.useState(false);
23323
23326
  const navScrollRef = React51.useRef(null);
23324
23327
  const expandedScrollRef = React51.useRef(0);
23328
+ const handleLockToggle = () => {
23329
+ const next = !isLocked;
23330
+ setIsLocked(next);
23331
+ onLockedChange == null ? void 0 : onLockedChange(next);
23332
+ };
23325
23333
  React51.useEffect(() => {
23326
- if (collapsed) setUserMenuOpen(false);
23327
- }, [collapsed]);
23334
+ if (!isExpanded) setUserMenuOpen(false);
23335
+ }, [isExpanded]);
23328
23336
  React51.useLayoutEffect(() => {
23329
23337
  const nav = navScrollRef.current;
23330
23338
  if (!nav) return;
23331
- if (!collapsed) {
23339
+ if (isExpanded) {
23332
23340
  nav.scrollTop = expandedScrollRef.current;
23333
23341
  }
23334
23342
  return () => {
23335
- if (!collapsed && nav) {
23343
+ if (isExpanded && nav) {
23336
23344
  expandedScrollRef.current = nav.scrollTop;
23337
23345
  }
23338
23346
  };
23339
- }, [collapsed]);
23347
+ }, [isExpanded]);
23340
23348
  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
23341
23349
  "nav",
23342
23350
  {
23343
23351
  "data-slot": "sidebar-nav",
23344
- "data-collapsed": collapsed,
23352
+ "data-expanded": isExpanded,
23353
+ "data-locked": isLocked,
23354
+ onMouseEnter: () => setIsHovered(true),
23355
+ onMouseLeave: () => setIsHovered(false),
23345
23356
  className: cn(
23346
23357
  "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
23347
23358
  "transition-all duration-200 ease-in-out",
23348
- collapsed ? "w-14" : "w-[279px]",
23359
+ isExpanded ? "w-[279px]" : "w-14",
23349
23360
  className
23350
23361
  ),
23351
23362
  children: [
@@ -23357,7 +23368,7 @@ function SidebarNav({
23357
23368
  alt: "Logo",
23358
23369
  className: cn(
23359
23370
  "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
23360
- collapsed ? "opacity-0" : "opacity-100"
23371
+ !isExpanded ? "opacity-0" : "opacity-100"
23361
23372
  )
23362
23373
  }
23363
23374
  ),
@@ -23368,7 +23379,7 @@ function SidebarNav({
23368
23379
  alt: "Logo",
23369
23380
  className: cn(
23370
23381
  "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
23371
- collapsed ? "opacity-100" : "opacity-0"
23382
+ !isExpanded ? "opacity-100" : "opacity-0"
23372
23383
  )
23373
23384
  }
23374
23385
  )
@@ -23378,7 +23389,7 @@ function SidebarNav({
23378
23389
  "div",
23379
23390
  {
23380
23391
  className: cn(
23381
- collapsed ? "opacity-0 pointer-events-none" : "opacity-100"
23392
+ !isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
23382
23393
  ),
23383
23394
  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23384
23395
  Accordion,
@@ -23435,12 +23446,12 @@ function SidebarNav({
23435
23446
  )
23436
23447
  }
23437
23448
  ),
23438
- /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23449
+ /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23439
23450
  "div",
23440
23451
  {
23441
23452
  className: cn(
23442
23453
  "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
23443
- collapsed ? "opacity-100" : "opacity-0 pointer-events-none"
23454
+ !isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
23444
23455
  ),
23445
23456
  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
23446
23457
  }
@@ -23449,7 +23460,7 @@ function SidebarNav({
23449
23460
  !!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23450
23461
  Accordion,
23451
23462
  {
23452
- value: !collapsed ? ["metrics"] : [],
23463
+ value: isExpanded ? ["metrics"] : [],
23453
23464
  onValueChange: () => {
23454
23465
  },
23455
23466
  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(MetricsGroup, { group }, i)) }) })
@@ -23460,7 +23471,7 @@ function SidebarNav({
23460
23471
  CollapsibleNavItem,
23461
23472
  {
23462
23473
  item,
23463
- collapsed,
23474
+ collapsed: !isExpanded,
23464
23475
  onNavigate
23465
23476
  },
23466
23477
  item.href
@@ -23468,45 +23479,39 @@ function SidebarNav({
23468
23479
  SidebarNavItemView,
23469
23480
  {
23470
23481
  item,
23471
- collapsed,
23482
+ collapsed: !isExpanded,
23472
23483
  onNavigate
23473
23484
  },
23474
23485
  item.href
23475
23486
  )
23476
23487
  ) }),
23477
- onCollapsedChange && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23488
+ /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23478
23489
  NavTooltip,
23479
23490
  {
23480
- label: collapsed ? "Expand" : "Collapse",
23481
- collapsed,
23491
+ label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
23492
+ collapsed: !isExpanded,
23482
23493
  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
23483
23494
  Button,
23484
23495
  {
23485
23496
  type: "button",
23486
23497
  variant: "ghost",
23487
- onClick: () => onCollapsedChange(!collapsed),
23498
+ onClick: handleLockToggle,
23488
23499
  className: cn(
23489
- "h-12 w-full justify-start gap-3 px-3 py-3 transition-colors",
23500
+ "h-12 w-full items-center gap-3 py-3 transition-colors",
23490
23501
  "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
23491
- collapsed && "justify-center px-2"
23502
+ isExpanded ? "justify-start px-3" : "justify-center px-2",
23503
+ isLocked && "text-primary"
23492
23504
  ),
23493
23505
  children: [
23494
- collapsed ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23495
- import_lucide_react63.PanelLeftOpen,
23496
- {
23497
- size: 24,
23498
- strokeWidth: 1.75,
23499
- className: "shrink-0"
23500
- }
23501
- ) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23502
- import_lucide_react63.PanelLeftClose,
23506
+ isLocked ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react63.Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
23507
+ import_lucide_react63.PinOff,
23503
23508
  {
23504
23509
  size: 24,
23505
23510
  strokeWidth: 1.75,
23506
- className: "shrink-0"
23511
+ className: "shrink-0 opacity-60"
23507
23512
  }
23508
23513
  ),
23509
- !collapsed && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm", children: "Collapse" })
23514
+ isExpanded && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
23510
23515
  ]
23511
23516
  }
23512
23517
  )
package/dist/index.mjs CHANGED
@@ -69,7 +69,7 @@ import {
69
69
  } from "./chunk-MD66TGX7.mjs";
70
70
  import {
71
71
  SidebarNav
72
- } from "./chunk-RSEVIQEO.mjs";
72
+ } from "./chunk-E432NK23.mjs";
73
73
  import {
74
74
  PropertyMobileEstimateLineChart
75
75
  } from "./chunk-JUMEIPII.mjs";