@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.
@@ -2,12 +2,12 @@ import { expandHeight, fadeIn, overlayBackdrop, modalContent, popSubtle, slideUp
2
2
  import { focusRingClasses, focusRingCompactClasses, focusRingInsetClasses } from './chunk-MBYCK2JJ.mjs';
3
3
  import { cn, composeRefs } from './chunk-ZT3PCXDF.mjs';
4
4
  import { cva } from 'class-variance-authority';
5
- import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Popover as Popover$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Label as Label$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
5
+ import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Popover as Popover$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Label as Label$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator, Tooltip as Tooltip$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
6
6
  import * as React from 'react';
7
7
  import { createContext, forwardRef, useState, Children, isValidElement, cloneElement, useMemo, useId, useCallback, useRef, useEffect, useImperativeHandle, useContext } from 'react';
8
8
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
9
  import { useReducedMotion, motion, AnimatePresence, useMotionValue, animate, useTransform, useSpring } from 'framer-motion';
10
- import { Panel, Group, Separator } from 'react-resizable-panels';
10
+ import { Panel, Group, Separator as Separator$1 } from 'react-resizable-panels';
11
11
  import { Drawer as Drawer$1 } from 'vaul';
12
12
  import { createPortal } from 'react-dom';
13
13
  import { Toaster } from 'sonner';
@@ -755,9 +755,7 @@ var avatarVariants = cva(
755
755
  // Typography for fallback initials
756
756
  "font-medium leading-none select-none",
757
757
  // Default colors for fallback state
758
- "bg-muted text-muted-foreground",
759
- // Border for visual separation on grouped/colored backgrounds
760
- "ring-2 ring-background"
758
+ "bg-muted text-muted-foreground"
761
759
  ],
762
760
  {
763
761
  variants: {
@@ -839,15 +837,18 @@ function getInitials(name) {
839
837
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
840
838
  }
841
839
  function DefaultFallbackIcon({ className }) {
842
- return /* @__PURE__ */ jsx(
840
+ return /* @__PURE__ */ jsxs(
843
841
  "svg",
844
842
  {
845
- className: cn("size-[60%] text-current opacity-60", className),
843
+ className: cn("size-8 translate-y-px text-current opacity-70", className),
846
844
  xmlns: "http://www.w3.org/2000/svg",
847
845
  viewBox: "0 0 24 24",
848
846
  fill: "currentColor",
849
847
  "aria-hidden": "true",
850
- children: /* @__PURE__ */ 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" })
848
+ children: [
849
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" }),
850
+ /* @__PURE__ */ jsx("path", { d: "M12 14c-4.42 0-8 2.24-8 5v5h16v-5c0-2.76-3.58-5-8-5z" })
851
+ ]
851
852
  }
852
853
  );
853
854
  }
@@ -968,11 +969,11 @@ var Avatar = forwardRef(function Avatar2({
968
969
  });
969
970
  Avatar.displayName = "Avatar";
970
971
  var overlapMap = {
971
- xs: { tight: "-ml-2", default: "-ml-1.5", loose: "-ml-1" },
972
- sm: { tight: "-ml-3", default: "-ml-2", loose: "-ml-1.5" },
973
- md: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
974
- lg: { tight: "-ml-5", default: "-ml-3.5", loose: "-ml-2.5" },
975
- xl: { tight: "-ml-6", default: "-ml-4", loose: "-ml-3" }
972
+ xs: { tight: "-ml-3", default: "-ml-2.5", loose: "-ml-1.5" },
973
+ sm: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
974
+ md: { tight: "-ml-5", default: "-ml-4", loose: "-ml-3" },
975
+ lg: { tight: "-ml-6", default: "-ml-5", loose: "-ml-3.5" },
976
+ xl: { tight: "-ml-8", default: "-ml-6", loose: "-ml-4" }
976
977
  };
977
978
  var AvatarGroup = forwardRef(
978
979
  function AvatarGroup2({
@@ -1008,35 +1009,53 @@ var AvatarGroup = forwardRef(
1008
1009
  className: cn(
1009
1010
  index > 0 && overlapClass,
1010
1011
  // Ensure proper stacking order (first avatar on top)
1011
- "relative"
1012
+ // z-index is set via CSS var so hover:z-50! (Tailwind) can override it
1013
+ "relative inline-flex cursor-pointer transition-transform duration-150 ease-out",
1014
+ "z-(--ag-z)",
1015
+ "hover:z-50! hover:scale-110"
1012
1016
  ),
1013
- style: { zIndex: totalCount - index },
1017
+ style: { "--ag-z": totalCount - index },
1014
1018
  children: cloneElement(child, {
1015
1019
  size,
1016
- shape
1020
+ shape,
1021
+ className: cn(
1022
+ child.props?.className,
1023
+ "ring-2 ring-background"
1024
+ )
1017
1025
  })
1018
1026
  },
1019
1027
  child.props?.alt ?? child.props?.name ?? index
1020
1028
  );
1021
1029
  }),
1022
- overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: cn(overlapClass, "relative"), style: { zIndex: 0 }, children: /* @__PURE__ */ jsxs(
1030
+ overflowCount > 0 && /* @__PURE__ */ jsx(
1023
1031
  "span",
1024
1032
  {
1025
1033
  className: cn(
1026
- avatarVariants({ size, shape }),
1027
- "bg-muted text-muted-foreground",
1028
- "font-semibold"
1034
+ overlapClass,
1035
+ "relative inline-flex z-(--ag-z)"
1029
1036
  ),
1030
- role: "img",
1031
- "aria-label": `${overflowCount} more`,
1032
- "data-ds": "",
1033
- "data-ds-component": "avatar-overflow",
1034
- children: [
1035
- "+",
1036
- overflowCount
1037
- ]
1037
+ style: { "--ag-z": 0 },
1038
+ children: /* @__PURE__ */ jsxs(
1039
+ "span",
1040
+ {
1041
+ className: cn(
1042
+ avatarVariants({ size, shape }),
1043
+ "ring-2 ring-background",
1044
+ "bg-muted text-muted-foreground",
1045
+ "font-semibold"
1046
+ ),
1047
+ role: "img",
1048
+ "aria-label": `${overflowCount} more`,
1049
+ "data-ds": "",
1050
+ "data-ds-component": "avatar-overflow",
1051
+ children: [
1052
+ "+",
1053
+ overflowCount
1054
+ ]
1055
+ }
1056
+ )
1038
1057
  }
1039
- ) })
1058
+ )
1040
1059
  ]
1041
1060
  }
1042
1061
  );
@@ -1858,7 +1877,7 @@ var Button = forwardRef(
1858
1877
  loading && /* @__PURE__ */ jsx(ButtonSpinner, { className: size === "sm" ? "size-3.5" : "size-4" }),
1859
1878
  loading && loadingText ? /* @__PURE__ */ jsx("span", { children: loadingText }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1860
1879
  !loading && iconLeft && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconLeft }),
1861
- children && /* @__PURE__ */ jsx("span", { className: cn(loading && !loadingText && "invisible"), children }),
1880
+ children && /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-[inherit]", loading && !loadingText && "invisible"), children }),
1862
1881
  !loading && iconRight && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconRight })
1863
1882
  ] })
1864
1883
  ]
@@ -2343,21 +2362,17 @@ var CardContext = createContext({ padding: "compact" });
2343
2362
  function useCardContext() {
2344
2363
  return useContext(CardContext);
2345
2364
  }
2346
- var cardPaddingMap = {
2347
- compact: "p-(--ds-padding-card)",
2348
- comfortable: "p-6"
2349
- };
2350
2365
  var slotPaddingXMap = {
2351
2366
  compact: "px-(--ds-padding-card)",
2352
2367
  comfortable: "px-6"
2353
2368
  };
