@work-rjkashyap/unified-ui 0.2.2 → 0.2.4

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.
@@ -775,9 +775,7 @@ var avatarVariants = classVarianceAuthority.cva(
775
775
  // Typography for fallback initials
776
776
  "font-medium leading-none select-none",
777
777
  // Default colors for fallback state
778
- "bg-muted text-muted-foreground",
779
- // Border for visual separation on grouped/colored backgrounds
780
- "ring-2 ring-background"
778
+ "bg-muted text-muted-foreground"
781
779
  ],
782
780
  {
783
781
  variants: {
@@ -859,15 +857,18 @@ function getInitials(name) {
859
857
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
860
858
  }
861
859
  function DefaultFallbackIcon({ className }) {
862
- return /* @__PURE__ */ jsxRuntime.jsx(
860
+ return /* @__PURE__ */ jsxRuntime.jsxs(
863
861
  "svg",
864
862
  {
865
- className: chunk4ON3M3OM_cjs.cn("size-[60%] text-current opacity-60", className),
863
+ className: chunk4ON3M3OM_cjs.cn("size-8 translate-y-px text-current opacity-70", className),
866
864
  xmlns: "http://www.w3.org/2000/svg",
867
865
  viewBox: "0 0 24 24",
868
866
  fill: "currentColor",
869
867
  "aria-hidden": "true",
870
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5zm0 2c-3.866 0-7 1.79-7 4v1a1 1 0 001 1h12a1 1 0 001-1v-1c0-2.21-3.134-4-7-4z" })
868
+ children: [
869
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" }),
870
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 14c-4.42 0-8 2.24-8 5v5h16v-5c0-2.76-3.58-5-8-5z" })
871
+ ]
871
872
  }
872
873
  );
873
874
  }
@@ -988,11 +989,11 @@ var Avatar = React.forwardRef(function Avatar2({
988
989
  });
989
990
  Avatar.displayName = "Avatar";
990
991
  var overlapMap = {
991
- xs: { tight: "-ml-2", default: "-ml-1.5", loose: "-ml-1" },
992
- sm: { tight: "-ml-3", default: "-ml-2", loose: "-ml-1.5" },
993
- md: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
994
- lg: { tight: "-ml-5", default: "-ml-3.5", loose: "-ml-2.5" },
995
- xl: { tight: "-ml-6", default: "-ml-4", loose: "-ml-3" }
992
+ xs: { tight: "-ml-3", default: "-ml-2.5", loose: "-ml-1.5" },
993
+ sm: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
994
+ md: { tight: "-ml-5", default: "-ml-4", loose: "-ml-3" },
995
+ lg: { tight: "-ml-6", default: "-ml-5", loose: "-ml-3.5" },
996
+ xl: { tight: "-ml-8", default: "-ml-6", loose: "-ml-4" }
996
997
  };
997
998
  var AvatarGroup = React.forwardRef(
998
999
  function AvatarGroup2({
@@ -1028,35 +1029,53 @@ var AvatarGroup = React.forwardRef(
1028
1029
  className: chunk4ON3M3OM_cjs.cn(
1029
1030
  index > 0 && overlapClass,
1030
1031
  // Ensure proper stacking order (first avatar on top)
1031
- "relative"
1032
+ // z-index is set via CSS var so hover:z-50! (Tailwind) can override it
1033
+ "relative inline-flex cursor-pointer transition-transform duration-150 ease-out",
1034
+ "z-(--ag-z)",
1035
+ "hover:z-50! hover:scale-110"
1032
1036
  ),
1033
- style: { zIndex: totalCount - index },
1037
+ style: { "--ag-z": totalCount - index },
1034
1038
  children: React.cloneElement(child, {
1035
1039
  size,
1036
- shape
1040
+ shape,
1041
+ className: chunk4ON3M3OM_cjs.cn(
1042
+ child.props?.className,
1043
+ "ring-2 ring-background"
1044
+ )
1037
1045
  })
1038
1046
  },
1039
1047
  child.props?.alt ?? child.props?.name ?? index
1040
1048
  );
1041
1049
  }),
1042
- overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk4ON3M3OM_cjs.cn(overlapClass, "relative"), style: { zIndex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
1050
+ overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1043
1051
  "span",
1044
1052
  {
1045
1053
  className: chunk4ON3M3OM_cjs.cn(
1046
- avatarVariants({ size, shape }),
1047
- "bg-muted text-muted-foreground",
1048
- "font-semibold"
1054
+ overlapClass,
1055
+ "relative inline-flex z-(--ag-z)"
1049
1056
  ),
1050
- role: "img",
1051
- "aria-label": `${overflowCount} more`,
1052
- "data-ds": "",
1053
- "data-ds-component": "avatar-overflow",
1054
- children: [
1055
- "+",
1056
- overflowCount
1057
- ]
1057
+ style: { "--ag-z": 0 },
1058
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1059
+ "span",
1060
+ {
1061
+ className: chunk4ON3M3OM_cjs.cn(
1062
+ avatarVariants({ size, shape }),
1063
+ "ring-2 ring-background",
1064
+ "bg-muted text-muted-foreground",
1065
+ "font-semibold"
1066
+ ),
1067
+ role: "img",
1068
+ "aria-label": `${overflowCount} more`,
1069
+ "data-ds": "",
1070
+ "data-ds-component": "avatar-overflow",
1071
+ children: [
1072
+ "+",
1073
+ overflowCount
1074
+ ]
1075
+ }
1076
+ )
1058
1077
  }
1059
- ) })
1078
+ )
1060
1079
  ]
1061
1080
  }
1062
1081
  );
@@ -1878,7 +1897,7 @@ var Button = React.forwardRef(
1878
1897
  loading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSpinner, { className: size === "sm" ? "size-3.5" : "size-4" }),
1879
1898
  loading && loadingText ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1880
1899
  !loading && iconLeft && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconLeft }),
1881
- children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk4ON3M3OM_cjs.cn(loading && !loadingText && "invisible"), children }),
1900
+ children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk4ON3M3OM_cjs.cn("inline-flex items-center gap-[inherit]", loading && !loadingText && "invisible"), children }),
1882
1901
  !loading && iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconRight })
1883
1902
  ] })
1884
1903
  ]
@@ -2363,21 +2382,17 @@ var CardContext = React.createContext({ padding: "compact" });
2363
2382
  function useCardContext() {
2364
2383
  return React.useContext(CardContext);
2365
2384
  }
2366
- var cardPaddingMap = {
2367
- compact: "p-(--ds-padding-card)",
2368
- comfortable: "p-6"
2369
- };
2370
2385
  var slotPaddingXMap = {
2371
2386
  compact: "px-(--ds-padding-card)",
2372
2387
  comfortable: "px-6"
2373
2388
  };