2354
- var slotPaddingTopMap = {
2355
- compact: "pt-(--ds-padding-card)",
2356
- comfortable: "pt-6"
2369
+ var cardVerticalPaddingMap = {
2370
+ compact: "py-(--ds-padding-card)",
2371
+ comfortable: "py-6"
2357
2372
  };
2358
- var slotPaddingBottomMap = {
2359
- compact: "pb-(--ds-padding-card)",
2360
- comfortable: "pb-6"
2373
+ var cardGapMap = {
2374
+ compact: "gap-(--ds-gap-default,0.75rem)",
2375
+ comfortable: "gap-4"
2361
2376
  };
2362
2377
  var cardVariants = cva(
2363
2378
  // Base styles — shared across all variants
@@ -2451,6 +2466,8 @@ var Card = forwardRef(function Card2({
2451
2466
  className: cn(
2452
2467
  "not-prose",
2453
2468
  cardVariants({ variant, fullWidth }),
2469
+ cardVerticalPaddingMap[padding],
2470
+ cardGapMap[padding],
2454
2471
  className
2455
2472
  ),
2456
2473
  "data-ds": "",
@@ -2478,9 +2495,7 @@ var CardHeader = forwardRef(
2478
2495
  className: cn(
2479
2496
  "flex flex-col gap-1.5",
2480
2497
  slotPaddingXMap[padding],
2481
- slotPaddingTopMap[padding],
2482
- slotPaddingBottomMap[padding],
2483
- bordered && "border-b border-border-muted",
2498
+ bordered && "pb-(--ds-padding-card) border-b border-border-muted",
2484
2499
  className
2485
2500
  ),
2486
2501
  "data-ds": "",
@@ -2501,7 +2516,7 @@ var CardBody = forwardRef(
2501
2516
  ref,
2502
2517
  className: cn(
2503
2518
  "flex flex-col gap-2 flex-1",
2504
- cardPaddingMap[padding],
2519
+ slotPaddingXMap[padding],
2505
2520
  className
2506
2521
  ),
2507
2522
  "data-ds": "",
@@ -2523,9 +2538,7 @@ var CardFooter = forwardRef(
2523
2538
  className: cn(
2524
2539
  "flex items-center gap-2",
2525
2540
  slotPaddingXMap[padding],
2526
- slotPaddingTopMap[padding],
2527
- slotPaddingBottomMap[padding],
2528
- bordered && "border-t border-border-muted",
2541
+ bordered && "pt-(--ds-padding-card) border-t border-border-muted",
2529
2542
  alignMap[align],
2530
2543
  className
2531
2544
  ),
@@ -2903,7 +2916,7 @@ var Checkbox = forwardRef(function Checkbox2({
2903
2916
  )
2904
2917
  }
2905
2918
  ),
2906
- (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
2919
+ (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
2907
2920
  label && /* @__PURE__ */ jsx(
2908
2921
  "label",
2909
2922
  {
@@ -8529,7 +8542,7 @@ function Dropdown({
8529
8542
  "div",
8530
8543
  {
8531
8544
  className: cn(
8532
- "absolute top-full z-[var(--z-dropdown,40)] mt-1",
8545
+ "absolute top-full z-[var(--z-dropdown)] mt-1",
8533
8546
  align === "end" ? "right-0" : "left-0",
8534
8547
  "min-w-[8rem] rounded-md py-1",
8535
8548
  "border border-border bg-popover text-popover-foreground",
@@ -10303,9 +10316,9 @@ var DropdownMenuItem = forwardRef(function DropdownMenuItem2({ className, varian
10303
10316
  ref,
10304
10317
  className: cn(
10305
10318
  ...menuItemBase2,
10319
+ "gap-2",
10306
10320
  variant === "danger" && "text-danger focus:bg-danger-muted focus:text-danger-muted-foreground",
10307
10321
  variant === "default" && "text-foreground",
10308
- icon && "gap-2",
10309
10322
  className
10310
10323
  ),
10311
10324
  "data-ds": "",
@@ -10313,7 +10326,7 @@ var DropdownMenuItem = forwardRef(function DropdownMenuItem2({ className, varian
10313
10326
  ...rest,
10314
10327
  children: [
10315
10328
  icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
10316
- /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
10329
+ /* @__PURE__ */ jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
10317
10330
  shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut })
10318
10331
  ]
10319
10332
  }
@@ -10325,13 +10338,13 @@ var DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({ c
10325
10338
  DropdownMenu$1.CheckboxItem,
10326
10339
  {
10327
10340
  ref,
10328
- className: cn(...menuItemBase2, "pl-8", className),
10341
+ className: cn(...menuItemBase2, "gap-2 pl-8", className),
10329
10342
  "data-ds": "",
10330
10343
  "data-ds-component": "dropdown-menu-checkbox-item",
10331
10344
  ...rest,
10332
10345
  children: [
10333
10346
  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon6, { className: "size-4" }) }) }),
10334
- children
10347
+ /* @__PURE__ */ jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
10335
10348
  ]
10336
10349
  }
10337
10350
  );
@@ -10346,13 +10359,13 @@ var DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({ classNa
10346
10359
  DropdownMenu$1.RadioItem,
10347
10360
  {
10348
10361
  ref,
10349
- className: cn(...menuItemBase2, "pl-8", className),
10362
+ className: cn(...menuItemBase2, "gap-2 pl-8", className),
10350
10363
  "data-ds": "",
10351
10364
  "data-ds-component": "dropdown-menu-radio-item",
10352
10365
  ...rest,
10353
10366
  children: [
10354
10367
  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon2, { className: "size-4" }) }) }),
10355
- children
10368
+ /* @__PURE__ */ jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
10356
10369
  ]
10357
10370
  }
10358
10371
  );
@@ -10400,8 +10413,7 @@ var DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger2({ class
10400
10413
  ref,
10401
10414
  className: cn(
10402
10415
  ...menuItemBase2,
10403
- "data-[state=open]:bg-muted",
10404
- icon && "gap-2",
10416
+ "gap-2 data-[state=open]:bg-muted",
10405
10417
  inset && "pl-8",
10406
10418
  className
10407
10419
  ),
@@ -10410,7 +10422,7 @@ var DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger2({ class
10410
10422
  ...rest,
10411
10423
  children: [
10412
10424
  icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
10413
- /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
10425
+ /* @__PURE__ */ jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
10414
10426
  /* @__PURE__ */ jsx(ChevronRightIcon4, { className: "ml-auto size-4 text-muted-foreground" })
10415
10427
  ]
10416
10428
  }
@@ -13463,18 +13475,7 @@ var stripedStyle = {
13463
13475
  backgroundSize: "1rem 1rem"
13464
13476
  };
13465
13477
  var PROGRESS_STYLE_ID = "unified-ui-progress-keyframes";
13466
- function ProgressKeyframes() {
13467
- if (typeof document !== "undefined") {
13468
- if (document.getElementById(PROGRESS_STYLE_ID)) {
13469
- return null;
13470
- }
13471
- }
13472
- return /* @__PURE__ */ jsx(
13473
- "style",
13474
- {
13475
- id: PROGRESS_STYLE_ID,
13476
- dangerouslySetInnerHTML: {
13477
- __html: `
13478
+ var PROGRESS_KEYFRAMES_CSS = `
13478
13479
  @keyframes unified-ui-progress-indeterminate {
13479
13480
  0% { transform: translateX(-100%); width: 50%; }
13480
13481
  50% { transform: translateX(50%); width: 30%; }
@@ -13484,10 +13485,17 @@ function ProgressKeyframes() {
13484
13485
  0% { background-position: 1rem 0; }
13485
13486
  100% { background-position: 0 0; }
13486
13487
  }
13487
- `
13488
- }
13488
+ `;
13489
+ function useProgressKeyframes() {
13490
+ useEffect(() => {
13491
+ if (document.getElementById(PROGRESS_STYLE_ID)) {
13492
+ return;
13489
13493
  }
13490
- );
13494
+ const style = document.createElement("style");
13495
+ style.id = PROGRESS_STYLE_ID;
13496
+ style.textContent = PROGRESS_KEYFRAMES_CSS;
13497
+ document.head.appendChild(style);
13498
+ }, []);
13491
13499
  }
13492
13500
  var Progress = forwardRef(
13493
13501
  function Progress2({
@@ -13508,6 +13516,7 @@ var Progress = forwardRef(
13508
13516
  indicatorClassName,
13509
13517
  ...rest
13510
13518
  }, ref) {
13519
+ useProgressKeyframes();
13511
13520
  const clampedValue = Math.max(min2, Math.min(value, max2));
13512
13521
  const range = max2 - min2;
13513
13522
  const percentage = range > 0 ? (clampedValue - min2) / range * 100 : 0;
@@ -13547,7 +13556,6 @@ var Progress = forwardRef(
13547
13556
  "data-ds-size": size,
13548
13557
  ...indeterminate ? { "data-ds-indeterminate": "" } : {},
13549
13558
  children: [
13550
- /* @__PURE__ */ jsx(ProgressKeyframes, {}),
13551
13559
  showLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
13552
13560
  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium leading-4 text-foreground", children: label ?? "" }),
13553
13561
  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium leading-4 text-muted-foreground tabular-nums", children: typeof label === "string" || !label ? labelFormatter(clampedValue, max2) : "" })
@@ -13764,7 +13772,7 @@ var RadioGroupItem = forwardRef(function RadioGroupItem2({ value, label, descrip
13764
13772
  )
13765
13773
  }
13766
13774
  ),
13767
- (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
13775
+ (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
13768
13776
  label && /* @__PURE__ */ jsx(
13769
13777
  "label",
13770
13778
  {
@@ -13932,7 +13940,7 @@ function ResizableHandle({
13932
13940
  }) {
13933
13941
  const shouldReduce = useReducedMotion();
13934
13942
  return /* @__PURE__ */ jsx(
13935
- Separator,
13943
+ Separator$1,
13936
13944
  {
13937
13945
  className: cn(
13938
13946
  "relative flex w-px items-center justify-center bg-border",
@@ -14581,6 +14589,168 @@ var SelectSeparator = forwardRef(function SelectSeparator2({ className, ...rest
14581
14589
  );
14582
14590
  });
14583
14591
  SelectSeparator.displayName = "SelectSeparator";
14592
+ var separatorVariants = cva(
14593
+ // Base styles — shared across all variants
14594
+ "shrink-0 bg-border",
14595
+ {
14596
+ variants: {
14597
+ /**
14598
+ * Visual variant of the separator line.
14599
+ */
14600
+ variant: {
14601
+ /**
14602
+ * Default — solid line using the border token color.
14603
+ */
14604
+ default: "",
14605
+ /**
14606
+ * Muted — lighter separator using the muted-foreground color at
14607
+ * reduced opacity. Useful for less prominent divisions.
14608
+ */
14609
+ muted: "bg-muted-foreground/20",
14610
+ /**
14611
+ * Dashed — renders a dashed border instead of a solid background.
14612
+ * Uses border-style rather than background.
14613
+ */
14614
+ dashed: "bg-transparent !h-auto !w-auto",
14615
+ /**
14616
+ * Gradient — fades in from transparent at both ends.
14617
+ * Creates a more elegant, subtle divider.
14618
+ */
14619
+ gradient: "bg-transparent"
14620
+ },
14621
+ /**
14622
+ * Orientation of the separator.
14623
+ */
14624
+ orientation: {
14625
+ horizontal: "h-px w-full",
14626
+ vertical: "h-full w-px"
14627
+ }
14628
+ },
14629
+ compoundVariants: [
14630
+ // Dashed + horizontal
14631
+ {
14632
+ variant: "dashed",
14633
+ orientation: "horizontal",
14634
+ class: "border-b border-dashed border-border w-full"
14635
+ },
14636
+ // Dashed + vertical
14637
+ {
14638
+ variant: "dashed",
14639
+ orientation: "vertical",
14640
+ class: "border-l border-dashed border-border h-full"
14641
+ }
14642
+ ],
14643
+ defaultVariants: {
14644
+ variant: "default",
14645
+ orientation: "horizontal"
14646
+ }
14647
+ }
14648
+ );
14649
+ var spacingYMap = {
14650
+ 0: "my-0",
14651
+ 1: "my-1",
14652
+ 2: "my-2",
14653
+ 3: "my-3",
14654
+ 4: "my-4",
14655
+ 5: "my-5",
14656
+ 6: "my-6",
14657
+ 8: "my-8",
14658
+ 10: "my-10",
14659
+ 12: "my-12"
14660
+ };
14661
+ var spacingXMap = {
14662
+ 0: "mx-0",
14663
+ 1: "mx-1",
14664
+ 2: "mx-2",
14665
+ 3: "mx-3",
14666
+ 4: "mx-4",
14667
+ 5: "mx-5",
14668
+ 6: "mx-6",
14669
+ 8: "mx-8",
14670
+ 10: "mx-10",
14671
+ 12: "mx-12"
14672
+ };
14673
+ var gradientHorizontal = "bg-gradient-to-r from-transparent via-border to-transparent";
14674
+ var gradientVertical = "bg-gradient-to-b from-transparent via-border to-transparent";
14675
+ var Separator2 = forwardRef(function Separator3({
14676
+ variant = "default",
14677
+ orientation = "horizontal",
14678
+ decorative = true,
14679
+ spacing = 4,
14680
+ label,
14681
+ className,
14682
+ ...rest
14683
+ }, ref) {
14684
+ const isVertical = orientation === "vertical";
14685
+ const spacingClass = isVertical ? spacingXMap[spacing] ?? "mx-4" : spacingYMap[spacing] ?? "my-4";
14686
+ const gradientClass = variant === "gradient" ? isVertical ? gradientVertical : gradientHorizontal : void 0;
14687
+ if (label && !isVertical) {
14688
+ return /* @__PURE__ */ jsxs(
14689
+ "div",
14690
+ {
14691
+ className: cn(
14692
+ "flex items-center w-full",
14693
+ spacingClass,
14694
+ className
14695
+ ),
14696
+ role: decorative ? "none" : "separator",
14697
+ "aria-orientation": decorative ? void 0 : orientation,
14698
+ "data-ds": "",
14699
+ "data-ds-component": "separator",
14700
+ "data-ds-variant": variant,
14701
+ "data-ds-orientation": orientation,
14702
+ "data-ds-labeled": "",
14703
+ children: [
14704
+ /* @__PURE__ */ jsx(
14705
+ Separator.Root,
14706
+ {
14707
+ decorative: true,
14708
+ orientation,
14709
+ className: cn(
14710
+ separatorVariants({ variant, orientation }),
14711
+ gradientClass,
14712
+ "flex-1"
14713
+ )
14714
+ }
14715
+ ),
14716
+ /* @__PURE__ */ jsx("span", { className: "px-3 text-xs text-muted-foreground font-medium select-none shrink-0", children: label }),
14717
+ /* @__PURE__ */ jsx(
14718
+ Separator.Root,
14719
+ {
14720
+ decorative: true,
14721
+ orientation,
14722
+ className: cn(
14723
+ separatorVariants({ variant, orientation }),
14724
+ gradientClass,
14725
+ "flex-1"
14726
+ )
14727
+ }
14728
+ )
14729
+ ]
14730
+ }
14731
+ );
14732
+ }
14733
+ return /* @__PURE__ */ jsx(
14734
+ Separator.Root,
14735
+ {
14736
+ ref,
14737
+ decorative,
14738
+ orientation,
14739
+ className: cn(
14740
+ separatorVariants({ variant, orientation }),
14741
+ gradientClass,
14742
+ spacingClass,
14743
+ className
14744
+ ),
14745
+ "data-ds": "",
14746
+ "data-ds-component": "separator",
14747
+ "data-ds-variant": variant,
14748
+ "data-ds-orientation": orientation,
14749
+ ...rest
14750
+ }
14751
+ );
14752
+ });
14753
+ Separator2.displayName = "Separator";
14584
14754
  var sheetContentVariants = cva(
14585
14755
  [
14586
14756
  // Layout
@@ -15149,51 +15319,14 @@ var DrawerClose = forwardRef(function DrawerClose2({ className, ...rest }, ref)
15149
15319
  );
15150
15320
  });
15151
15321
  DrawerClose.displayName = "DrawerClose";
15152
- var SidebarContext = createContext({
15153
- collapsed: false,
15154
- setCollapsed: () => {
15155
- },
15156
- isMobile: false,
15157
- mobileOpen: false,
15158
- setMobileOpen: () => {
15159
- }
15160
- });
15161
- function useSidebarContext() {
15162
- return useContext(SidebarContext);
15163
- }
15164
- function SidebarProvider({
15165
- defaultCollapsed = false,
15166
- collapsed: controlledCollapsed,
15167
- onCollapsedChange,
15168
- children
15169
- }) {
15170
- const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
15171
- const [mobileOpen, setMobileOpen] = useState(false);
15172
- const collapsed = controlledCollapsed !== void 0 ? controlledCollapsed : internalCollapsed;
15173
- const setCollapsed = useCallback(
15174
- (v) => {
15175
- if (controlledCollapsed === void 0) setInternalCollapsed(v);
15176
- onCollapsedChange?.(v);
15177
- },
15178
- [controlledCollapsed, onCollapsedChange]
15179
- );
15180
- return /* @__PURE__ */ jsx(
15181
- SidebarContext.Provider,
15182
- {
15183
- value: {
15184
- collapsed,
15185
- setCollapsed,
15186
- isMobile: false,
15187
- mobileOpen,
15188
- setMobileOpen
15189
- },
15190
- children
15191
- }
15192
- );
15193
- }
15194
- SidebarProvider.displayName = "SidebarProvider";
15195
- function ChevronLeftIcon3({ className }) {
15196
- return /* @__PURE__ */ jsx(
15322
+ var SIDEBAR_COOKIE_NAME = "sidebar:state";
15323
+ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
15324
+ var SIDEBAR_WIDTH = "16rem";
15325
+ var SIDEBAR_WIDTH_MOBILE = "18rem";
15326
+ var SIDEBAR_WIDTH_ICON = "3rem";
15327
+ var SIDEBAR_KEYBOARD_SHORTCUT = "b";
15328
+ function PanelLeftIcon({ className }) {
15329
+ return /* @__PURE__ */ jsxs(
15197
15330
  "svg",
15198
15331
  {
15199
15332
  className,
@@ -15205,162 +15338,893 @@ function ChevronLeftIcon3({ className }) {
15205
15338
  strokeLinecap: "round",
15206
15339
  strokeLinejoin: "round",
15207
15340
  "aria-hidden": "true",
15208
- children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
15341
+ children: [
15342
+ /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
15343
+ /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
15344
+ ]
15209
15345
  }
15210
15346
  );
15211
15347
  }
15212
- function ChevronRightIcon7({ className }) {
15213
- return /* @__PURE__ */ jsx(
15214
- "svg",
15215
- {
15216
- className,
15217
- xmlns: "http://www.w3.org/2000/svg",
15218
- viewBox: "0 0 24 24",
15219
- fill: "none",
15220
- stroke: "currentColor",
15221
- strokeWidth: "2",
15222
- strokeLinecap: "round",
15223
- strokeLinejoin: "round",
15224
- "aria-hidden": "true",
15225
- children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
15226
- }
15227
- );
15348
+ var SidebarContext = createContext({
15349
+ state: "expanded",
15350
+ open: true,
15351
+ setOpen: () => {
15352
+ },
15353
+ openMobile: false,
15354
+ setOpenMobile: () => {
15355
+ },
15356
+ isMobile: false,
15357
+ toggleSidebar: () => {
15358
+ },
15359
+ variant: "default",
15360
+ collapsible: "offcanvas",
15361
+ side: "left"
15362
+ });
15363
+ function useSidebar() {
15364
+ const context = useContext(SidebarContext);
15365
+ if (!context) {
15366
+ throw new Error("useSidebar must be used within a <SidebarProvider>");
15367
+ }
15368
+ return context;
15228
15369
  }
15229
- var Sidebar = forwardRef(function Sidebar2({
15230
- side = "left",
15231
- collapsedWidth = "64px",
15232
- expandedWidth = "240px",
15233
- className,
15234
- children
15235
- }, ref) {
15236
- const { collapsed } = useSidebarContext();
15237
- const shouldReduce = useReducedMotion();
15238
- return /* @__PURE__ */ jsx(
15239
- motion.aside,
15240
- {
15241
- ref,
15242
- className: cn(
15243
- "flex flex-col h-full border-r border-border bg-background overflow-hidden",
15244
- side === "right" && "border-r-0 border-l",
15245
- className
15246
- ),
15247
- animate: {
15248
- width: collapsed ? collapsedWidth : expandedWidth
15370
+ var useSidebarContext = useSidebar;
15371
+ var MOBILE_BREAKPOINT = 768;
15372
+ function useIsMobile() {
15373
+ const [isMobile, setIsMobile] = useState(false);
15374
+ useEffect(() => {
15375
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
15376
+ const onChange = () => setIsMobile(mql.matches);
15377
+ mql.addEventListener("change", onChange);
15378
+ setIsMobile(mql.matches);
15379
+ return () => mql.removeEventListener("change", onChange);
15380
+ }, []);
15381
+ return isMobile;
15382
+ }
15383
+ var SidebarProvider = forwardRef(
15384
+ function SidebarProvider2({
15385
+ defaultOpen = true,
15386
+ open: openProp,
15387
+ onOpenChange: setOpenProp,
15388
+ variant = "default",
15389
+ collapsible = "offcanvas",
15390
+ side = "left",
15391
+ className,
15392
+ style,
15393
+ children,
15394
+ ...rest
15395
+ }, ref) {
15396
+ const isMobile = useIsMobile();
15397
+ const [openMobile, setOpenMobile] = useState(false);
15398
+ const isControlled = openProp !== void 0;
15399
+ const [_open, _setOpen] = useState(defaultOpen);
15400
+ const open = isControlled ? openProp : _open;
15401
+ const setOpen = useCallback(
15402
+ (value) => {
15403
+ const openState = typeof value === "function" ? value(open) : value;
15404
+ if (setOpenProp) {
15405
+ setOpenProp(openState);
15406
+ } else {
15407
+ _setOpen(openState);
15408
+ }
15409
+ try {
15410
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
15411
+ } catch {
15412
+ }
15249
15413
  },
15250
- transition: shouldReduce ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 30, mass: 0.8 },
15251
- "data-ds": "",
15252
- "data-ds-component": "sidebar",
15253
- "data-ds-collapsed": collapsed ? "" : void 0,
15254
- "data-ds-animated": "",
15255
- children
15256
- }
15257
- );
15258
- });
15259
- Sidebar.displayName = "Sidebar";
15260
- var SidebarToggle = forwardRef(
15261
- function SidebarToggle2({ className, children, ...rest }, ref) {
15262
- const { collapsed, setCollapsed } = useSidebarContext();
15263
- return /* @__PURE__ */ jsx(
15264
- "button",
15265
- {
15266
- ref,
15267
- type: "button",
15268
- onClick: () => setCollapsed(!collapsed),
15269
- "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
15270
- "aria-expanded": !collapsed,
15271
- className: cn(
15272
- "inline-flex items-center justify-center size-8 rounded-md",
15273
- "text-muted-foreground hover:text-foreground hover:bg-accent",
15274
- "transition-colors duration-fast",
15275
- focusRingClasses,
15276
- className
15277
- ),
15278
- "data-ds-component": "sidebar-toggle",
15279
- ...rest,
15280
- children: children ?? (collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon7, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronLeftIcon3, { className: "size-4" }))
15414
+ [setOpenProp, open]
15415
+ );
15416
+ const toggleSidebar = useCallback(() => {
15417
+ if (isMobile) {
15418
+ setOpenMobile((prev) => !prev);
15419
+ } else {
15420
+ setOpen((prev) => !prev);
15281
15421
  }
15422
+ }, [isMobile, setOpen]);
15423
+ useEffect(() => {
15424
+ const handleKeyDown = (e) => {
15425
+ if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
15426
+ e.preventDefault();
15427
+ toggleSidebar();
15428
+ }
15429
+ };
15430
+ window.addEventListener("keydown", handleKeyDown);
15431
+ return () => window.removeEventListener("keydown", handleKeyDown);
15432
+ }, [toggleSidebar]);
15433
+ const state = open ? "expanded" : "collapsed";
15434
+ const contextValue = useMemo(
15435
+ () => ({
15436
+ state,
15437
+ open,
15438
+ setOpen,
15439
+ openMobile,
15440
+ setOpenMobile,
15441
+ isMobile,
15442
+ toggleSidebar,
15443
+ variant,
15444
+ collapsible,
15445
+ side
15446
+ }),
15447
+ [
15448
+ state,
15449
+ open,
15450
+ setOpen,
15451
+ openMobile,
15452
+ setOpenMobile,
15453
+ isMobile,
15454
+ toggleSidebar,
15455
+ variant,
15456
+ collapsible,
15457
+ side
15458
+ ]
15282
15459
  );
15283
- }
15284
- );
15285
- SidebarToggle.displayName = "SidebarToggle";
15286
- var SidebarHeader = forwardRef(
15287
- function SidebarHeader2({ className, children, ...rest }, ref) {
15288
- return /* @__PURE__ */ jsx(
15460
+ return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Tooltip$1.Provider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
15289
15461
  "div",
15290
15462
  {
15291
15463
  ref,
15292
15464
  className: cn(
15293
- "flex items-center gap-3 p-4 border-b border-border shrink-0",
15465
+ "group/sidebar-wrapper flex min-h-svh w-full",
15466
+ "has-data-[variant=inset]:bg-sidebar",
15294
15467
  className
15295
15468
  ),
15296
- "data-ds-component": "sidebar-header",
15297
- ...rest,
15298
- children
15299
- }
15300
- );
15301
- }
15302
- );
15303
- SidebarHeader.displayName = "SidebarHeader";
15304
- var SidebarContent = forwardRef(
15305
- function SidebarContent2({ className, children, ...rest }, ref) {
15306
- return /* @__PURE__ */ jsx(
15307
- "div",
15308
- {
15309
- ref,
15310
- className: cn("flex-1 overflow-y-auto py-2", className),
15311
- "data-ds-component": "sidebar-content",
15469
+ style: {
15470
+ "--sidebar-width": SIDEBAR_WIDTH,
15471
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
15472
+ ...style
15473
+ },
15474
+ "data-ds": "",
15475
+ "data-ds-component": "sidebar-provider",
15312
15476
  ...rest,
15313
15477
  children
15314
15478
  }
15315
- );
15479
+ ) }) });
15316
15480
  }
15317
15481
  );
15318
- SidebarContent.displayName = "SidebarContent";
15319
- var SidebarFooter = forwardRef(
15320
- function SidebarFooter2({ className, children, ...rest }, ref) {
15321
- return /* @__PURE__ */ jsx(
15322
- "div",
15323
- {
15324
- ref,
15325
- className: cn("shrink-0 border-t border-border p-4", className),
15326
- "data-ds-component": "sidebar-footer",
15327
- ...rest,
15328
- children
15482
+ SidebarProvider.displayName = "SidebarProvider";
15483
+ var Sidebar = forwardRef(
15484
+ function Sidebar2({
15485
+ side: sideProp,
15486
+ variant: variantProp,
15487
+ collapsible: collapsibleProp,
15488
+ className,
15489
+ children,
15490
+ ...rest
15491
+ }, ref) {
15492
+ const ctx = useSidebar();
15493
+ const side = sideProp ?? ctx.side;
15494
+ const variant = variantProp ?? ctx.variant;
15495
+ const collapsible = collapsibleProp ?? ctx.collapsible;
15496
+ const shouldReduce = useReducedMotion();
15497
+ if (collapsible === "none") {
15498
+ return /* @__PURE__ */ jsx(
15499
+ "div",
15500
+ {
15501
+ ref,
15502
+ className: cn(
15503
+ "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
15504
+ className
15505
+ ),
15506
+ "data-ds": "",
15507
+ "data-ds-component": "sidebar",
15508
+ ...rest,
15509
+ children
15510
+ }
15511
+ );
15512
+ }
15513
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
15514
+ ctx.isMobile && /* @__PURE__ */ jsx(AnimatePresence, { children: ctx.openMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
15515
+ /* @__PURE__ */ jsx(
15516
+ motion.div,
15517
+ {
15518
+ className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
15519
+ variants: shouldReduce ? void 0 : overlayBackdrop.variants,
15520
+ initial: shouldReduce ? { opacity: 0 } : "initial",
15521
+ animate: shouldReduce ? { opacity: 1 } : "animate",
15522
+ exit: shouldReduce ? { opacity: 0 } : "exit",
15523
+ transition: shouldReduce ? { duration: 0.15 } : overlayBackdrop.transition,
15524
+ onClick: () => ctx.setOpenMobile(false),
15525
+ "data-ds-animated": ""
15526
+ }
15527
+ ),
15528
+ /* @__PURE__ */ jsx(
15529
+ motion.div,
15530
+ {
15531
+ className: cn(
15532
+ "fixed inset-y-0 z-50 flex w-[--sidebar-width-mobile] flex-col bg-sidebar text-sidebar-foreground",
15533
+ "p-0 shadow-lg",
15534
+ side === "left" ? "left-0 border-r border-sidebar-border" : "right-0 border-l border-sidebar-border",
15535
+ className
15536
+ ),
15537
+ style: {
15538
+ "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE
15539
+ },
15540
+ initial: {
15541
+ x: side === "left" ? "-100%" : "100%",
15542
+ opacity: shouldReduce ? 0 : 1
15543
+ },
15544
+ animate: {
15545
+ x: 0,
15546
+ opacity: 1
15547
+ },
15548
+ exit: {
15549
+ x: side === "left" ? "-100%" : "100%",
15550
+ opacity: shouldReduce ? 0 : 1
15551
+ },
15552
+ transition: shouldReduce ? { duration: 0.15 } : {
15553
+ type: "spring",
15554
+ stiffness: 300,
15555
+ damping: 30,
15556
+ mass: 0.8
15557
+ },
15558
+ "data-ds": "",
15559
+ "data-ds-component": "sidebar",
15560
+ "data-variant": variant,
15561
+ "data-side": side,
15562
+ "data-mobile": "",
15563
+ "data-ds-animated": "",
15564
+ children
15565
+ }
15566
+ )
15567
+ ] }) }),
15568
+ !ctx.isMobile && /* @__PURE__ */ jsxs(
15569
+ "div",
15570
+ {
15571
+ ref,
15572
+ className: "group peer hidden md:block text-sidebar-foreground",
15573
+ "data-state": ctx.state,
15574
+ "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
15575
+ "data-variant": variant,
15576
+ "data-side": side,
15577
+ children: [
15578
+ /* @__PURE__ */ jsx(
15579
+ motion.div,
15580
+ {
15581
+ className: cn(
15582
+ "relative h-svh bg-transparent",
15583
+ "duration-200 ease-linear",
15584
+ variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width)+(--spacing(4)))]" : "w-[--sidebar-width]"
15585
+ ),
15586
+ animate: {
15587
+ 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)"
15588
+ },
15589
+ transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }
15590
+ }
15591
+ ),
15592
+ /* @__PURE__ */ jsx(
15593
+ motion.div,
15594
+ {
15595
+ className: cn(
15596
+ "fixed inset-y-0 z-10 hidden h-svh md:flex flex-col",
15597
+ side === "left" ? "left-0" : "right-0",
15598
+ // Variant styles
15599
+ variant === "floating" && "m-2 rounded-lg border border-sidebar-border shadow-lg overflow-hidden",
15600
+ variant === "inset" && "m-2 rounded-lg overflow-hidden",
15601
+ variant === "default" && cn(
15602
+ "border-sidebar-border",
15603
+ side === "left" ? "border-r" : "border-l"
15604
+ ),
15605
+ "bg-sidebar text-sidebar-foreground",
15606
+ className
15607
+ ),
15608
+ animate: {
15609
+ width: ctx.state === "collapsed" ? collapsible === "offcanvas" ? "0px" : "var(--sidebar-width-icon)" : "var(--sidebar-width)"
15610
+ },
15611
+ transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
15612
+ "data-ds": "",
15613
+ "data-ds-component": "sidebar",
15614
+ "data-variant": variant,
15615
+ "data-side": side,
15616
+ "data-state": ctx.state,
15617
+ "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
15618
+ children: /* @__PURE__ */ jsx(
15619
+ "div",
15620
+ {
15621
+ className: cn(
15622
+ "flex h-full w-full flex-col",
15623
+ "group-data-[collapsible=offcanvas]:opacity-0 group-data-[collapsible=offcanvas]:pointer-events-none"
15624
+ ),
15625
+ "data-sidebar": "content-wrapper",
15626
+ children
15627
+ }
15628
+ )
15629
+ }
15630
+ )
15631
+ ]
15632
+ }
15633
+ )
15634
+ ] });
15635
+ }
15636
+ );
15637
+ Sidebar.displayName = "Sidebar";
15638
+ var SidebarTrigger = forwardRef(function SidebarTrigger2({ className, onClick, children, ...rest }, ref) {
15639
+ const { toggleSidebar, state, isMobile } = useSidebar();
15640
+ return /* @__PURE__ */ jsxs(
15641
+ "button",
15642
+ {
15643
+ ref,
15644
+ type: "button",
15645
+ onClick: (e) => {
15646
+ onClick?.(e);
15647
+ toggleSidebar();
15648
+ },
15649
+ "aria-label": state === "expanded" ? "Collapse sidebar" : "Expand sidebar",
15650
+ "aria-expanded": state === "expanded",
15651
+ className: cn(
15652
+ "inline-flex items-center justify-center size-8 shrink-0 rounded-md",
15653
+ "text-muted-foreground hover:text-foreground hover:bg-accent",
15654
+ "transition-colors duration-fast",
15655
+ focusRingClasses,
15656
+ className
15657
+ ),
15658
+ "data-ds": "",
15659
+ "data-ds-component": "sidebar-trigger",
15660
+ ...rest,
15661
+ children: [
15662
+ children ?? /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" }),
15663
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
15664
+ ]
15665
+ }
15666
+ );
15667
+ });
15668
+ SidebarTrigger.displayName = "SidebarTrigger";
15669
+ var SidebarToggle = SidebarTrigger;
15670
+ var SidebarRail = forwardRef(
15671
+ function SidebarRail2({ className, ...rest }, ref) {
15672
+ const { toggleSidebar, side } = useSidebar();
15673
+ return /* @__PURE__ */ jsx(
15674
+ "button",
15675
+ {
15676
+ ref,
15677
+ type: "button",
15678
+ tabIndex: -1,
15679
+ "aria-label": "Toggle Sidebar",
15680
+ onClick: toggleSidebar,
15681
+ title: "Toggle Sidebar",
15682
+ className: cn(
15683
+ "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 md:flex items-center justify-center",
15684
+ "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
15685
+ "hover:after:bg-sidebar-border",
15686
+ "transition-all duration-fast ease-linear",
15687
+ "group-data-[side=left]:right-0 group-data-[side=right]:left-0",
15688
+ side === "left" ? "cursor-w-resize group-data-[state=collapsed]:cursor-e-resize" : "cursor-e-resize group-data-[state=collapsed]:cursor-w-resize",
15689
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
15690
+ "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
15691
+ className
15692
+ ),
15693
+ "data-ds": "",
15694
+ "data-ds-component": "sidebar-rail",
15695
+ ...rest
15696
+ }
15697
+ );
15698
+ }
15699
+ );
15700
+ SidebarRail.displayName = "SidebarRail";
15701
+ var SidebarInset = forwardRef(
15702
+ function SidebarInset2({ className, children, ...rest }, ref) {
15703
+ return /* @__PURE__ */ jsx(
15704
+ "main",
15705
+ {
15706
+ ref,
15707
+ className: cn(
15708
+ "relative flex min-h-svh flex-1 flex-col bg-background",
15709
+ "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]",
15710
+ "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0",
15711
+ "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
15712
+ className
15713
+ ),
15714
+ "data-ds": "",
15715
+ "data-ds-component": "sidebar-inset",
15716
+ ...rest,
15717
+ children
15718
+ }
15719
+ );
15720
+ }
15721
+ );
15722
+ SidebarInset.displayName = "SidebarInset";
15723
+ var SidebarHeader = forwardRef(
15724
+ function SidebarHeader2({ className, children, ...rest }, ref) {
15725
+ return /* @__PURE__ */ jsx(
15726
+ "div",
15727
+ {
15728
+ ref,
15729
+ className: cn(
15730
+ "flex flex-col gap-2 p-2",
15731
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15732
+ className
15733
+ ),
15734
+ "data-ds": "",
15735
+ "data-ds-component": "sidebar-header",
15736
+ "data-sidebar": "header",
15737
+ ...rest,
15738
+ children
15739
+ }
15740
+ );
15741
+ }
15742
+ );
15743
+ SidebarHeader.displayName = "SidebarHeader";
15744
+ var SidebarContent = forwardRef(
15745
+ function SidebarContent2({ className, children, ...rest }, ref) {
15746
+ return /* @__PURE__ */ jsx(
15747
+ "div",
15748
+ {
15749
+ ref,
15750
+ className: cn(
15751
+ "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden",
15752
+ "group-data-[collapsible=icon]:items-center",
15753
+ className
15754
+ ),
15755
+ "data-ds": "",
15756
+ "data-ds-component": "sidebar-content",
15757
+ "data-sidebar": "content",
15758
+ ...rest,
15759
+ children
15760
+ }
15761
+ );
15762
+ }
15763
+ );
15764
+ SidebarContent.displayName = "SidebarContent";
15765
+ var SidebarFooter = forwardRef(
15766
+ function SidebarFooter2({ className, children, ...rest }, ref) {
15767
+ return /* @__PURE__ */ jsx(
15768
+ "div",
15769
+ {
15770
+ ref,
15771
+ className: cn(
15772
+ "flex flex-col gap-2 p-2",
15773
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15774
+ className
15775
+ ),
15776
+ "data-ds": "",
15777
+ "data-ds-component": "sidebar-footer",
15778
+ "data-sidebar": "footer",
15779
+ ...rest,
15780
+ children
15329
15781
  }
15330
15782
  );
15331
15783
  }
15332
15784
  );
15333
15785
  SidebarFooter.displayName = "SidebarFooter";
15334
- var SidebarSection = forwardRef(
15335
- function SidebarSection2({ title, className, children, ...rest }, ref) {
15336
- const { collapsed } = useSidebarContext();
15337
- return /* @__PURE__ */ jsxs(
15786
+ var SidebarSeparator = forwardRef(function SidebarSeparator2({ className, ...rest }, ref) {
15787
+ return /* @__PURE__ */ jsx(
15788
+ "hr",
15789
+ {
15790
+ ref,
15791
+ className: cn("mx-2 w-auto border-sidebar-border", className),
15792
+ "data-ds": "",
15793
+ "data-ds-component": "sidebar-separator",
15794
+ "data-sidebar": "separator",
15795
+ ...rest
15796
+ }
15797
+ );
15798
+ });
15799
+ SidebarSeparator.displayName = "SidebarSeparator";
15800
+ var SidebarInput = forwardRef(
15801
+ function SidebarInput2({ className, ...rest }, ref) {
15802
+ return /* @__PURE__ */ jsx(
15803
+ "input",
15804
+ {
15805
+ ref,
15806
+ className: cn(
15807
+ "h-8 w-full rounded-md border border-sidebar-border bg-background px-3",
15808
+ "text-sm text-sidebar-foreground placeholder:text-sidebar-foreground/50",
15809
+ "transition-[border-color,box-shadow] duration-fast",
15810
+ "focus:border-sidebar-ring focus:outline-none focus:ring-2 focus:ring-sidebar-ring/20",
15811
+ className
15812
+ ),
15813
+ "data-ds": "",
15814
+ "data-ds-component": "sidebar-input",
15815
+ "data-sidebar": "input",
15816
+ ...rest
15817
+ }
15818
+ );
15819
+ }
15820
+ );
15821
+ SidebarInput.displayName = "SidebarInput";
15822
+ var SidebarGroup = forwardRef(
15823
+ function SidebarGroup2({ className, children, ...rest }, ref) {
15824
+ return /* @__PURE__ */ jsx(
15338
15825
  "div",
15339
15826
  {
15340
15827
  ref,
15341
- className: cn("px-3 py-2", className),
15342
- "data-ds-component": "sidebar-section",
15828
+ className: cn(
15829
+ "relative flex w-full min-w-0 flex-col p-2",
15830
+ "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
15831
+ className
15832
+ ),
15833
+ "data-ds": "",
15834
+ "data-ds-component": "sidebar-group",
15835
+ "data-sidebar": "group",
15343
15836
  ...rest,
15344
- children: [
15345
- /* @__PURE__ */ jsx(AnimatePresence, { children: title && !collapsed && /* @__PURE__ */ jsx(
15346
- motion.p,
15347
- {
15348
- className: "px-2 mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground",
15349
- initial: { opacity: 0 },
15350
- animate: { opacity: 1 },
15351
- exit: { opacity: 0 },
15352
- transition: { duration: 0.15 },
15353
- "data-ds-animated": "",
15354
- children: title
15355
- }
15356
- ) }),
15357
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
15358
- ]
15837
+ children
15838
+ }
15839
+ );
15840
+ }
15841
+ );
15842
+ SidebarGroup.displayName = "SidebarGroup";
15843
+ var SidebarGroupLabel = forwardRef(function SidebarGroupLabel2({ className, asChild = false, children, ...rest }, ref) {
15844
+ const { state } = useSidebar();
15845
+ const classes = cn(
15846
+ "flex h-8 shrink-0 items-center rounded-md px-2",
15847
+ "text-xs font-medium text-sidebar-foreground/70",
15848
+ "outline-none ring-sidebar-ring",
15849
+ "transition-[margin,opacity,padding] duration-200 ease-linear",
15850
+ // When collapsed to icon mode, hide label
15851
+ state === "collapsed" && "opacity-0 overflow-hidden h-0 p-0 m-0",
15852
+ className
15853
+ );
15854
+ if (asChild) {
15855
+ return /* @__PURE__ */ jsx(
15856
+ "div",
15857
+ {
15858
+ ref,
15859
+ className: classes,
15860
+ "data-ds": "",
15861
+ "data-ds-component": "sidebar-group-label",
15862
+ "data-sidebar": "group-label",
15863
+ ...rest,
15864
+ children
15865
+ }
15866
+ );
15867
+ }
15868
+ return /* @__PURE__ */ jsx(
15869
+ "div",
15870
+ {
15871
+ ref,
15872
+ className: classes,
15873
+ "data-ds": "",
15874
+ "data-ds-component": "sidebar-group-label",
15875
+ "data-sidebar": "group-label",
15876
+ ...rest,
15877
+ children
15878
+ }
15879
+ );
15880
+ });
15881
+ SidebarGroupLabel.displayName = "SidebarGroupLabel";
15882
+ var SidebarGroupAction = forwardRef(function SidebarGroupAction2({ className, children, ...rest }, ref) {
15883
+ const { state } = useSidebar();
15884
+ return /* @__PURE__ */ jsx(
15885
+ "button",
15886
+ {
15887
+ ref,
15888
+ type: "button",
15889
+ className: cn(
15890
+ "absolute right-3 top-3.5 flex items-center justify-center",
15891
+ "size-5 rounded-md p-0",
15892
+ "text-sidebar-foreground/70 ring-sidebar-ring",
15893
+ "outline-none",
15894
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
15895
+ "transition-transform duration-200",
15896
+ focusRingClasses,
15897
+ "[&>svg]:size-4 [&>svg]:shrink-0",
15898
+ // When icon-collapsed, hide
15899
+ state === "collapsed" && "hidden",
15900
+ className
15901
+ ),
15902
+ "data-ds": "",
15903
+ "data-ds-component": "sidebar-group-action",
15904
+ "data-sidebar": "group-action",
15905
+ ...rest,
15906
+ children
15907
+ }
15908
+ );
15909
+ });
15910
+ SidebarGroupAction.displayName = "SidebarGroupAction";
15911
+ var SidebarGroupContent = forwardRef(function SidebarGroupContent2({ className, children, ...rest }, ref) {
15912
+ return /* @__PURE__ */ jsx(
15913
+ "div",
15914
+ {
15915
+ ref,
15916
+ className: cn("w-full text-sm", className),
15917
+ "data-ds": "",
15918
+ "data-ds-component": "sidebar-group-content",
15919
+ "data-sidebar": "group-content",
15920
+ ...rest,
15921
+ children
15922
+ }
15923
+ );
15924
+ });
15925
+ SidebarGroupContent.displayName = "SidebarGroupContent";
15926
+ var SidebarMenu = forwardRef(
15927
+ function SidebarMenu2({ className, children, ...rest }, ref) {
15928
+ return /* @__PURE__ */ jsx(
15929
+ "ul",
15930
+ {
15931
+ ref,
15932
+ className: cn(
15933
+ "flex w-full min-w-0 flex-col gap-1 list-none m-0 p-0",
15934
+ "group-data-[collapsible=icon]:items-center",
15935
+ className
15936
+ ),
15937
+ "data-ds": "",
15938
+ "data-ds-component": "sidebar-menu",
15939
+ "data-sidebar": "menu",
15940
+ ...rest,
15941
+ children
15359
15942
  }
15360
15943
  );
15361
15944
  }
15362
15945
  );
15363
- SidebarSection.displayName = "SidebarSection";
15946
+ SidebarMenu.displayName = "SidebarMenu";
15947
+ var SidebarMenuItem = forwardRef(function SidebarMenuItem2({ className, children, ...rest }, ref) {
15948
+ return /* @__PURE__ */ jsx(
15949
+ "li",
15950
+ {
15951
+ ref,
15952
+ className: cn("group/menu-item relative list-none m-0 p-0", className),
15953
+ "data-ds": "",
15954
+ "data-ds-component": "sidebar-menu-item",
15955
+ "data-sidebar": "menu-item",
15956
+ ...rest,
15957
+ children
15958
+ }
15959
+ );
15960
+ });
15961
+ SidebarMenuItem.displayName = "SidebarMenuItem";
15962
+ var SidebarMenuButton = forwardRef(function SidebarMenuButton2({
15963
+ isActive = false,
15964
+ size = "default",
15965
+ variant = "default",
15966
+ tooltip,
15967
+ asChild = false,
15968
+ className,
15969
+ children,
15970
+ ...rest
15971
+ }, ref) {
15972
+ const { state, isMobile, collapsible } = useSidebar();
15973
+ const isCollapsed = state === "collapsed" && collapsible === "icon";
15974
+ const lgExpandedLayout = !isCollapsed ? [
15975
+ "[&>*:nth-child(2)]:flex-1 [&>*:nth-child(2)]:min-w-0",
15976
+ "[&>*:nth-child(2)]:grid [&>*:nth-child(2)]:text-left [&>*:nth-child(2)]:text-sm [&>*:nth-child(2)]:leading-tight",
15977
+ "[&>*:nth-child(2)_span]:truncate",
15978
+ "[&>svg:last-child]:ml-auto [&>svg:last-child]:shrink-0"
15979
+ ].join(" ") : "";
15980
+ const sizeClasses3 = {
15981
+ sm: "h-7 text-xs",
15982
+ default: "h-8 text-sm",
15983
+ lg: [
15984
+ "h-12 text-sm",
15985
+ lgExpandedLayout,
15986
+ // lg collapsed: shrink height to match default buttons and scale
15987
+ // the first-child wrapper (logo div, Avatar) to 24px so it fits
15988
+ // neatly inside the 32px collapsed button.
15989
+ "group-data-[collapsible=icon]:!h-8",
15990
+ "group-data-[collapsible=icon]:[&>:first-child]:!size-6",
15991
+ "group-data-[collapsible=icon]:[&>:first-child]:shrink-0",
15992
+ "group-data-[collapsible=icon]:[&>:first-child]:overflow-hidden",
15993
+ "group-data-[collapsible=icon]:[&>:first-child]:rounded-md"
15994
+ ].join(" ")
15995
+ };
15996
+ const buttonClasses = cn(
15997
+ // Base
15998
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2",
15999
+ "outline-none ring-sidebar-ring",
16000
+ "transition-[width,height,padding] duration-200 ease-linear",
16001
+ focusRingClasses,
16002
+ // Active & hover states
16003
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
16004
+ "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
16005
+ // Size
16006
+ sizeClasses3[size],
16007
+ // Variant
16008
+ variant === "outline" && "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
16009
+ // Active
16010
+ isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
16011
+ // Icon collapse — fixed 32px button, no padding, center the icon,
16012
+ // hide everything except the first child (icon/avatar).
16013
+ // Plain <svg> icons stay at size-4 (16px); lg wrapper divs are
16014
+ // handled separately by the lg sizeClass above.
16015
+ isCollapsed && "!size-8 !p-0 !gap-0 justify-center [&>*:not(:first-child)]:hidden [&>svg]:size-4",
16016
+ // Disabled
16017
+ "disabled:pointer-events-none disabled:opacity-50",
16018
+ // Icon sizing
16019
+ "[&>svg]:size-4 [&>svg]:shrink-0",
16020
+ className
16021
+ );
16022
+ const button = asChild ? /* @__PURE__ */ jsx(
16023
+ "span",
16024
+ {
16025
+ ref,
16026
+ className: buttonClasses,
16027
+ "data-ds": "",
16028
+ "data-ds-component": "sidebar-menu-button",
16029
+ "data-sidebar": "menu-button",
16030
+ "data-size": size,
16031
+ "data-active": isActive ? "" : void 0,
16032
+ children
16033
+ }
16034
+ ) : /* @__PURE__ */ jsx(
16035
+ "button",
16036
+ {
16037
+ ref,
16038
+ type: "button",
16039
+ className: buttonClasses,
16040
+ "aria-current": isActive ? "page" : void 0,
16041
+ "data-ds": "",
16042
+ "data-ds-component": "sidebar-menu-button",
16043
+ "data-sidebar": "menu-button",
16044
+ "data-size": size,
16045
+ "data-active": isActive ? "" : void 0,
16046
+ ...rest,
16047
+ children
16048
+ }
16049
+ );
16050
+ if (!tooltip || isMobile) {
16051
+ return button;
16052
+ }
16053
+ if (!isCollapsed) {
16054
+ return button;
16055
+ }
16056
+ const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip;
16057
+ return /* @__PURE__ */ jsxs(Tooltip$1.Root, { children: [
16058
+ /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children: button }),
16059
+ /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
16060
+ Tooltip$1.Content,
16061
+ {
16062
+ side: "right",
16063
+ align: "center",
16064
+ sideOffset: 4,
16065
+ className: cn(
16066
+ "z-(--z-tooltip,9999)",
16067
+ "overflow-hidden rounded-md px-3 py-1.5",
16068
+ "bg-sidebar-primary text-sidebar-primary-foreground",
16069
+ "text-xs font-medium",
16070
+ "animate-in fade-in-0 zoom-in-95",
16071
+ "data-[side=right]:slide-in-from-left-2"
16072
+ ),
16073
+ children: tooltipContent
16074
+ }
16075
+ ) })
16076
+ ] });
16077
+ });
16078
+ SidebarMenuButton.displayName = "SidebarMenuButton";
16079
+ var SidebarMenuAction = forwardRef(function SidebarMenuAction2({ showOnHover = false, className, children, ...rest }, ref) {
16080
+ const { state } = useSidebar();
16081
+ return /* @__PURE__ */ jsx(
16082
+ "button",
16083
+ {
16084
+ ref,
16085
+ type: "button",
16086
+ className: cn(
16087
+ "absolute right-1 top-1.5 flex items-center justify-center",
16088
+ "size-5 rounded-md p-0",
16089
+ "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
16090
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
16091
+ "transition-opacity duration-fast",
16092
+ focusRingClasses,
16093
+ "[&>svg]:size-4 [&>svg]:shrink-0",
16094
+ // Show on hover only
16095
+ 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",
16096
+ // Hide when collapsed to icon mode
16097
+ state === "collapsed" && "hidden",
16098
+ className
16099
+ ),
16100
+ "data-ds": "",
16101
+ "data-ds-component": "sidebar-menu-action",
16102
+ "data-sidebar": "menu-action",
16103
+ ...rest,
16104
+ children
16105
+ }
16106
+ );
16107
+ });
16108
+ SidebarMenuAction.displayName = "SidebarMenuAction";
16109
+ var SidebarMenuBadge = forwardRef(function SidebarMenuBadge2({ className, children, ...rest }, ref) {
16110
+ const { state } = useSidebar();
16111
+ return /* @__PURE__ */ jsx(
16112
+ "div",
16113
+ {
16114
+ ref,
16115
+ className: cn(
16116
+ "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1",
16117
+ "text-xs font-medium tabular-nums text-sidebar-foreground",
16118
+ "select-none pointer-events-none",
16119
+ // Hide when collapsed
16120
+ state === "collapsed" && "hidden",
16121
+ className
16122
+ ),
16123
+ "data-ds": "",
16124
+ "data-ds-component": "sidebar-menu-badge",
16125
+ "data-sidebar": "menu-badge",
16126
+ ...rest,
16127
+ children
16128
+ }
16129
+ );
16130
+ });
16131
+ SidebarMenuBadge.displayName = "SidebarMenuBadge";
16132
+ var SidebarMenuSkeleton = forwardRef(function SidebarMenuSkeleton2({ className, showIcon = false, ...rest }, ref) {
16133
+ const width = useMemo(() => {
16134
+ return `${Math.floor(Math.random() * 40) + 50}%`;
16135
+ }, []);
16136
+ return /* @__PURE__ */ jsxs(
16137
+ "div",
16138
+ {
16139
+ ref,
16140
+ className: cn(
16141
+ "flex h-8 items-center gap-2 rounded-md px-2",
16142
+ className
16143
+ ),
16144
+ "data-ds": "",
16145
+ "data-ds-component": "sidebar-menu-skeleton",
16146
+ "data-sidebar": "menu-skeleton",
16147
+ ...rest,
16148
+ children: [
16149
+ showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 rounded-md bg-sidebar-accent animate-pulse" }),
16150
+ /* @__PURE__ */ jsx(
16151
+ "div",
16152
+ {
16153
+ className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-sidebar-accent animate-pulse",
16154
+ style: { "--skeleton-width": width }
16155
+ }
16156
+ )
16157
+ ]
16158
+ }
16159
+ );
16160
+ });
16161
+ SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
16162
+ var SidebarMenuSub = forwardRef(function SidebarMenuSub2({ className, children, ...rest }, ref) {
16163
+ const { state } = useSidebar();
16164
+ return /* @__PURE__ */ jsx(
16165
+ "ul",
16166
+ {
16167
+ ref,
16168
+ className: cn(
16169
+ "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 list-none m-0 p-0",
16170
+ "border-l border-sidebar-border pl-2.5 py-0.5",
16171
+ // Hide when collapsed to icon
16172
+ state === "collapsed" && "hidden",
16173
+ className
16174
+ ),
16175
+ "data-ds": "",
16176
+ "data-ds-component": "sidebar-menu-sub",
16177
+ "data-sidebar": "menu-sub",
16178
+ ...rest,
16179
+ children
16180
+ }
16181
+ );
16182
+ });
16183
+ SidebarMenuSub.displayName = "SidebarMenuSub";
16184
+ var SidebarMenuSubItem = forwardRef(function SidebarMenuSubItem2({ className, children, ...rest }, ref) {
16185
+ return /* @__PURE__ */ jsx(
16186
+ "li",
16187
+ {
16188
+ ref,
16189
+ className: cn("list-none m-0 p-0", className),
16190
+ "data-ds": "",
16191
+ "data-ds-component": "sidebar-menu-sub-item",
16192
+ "data-sidebar": "menu-sub-item",
16193
+ ...rest,
16194
+ children
16195
+ }
16196
+ );
16197
+ });
16198
+ SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
16199
+ var SidebarMenuSubButton = forwardRef(function SidebarMenuSubButton2({ isActive = false, size = "md", className, children, ...rest }, ref) {
16200
+ return /* @__PURE__ */ jsx(
16201
+ "a",
16202
+ {
16203
+ ref,
16204
+ className: cn(
16205
+ "flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 no-underline",
16206
+ "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
16207
+ "transition-colors duration-fast",
16208
+ "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:no-underline",
16209
+ focusRingClasses,
16210
+ size === "sm" ? "h-6 text-xs" : "h-7 text-xs",
16211
+ isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
16212
+ "disabled:pointer-events-none disabled:opacity-50",
16213
+ "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
16214
+ className
16215
+ ),
16216
+ "aria-current": isActive ? "page" : void 0,
16217
+ "data-ds": "",
16218
+ "data-ds-component": "sidebar-menu-sub-button",
16219
+ "data-sidebar": "menu-sub-button",
16220
+ "data-active": isActive ? "" : void 0,
16221
+ ...rest,
16222
+ children
16223
+ }
16224
+ );
16225
+ });
16226
+ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
16227
+ var SidebarSection = SidebarGroup;
15364
16228
  var SidebarItem = forwardRef(
15365
16229
  function SidebarItem2({
15366
16230
  icon,
@@ -15372,12 +16236,14 @@ var SidebarItem = forwardRef(
15372
16236
  className,
15373
16237
  children,
15374
16238
  ...rest
15375
- }, _ref) {
15376
- const { collapsed } = useSidebarContext();
16239
+ }, ref) {
16240
+ const { state } = useSidebar();
16241
+ const isCollapsed = state === "collapsed";
15377
16242
  const Tag3 = href ? "a" : "button";
15378
16243
  return /* @__PURE__ */ jsxs(
15379
16244
  Tag3,
15380
16245
  {
16246
+ ref,
15381
16247
  href,
15382
16248
  type: href ? void 0 : "button",
15383
16249
  disabled,
@@ -15388,17 +16254,18 @@ var SidebarItem = forwardRef(
15388
16254
  "transition-colors duration-fast",
15389
16255
  "disabled:pointer-events-none disabled:opacity-50",
15390
16256
  focusRingClasses,
15391
- active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent/60",
15392
- collapsed && "justify-center",
16257
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/60",
16258
+ isCollapsed && "justify-center",
15393
16259
  className
15394
16260
  ),
15395
- title: collapsed && typeof label === "string" ? label : void 0,
16261
+ title: isCollapsed && typeof label === "string" ? label : void 0,
16262
+ "data-ds": "",
15396
16263
  "data-ds-component": "sidebar-item",
15397
16264
  "data-ds-active": active ? "" : void 0,
15398
16265
  ...rest,
15399
16266
  children: [
15400
16267
  icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 size-5 flex items-center justify-center", children: icon }),
15401
- /* @__PURE__ */ jsx(AnimatePresence, { children: !collapsed && (label || children) && /* @__PURE__ */ jsx(
16268
+ /* @__PURE__ */ jsx(AnimatePresence, { children: !isCollapsed && (label || children) && /* @__PURE__ */ jsx(
15402
16269
  motion.span,
15403
16270
  {
15404
16271
  className: "flex-1 truncate",
@@ -15410,32 +16277,15 @@ var SidebarItem = forwardRef(
15410
16277
  children: label ?? children
15411
16278
  }
15412
16279
  ) }),
15413
- badge && !collapsed && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge })
16280
+ badge && !isCollapsed && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge })
15414
16281
  ]
15415
16282
  }
15416
16283
  );
15417
16284
  }
15418
16285
  );
15419
16286
  SidebarItem.displayName = "SidebarItem";
15420
- function SidebarMobileOverlay({ className }) {
15421
- const { mobileOpen, setMobileOpen } = useSidebarContext();
15422
- const shouldReduce = useReducedMotion();
15423
- return /* @__PURE__ */ jsx(AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsx(
15424
- motion.div,
15425
- {
15426
- className: cn(
15427
- "fixed inset-0 z-overlay bg-black/50 backdrop-blur-sm md:hidden",
15428
- className
15429
- ),
15430
- variants: shouldReduce ? void 0 : overlayBackdrop.variants,
15431
- initial: shouldReduce ? { opacity: 0 } : "initial",
15432
- animate: shouldReduce ? { opacity: 1 } : "animate",
15433
- exit: shouldReduce ? { opacity: 0 } : "exit",
15434
- transition: shouldReduce ? { duration: 0.15 } : overlayBackdrop.transition,
15435
- onClick: () => setMobileOpen(false),
15436
- "data-ds-animated": ""
15437
- }
15438
- ) });
16287
+ function SidebarMobileOverlay(_props) {
16288
+ return null;
15439
16289
  }
15440
16290
  SidebarMobileOverlay.displayName = "SidebarMobileOverlay";
15441
16291
  var skeletonVariants = cva(
@@ -16543,11 +17393,11 @@ var Switch = forwardRef(function Switch2({
16543
17393
  const [internalChecked, setInternalChecked] = useState(
16544
17394
  checked ?? defaultChecked ?? false
16545
17395
  );
16546
- useEffect(() => {
16547
- if (isControlled) {
16548
- setInternalChecked(checked);
16549
- }
16550
- }, [isControlled, checked]);
17396
+ const [prevChecked, setPrevChecked] = useState(checked);
17397
+ if (isControlled && checked !== prevChecked) {
17398
+ setPrevChecked(checked);
17399
+ setInternalChecked(checked);
17400
+ }
16551
17401
  const handleCheckedChange = useCallback(
16552
17402
  (value) => {
16553
17403
  if (!isControlled) {
@@ -16579,7 +17429,7 @@ var Switch = forwardRef(function Switch2({
16579
17429
  if (!label) {
16580
17430
  return switchElement;
16581
17431
  }
16582
- const labelBlock = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
17432
+ const labelBlock = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
16583
17433
  /* @__PURE__ */ jsx(
16584
17434
  "label",
16585
17435
  {
@@ -16611,7 +17461,7 @@ var Switch = forwardRef(function Switch2({
16611
17461
  "div",
16612
17462
  {
16613
17463
  className: cn(
16614
- "inline-flex items-center gap-3",
17464
+ "flex items-center gap-3",
16615
17465
  // Reverse order when label is on the left
16616
17466
  labelPosition === "left" ? "flex-row" : "flex-row-reverse",
16617
17467
  // Align to start when description is present
@@ -17062,20 +17912,17 @@ var Textarea = forwardRef(
17062
17912
  ...rest
17063
17913
  }, ref) {
17064
17914
  const internalRef = useRef(null);
17065
- const [charCount, setCharCount] = useState(() => {
17066
- if (value !== void 0) return String(value).length;
17067
- if (defaultValue !== void 0) return String(defaultValue).length;
17068
- return 0;
17069
- });
17070
- const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
17071
- useEffect(() => {
17072
- if (value !== void 0) {
17073
- setCharCount(String(value).length);
17915
+ const [uncontrolledCharCount, setUncontrolledCharCount] = useState(
17916
+ () => {
17917
+ if (defaultValue !== void 0) return String(defaultValue).length;
17918
+ return 0;
17074
17919
  }
17075
- }, [value]);
17920
+ );
17921
+ const charCount = value !== void 0 ? String(value).length : uncontrolledCharCount;
17922
+ const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
17076
17923
  const handleChange = useCallback(
17077
17924
  (e) => {
17078
- setCharCount(e.target.value.length);
17925
+ setUncontrolledCharCount(e.target.value.length);
17079
17926
  adjustHeight();
17080
17927
  onChange?.(e);
17081
17928
  },
@@ -18410,13 +19257,15 @@ var ColorPicker = forwardRef(
18410
19257
  const [hue, setHue] = useState(hsl.h);
18411
19258
  const [sat, setSat] = useState(hsl.s);
18412
19259
  const [lit, setLit] = useState(hsl.l);
18413
- useEffect(() => {
19260
+ const [prevValue, setPrevValue] = useState(currentValue);
19261
+ if (currentValue !== prevValue) {
19262
+ setPrevValue(currentValue);
18414
19263
  const parsed = hexToHsl(currentValue);
18415
19264
  setHue(parsed.h);
18416
19265
  setSat(parsed.s);
18417
19266
  setLit(parsed.l);
18418
19267
  setHexInput(currentValue);
18419
- }, [currentValue]);
19268
+ }
18420
19269
  const updateColor = useCallback(
18421
19270
  (hex) => {
18422
19271
  if (!value) setInternalValue(hex);
@@ -18713,7 +19562,7 @@ var SonnerToaster = forwardRef(
18713
19562
  }
18714
19563
  );
18715
19564
  SonnerToaster.displayName = "SonnerToaster";
18716
- function ChevronRightIcon8({ className }) {
19565
+ function ChevronRightIcon7({ className }) {
18717
19566
  return /* @__PURE__ */ jsx(
18718
19567
  "svg",
18719
19568
  {
@@ -18941,7 +19790,7 @@ function TreeItem({ node, depth }) {
18941
19790
  tabIndex: node.disabled ? -1 : 0,
18942
19791
  children: [
18943
19792
  /* @__PURE__ */ jsx("span", { className: "inline-flex size-4 items-center justify-center shrink-0", children: hasChildren && /* @__PURE__ */ jsx(
18944
- ChevronRightIcon8,
19793
+ ChevronRightIcon7,
18945
19794
  {
18946
19795
  className: cn(
18947
19796
  "size-3.5 text-muted-foreground transition-transform duration-fast",
@@ -19263,7 +20112,7 @@ function XIcon6({ className }) {
19263
20112
  }
19264
20113
  );
19265
20114
  }
19266
- function ChevronLeftIcon4({ className }) {
20115
+ function ChevronLeftIcon3({ className }) {
19267
20116
  return /* @__PURE__ */ jsx(
19268
20117
  "svg",
19269
20118
  {
@@ -19280,7 +20129,7 @@ function ChevronLeftIcon4({ className }) {
19280
20129
  }
19281
20130
  );
19282
20131
  }
19283
- function ChevronRightIcon9({ className }) {
20132
+ function ChevronRightIcon8({ className }) {
19284
20133
  return /* @__PURE__ */ jsx(
19285
20134
  "svg",
19286
20135
  {
@@ -19431,7 +20280,7 @@ function Lightbox({
19431
20280
  onClick: prev,
19432
20281
  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",
19433
20282
  "aria-label": "Previous image",
19434
- children: /* @__PURE__ */ jsx(ChevronLeftIcon4, { className: "size-5" })
20283
+ children: /* @__PURE__ */ jsx(ChevronLeftIcon3, { className: "size-5" })
19435
20284
  }
19436
20285
  ),
19437
20286
  /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
@@ -19459,7 +20308,7 @@ function Lightbox({
19459
20308
  onClick: next,
19460
20309
  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",
19461
20310
  "aria-label": "Next image",
19462
- children: /* @__PURE__ */ jsx(ChevronRightIcon9, { className: "size-5" })
20311
+ children: /* @__PURE__ */ jsx(ChevronRightIcon8, { className: "size-5" })
19463
20312
  }
19464
20313
  )
19465
20314
  ] }),
@@ -20210,10 +21059,12 @@ var DataTableToolbar = forwardRef(function DataTableToolbar2({
20210
21059
  className
20211
21060
  }, ref) {
20212
21061
  const [localSearch, setLocalSearch] = useState(searchValue);
20213
- const debounceTimer = useRef(null);
20214
- useEffect(() => {
21062
+ const [prevSearchValue, setPrevSearchValue] = useState(searchValue);
21063
+ if (searchValue !== prevSearchValue) {
21064
+ setPrevSearchValue(searchValue);
20215
21065
  setLocalSearch(searchValue);
20216
- }, [searchValue]);
21066
+ }
21067
+ const debounceTimer = useRef(null);
20217
21068
  const handleSearchChange = useCallback(
20218
21069
  (value) => {
20219
21070
  setLocalSearch(value);
@@ -20641,4 +21492,4 @@ VisuallyHidden.displayName = "VisuallyHidden";
20641
21492
  *)
20642
21493
  */
20643
21494
 
20644
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbNav, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Callout, Card, CardBody, CardFooter, CardHeader, Carousel, ChartContainer, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, Command, CommandTrigger, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListDetail, DataListTerm, DataTable, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FileUpload, FormField, HoverCard, HoverCardContent, HoverCardTrigger, ImageGallery, InfiniteScroll, InlineCode, Input, InputGroup, Kbd, Label, Markdown, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuCardLink, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, Pagination, PinInput, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioCard, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarMobileOverlay, SidebarProvider, SidebarSection, SidebarToggle, Skeleton, SkeletonCircle, SkeletonRect, SkeletonText, Slider, SonnerToaster, Spinner, Stat, Step, Steps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeToggle, Timeline, TimelineItem, ToastItem, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, TreeView, VideoPlayer, VirtualList, VisuallyHidden, accordionRootVariants, accordionTriggerVariants, alertVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calendarDayVariants, calloutVariants, cardVariants, chartColors, checkboxVariants, codeBlockVariants, comboboxTriggerVariants, copyButtonVariants, createColumnHelper, dataListVariants, dialogContentVariants, drawerContentVariants, fileUploadZoneVariants, inlineCodeVariants, inputVariants, kbdVariants, labelVariants, numberInputVariants, paginationButtonVariants, pinCellVariants, progressIndicatorVariants, progressTrackVariants, radioCardVariants, radioGroupVariants, radioIndicatorVariants, scrollbarThumbVariants, scrollbarVariants, searchInputVariants, selectTriggerVariants, sheetContentVariants, skeletonVariants, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants, spinnerVariants, statVariants, switchThumbVariants, switchTrackVariants, tableRootVariants, tabsListVariants, tabsTriggerVariants, tagVariants, textareaVariants, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, useCarouselContext, useCheckboxGroupContext, useCollapsibleContext, useDataTable, useSidebarContext, useToast, useToggleGroupContext };
21495
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbNav, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Callout, Card, CardBody, CardFooter, CardHeader, Carousel, ChartContainer, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, Command, CommandTrigger, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListDetail, DataListTerm, DataTable, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FileUpload, FormField, HoverCard, HoverCardContent, HoverCardTrigger, ImageGallery, InfiniteScroll, InlineCode, Input, InputGroup, Kbd, Label, Markdown, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuCardLink, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, Pagination, PinInput, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioCard, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarItem, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarMobileOverlay, SidebarProvider, SidebarRail, SidebarSection, SidebarSeparator, SidebarToggle, SidebarTrigger, Skeleton, SkeletonCircle, SkeletonRect, SkeletonText, Slider, SonnerToaster, Spinner, Stat, Step, Steps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeToggle, Timeline, TimelineItem, ToastItem, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, TreeView, VideoPlayer, VirtualList, VisuallyHidden, accordionRootVariants, accordionTriggerVariants, alertVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calendarDayVariants, calloutVariants, cardVariants, chartColors, checkboxVariants, codeBlockVariants, comboboxTriggerVariants, copyButtonVariants, createColumnHelper, dataListVariants, dialogContentVariants, drawerContentVariants, fileUploadZoneVariants, inlineCodeVariants, inputVariants, kbdVariants, labelVariants, numberInputVariants, paginationButtonVariants, pinCellVariants, progressIndicatorVariants, progressTrackVariants, radioCardVariants, radioGroupVariants, radioIndicatorVariants, scrollbarThumbVariants, scrollbarVariants, searchInputVariants, selectTriggerVariants, separatorVariants, sheetContentVariants, skeletonVariants, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants, spinnerVariants, statVariants, switchThumbVariants, switchTrackVariants, tableRootVariants, tabsListVariants, tabsTriggerVariants, tagVariants, textareaVariants, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, useCarouselContext, useCheckboxGroupContext, useCollapsibleContext, useDataTable, useSidebar, useSidebarContext, useToast, useToggleGroupContext };