2374
- var slotPaddingTopMap = {
2375
- compact: "pt-(--ds-padding-card)",
2376
- comfortable: "pt-6"
2389
+ var cardVerticalPaddingMap = {
2390
+ compact: "py-(--ds-padding-card)",
2391
+ comfortable: "py-6"
2377
2392
  };
2378
- var slotPaddingBottomMap = {
2379
- compact: "pb-(--ds-padding-card)",
2380
- comfortable: "pb-6"
2393
+ var cardGapMap = {
2394
+ compact: "gap-(--ds-gap-default,0.75rem)",
2395
+ comfortable: "gap-4"
2381
2396
  };
2382
2397
  var cardVariants = classVarianceAuthority.cva(
2383
2398
  // Base styles — shared across all variants
@@ -2471,6 +2486,8 @@ var Card = React.forwardRef(function Card2({
2471
2486
  className: chunk4ON3M3OM_cjs.cn(
2472
2487
  "not-prose",
2473
2488
  cardVariants({ variant, fullWidth }),
2489
+ cardVerticalPaddingMap[padding],
2490
+ cardGapMap[padding],
2474
2491
  className
2475
2492
  ),
2476
2493
  "data-ds": "",
@@ -2498,9 +2515,7 @@ var CardHeader = React.forwardRef(
2498
2515
  className: chunk4ON3M3OM_cjs.cn(
2499
2516
  "flex flex-col gap-1.5",
2500
2517
  slotPaddingXMap[padding],
2501
- slotPaddingTopMap[padding],
2502
- slotPaddingBottomMap[padding],
2503
- bordered && "border-b border-border-muted",
2518
+ bordered && "pb-(--ds-padding-card) border-b border-border-muted",
2504
2519
  className
2505
2520
  ),
2506
2521
  "data-ds": "",
@@ -2521,7 +2536,7 @@ var CardBody = React.forwardRef(
2521
2536
  ref,
2522
2537
  className: chunk4ON3M3OM_cjs.cn(
2523
2538
  "flex flex-col gap-2 flex-1",
2524
- cardPaddingMap[padding],
2539
+ slotPaddingXMap[padding],
2525
2540
  className
2526
2541
  ),
2527
2542
  "data-ds": "",
@@ -2543,9 +2558,7 @@ var CardFooter = React.forwardRef(
2543
2558
  className: chunk4ON3M3OM_cjs.cn(
2544
2559
  "flex items-center gap-2",
2545
2560
  slotPaddingXMap[padding],
2546
- slotPaddingTopMap[padding],
2547
- slotPaddingBottomMap[padding],
2548
- bordered && "border-t border-border-muted",
2561
+ bordered && "pt-(--ds-padding-card) border-t border-border-muted",
2549
2562
  alignMap[align],
2550
2563
  className
2551
2564
  ),
@@ -2923,7 +2936,7 @@ var Checkbox = React.forwardRef(function Checkbox2({
2923
2936
  )
2924
2937
  }
2925
2938
  ),
2926
- (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
2939
+ (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
2927
2940
  label && /* @__PURE__ */ jsxRuntime.jsx(
2928
2941
  "label",
2929
2942
  {
@@ -8549,7 +8562,7 @@ function Dropdown({
8549
8562
  "div",
8550
8563
  {
8551
8564
  className: chunk4ON3M3OM_cjs.cn(
8552
- "absolute top-full z-[var(--z-dropdown,40)] mt-1",
8565
+ "absolute top-full z-[var(--z-dropdown)] mt-1",
8553
8566
  align === "end" ? "right-0" : "left-0",
8554
8567
  "min-w-[8rem] rounded-md py-1",
8555
8568
  "border border-border bg-popover text-popover-foreground",
@@ -10323,9 +10336,9 @@ var DropdownMenuItem = React.forwardRef(function DropdownMenuItem2({ className,
10323
10336
  ref,
10324
10337
  className: chunk4ON3M3OM_cjs.cn(
10325
10338
  ...menuItemBase2,
10339
+ "gap-2",
10326
10340
  variant === "danger" && "text-danger focus:bg-danger-muted focus:text-danger-muted-foreground",
10327
10341
  variant === "default" && "text-foreground",
10328
- icon && "gap-2",
10329
10342
  className
10330
10343
  ),
10331
10344
  "data-ds": "",
@@ -10333,7 +10346,7 @@ var DropdownMenuItem = React.forwardRef(function DropdownMenuItem2({ className,
10333
10346
  ...rest,
10334
10347
  children: [
10335
10348
  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
10336
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
10349
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
10337
10350
  shortcut && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuShortcut, { children: shortcut })
10338
10351
  ]
10339
10352
  }
@@ -10345,13 +10358,13 @@ var DropdownMenuCheckboxItem = React.forwardRef(function DropdownMenuCheckboxIte
10345
10358
  radixUi.DropdownMenu.CheckboxItem,
10346
10359
  {
10347
10360
  ref,
10348
- className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "pl-8", className),
10361
+ className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "gap-2 pl-8", className),
10349
10362
  "data-ds": "",
10350
10363
  "data-ds-component": "dropdown-menu-checkbox-item",
10351
10364
  ...rest,
10352
10365
  children: [
10353
10366
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon6, { className: "size-4" }) }) }),
10354
- children
10367
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
10355
10368
  ]
10356
10369
  }
10357
10370
  );
@@ -10366,13 +10379,13 @@ var DropdownMenuRadioItem = React.forwardRef(function DropdownMenuRadioItem2({ c
10366
10379
  radixUi.DropdownMenu.RadioItem,
10367
10380
  {
10368
10381
  ref,
10369
- className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "pl-8", className),
10382
+ className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "gap-2 pl-8", className),
10370
10383
  "data-ds": "",
10371
10384
  "data-ds-component": "dropdown-menu-radio-item",
10372
10385
  ...rest,
10373
10386
  children: [
10374
10387
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(DotIcon2, { className: "size-4" }) }) }),
10375
- children
10388
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
10376
10389
  ]
10377
10390
  }
10378
10391
  );
@@ -10420,8 +10433,7 @@ var DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger2({
10420
10433
  ref,
10421
10434
  className: chunk4ON3M3OM_cjs.cn(
10422
10435
  ...menuItemBase2,
10423
- "data-[state=open]:bg-muted",
10424
- icon && "gap-2",
10436
+ "gap-2 data-[state=open]:bg-muted",
10425
10437
  inset && "pl-8",
10426
10438
  className
10427
10439
  ),
@@ -10430,7 +10442,7 @@ var DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger2({
10430
10442
  ...rest,
10431
10443
  children: [
10432
10444
  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
10433
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
10445
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
10434
10446
  /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon4, { className: "ml-auto size-4 text-muted-foreground" })
10435
10447
  ]
10436
10448
  }
@@ -13483,18 +13495,7 @@ var stripedStyle = {
13483
13495
  backgroundSize: "1rem 1rem"
13484
13496
  };
13485
13497
  var PROGRESS_STYLE_ID = "unified-ui-progress-keyframes";
13486
- function ProgressKeyframes() {
13487
- if (typeof document !== "undefined") {
13488
- if (document.getElementById(PROGRESS_STYLE_ID)) {
13489
- return null;
13490
- }
13491
- }
13492
- return /* @__PURE__ */ jsxRuntime.jsx(
13493
- "style",
13494
- {
13495
- id: PROGRESS_STYLE_ID,
13496
- dangerouslySetInnerHTML: {
13497
- __html: `
13498
+ var PROGRESS_KEYFRAMES_CSS = `
13498
13499
  @keyframes unified-ui-progress-indeterminate {
13499
13500
  0% { transform: translateX(-100%); width: 50%; }
13500
13501
  50% { transform: translateX(50%); width: 30%; }
@@ -13504,10 +13505,17 @@ function ProgressKeyframes() {
13504
13505
  0% { background-position: 1rem 0; }
13505
13506
  100% { background-position: 0 0; }
13506
13507
  }
13507
- `
13508
- }
13508
+ `;
13509
+ function useProgressKeyframes() {
13510
+ React.useEffect(() => {
13511
+ if (document.getElementById(PROGRESS_STYLE_ID)) {
13512
+ return;
13509
13513
  }
13510
- );
13514
+ const style = document.createElement("style");
13515
+ style.id = PROGRESS_STYLE_ID;
13516
+ style.textContent = PROGRESS_KEYFRAMES_CSS;
13517
+ document.head.appendChild(style);
13518
+ }, []);
13511
13519
  }
13512
13520
  var Progress = React.forwardRef(
13513
13521
  function Progress2({
@@ -13528,6 +13536,7 @@ var Progress = React.forwardRef(
13528
13536
  indicatorClassName,
13529
13537
  ...rest
13530
13538
  }, ref) {
13539
+ useProgressKeyframes();
13531
13540
  const clampedValue = Math.max(min2, Math.min(value, max2));
13532
13541
  const range = max2 - min2;
13533
13542
  const percentage = range > 0 ? (clampedValue - min2) / range * 100 : 0;
@@ -13567,7 +13576,6 @@ var Progress = React.forwardRef(
13567
13576
  "data-ds-size": size,
13568
13577
  ...indeterminate ? { "data-ds-indeterminate": "" } : {},
13569
13578
  children: [
13570
- /* @__PURE__ */ jsxRuntime.jsx(ProgressKeyframes, {}),
13571
13579
  showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
13572
13580
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium leading-4 text-foreground", children: label ?? "" }),
13573
13581
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium leading-4 text-muted-foreground tabular-nums", children: typeof label === "string" || !label ? labelFormatter(clampedValue, max2) : "" })
@@ -13784,7 +13792,7 @@ var RadioGroupItem = React.forwardRef(function RadioGroupItem2({ value, label, d
13784
13792
  )
13785
13793
  }
13786
13794
  ),
13787
- (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
13795
+ (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
13788
13796
  label && /* @__PURE__ */ jsxRuntime.jsx(
13789
13797
  "label",
13790
13798
  {
@@ -14601,6 +14609,168 @@ var SelectSeparator = React.forwardRef(function SelectSeparator2({ className, ..
14601
14609
  );
14602
14610
  });
14603
14611
  SelectSeparator.displayName = "SelectSeparator";
14612
+ var separatorVariants = classVarianceAuthority.cva(
14613
+ // Base styles — shared across all variants
14614
+ "shrink-0 bg-border",
14615
+ {
14616
+ variants: {
14617
+ /**
14618
+ * Visual variant of the separator line.
14619
+ */
14620
+ variant: {
14621
+ /**
14622
+ * Default — solid line using the border token color.
14623
+ */
14624
+ default: "",
14625
+ /**
14626
+ * Muted — lighter separator using the muted-foreground color at
14627
+ * reduced opacity. Useful for less prominent divisions.
14628
+ */
14629
+ muted: "bg-muted-foreground/20",
14630
+ /**
14631
+ * Dashed — renders a dashed border instead of a solid background.
14632
+ * Uses border-style rather than background.
14633
+ */
14634
+ dashed: "bg-transparent !h-auto !w-auto",
14635
+ /**
14636
+ * Gradient — fades in from transparent at both ends.
14637
+ * Creates a more elegant, subtle divider.
14638
+ */
14639
+ gradient: "bg-transparent"
14640
+ },
14641
+ /**
14642
+ * Orientation of the separator.
14643
+ */
14644
+ orientation: {
14645
+ horizontal: "h-px w-full",
14646
+ vertical: "h-full w-px"
14647
+ }
14648
+ },
14649
+ compoundVariants: [
14650
+ // Dashed + horizontal
14651
+ {
14652
+ variant: "dashed",
14653
+ orientation: "horizontal",
14654
+ class: "border-b border-dashed border-border w-full"
14655
+ },
14656
+ // Dashed + vertical
14657
+ {
14658
+ variant: "dashed",
14659
+ orientation: "vertical",
14660
+ class: "border-l border-dashed border-border h-full"
14661
+ }
14662
+ ],
14663
+ defaultVariants: {
14664
+ variant: "default",
14665
+ orientation: "horizontal"
14666
+ }
14667
+ }
14668
+ );
14669
+ var spacingYMap = {
14670
+ 0: "my-0",
14671
+ 1: "my-1",
14672
+ 2: "my-2",
14673
+ 3: "my-3",
14674
+ 4: "my-4",
14675
+ 5: "my-5",
14676
+ 6: "my-6",
14677
+ 8: "my-8",
14678
+ 10: "my-10",
14679
+ 12: "my-12"
14680
+ };
14681
+ var spacingXMap = {
14682
+ 0: "mx-0",
14683
+ 1: "mx-1",
14684
+ 2: "mx-2",
14685
+ 3: "mx-3",
14686
+ 4: "mx-4",
14687
+ 5: "mx-5",
14688
+ 6: "mx-6",
14689
+ 8: "mx-8",
14690
+ 10: "mx-10",
14691
+ 12: "mx-12"
14692
+ };
14693
+ var gradientHorizontal = "bg-gradient-to-r from-transparent via-border to-transparent";
14694
+ var gradientVertical = "bg-gradient-to-b from-transparent via-border to-transparent";
14695
+ var Separator2 = React.forwardRef(function Separator3({
14696
+ variant = "default",
14697
+ orientation = "horizontal",
14698
+ decorative = true,
14699
+ spacing = 4,
14700
+ label,
14701
+ className,
14702
+ ...rest
14703
+ }, ref) {
14704
+ const isVertical = orientation === "vertical";
14705
+ const spacingClass = isVertical ? spacingXMap[spacing] ?? "mx-4" : spacingYMap[spacing] ?? "my-4";
14706
+ const gradientClass = variant === "gradient" ? isVertical ? gradientVertical : gradientHorizontal : void 0;
14707
+ if (label && !isVertical) {
14708
+ return /* @__PURE__ */ jsxRuntime.jsxs(
14709
+ "div",
14710
+ {
14711
+ className: chunk4ON3M3OM_cjs.cn(
14712
+ "flex items-center w-full",
14713
+ spacingClass,
14714
+ className
14715
+ ),
14716
+ role: decorative ? "none" : "separator",
14717
+ "aria-orientation": decorative ? void 0 : orientation,
14718
+ "data-ds": "",
14719
+ "data-ds-component": "separator",
14720
+ "data-ds-variant": variant,
14721
+ "data-ds-orientation": orientation,
14722
+ "data-ds-labeled": "",
14723
+ children: [
14724
+ /* @__PURE__ */ jsxRuntime.jsx(
14725
+ radixUi.Separator.Root,
14726
+ {
14727
+ decorative: true,
14728
+ orientation,
14729
+ className: chunk4ON3M3OM_cjs.cn(
14730
+ separatorVariants({ variant, orientation }),
14731
+ gradientClass,
14732
+ "flex-1"
14733
+ )
14734
+ }
14735
+ ),
14736
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 text-xs text-muted-foreground font-medium select-none shrink-0", children: label }),
14737
+ /* @__PURE__ */ jsxRuntime.jsx(
14738
+ radixUi.Separator.Root,
14739
+ {
14740
+ decorative: true,
14741
+ orientation,
14742
+ className: chunk4ON3M3OM_cjs.cn(
14743
+ separatorVariants({ variant, orientation }),
14744
+ gradientClass,
14745
+ "flex-1"
14746
+ )
14747
+ }
14748
+ )
14749
+ ]
14750
+ }
14751
+ );
14752
+ }
14753
+ return /* @__PURE__ */ jsxRuntime.jsx(
14754
+ radixUi.Separator.Root,
14755
+ {
14756
+ ref,
14757
+ decorative,
14758
+ orientation,
14759
+ className: chunk4ON3M3OM_cjs.cn(
14760
+ separatorVariants({ variant, orientation }),
14761
+ gradientClass,
14762
+ spacingClass,
14763
+ className
14764
+ ),
14765
+ "data-ds": "",
14766
+ "data-ds-component": "separator",
14767
+ "data-ds-variant": variant,
14768
+ "data-ds-orientation": orientation,
14769
+ ...rest
14770
+ }
14771
+ );
14772
+ });
14773
+ Separator2.displayName = "Separator";
14604
14774
  var sheetContentVariants = classVarianceAuthority.cva(
14605
14775
  [
14606
14776
  // Layout
@@ -15169,51 +15339,14 @@ var DrawerClose = React.forwardRef(function DrawerClose2({ className, ...rest },
15169
15339
  );
15170
15340
  });
15171
15341
  DrawerClose.displayName = "DrawerClose";
15172
- var SidebarContext = React.createContext({
15173
- collapsed: false,
15174
- setCollapsed: () => {
15175
- },
15176
- isMobile: false,
15177
- mobileOpen: false,
15178
- setMobileOpen: () => {
15179
- }
15180
- });
15181
- function useSidebarContext() {
15182
- return React.useContext(SidebarContext);
15183
- }
15184
- function SidebarProvider({
15185
- defaultCollapsed = false,
15186
- collapsed: controlledCollapsed,
15187
- onCollapsedChange,
15188
- children
15189
- }) {
15190
- const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
15191
- const [mobileOpen, setMobileOpen] = React.useState(false);
15192
- const collapsed = controlledCollapsed !== void 0 ? controlledCollapsed : internalCollapsed;
15193
- const setCollapsed = React.useCallback(
15194
- (v) => {
15195
- if (controlledCollapsed === void 0) setInternalCollapsed(v);
15196
- onCollapsedChange?.(v);
15197
- },
15198
- [controlledCollapsed, onCollapsedChange]
15199
- );
15200
- return /* @__PURE__ */ jsxRuntime.jsx(
15201
- SidebarContext.Provider,
15202
- {
15203
- value: {
15204
- collapsed,
15205
- setCollapsed,
15206
- isMobile: false,
15207
- mobileOpen,
15208
- setMobileOpen
15209
- },
15210
- children
15211
- }
15212
- );
15213
- }
15214
- SidebarProvider.displayName = "SidebarProvider";
15215
- function ChevronLeftIcon3({ className }) {
15216
- return /* @__PURE__ */ jsxRuntime.jsx(
15342
+ var SIDEBAR_COOKIE_NAME = "sidebar:state";
15343
+ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
15344
+ var SIDEBAR_WIDTH = "16rem";
15345
+ var SIDEBAR_WIDTH_MOBILE = "18rem";
15346
+ var SIDEBAR_WIDTH_ICON = "3rem";
15347
+ var SIDEBAR_KEYBOARD_SHORTCUT = "b";
15348
+ function PanelLeftIcon({ className }) {
15349
+ return /* @__PURE__ */ jsxRuntime.jsxs(
15217
15350
  "svg",
15218
15351
  {
15219
15352
  className,
@@ -15225,162 +15358,893 @@ function ChevronLeftIcon3({ className }) {
15225
15358
  strokeLinecap: "round",
15226
15359
  strokeLinejoin: "round",
15227
15360
  "aria-hidden": "true",
15228
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" })
15361
+ children: [
15362
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
15363
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" })
15364
+ ]
15229
15365
  }
15230
15366
  );
15231
15367
  }
15232
- function ChevronRightIcon7({ className }) {
15233
- return /* @__PURE__ */ jsxRuntime.jsx(
15234
- "svg",
15235
- {
15236
- className,
15237
- xmlns: "http://www.w3.org/2000/svg",
15238
- viewBox: "0 0 24 24",
15239
- fill: "none",
15240
- stroke: "currentColor",
15241
- strokeWidth: "2",
15242
- strokeLinecap: "round",
15243
- strokeLinejoin: "round",
15244
- "aria-hidden": "true",
15245
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
15246
- }
15247
- );
15368
+ var SidebarContext = React.createContext({
15369
+ state: "expanded",
15370
+ open: true,
15371
+ setOpen: () => {
15372
+ },
15373
+ openMobile: false,
15374
+ setOpenMobile: () => {
15375
+ },
15376
+ isMobile: false,
15377
+ toggleSidebar: () => {
15378
+ },
15379
+ variant: "default",
15380
+ collapsible: "offcanvas",
15381
+ side: "left"
15382
+ });
15383
+ function useSidebar() {
15384
+ const context = React.useContext(SidebarContext);
15385
+ if (!context) {
15386
+ throw new Error("useSidebar must be used within a <SidebarProvider>");
15387
+ }
15388
+ return context;
15248
15389
  }
15249
- var Sidebar = React.forwardRef(function Sidebar2({
15250
- side = "left",
15251
- collapsedWidth = "64px",
15252
- expandedWidth = "240px",
15253
- className,
15254
- children
15255
- }, ref) {
15256
- const { collapsed } = useSidebarContext();
15257
- const shouldReduce = framerMotion.useReducedMotion();
15258
- return /* @__PURE__ */ jsxRuntime.jsx(
15259
- framerMotion.motion.aside,
15260
- {
15261
- ref,
15262
- className: chunk4ON3M3OM_cjs.cn(
15263
- "flex flex-col h-full border-r border-border bg-background overflow-hidden",
15264
- side === "right" && "border-r-0 border-l",
15265
- className
15266
- ),
15267
- animate: {
15268
- width: collapsed ? collapsedWidth : expandedWidth
15390
+ var useSidebarContext = useSidebar;
15391
+ var MOBILE_BREAKPOINT = 768;
15392
+ function useIsMobile() {
15393
+ const [isMobile, setIsMobile] = React.useState(false);
15394
+ React.useEffect(() => {
15395
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
15396
+ const onChange = () => setIsMobile(mql.matches);
15397
+ mql.addEventListener("change", onChange);
15398
+ setIsMobile(mql.matches);
15399
+ return () => mql.removeEventListener("change", onChange);
15400
+ }, []);
15401
+ return isMobile;
15402
+ }
15403
+ var SidebarProvider = React.forwardRef(
15404
+ function SidebarProvider2({
15405
+ defaultOpen = true,
15406
+ open: openProp,
15407
+ onOpenChange: setOpenProp,
15408
+ variant = "default",
15409
+ collapsible = "offcanvas",
15410
+ side = "left",
15411
+ className,
15412
+ style,
15413
+ children,
15414
+ ...rest
15415
+ }, ref) {
15416
+ const isMobile = useIsMobile();
15417
+ const [openMobile, setOpenMobile] = React.useState(false);
15418
+ const isControlled = openProp !== void 0;
15419
+ const [_open, _setOpen] = React.useState(defaultOpen);
15420
+ const open = isControlled ? openProp : _open;
15421
+ const setOpen = React.useCallback(
15422
+ (value) => {
15423
+ const openState = typeof value === "function" ? value(open) : value;
15424
+ if (setOpenProp) {
15425
+ setOpenProp(openState);
15426
+ } else {
15427
+ _setOpen(openState);
15428
+ }
15429
+ try {
15430
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
15431
+ } catch {
15432
+ }
15269
15433
  },
15270
- transition: shouldReduce ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 30, mass: 0.8 },
15271
- "data-ds": "",
15272
- "data-ds-component": "sidebar",
15273
- "data-ds-collapsed": collapsed ? "" : void 0,
15274
- "data-ds-animated": "",
15275
- children
15276
- }
15277
- );
15278
- });
15279
- Sidebar.displayName = "Sidebar";
15280
- var SidebarToggle = React.forwardRef(
15281
- function SidebarToggle2({ className, children, ...rest }, ref) {
15282
- const { collapsed, setCollapsed } = useSidebarContext();
15283
- return /* @__PURE__ */ jsxRuntime.jsx(
15284
- "button",
15285
- {
15286
- ref,
15287
- type: "button",
15288
- onClick: () => setCollapsed(!collapsed),
15289
- "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
15290
- "aria-expanded": !collapsed,
15291
- className: chunk4ON3M3OM_cjs.cn(
15292
- "inline-flex items-center justify-center size-8 rounded-md",
15293
- "text-muted-foreground hover:text-foreground hover:bg-accent",
15294
- "transition-colors duration-fast",
15295
- chunk3EHT6IOA_cjs.focusRingClasses,
15296
- className
15297
- ),
15298
- "data-ds-component": "sidebar-toggle",
15299
- ...rest,
15300
- children: children ?? (collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon7, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon3, { className: "size-4" }))
15434
+ [setOpenProp, open]
15435
+ );
15436
+ const toggleSidebar = React.useCallback(() => {
15437
+ if (isMobile) {
15438
+ setOpenMobile((prev) => !prev);
15439
+ } else {
15440
+ setOpen((prev) => !prev);
15301
15441
  }
15442
+ }, [isMobile, setOpen]);
15443
+ React.useEffect(() => {
15444
+ const handleKeyDown = (e) => {
15445
+ if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
15446
+ e.preventDefault();
15447
+ toggleSidebar();
15448
+ }
15449
+ };
15450
+ window.addEventListener("keydown", handleKeyDown);
15451
+ return () => window.removeEventListener("keydown", handleKeyDown);
15452
+ }, [toggleSidebar]);
15453
+ const state = open ? "expanded" : "collapsed";
15454
+ const contextValue = React.useMemo(
15455
+ () => ({
15456
+ state,
15457
+ open,
15458
+ setOpen,
15459
+ openMobile,
15460
+ setOpenMobile,
15461
+ isMobile,
15462
+ toggleSidebar,
15463
+ variant,
15464
+ collapsible,
15465
+ side
15466
+ }),
15467
+ [
15468
+ state,
15469
+ open,
15470
+ setOpen,
15471
+ openMobile,
15472
+ setOpenMobile,
15473
+ isMobile,
15474
+ toggleSidebar,
15475
+ variant,
15476
+ collapsible,
15477
+ side
15478
+ ]
15302
15479
  );
15303
- }
15304
- );
15305
- SidebarToggle.displayName = "SidebarToggle";
15306
- var SidebarHeader = React.forwardRef(
15307
- function SidebarHeader2({ className, children, ...rest }, ref) {
15308
- return /* @__PURE__ */ jsxRuntime.jsx(
15480
+ return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Provider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
15309
15481
  "div",
15310
15482
  {
15311
15483
  ref,
15312
15484
  className: chunk4ON3M3OM_cjs.cn(
15313
- "flex items-center gap-3 p-4 border-b border-border shrink-0",
15485
+ "group/sidebar-wrapper flex min-h-svh w-full",
15486
+ "has-data-[variant=inset]:bg-sidebar",
15314
15487
  className
15315
15488
  ),
15316
- "data-ds-component": "sidebar-header",
15317
- ...rest,
15318
- children
15319
- }
15320
- );
15321
- }
15322
- );
15323
- SidebarHeader.displayName = "SidebarHeader";
15324
- var SidebarContent = React.forwardRef(
15325
- function SidebarContent2({ className, children, ...rest }, ref) {
15326
- return /* @__PURE__ */ jsxRuntime.jsx(
15327
- "div",
15328
- {
15329
- ref,
15330
- className: chunk4ON3M3OM_cjs.cn("flex-1 overflow-y-auto py-2", className),
15331
- "data-ds-component": "sidebar-content",
15489
+ style: {
15490
+ "--sidebar-width": SIDEBAR_WIDTH,
15491
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
15492
+ ...style
15493
+ },
15494
+ "data-ds": "",
15495
+ "data-ds-component": "sidebar-provider",
15332
15496
  ...rest,
15333
15497
  children
15334
15498
  }
15335
- );
15499
+ ) }) });
15336
15500
  }
15337
15501
  );
15338
- SidebarContent.displayName = "SidebarContent";
15339
- var SidebarFooter = React.forwardRef(
15340
- function SidebarFooter2({ className, children, ...rest }, ref) {
15341
- return /* @__PURE__ */ jsxRuntime.jsx(
15342
- "div",
15343
- {
15344
- ref,
15345
- className: chunk4ON3M3OM_cjs.cn("shrink-0 border-t border-border p-4", className),
15346
- "data-ds-component": "sidebar-footer",
15347
- ...rest,
15348
- children
15502
+ SidebarProvider.displayName = "SidebarProvider";
15503
+ var Sidebar = React.forwardRef(
15504
+ function Sidebar2({
15505
+ side: sideProp,
15506
+ variant: variantProp,
15507
+ collapsible: collapsibleProp,
15508
+ className,
15509
+ children,
15510
+ ...rest
15511
+ }, ref) {
15512
+ const ctx = useSidebar();
15513
+ const side = sideProp ?? ctx.side;
15514
+ const variant = variantProp ?? ctx.variant;
15515
+ const collapsible = collapsibleProp ?? ctx.collapsible;
15516
+ const shouldReduce = framerMotion.useReducedMotion();
15517
+ if (collapsible === "none") {
15518
+ return /* @__PURE__ */ jsxRuntime.jsx(
15519
+ "div",
15520
+ {
15521
+ ref,
15522
+ className: chunk4ON3M3OM_cjs.cn(
15523
+ "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
15524
+ className
15525
+ ),
15526
+ "data-ds": "",
15527
+ "data-ds-component": "sidebar",
15528
+ ...rest,
15529
+ children
15530
+ }
15531
+ );
15532
+ }
15533
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
15534
+ ctx.isMobile && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: ctx.openMobile && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
15535
+ /* @__PURE__ */ jsxRuntime.jsx(
15536
+ framerMotion.motion.div,
15537
+ {
15538
+ className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
15539
+ variants: shouldReduce ? void 0 : chunkF4JJFWWU_cjs.overlayBackdrop.variants,
15540
+ initial: shouldReduce ? { opacity: 0 } : "initial",
15541
+ animate: shouldReduce ? { opacity: 1 } : "animate",
15542
+ exit: shouldReduce ? { opacity: 0 } : "exit",
15543
+ transition: shouldReduce ? { duration: 0.15 } : chunkF4JJFWWU_cjs.overlayBackdrop.transition,
15544
+ onClick: () => ctx.setOpenMobile(false),
15545
+ "data-ds-animated": ""
15546
+ }
15547
+ ),
15548
+ /* @__PURE__ */ jsxRuntime.jsx(
15549
+ framerMotion.motion.div,
15550
+ {
15551
+ className: chunk4ON3M3OM_cjs.cn(
15552
+ "fixed inset-y-0 z-50 flex w-[--sidebar-width-mobile] flex-col bg-sidebar text-sidebar-foreground",
15553
+ "p-0 shadow-lg",
15554
+ side === "left" ? "left-0 border-r border-sidebar-border" : "right-0 border-l border-sidebar-border",
15555
+ className
15556
+ ),
15557
+ style: {
15558
+ "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE
15559
+ },
15560
+ initial: {
15561
+ x: side === "left" ? "-100%" : "100%",
15562
+ opacity: shouldReduce ? 0 : 1
15563
+ },
15564
+ animate: {
15565
+ x: 0,
15566
+ opacity: 1
15567
+ },
15568
+ exit: {
15569
+ x: side === "left" ? "-100%" : "100%",
15570
+ opacity: shouldReduce ? 0 : 1
15571
+ },
15572
+ transition: shouldReduce ? { duration: 0.15 } : {
15573
+ type: "spring",
15574
+ stiffness: 300,
15575
+ damping: 30,
15576
+ mass: 0.8
15577
+ },
15578
+ "data-ds": "",
15579
+ "data-ds-component": "sidebar",
15580
+ "data-variant": variant,
15581
+ "data-side": side,
15582
+ "data-mobile": "",
15583
+ "data-ds-animated": "",
15584
+ children
15585
+ }
15586
+ )
15587
+ ] }) }),
15588
+ !ctx.isMobile && /* @__PURE__ */ jsxRuntime.jsxs(
15589
+ "div",
15590
+ {
15591
+ ref,
15592
+ className: "group peer hidden md:block text-sidebar-foreground",
15593
+ "data-state": ctx.state,
15594
+ "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
15595
+ "data-variant": variant,
15596
+ "data-side": side,
15597
+ children: [
15598
+ /* @__PURE__ */ jsxRuntime.jsx(
15599
+ framerMotion.motion.div,
15600
+ {
15601
+ className: chunk4ON3M3OM_cjs.cn(
15602
+ "relative h-svh bg-transparent",
15603
+ "duration-200 ease-linear",
15604
+ variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width)+(--spacing(4)))]" : "w-[--sidebar-width]"
15605
+ ),
15606
+ animate: {
15607
+ width: ctx.state === "collapsed" ? collapsible === "offcanvas" ? "0px" : variant === "floating" || variant === "inset" ? "calc(var(--sidebar-width-icon) + theme(spacing.4) + 2px)" : "var(--sidebar-width-icon)" : variant === "floating" || variant === "inset" ? "calc(var(--sidebar-width) + theme(spacing.4))" : "var(--sidebar-width)"
15608
+ },
15609
+ transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }
15610
+ }
15611
+ ),
15612
+ /* @__PURE__ */ jsxRuntime.jsx(
15613
+ framerMotion.motion.div,
15614
+ {
15615
+ className: chunk4ON3M3OM_cjs.cn(
15616
+ "fixed inset-y-0 z-10 hidden h-svh md:flex flex-col",
15617
+ side === "left" ? "left-0" : "right-0",
15618
+ // Variant styles
15619
+ variant === "floating" && "m-2 rounded-lg border border-sidebar-border shadow-lg overflow-hidden",
15620
+ variant === "inset" && "m-2 rounded-lg overflow-hidden",
15621
+ variant === "default" && chunk4ON3M3OM_cjs.cn(
15622
+ "border-sidebar-border",
15623
+ side === "left" ? "border-r" : "border-l"
15624
+ ),
15625
+ "bg-sidebar text-sidebar-foreground",
15626
+ className
15627
+ ),
15628
+ animate: {
15629
+ width: ctx.state === "collapsed" ? collapsible === "offcanvas" ? "0px" : "var(--sidebar-width-icon)" : "var(--sidebar-width)"
15630
+ },
15631
+ transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
15632
+ "data-ds": "",
15633
+ "data-ds-component": "sidebar",
15634
+ "data-variant": variant,
15635
+ "data-side": side,
15636
+ "data-state": ctx.state,
15637
+ "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
15638
+ children: /* @__PURE__ */ jsxRuntime.jsx(
15639
+ "div",
15640
+ {
15641
+ className: chunk4ON3M3OM_cjs.cn(
15642
+ "flex h-full w-full flex-col",
15643
+ "group-data-[collapsible=offcanvas]:opacity-0 group-data-[collapsible=offcanvas]:pointer-events-none"
15644
+ ),
15645
+ "data-sidebar": "content-wrapper",
15646
+ children
15647
+ }
15648
+ )
15649
+ }
15650
+ )
15651
+ ]
15652
+ }
15653
+ )
15654
+ ] });
15655
+ }
15656
+ );
15657
+ Sidebar.displayName = "Sidebar";
15658
+ var SidebarTrigger = React.forwardRef(function SidebarTrigger2({ className, onClick, children, ...rest }, ref) {
15659
+ const { toggleSidebar, state, isMobile } = useSidebar();
15660
+ return /* @__PURE__ */ jsxRuntime.jsxs(
15661
+ "button",
15662
+ {
15663
+ ref,
15664
+ type: "button",
15665
+ onClick: (e) => {
15666
+ onClick?.(e);
15667
+ toggleSidebar();
15668
+ },
15669
+ "aria-label": state === "expanded" ? "Collapse sidebar" : "Expand sidebar",
15670
+ "aria-expanded": state === "expanded",
15671
+ className: chunk4ON3M3OM_cjs.cn(
15672
+ "inline-flex items-center justify-center size-8 shrink-0 rounded-md",
15673
+ "text-muted-foreground hover:text-foreground hover:bg-accent",
15674
+ "transition-colors duration-fast",
15675
+ chunk3EHT6IOA_cjs.focusRingClasses,
15676
+ className
15677
+ ),
15678
+ "data-ds": "",
15679
+ "data-ds-component": "sidebar-trigger",
15680
+ ...rest,
15681
+ children: [
15682
+ children ?? /* @__PURE__ */ jsxRuntime.jsx(PanelLeftIcon, { className: "size-4" }),
15683
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
15684
+ ]
15685
+ }
15686
+ );
15687
+ });
15688
+ SidebarTrigger.displayName = "SidebarTrigger";
15689
+ var SidebarToggle = SidebarTrigger;
15690
+ var SidebarRail = React.forwardRef(
15691
+ function SidebarRail2({ className, ...rest }, ref) {
15692
+ const { toggleSidebar, side } = useSidebar();
15693
+ return /* @__PURE__ */ jsxRuntime.jsx(
15694
+ "button",
15695
+ {
15696
+ ref,
15697
+ type: "button",
15698
+ tabIndex: -1,
15699
+ "aria-label": "Toggle Sidebar",
15700
+ onClick: toggleSidebar,
15701
+ title: "Toggle Sidebar",
15702
+ className: chunk4ON3M3OM_cjs.cn(
15703
+ "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 md:flex items-center justify-center",
15704
+ "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
15705
+ "hover:after:bg-sidebar-border",
15706
+ "transition-all duration-fast ease-linear",
15707
+ "group-data-[side=left]:right-0 group-data-[side=right]:left-0",
15708
+ side === "left" ? "cursor-w-resize group-data-[state=collapsed]:cursor-e-resize" : "cursor-e-resize group-data-[state=collapsed]:cursor-w-resize",
15709
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
15710
+ "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
15711
+ className
15712
+ ),
15713
+ "data-ds": "",
15714
+ "data-ds-component": "sidebar-rail",
15715
+ ...rest
15716
+ }
15717
+ );
15718
+ }
15719
+ );
15720
+ SidebarRail.displayName = "SidebarRail";
15721
+ var SidebarInset = React.forwardRef(
15722
+ function SidebarInset2({ className, children, ...rest }, ref) {
15723
+ return /* @__PURE__ */ jsxRuntime.jsx(
15724
+ "main",
15725
+ {
15726
+ ref,
15727
+ className: chunk4ON3M3OM_cjs.cn(
15728
+ "relative flex min-h-svh flex-1 flex-col bg-background",
15729
+ "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]",
15730
+ "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0",
15731
+ "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
15732
+ className
15733
+ ),
15734
+ "data-ds": "",
15735
+ "data-ds-component": "sidebar-inset",
15736
+ ...rest,
15737
+ children
15738
+ }
15739
+ );
15740
+ }
15741
+ );
15742
+ SidebarInset.displayName = "SidebarInset";
15743
+ var SidebarHeader = React.forwardRef(
15744
+ function SidebarHeader2({ className, children, ...rest }, ref) {
15745
+ return /* @__PURE__ */ jsxRuntime.jsx(
15746
+ "div",
15747
+ {
15748
+ ref,
15749
+ className: chunk4ON3M3OM_cjs.cn(
15750
+ "flex flex-col gap-2 p-2",
15751
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15752
+ className
15753
+ ),
15754
+ "data-ds": "",
15755
+ "data-ds-component": "sidebar-header",
15756
+ "data-sidebar": "header",
15757
+ ...rest,
15758
+ children
15759
+ }
15760
+ );
15761
+ }
15762
+ );
15763
+ SidebarHeader.displayName = "SidebarHeader";
15764
+ var SidebarContent = React.forwardRef(
15765
+ function SidebarContent2({ className, children, ...rest }, ref) {
15766
+ return /* @__PURE__ */ jsxRuntime.jsx(
15767
+ "div",
15768
+ {
15769
+ ref,
15770
+ className: chunk4ON3M3OM_cjs.cn(
15771
+ "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden",
15772
+ "group-data-[collapsible=icon]:items-center",
15773
+ className
15774
+ ),
15775
+ "data-ds": "",
15776
+ "data-ds-component": "sidebar-content",
15777
+ "data-sidebar": "content",
15778
+ ...rest,
15779
+ children
15780
+ }
15781
+ );
15782
+ }
15783
+ );
15784
+ SidebarContent.displayName = "SidebarContent";
15785
+ var SidebarFooter = React.forwardRef(
15786
+ function SidebarFooter2({ className, children, ...rest }, ref) {
15787
+ return /* @__PURE__ */ jsxRuntime.jsx(
15788
+ "div",
15789
+ {
15790
+ ref,
15791
+ className: chunk4ON3M3OM_cjs.cn(
15792
+ "flex flex-col gap-2 p-2",
15793
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15794
+ className
15795
+ ),
15796
+ "data-ds": "",
15797
+ "data-ds-component": "sidebar-footer",
15798
+ "data-sidebar": "footer",
15799
+ ...rest,
15800
+ children
15349
15801
  }
15350
15802
  );
15351
15803
  }
15352
15804
  );
15353
15805
  SidebarFooter.displayName = "SidebarFooter";
15354
- var SidebarSection = React.forwardRef(
15355
- function SidebarSection2({ title, className, children, ...rest }, ref) {
15356
- const { collapsed } = useSidebarContext();
15357
- return /* @__PURE__ */ jsxRuntime.jsxs(
15806
+ var SidebarSeparator = React.forwardRef(function SidebarSeparator2({ className, ...rest }, ref) {
15807
+ return /* @__PURE__ */ jsxRuntime.jsx(
15808
+ "hr",
15809
+ {
15810
+ ref,
15811
+ className: chunk4ON3M3OM_cjs.cn("mx-2 w-auto border-sidebar-border", className),
15812
+ "data-ds": "",
15813
+ "data-ds-component": "sidebar-separator",
15814
+ "data-sidebar": "separator",
15815
+ ...rest
15816
+ }
15817
+ );
15818
+ });
15819
+ SidebarSeparator.displayName = "SidebarSeparator";
15820
+ var SidebarInput = React.forwardRef(
15821
+ function SidebarInput2({ className, ...rest }, ref) {
15822
+ return /* @__PURE__ */ jsxRuntime.jsx(
15823
+ "input",
15824
+ {
15825
+ ref,
15826
+ className: chunk4ON3M3OM_cjs.cn(
15827
+ "h-8 w-full rounded-md border border-sidebar-border bg-background px-3",
15828
+ "text-sm text-sidebar-foreground placeholder:text-sidebar-foreground/50",
15829
+ "transition-[border-color,box-shadow] duration-fast",
15830
+ "focus:border-sidebar-ring focus:outline-none focus:ring-2 focus:ring-sidebar-ring/20",
15831
+ className
15832
+ ),
15833
+ "data-ds": "",
15834
+ "data-ds-component": "sidebar-input",
15835
+ "data-sidebar": "input",
15836
+ ...rest
15837
+ }
15838
+ );
15839
+ }
15840
+ );
15841
+ SidebarInput.displayName = "SidebarInput";
15842
+ var SidebarGroup = React.forwardRef(
15843
+ function SidebarGroup2({ className, children, ...rest }, ref) {
15844
+ return /* @__PURE__ */ jsxRuntime.jsx(
15358
15845
  "div",
15359
15846
  {
15360
15847
  ref,
15361
- className: chunk4ON3M3OM_cjs.cn("px-3 py-2", className),
15362
- "data-ds-component": "sidebar-section",
15848
+ className: chunk4ON3M3OM_cjs.cn(
15849
+ "relative flex w-full min-w-0 flex-col p-2",
15850
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15851
+ className
15852
+ ),
15853
+ "data-ds": "",
15854
+ "data-ds-component": "sidebar-group",
15855
+ "data-sidebar": "group",
15363
15856
  ...rest,
15364
- children: [
15365
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: title && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
15366
- framerMotion.motion.p,
15367
- {
15368
- className: "px-2 mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground",
15369
- initial: { opacity: 0 },
15370
- animate: { opacity: 1 },
15371
- exit: { opacity: 0 },
15372
- transition: { duration: 0.15 },
15373
- "data-ds-animated": "",
15374
- children: title
15375
- }
15376
- ) }),
15377
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
15378
- ]
15857
+ children
15858
+ }
15859
+ );
15860
+ }
15861
+ );
15862
+ SidebarGroup.displayName = "SidebarGroup";
15863
+ var SidebarGroupLabel = React.forwardRef(function SidebarGroupLabel2({ className, asChild = false, children, ...rest }, ref) {
15864
+ const { state } = useSidebar();
15865
+ const classes = chunk4ON3M3OM_cjs.cn(
15866
+ "flex h-8 shrink-0 items-center rounded-md px-2",
15867
+ "text-xs font-medium text-sidebar-foreground/70",
15868
+ "outline-none ring-sidebar-ring",
15869
+ "transition-[margin,opacity,padding] duration-200 ease-linear",
15870
+ // When collapsed to icon mode, hide label
15871
+ state === "collapsed" && "opacity-0 overflow-hidden h-0 p-0 m-0",
15872
+ className
15873
+ );
15874
+ if (asChild) {
15875
+ return /* @__PURE__ */ jsxRuntime.jsx(
15876
+ "div",
15877
+ {
15878
+ ref,
15879
+ className: classes,
15880
+ "data-ds": "",
15881
+ "data-ds-component": "sidebar-group-label",
15882
+ "data-sidebar": "group-label",
15883
+ ...rest,
15884
+ children
15885
+ }
15886
+ );
15887
+ }
15888
+ return /* @__PURE__ */ jsxRuntime.jsx(
15889
+ "div",
15890
+ {
15891
+ ref,
15892
+ className: classes,
15893
+ "data-ds": "",
15894
+ "data-ds-component": "sidebar-group-label",
15895
+ "data-sidebar": "group-label",
15896
+ ...rest,
15897
+ children
15898
+ }
15899
+ );
15900
+ });
15901
+ SidebarGroupLabel.displayName = "SidebarGroupLabel";
15902
+ var SidebarGroupAction = React.forwardRef(function SidebarGroupAction2({ className, children, ...rest }, ref) {
15903
+ const { state } = useSidebar();
15904
+ return /* @__PURE__ */ jsxRuntime.jsx(
15905
+ "button",
15906
+ {
15907
+ ref,
15908
+ type: "button",
15909
+ className: chunk4ON3M3OM_cjs.cn(
15910
+ "absolute right-3 top-3.5 flex items-center justify-center",
15911
+ "size-5 rounded-md p-0",
15912
+ "text-sidebar-foreground/70 ring-sidebar-ring",
15913
+ "outline-none",
15914
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
15915
+ "transition-transform duration-200",
15916
+ chunk3EHT6IOA_cjs.focusRingClasses,
15917
+ "[&>svg]:size-4 [&>svg]:shrink-0",
15918
+ // When icon-collapsed, hide
15919
+ state === "collapsed" && "hidden",
15920
+ className
15921
+ ),
15922
+ "data-ds": "",
15923
+ "data-ds-component": "sidebar-group-action",
15924
+ "data-sidebar": "group-action",
15925
+ ...rest,
15926
+ children
15927
+ }
15928
+ );
15929
+ });
15930
+ SidebarGroupAction.displayName = "SidebarGroupAction";
15931
+ var SidebarGroupContent = React.forwardRef(function SidebarGroupContent2({ className, children, ...rest }, ref) {
15932
+ return /* @__PURE__ */ jsxRuntime.jsx(
15933
+ "div",
15934
+ {
15935
+ ref,
15936
+ className: chunk4ON3M3OM_cjs.cn("w-full text-sm", className),
15937
+ "data-ds": "",
15938
+ "data-ds-component": "sidebar-group-content",
15939
+ "data-sidebar": "group-content",
15940
+ ...rest,
15941
+ children
15942
+ }
15943
+ );
15944
+ });
15945
+ SidebarGroupContent.displayName = "SidebarGroupContent";
15946
+ var SidebarMenu = React.forwardRef(
15947
+ function SidebarMenu2({ className, children, ...rest }, ref) {
15948
+ return /* @__PURE__ */ jsxRuntime.jsx(
15949
+ "ul",
15950
+ {
15951
+ ref,
15952
+ className: chunk4ON3M3OM_cjs.cn(
15953
+ "flex w-full min-w-0 flex-col gap-1 list-none m-0 p-0",
15954
+ "group-data-[collapsible=icon]:items-center",
15955
+ className
15956
+ ),
15957
+ "data-ds": "",
15958
+ "data-ds-component": "sidebar-menu",
15959
+ "data-sidebar": "menu",
15960
+ ...rest,
15961
+ children
15379
15962
  }
15380
15963
  );
15381
15964
  }
15382
15965
  );
15383
- SidebarSection.displayName = "SidebarSection";
15966
+ SidebarMenu.displayName = "SidebarMenu";
15967
+ var SidebarMenuItem = React.forwardRef(function SidebarMenuItem2({ className, children, ...rest }, ref) {
15968
+ return /* @__PURE__ */ jsxRuntime.jsx(
15969
+ "li",
15970
+ {
15971
+ ref,
15972
+ className: chunk4ON3M3OM_cjs.cn("group/menu-item relative list-none m-0 p-0", className),
15973
+ "data-ds": "",
15974
+ "data-ds-component": "sidebar-menu-item",
15975
+ "data-sidebar": "menu-item",
15976
+ ...rest,
15977
+ children
15978
+ }
15979
+ );
15980
+ });
15981
+ SidebarMenuItem.displayName = "SidebarMenuItem";
15982
+ var SidebarMenuButton = React.forwardRef(function SidebarMenuButton2({
15983
+ isActive = false,
15984
+ size = "default",
15985
+ variant = "default",
15986
+ tooltip,
15987
+ asChild = false,
15988
+ className,
15989
+ children,
15990
+ ...rest
15991
+ }, ref) {
15992
+ const { state, isMobile, collapsible } = useSidebar();
15993
+ const isCollapsed = state === "collapsed" && collapsible === "icon";
15994
+ const lgExpandedLayout = !isCollapsed ? [
15995
+ "[&>*:nth-child(2)]:flex-1 [&>*:nth-child(2)]:min-w-0",
15996
+ "[&>*:nth-child(2)]:grid [&>*:nth-child(2)]:text-left [&>*:nth-child(2)]:text-sm [&>*:nth-child(2)]:leading-tight",
15997
+ "[&>*:nth-child(2)_span]:truncate",
15998
+ "[&>svg:last-child]:ml-auto [&>svg:last-child]:shrink-0"
15999
+ ].join(" ") : "";
16000
+ const sizeClasses3 = {
16001
+ sm: "h-7 text-xs",
16002
+ default: "h-8 text-sm",
16003
+ lg: [
16004
+ "h-12 text-sm",
16005
+ lgExpandedLayout,
16006
+ // lg collapsed: shrink height to match default buttons and scale
16007
+ // the first-child wrapper (logo div, Avatar) to 24px so it fits
16008
+ // neatly inside the 32px collapsed button.
16009
+ "group-data-[collapsible=icon]:!h-8",
16010
+ "group-data-[collapsible=icon]:[&>:first-child]:!size-6",
16011
+ "group-data-[collapsible=icon]:[&>:first-child]:shrink-0",
16012
+ "group-data-[collapsible=icon]:[&>:first-child]:overflow-hidden",
16013
+ "group-data-[collapsible=icon]:[&>:first-child]:rounded-md"
16014
+ ].join(" ")
16015
+ };
16016
+ const buttonClasses = chunk4ON3M3OM_cjs.cn(
16017
+ // Base
16018
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2",
16019
+ "outline-none ring-sidebar-ring",
16020
+ "transition-[width,height,padding] duration-200 ease-linear",
16021
+ chunk3EHT6IOA_cjs.focusRingClasses,
16022
+ // Active & hover states
16023
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
16024
+ "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
16025
+ // Size
16026
+ sizeClasses3[size],
16027
+ // Variant
16028
+ variant === "outline" && "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
16029
+ // Active
16030
+ isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
16031
+ // Icon collapse — fixed 32px button, no padding, center the icon,
16032
+ // hide everything except the first child (icon/avatar).
16033
+ // Plain <svg> icons stay at size-4 (16px); lg wrapper divs are
16034
+ // handled separately by the lg sizeClass above.
16035
+ isCollapsed && "!size-8 !p-0 !gap-0 justify-center [&>*:not(:first-child)]:hidden [&>svg]:size-4",
16036
+ // Disabled
16037
+ "disabled:pointer-events-none disabled:opacity-50",
16038
+ // Icon sizing
16039
+ "[&>svg]:size-4 [&>svg]:shrink-0",
16040
+ className
16041
+ );
16042
+ const button = asChild ? /* @__PURE__ */ jsxRuntime.jsx(
16043
+ "span",
16044
+ {
16045
+ ref,
16046
+ className: buttonClasses,
16047
+ "data-ds": "",
16048
+ "data-ds-component": "sidebar-menu-button",
16049
+ "data-sidebar": "menu-button",
16050
+ "data-size": size,
16051
+ "data-active": isActive ? "" : void 0,
16052
+ children
16053
+ }
16054
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
16055
+ "button",
16056
+ {
16057
+ ref,
16058
+ type: "button",
16059
+ className: buttonClasses,
16060
+ "aria-current": isActive ? "page" : void 0,
16061
+ "data-ds": "",
16062
+ "data-ds-component": "sidebar-menu-button",
16063
+ "data-sidebar": "menu-button",
16064
+ "data-size": size,
16065
+ "data-active": isActive ? "" : void 0,
16066
+ ...rest,
16067
+ children
16068
+ }
16069
+ );
16070
+ if (!tooltip || isMobile) {
16071
+ return button;
16072
+ }
16073
+ if (!isCollapsed) {
16074
+ return button;
16075
+ }
16076
+ const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip;
16077
+ return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [
16078
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: button }),
16079
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
16080
+ radixUi.Tooltip.Content,
16081
+ {
16082
+ side: "right",
16083
+ align: "center",
16084
+ sideOffset: 4,
16085
+ className: chunk4ON3M3OM_cjs.cn(
16086
+ "z-(--z-tooltip,9999)",
16087
+ "overflow-hidden rounded-md px-3 py-1.5",
16088
+ "bg-sidebar-primary text-sidebar-primary-foreground",
16089
+ "text-xs font-medium",
16090
+ "animate-in fade-in-0 zoom-in-95",
16091
+ "data-[side=right]:slide-in-from-left-2"
16092
+ ),
16093
+ children: tooltipContent
16094
+ }
16095
+ ) })
16096
+ ] });
16097
+ });
16098
+ SidebarMenuButton.displayName = "SidebarMenuButton";
16099
+ var SidebarMenuAction = React.forwardRef(function SidebarMenuAction2({ showOnHover = false, className, children, ...rest }, ref) {
16100
+ const { state } = useSidebar();
16101
+ return /* @__PURE__ */ jsxRuntime.jsx(
16102
+ "button",
16103
+ {
16104
+ ref,
16105
+ type: "button",
16106
+ className: chunk4ON3M3OM_cjs.cn(
16107
+ "absolute right-1 top-1.5 flex items-center justify-center",
16108
+ "size-5 rounded-md p-0",
16109
+ "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
16110
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
16111
+ "transition-opacity duration-fast",
16112
+ chunk3EHT6IOA_cjs.focusRingClasses,
16113
+ "[&>svg]:size-4 [&>svg]:shrink-0",
16114
+ // Show on hover only
16115
+ showOnHover && "opacity-0 group-hover/menu-item:opacity-100 group-focus-within/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground",
16116
+ // Hide when collapsed to icon mode
16117
+ state === "collapsed" && "hidden",
16118
+ className
16119
+ ),
16120
+ "data-ds": "",
16121
+ "data-ds-component": "sidebar-menu-action",
16122
+ "data-sidebar": "menu-action",
16123
+ ...rest,
16124
+ children
16125
+ }
16126
+ );
16127
+ });
16128
+ SidebarMenuAction.displayName = "SidebarMenuAction";
16129
+ var SidebarMenuBadge = React.forwardRef(function SidebarMenuBadge2({ className, children, ...rest }, ref) {
16130
+ const { state } = useSidebar();
16131
+ return /* @__PURE__ */ jsxRuntime.jsx(
16132
+ "div",
16133
+ {
16134
+ ref,
16135
+ className: chunk4ON3M3OM_cjs.cn(
16136
+ "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1",
16137
+ "text-xs font-medium tabular-nums text-sidebar-foreground",
16138
+ "select-none pointer-events-none",
16139
+ // Hide when collapsed
16140
+ state === "collapsed" && "hidden",
16141
+ className
16142
+ ),
16143
+ "data-ds": "",
16144
+ "data-ds-component": "sidebar-menu-badge",
16145
+ "data-sidebar": "menu-badge",
16146
+ ...rest,
16147
+ children
16148
+ }
16149
+ );
16150
+ });
16151
+ SidebarMenuBadge.displayName = "SidebarMenuBadge";
16152
+ var SidebarMenuSkeleton = React.forwardRef(function SidebarMenuSkeleton2({ className, showIcon = false, ...rest }, ref) {
16153
+ const width = React.useMemo(() => {
16154
+ return `${Math.floor(Math.random() * 40) + 50}%`;
16155
+ }, []);
16156
+ return /* @__PURE__ */ jsxRuntime.jsxs(
16157
+ "div",
16158
+ {
16159
+ ref,
16160
+ className: chunk4ON3M3OM_cjs.cn(
16161
+ "flex h-8 items-center gap-2 rounded-md px-2",
16162
+ className
16163
+ ),
16164
+ "data-ds": "",
16165
+ "data-ds-component": "sidebar-menu-skeleton",
16166
+ "data-sidebar": "menu-skeleton",
16167
+ ...rest,
16168
+ children: [
16169
+ showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-4 rounded-md bg-sidebar-accent animate-pulse" }),
16170
+ /* @__PURE__ */ jsxRuntime.jsx(
16171
+ "div",
16172
+ {
16173
+ className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-sidebar-accent animate-pulse",
16174
+ style: { "--skeleton-width": width }
16175
+ }
16176
+ )
16177
+ ]
16178
+ }
16179
+ );
16180
+ });
16181
+ SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
16182
+ var SidebarMenuSub = React.forwardRef(function SidebarMenuSub2({ className, children, ...rest }, ref) {
16183
+ const { state } = useSidebar();
16184
+ return /* @__PURE__ */ jsxRuntime.jsx(
16185
+ "ul",
16186
+ {
16187
+ ref,
16188
+ className: chunk4ON3M3OM_cjs.cn(
16189
+ "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 list-none m-0 p-0",
16190
+ "border-l border-sidebar-border pl-2.5 py-0.5",
16191
+ // Hide when collapsed to icon
16192
+ state === "collapsed" && "hidden",
16193
+ className
16194
+ ),
16195
+ "data-ds": "",
16196
+ "data-ds-component": "sidebar-menu-sub",
16197
+ "data-sidebar": "menu-sub",
16198
+ ...rest,
16199
+ children
16200
+ }
16201
+ );
16202
+ });
16203
+ SidebarMenuSub.displayName = "SidebarMenuSub";
16204
+ var SidebarMenuSubItem = React.forwardRef(function SidebarMenuSubItem2({ className, children, ...rest }, ref) {
16205
+ return /* @__PURE__ */ jsxRuntime.jsx(
16206
+ "li",
16207
+ {
16208
+ ref,
16209
+ className: chunk4ON3M3OM_cjs.cn("list-none m-0 p-0", className),
16210
+ "data-ds": "",
16211
+ "data-ds-component": "sidebar-menu-sub-item",
16212
+ "data-sidebar": "menu-sub-item",
16213
+ ...rest,
16214
+ children
16215
+ }
16216
+ );
16217
+ });
16218
+ SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
16219
+ var SidebarMenuSubButton = React.forwardRef(function SidebarMenuSubButton2({ isActive = false, size = "md", className, children, ...rest }, ref) {
16220
+ return /* @__PURE__ */ jsxRuntime.jsx(
16221
+ "a",
16222
+ {
16223
+ ref,
16224
+ className: chunk4ON3M3OM_cjs.cn(
16225
+ "flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 no-underline",
16226
+ "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
16227
+ "transition-colors duration-fast",
16228
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:no-underline",
16229
+ chunk3EHT6IOA_cjs.focusRingClasses,
16230
+ size === "sm" ? "h-6 text-xs" : "h-7 text-xs",
16231
+ isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
16232
+ "disabled:pointer-events-none disabled:opacity-50",
16233
+ "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
16234
+ className
16235
+ ),
16236
+ "aria-current": isActive ? "page" : void 0,
16237
+ "data-ds": "",
16238
+ "data-ds-component": "sidebar-menu-sub-button",
16239
+ "data-sidebar": "menu-sub-button",
16240
+ "data-active": isActive ? "" : void 0,
16241
+ ...rest,
16242
+ children
16243
+ }
16244
+ );
16245
+ });
16246
+ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
16247
+ var SidebarSection = SidebarGroup;
15384
16248
  var SidebarItem = React.forwardRef(
15385
16249
  function SidebarItem2({
15386
16250
  icon,
@@ -15392,12 +16256,14 @@ var SidebarItem = React.forwardRef(
15392
16256
  className,
15393
16257
  children,
15394
16258
  ...rest
15395
- }, _ref) {
15396
- const { collapsed } = useSidebarContext();
16259
+ }, ref) {
16260
+ const { state } = useSidebar();
16261
+ const isCollapsed = state === "collapsed";
15397
16262
  const Tag3 = href ? "a" : "button";
15398
16263
  return /* @__PURE__ */ jsxRuntime.jsxs(
15399
16264
  Tag3,
15400
16265
  {
16266
+ ref,
15401
16267
  href,
15402
16268
  type: href ? void 0 : "button",
15403
16269
  disabled,
@@ -15408,17 +16274,18 @@ var SidebarItem = React.forwardRef(
15408
16274
  "transition-colors duration-fast",
15409
16275
  "disabled:pointer-events-none disabled:opacity-50",
15410
16276
  chunk3EHT6IOA_cjs.focusRingClasses,
15411
- active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent/60",
15412
- collapsed && "justify-center",
16277
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/60",
16278
+ isCollapsed && "justify-center",
15413
16279
  className
15414
16280
  ),
15415
- title: collapsed && typeof label === "string" ? label : void 0,
16281
+ title: isCollapsed && typeof label === "string" ? label : void 0,
16282
+ "data-ds": "",
15416
16283
  "data-ds-component": "sidebar-item",
15417
16284
  "data-ds-active": active ? "" : void 0,
15418
16285
  ...rest,
15419
16286
  children: [
15420
16287
  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-5 flex items-center justify-center", children: icon }),
15421
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: !collapsed && (label || children) && /* @__PURE__ */ jsxRuntime.jsx(
16288
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: !isCollapsed && (label || children) && /* @__PURE__ */ jsxRuntime.jsx(
15422
16289
  framerMotion.motion.span,
15423
16290
  {
15424
16291
  className: "flex-1 truncate",
@@ -15430,32 +16297,15 @@ var SidebarItem = React.forwardRef(
15430
16297
  children: label ?? children
15431
16298
  }
15432
16299
  ) }),
15433
- badge && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
16300
+ badge && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
15434
16301
  ]
15435
16302
  }
15436
16303
  );
15437
16304
  }
15438
16305
  );
15439
16306
  SidebarItem.displayName = "SidebarItem";
15440
- function SidebarMobileOverlay({ className }) {
15441
- const { mobileOpen, setMobileOpen } = useSidebarContext();
15442
- const shouldReduce = framerMotion.useReducedMotion();
15443
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(
15444
- framerMotion.motion.div,
15445
- {
15446
- className: chunk4ON3M3OM_cjs.cn(
15447
- "fixed inset-0 z-overlay bg-black/50 backdrop-blur-sm md:hidden",
15448
- className
15449
- ),
15450
- variants: shouldReduce ? void 0 : chunkF4JJFWWU_cjs.overlayBackdrop.variants,
15451
- initial: shouldReduce ? { opacity: 0 } : "initial",
15452
- animate: shouldReduce ? { opacity: 1 } : "animate",
15453
- exit: shouldReduce ? { opacity: 0 } : "exit",
15454
- transition: shouldReduce ? { duration: 0.15 } : chunkF4JJFWWU_cjs.overlayBackdrop.transition,
15455
- onClick: () => setMobileOpen(false),
15456
- "data-ds-animated": ""
15457
- }
15458
- ) });
16307
+ function SidebarMobileOverlay(_props) {
16308
+ return null;
15459
16309
  }
15460
16310
  SidebarMobileOverlay.displayName = "SidebarMobileOverlay";
15461
16311
  var skeletonVariants = classVarianceAuthority.cva(
@@ -16563,11 +17413,11 @@ var Switch = React.forwardRef(function Switch2({
16563
17413
  const [internalChecked, setInternalChecked] = React.useState(
16564
17414
  checked ?? defaultChecked ?? false
16565
17415
  );
16566
- React.useEffect(() => {
16567
- if (isControlled) {
16568
- setInternalChecked(checked);
16569
- }
16570
- }, [isControlled, checked]);
17416
+ const [prevChecked, setPrevChecked] = React.useState(checked);
17417
+ if (isControlled && checked !== prevChecked) {
17418
+ setPrevChecked(checked);
17419
+ setInternalChecked(checked);
17420
+ }
16571
17421
  const handleCheckedChange = React.useCallback(
16572
17422
  (value) => {
16573
17423
  if (!isControlled) {
@@ -16599,7 +17449,7 @@ var Switch = React.forwardRef(function Switch2({
16599
17449
  if (!label) {
16600
17450
  return switchElement;
16601
17451
  }
16602
- const labelBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
17452
+ const labelBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
16603
17453
  /* @__PURE__ */ jsxRuntime.jsx(
16604
17454
  "label",
16605
17455
  {
@@ -16631,7 +17481,7 @@ var Switch = React.forwardRef(function Switch2({
16631
17481
  "div",
16632
17482
  {
16633
17483
  className: chunk4ON3M3OM_cjs.cn(
16634
- "inline-flex items-center gap-3",
17484
+ "flex items-center gap-3",
16635
17485
  // Reverse order when label is on the left
16636
17486
  labelPosition === "left" ? "flex-row" : "flex-row-reverse",
16637
17487
  // Align to start when description is present
@@ -17082,20 +17932,17 @@ var Textarea = React.forwardRef(
17082
17932
  ...rest
17083
17933
  }, ref) {
17084
17934
  const internalRef = React.useRef(null);
17085
- const [charCount, setCharCount] = React.useState(() => {
17086
- if (value !== void 0) return String(value).length;
17087
- if (defaultValue !== void 0) return String(defaultValue).length;
17088
- return 0;
17089
- });
17090
- const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
17091
- React.useEffect(() => {
17092
- if (value !== void 0) {
17093
- setCharCount(String(value).length);
17935
+ const [uncontrolledCharCount, setUncontrolledCharCount] = React.useState(
17936
+ () => {
17937
+ if (defaultValue !== void 0) return String(defaultValue).length;
17938
+ return 0;
17094
17939
  }
17095
- }, [value]);
17940
+ );
17941
+ const charCount = value !== void 0 ? String(value).length : uncontrolledCharCount;
17942
+ const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
17096
17943
  const handleChange = React.useCallback(
17097
17944
  (e) => {
17098
- setCharCount(e.target.value.length);
17945
+ setUncontrolledCharCount(e.target.value.length);
17099
17946
  adjustHeight();
17100
17947
  onChange?.(e);
17101
17948
  },
@@ -18430,13 +19277,15 @@ var ColorPicker = React.forwardRef(
18430
19277
  const [hue, setHue] = React.useState(hsl.h);
18431
19278
  const [sat, setSat] = React.useState(hsl.s);
18432
19279
  const [lit, setLit] = React.useState(hsl.l);
18433
- React.useEffect(() => {
19280
+ const [prevValue, setPrevValue] = React.useState(currentValue);
19281
+ if (currentValue !== prevValue) {
19282
+ setPrevValue(currentValue);
18434
19283
  const parsed = hexToHsl(currentValue);
18435
19284
  setHue(parsed.h);
18436
19285
  setSat(parsed.s);
18437
19286
  setLit(parsed.l);
18438
19287
  setHexInput(currentValue);
18439
- }, [currentValue]);
19288
+ }
18440
19289
  const updateColor = React.useCallback(
18441
19290
  (hex) => {
18442
19291
  if (!value) setInternalValue(hex);
@@ -18733,7 +19582,7 @@ var SonnerToaster = React.forwardRef(
18733
19582
  }
18734
19583
  );
18735
19584
  SonnerToaster.displayName = "SonnerToaster";
18736
- function ChevronRightIcon8({ className }) {
19585
+ function ChevronRightIcon7({ className }) {
18737
19586
  return /* @__PURE__ */ jsxRuntime.jsx(
18738
19587
  "svg",
18739
19588
  {
@@ -18961,7 +19810,7 @@ function TreeItem({ node, depth }) {
18961
19810
  tabIndex: node.disabled ? -1 : 0,
18962
19811
  children: [
18963
19812
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex size-4 items-center justify-center shrink-0", children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
18964
- ChevronRightIcon8,
19813
+ ChevronRightIcon7,
18965
19814
  {
18966
19815
  className: chunk4ON3M3OM_cjs.cn(
18967
19816
  "size-3.5 text-muted-foreground transition-transform duration-fast",
@@ -19283,7 +20132,7 @@ function XIcon6({ className }) {
19283
20132
  }
19284
20133
  );
19285
20134
  }
19286
- function ChevronLeftIcon4({ className }) {
20135
+ function ChevronLeftIcon3({ className }) {
19287
20136
  return /* @__PURE__ */ jsxRuntime.jsx(
19288
20137
  "svg",
19289
20138
  {
@@ -19300,7 +20149,7 @@ function ChevronLeftIcon4({ className }) {
19300
20149
  }
19301
20150
  );
19302
20151
  }
19303
- function ChevronRightIcon9({ className }) {
20152
+ function ChevronRightIcon8({ className }) {
19304
20153
  return /* @__PURE__ */ jsxRuntime.jsx(
19305
20154
  "svg",
19306
20155
  {
@@ -19451,7 +20300,7 @@ function Lightbox({
19451
20300
  onClick: prev,
19452
20301
  className: "absolute left-3 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/50 text-white/80 hover:bg-black/70 hover:text-white transition-colors",
19453
20302
  "aria-label": "Previous image",
19454
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon4, { className: "size-5" })
20303
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon3, { className: "size-5" })
19455
20304
  }
19456
20305
  ),
19457
20306
  /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19479,7 +20328,7 @@ function Lightbox({
19479
20328
  onClick: next,
19480
20329
  className: "absolute right-3 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/50 text-white/80 hover:bg-black/70 hover:text-white transition-colors",
19481
20330
  "aria-label": "Next image",
19482
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon9, { className: "size-5" })
20331
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon8, { className: "size-5" })
19483
20332
  }
19484
20333
  )
19485
20334
  ] }),
@@ -20230,10 +21079,12 @@ var DataTableToolbar = React.forwardRef(function DataTableToolbar2({
20230
21079
  className
20231
21080
  }, ref) {
20232
21081
  const [localSearch, setLocalSearch] = React.useState(searchValue);
20233
- const debounceTimer = React.useRef(null);
20234
- React.useEffect(() => {
21082
+ const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
21083
+ if (searchValue !== prevSearchValue) {
21084
+ setPrevSearchValue(searchValue);
20235
21085
  setLocalSearch(searchValue);
20236
- }, [searchValue]);
21086
+ }
21087
+ const debounceTimer = React.useRef(null);
20237
21088
  const handleSearchChange = React.useCallback(
20238
21089
  (value) => {
20239
21090
  setLocalSearch(value);
@@ -20835,6 +21686,7 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
20835
21686
  exports.SelectSeparator = SelectSeparator;
20836
21687
  exports.SelectTrigger = SelectTrigger;
20837
21688
  exports.SelectValue = SelectValue;
21689
+ exports.Separator = Separator2;
20838
21690
  exports.Sheet = Sheet;
20839
21691
  exports.SheetClose = SheetClose;
20840
21692
  exports.SheetContent = SheetContent;
@@ -20846,12 +21698,30 @@ exports.SheetTrigger = SheetTrigger;
20846
21698
  exports.Sidebar = Sidebar;
20847
21699
  exports.SidebarContent = SidebarContent;
20848
21700
  exports.SidebarFooter = SidebarFooter;
21701
+ exports.SidebarGroup = SidebarGroup;
21702
+ exports.SidebarGroupAction = SidebarGroupAction;
21703
+ exports.SidebarGroupContent = SidebarGroupContent;
21704
+ exports.SidebarGroupLabel = SidebarGroupLabel;
20849
21705
  exports.SidebarHeader = SidebarHeader;
21706
+ exports.SidebarInput = SidebarInput;
21707
+ exports.SidebarInset = SidebarInset;
20850
21708
  exports.SidebarItem = SidebarItem;
21709
+ exports.SidebarMenu = SidebarMenu;
21710
+ exports.SidebarMenuAction = SidebarMenuAction;
21711
+ exports.SidebarMenuBadge = SidebarMenuBadge;
21712
+ exports.SidebarMenuButton = SidebarMenuButton;
21713
+ exports.SidebarMenuItem = SidebarMenuItem;
21714
+ exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
21715
+ exports.SidebarMenuSub = SidebarMenuSub;
21716
+ exports.SidebarMenuSubButton = SidebarMenuSubButton;
21717
+ exports.SidebarMenuSubItem = SidebarMenuSubItem;
20851
21718
  exports.SidebarMobileOverlay = SidebarMobileOverlay;
20852
21719
  exports.SidebarProvider = SidebarProvider;
21720
+ exports.SidebarRail = SidebarRail;
20853
21721
  exports.SidebarSection = SidebarSection;
21722
+ exports.SidebarSeparator = SidebarSeparator;
20854
21723
  exports.SidebarToggle = SidebarToggle;
21724
+ exports.SidebarTrigger = SidebarTrigger;
20855
21725
  exports.Skeleton = Skeleton;
20856
21726
  exports.SkeletonCircle = SkeletonCircle;
20857
21727
  exports.SkeletonRect = SkeletonRect;
@@ -20927,6 +21797,7 @@ exports.scrollbarThumbVariants = scrollbarThumbVariants;
20927
21797
  exports.scrollbarVariants = scrollbarVariants;
20928
21798
  exports.searchInputVariants = searchInputVariants;
20929
21799
  exports.selectTriggerVariants = selectTriggerVariants;
21800
+ exports.separatorVariants = separatorVariants;
20930
21801
  exports.sheetContentVariants = sheetContentVariants;
20931
21802
  exports.skeletonVariants = skeletonVariants;
20932
21803
  exports.sliderRangeVariants = sliderRangeVariants;
@@ -20949,6 +21820,7 @@ exports.useCarouselContext = useCarouselContext;
20949
21820
  exports.useCheckboxGroupContext = useCheckboxGroupContext;
20950
21821
  exports.useCollapsibleContext = useCollapsibleContext;
20951
21822
  exports.useDataTable = useDataTable;
21823
+ exports.useSidebar = useSidebar;
20952
21824
  exports.useSidebarContext = useSidebarContext;
20953
21825
  exports.useToast = useToast;
20954
21826
  exports.useToggleGroupContext = useToggleGroupContext;