@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-LCTGEH57.js

@@ -0,0 +1,1376 @@
+import { useScrollbarPosition } from './chunk-VYG7BDXC.js';
+import { useElement } from './chunk-MWS4VCLV.js';
+import { BrandLogo } from './chunk-4FIZZONW.js';
+import { HoverCard } from './chunk-5IG2S7ZY.js';
+import { DropdownMenu } from './chunk-ERAHK5YQ.js';
+import { Collapsible } from './chunk-FVPGQ6UE.js';
+import { Separator } from './chunk-6DUMGC7Y.js';
+import { ScrollArea } from './chunk-THHB4EWS.js';
+import { Search, ChevronDown } from './chunk-RQVK4IYC.js';
+import { TooltipProvider, Tooltip } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { createContext, use, useState, useCallback, useMemo, useReducer, useLayoutEffect, useEffect, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot, Root, Slottable } from '@radix-ui/react-slot';
+
+var FALLBACK_TIMEOUT_MS = 500;
+var reducer = (state, event) => {
+  switch (event) {
+    case "MOUNT":
+      return "mounted";
+    case "TRANSITION_OUT":
+      return state === "mounted" ? "unmountSuspended" : state;
+    case "TRANSITION_END":
+      return state === "unmountSuspended" ? "unmounted" : state;
+    default:
+      return state;
+  }
+};
+var useTransitionPresence = ({
+  mounted,
+  keepMounted = false
+}) => {
+  const [state, send] = useReducer(reducer, mounted ? "mounted" : "unmounted");
+  useLayoutEffect(() => {
+    if (keepMounted) return;
+    mounted ? send("MOUNT") : send("TRANSITION_OUT");
+  }, [mounted, keepMounted]);
+  useEffect(() => {
+    if (state !== "unmountSuspended") return;
+    const id = setTimeout(() => send("TRANSITION_END"), FALLBACK_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [state]);
+  return useMemo(
+    () => ({
+      isMounted: keepMounted || state !== "unmounted",
+      completeUnmount: () => send("TRANSITION_END")
+    }),
+    [state, keepMounted]
+  );
+};
+var SidebarContent = ({ ref, className, children, contentRef }) => {
+  const { setElement, isBottom, isTop, isMiddle } = useScrollbarPosition();
+  const mergedRefs = mergeRefs(ref ?? null, (ref2) => setElement(ref2));
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      ref: mergedRefs,
+      type: "scroll",
+      className: "tw:group/sidebar-content tw:flex-1",
+      "data-slot": "sidebar-content",
+      scrollBarClassName: "tw:w-1.5",
+      viewPortClassName: cn(
+        "tw:overflow-x-hidden",
+        "tw:overscroll-contain",
+        "tw:[&>div]:!flex",
+        // overflow fix for scrollbar
+        // Hide scroll-position-based borders (top/bottom) if SidebarHeader or SidebarFooter is omitted.
+        "tw:group-first/sidebar-content:before:hidden",
+        "tw:group-last/sidebar-content:after:hidden",
+        "tw:!box-border",
+        {
+          'tw:before:absolute tw:before:top-0 tw:before:left-0 tw:before:right-0 tw:before:h-px tw:before:bg-sidebar-border tw:before:z-10 tw:before:content-[""]': isBottom || isMiddle,
+          'tw:after:absolute tw:after:bottom-0 tw:after:left-0 tw:after:right-0 tw:after:h-px tw:after:bg-sidebar-border tw:after:z-10 tw:after:content-[""]': isTop || isMiddle
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: contentRef,
+          className: cn(
+            "tw:flex",
+            "tw:flex-1",
+            "tw:flex-col",
+            "tw:gap-1",
+            "tw:overflow-x-hidden",
+            "tw:p-2",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+
+// src/components/Sidebar/utils.ts
+var SidebarWidthInPx = {
+  MIN_DEFAULT: 256,
+  // 8 px / 36 px / 8 px = 52 px
+  // left padding / icon width / right padding
+  COLLAPSED_ICON: 52,
+  // padding from every side for floating variant (see --sidebar-floating-padding)
+  FLOATING_VARIANT_PADDING: 8
+};
+var floatingSideCount = {
+  "sided-floating": 1,
+  floating: 2,
+  inset: 0,
+  none: 0
+};
+var calcEffectiveWidths = ({
+  variant,
+  width: customWidth,
+  collapsible,
+  state,
+  mode
+}) => {
+  if (variant === "none") return { sidebar: 0, gap: 0, fill: 0 };
+  const padding = floatingSideCount[variant] * SidebarWidthInPx.FLOATING_VARIANT_PADDING;
+  const width = Math.max(customWidth ?? 0, SidebarWidthInPx.MIN_DEFAULT) + padding;
+  const iconWidth = SidebarWidthInPx.COLLAPSED_ICON + padding;
+  const isExpanded = state === "expanded";
+  const reduction = variant === "inset" ? 0 : SidebarWidthInPx.FLOATING_VARIANT_PADDING;
+  const iconWidths = (() => {
+    const sidebar = isExpanded ? width : iconWidth;
+    const gap = mode === "expand-on-hover" ? iconWidth : sidebar;
+    const fill = gap - reduction;
+    return { sidebar, gap, fill };
+  })();
+  const offCanvasWidths = (() => {
+    const sidebar = width;
+    const gap = isExpanded ? width : SidebarWidthInPx.FLOATING_VARIANT_PADDING;
+    const fill = gap - reduction;
+    return { sidebar, gap, fill };
+  })();
+  return collapsible === "icon" ? iconWidths : offCanvasWidths;
+};
+var SidebarContext = createContext(null);
+var useOptionalSidebar = (side = "left") => use(SidebarContext)?.[side] ?? null;
+var useSidebar = (side = "left") => {
+  const context = use(SidebarContext);
+  if (context === null) throw new Error("useSidebar must be used within a SidebarProvider.");
+  return context[side];
+};
+var PORTAL_OPEN_SELECTORS = [
+  '[aria-haspopup="menu"][aria-expanded=true]',
+  // DropdownMenu
+  '[aria-haspopup="dialog"][aria-expanded=true]'
+  // Popover, Dialogs (Modal, Sheet)
+];
+var PORTAL_OPEN_SELECTORS_STRING = PORTAL_OPEN_SELECTORS.join(",");
+var useHoverTracking = (sidebarElement) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isLockedRef = useRef(false);
+  useEffect(() => {
+    if (!sidebarElement) return;
+    const handleMouseEnter = () => setIsHovered(true);
+    const handleMouseLeave = () => {
+      if (isLockedRef.current) return;
+      setIsHovered(false);
+    };
+    sidebarElement.addEventListener("mouseenter", handleMouseEnter);
+    sidebarElement.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      sidebarElement.removeEventListener("mouseenter", handleMouseEnter);
+      sidebarElement.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [sidebarElement]);
+  useEffect(() => {
+    if (!sidebarElement) return;
+    let animationFrameId;
+    const observer = new MutationObserver(() => {
+      const hasOpenPortal = sidebarElement.querySelector(PORTAL_OPEN_SELECTORS_STRING) !== null;
+      isLockedRef.current = hasOpenPortal;
+      if (hasOpenPortal) return;
+      animationFrameId = requestAnimationFrame(() => {
+        setIsHovered(sidebarElement.matches(":hover"));
+      });
+    });
+    isLockedRef.current = sidebarElement.querySelector(PORTAL_OPEN_SELECTORS_STRING) !== null;
+    observer.observe(sidebarElement, {
+      attributes: true,
+      attributeFilter: ["aria-expanded"],
+      subtree: true
+    });
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      observer.disconnect();
+    };
+  }, [sidebarElement]);
+  return isHovered;
+};
+
+// src/components/Sidebar/SidebarProvider/useSidebarState.ts
+var useSidebarState = ({ defaultMode, mode: modeProp, onModeChange }) => {
+  const [sidebarElement, setSidebarElement] = useElement();
+  const isHovered = useHoverTracking(sidebarElement);
+  const [_mode, _setMode] = useState(defaultMode ?? "expanded");
+  const mode = modeProp ?? _mode;
+  const setMode = useCallback(
+    (dispatch) => {
+      const newState = typeof dispatch === "function" ? dispatch(mode) : dispatch;
+      const set = onModeChange ?? _setMode;
+      set(newState);
+    },
+    [onModeChange, mode]
+  );
+  const toggle = useCallback(() => {
+    setMode((currState) => currState === "expanded" ? "collapsed" : "expanded");
+  }, [setMode]);
+  const state = (() => {
+    if (mode === "expand-on-hover") return isHovered ? "expanded" : "collapsed";
+    return mode;
+  })();
+  return useMemo(
+    () => ({
+      isHovered,
+      toggle,
+      setMode,
+      mode,
+      state,
+      sidebarElement,
+      setSidebarElement
+    }),
+    [isHovered, toggle, setMode, mode, state, sidebarElement, setSidebarElement]
+  );
+};
+var DEFAULT_SIDEBAR_VARIANT = "none";
+var DEFAULT_SIDEBAR_MODE = "expanded";
+var DEFAULT_SIDEBAR_COLLAPSIBLE = "off-canvas";
+var SidebarProvider = ({
+  children,
+  // left state
+  defaultLeftMode = DEFAULT_SIDEBAR_MODE,
+  leftMode,
+  onLeftModeChange,
+  // right state
+  defaultRightMode = DEFAULT_SIDEBAR_MODE,
+  rightMode,
+  onRightModeChange,
+  // left
+  leftCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE,
+  leftVariant = DEFAULT_SIDEBAR_VARIANT,
+  leftWidth,
+  // right
+  rightCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE,
+  rightVariant = DEFAULT_SIDEBAR_VARIANT,
+  rightWidth,
+  // width change callbacks
+  onLeftWidthChange,
+  onRightWidthChange,
+  // fill
+  defaultFilledSide = null
+}) => {
+  const [filledSide, setFilledSide] = useState(defaultFilledSide);
+  const [isLeftDragging, setIsLeftDragging] = useState(false);
+  const [isRightDragging, setIsRightDragging] = useState(false);
+  const [leftDragWidth, setLeftDragWidth] = useState(null);
+  const [rightDragWidth, setRightDragWidth] = useState(null);
+  if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);
+  if (rightDragWidth !== null && rightWidth === rightDragWidth) setRightDragWidth(null);
+  const leftState = useSidebarState({
+    defaultMode: defaultLeftMode,
+    mode: leftMode,
+    onModeChange: onLeftModeChange
+  });
+  const rightState = useSidebarState({
+    defaultMode: defaultRightMode,
+    mode: rightMode,
+    onModeChange: onRightModeChange
+  });
+  const toggleLeftFill = useCallback(
+    () => setFilledSide((prev) => prev === "left" ? null : "left"),
+    []
+  );
+  const toggleRightFill = useCallback(
+    () => setFilledSide((prev) => prev === "right" ? null : "right"),
+    []
+  );
+  const value = useMemo(
+    () => ({
+      left: {
+        ...leftState,
+        isFill: filledSide === "left",
+        toggleFill: toggleLeftFill,
+        widths: calcEffectiveWidths({
+          variant: leftVariant,
+          width: leftDragWidth ?? leftWidth,
+          collapsible: leftCollapsible,
+          state: leftState.state,
+          mode: leftState.mode
+        }),
+        collapsible: leftCollapsible,
+        variant: leftVariant,
+        baseWidth: leftDragWidth ?? leftWidth,
+        onWidthChange: onLeftWidthChange,
+        setDragWidth: setLeftDragWidth,
+        isDragging: isLeftDragging,
+        setIsDragging: setIsLeftDragging
+      },
+      right: {
+        ...rightState,
+        isFill: filledSide === "right",
+        toggleFill: toggleRightFill,
+        widths: calcEffectiveWidths({
+          variant: rightVariant,
+          width: rightDragWidth ?? rightWidth,
+          collapsible: rightCollapsible,
+          state: rightState.state,
+          mode: rightState.mode
+        }),
+        collapsible: rightCollapsible,
+        variant: rightVariant,
+        baseWidth: rightDragWidth ?? rightWidth,
+        onWidthChange: onRightWidthChange,
+        setDragWidth: setRightDragWidth,
+        isDragging: isRightDragging,
+        setIsDragging: setIsRightDragging
+      }
+    }),
+    [
+      leftState,
+      filledSide,
+      toggleLeftFill,
+      leftVariant,
+      leftWidth,
+      leftDragWidth,
+      leftCollapsible,
+      onLeftWidthChange,
+      isLeftDragging,
+      rightState,
+      toggleRightFill,
+      rightVariant,
+      rightWidth,
+      rightDragWidth,
+      rightCollapsible,
+      onRightWidthChange,
+      isRightDragging
+    ]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext, { value, children });
+};
+var SidebarFillTrigger = ({ ref, side = "left", onClick, ...rest }) => {
+  const { toggleFill, isFill } = useSidebar(side);
+  const handleOnClick = (event) => {
+    toggleFill();
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(Slot, { ...rest, ref, onClick: handleOnClick, "aria-selected": isFill });
+};
+var SidebarFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "sidebar-footer",
+    className: cn("tw:flex", "tw:flex-col", "tw:gap-2", "tw:p-2", className),
+    ...props
+  }
+);
+var SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw:group/sidebar-group",
+      "tw:relative",
+      "tw:w-full",
+      // positioning
+      "tw:flex",
+      "tw:flex-col",
+      "tw:min-w-0",
+      "tw:rounded-lg",
+      className
+    ),
+    ...props
+  }
+);
+var SidebarGroupContent = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      // positioning
+      "tw:flex",
+      "tw:flex-col",
+      "tw:gap-2",
+      "tw:w-full",
+      className
+    ),
+    ...props
+  }
+);
+var SidebarGroupAction = ({
+  ref,
+  className,
+  type = "button",
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ...props,
+    type,
+    ref,
+    className: cn(
+      "tw:group-data-[state=collapsed]/sidebar:hidden",
+      // positioning
+      "tw:absolute",
+      "tw:right-1.5",
+      "tw:top-2",
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
+      // sizing
+      "tw:size-5",
+      // styles
+      "tw:text-neutral-800",
+      "tw:rounded-full",
+      // svg defaults: size + colour
+      'tw:[&_svg:not([class*="tw:size-"])]:size-3',
+      "tw:[&_svg]:text-neutral-400",
+      "tw:hover:[&_svg]:text-secondary-600",
+      "tw:hover:bg-neutral-100",
+      "tw:focus-visible:ring-4",
+      "tw:focus-visible:ring-ring/30",
+      "tw:focus-visible:outline",
+      "tw:focus-visible:outline-1",
+      "tw:focus-visible:outline-ring",
+      className
+    ),
+    children
+  }
+);
+var SidebarGroupLabel = ({
+  ref,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn(
+      "tw:relative",
+      // positioning
+      "tw:flex",
+      "tw:flex-col",
+      "tw:shrink-0",
+      // styling
+      "tw:h-8",
+      "tw:px-2",
+      "tw:-mb-1",
+      "tw:rounded-lg",
+      // text
+      "tw:uppercase",
+      "tw:font-sans",
+      "tw:text-xs",
+      "tw:tracking-[1px]",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        Separator,
+        {
+          orientation: "horizontal",
+          size: "3/4",
+          className: cn(
+            "tw:opacity-0",
+            "tw:group-data-[state=collapsed]/sidebar:opacity-100",
+            // positioning
+            "tw:absolute",
+            "tw:w-full",
+            "tw:left-0",
+            "tw:top-1/2 tw:-translate-y-1/2",
+            "tw:transition-opacity",
+            "tw:duration-200",
+            "tw:ease-linear"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "tw:flex",
+            "tw:group-data-[state=collapsed]/sidebar:opacity-0",
+            "tw:items-center",
+            "tw:flex-1",
+            "tw:text-muted-foreground",
+            "tw:whitespace-nowrap",
+            // transition
+            "tw:transition-opacity",
+            "tw:duration-200",
+            "tw:ease-linear"
+          ),
+          children
+        }
+      )
+    ]
+  }
+);
+var SidebarInstanceContext = createContext(null);
+var useSidebarInstance = () => {
+  const context = use(SidebarInstanceContext);
+  if (context === null)
+    throw new Error("useSidebarInstance must be used within a SidebarInstanceContext.");
+  return context;
+};
+var SidebarHeader = ({ className, children, ...props }) => {
+  const instance = use(SidebarInstanceContext);
+  const variant = instance?.state === "collapsed" ? "mark" : "wordmark";
+  const fallback = /* @__PURE__ */ jsx(BrandLogo, { variant, className: "tw:h-7" });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      className: cn(
+        "tw:peer/sidebar-header",
+        "tw:flex",
+        "tw:flex-col",
+        "tw:gap-2",
+        "tw:p-2",
+        className
+      ),
+      ...props,
+      children: children ?? fallback
+    }
+  );
+};
+var SidebarMenu = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    "data-sidebar": "menu",
+    className: cn(
+      "tw:flex",
+      "tw:w-full",
+      "tw:min-w-0",
+      "tw:flex-col",
+      "tw:gap-1",
+      // transition
+      "tw:transition-[margin,opacity]",
+      "tw:duration-200",
+      "tw:ease-linear",
+      // TODO: remove when boostrap is gone
+      "tw:pl-0",
+      className
+    ),
+    ...props
+  }
+);
+var SidebarMenuIcon = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...rest,
+    ref,
+    className: cn(
+      "tw:inline-flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:aspect-square",
+      "tw:shrink-0",
+      "tw:p-0.5",
+      "tw:text-sidebar-primary",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      className
+    ),
+    children
+  }
+);
+var SidebarMenuButton = ({
+  ref,
+  "aria-selected": selected,
+  className,
+  children,
+  asChild = false,
+  icon,
+  tooltip,
+  ...props
+}) => {
+  const Component = asChild ? Root : "button";
+  const { state, mode, side } = useSidebarInstance();
+  const button = /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      ref,
+      "data-slot": "sidebar-menu-button",
+      ...asChild ? {} : { type: "button" },
+      ...selected === void 0 ? {} : { "aria-selected": selected },
+      className: cn(
+        "tw:peer/sidebar-menu-button",
+        "tw:group/sidebar-menu-button",
+        // if <SidebarMenuAction /> visible, prevent the text from being under the action button.
+        "tw:group-data-[state=expanded]/sidebar:group-has-[[data-slot=sidebar-menu-action][data-hover-only=false]]/sidebar-menu-item:pr-8",
+        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"])]:group-hover/sidebar-menu-item:pr-8',
+        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"])]:group-focus-within/sidebar-menu-item:pr-8',
+        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"][data-hover-only=true][data-state=open])]:pr-8',
+        "tw:flex",
+        "tw:w-full",
+        "tw:gap-2",
+        "tw:items-center",
+        "tw:z-10",
+        "tw:font-normal",
+        "tw:text-sidebar-foreground",
+        "tw:p-2",
+        "tw:whitespace-nowrap",
+        "tw:overflow-hidden",
+        "tw:rounded-lg",
+        "tw:text-start",
+        "tw:no-underline",
+        "tw:select-none",
+        // hover
+        "tw:hover:not-disabled:bg-sidebar-accent",
+        "tw:hover:text-sidebar-accent-foreground",
+        "tw:focus:text-sidebar-accent-foreground",
+        // anchor override
+        "tw:data-[slot=dropdown-menu-trigger]:data-[state=open]:bg-sidebar-accent",
+        // disabled
+        "tw:disabled:opacity-50",
+        "tw:disabled:cursor-not-allowed",
+        // active
+        "tw:aria-selected:font-medium",
+        "tw:aria-selected:bg-sidebar-accent",
+        "tw:aria-selected:cursor-default",
+        // active for links https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current
+        "tw:aria-[current=page]:bg-sidebar-accent",
+        "tw:aria-[current=page]:font-medium",
+        "tw:aria-[current=page]:focus:text-sidebar-accent-foreground",
+        // focus-visible
+        "tw:focus-visible:outline-hidden",
+        "tw:focus-visible:z-10",
+        "tw:focus-visible:ring-2",
+        "tw:focus-visible:ring-sidebar-ring/50",
+        "tw:focus-visible:text-sidebar-foreground",
+        // anchor override
+        className
+      ),
+      tabIndex: 0,
+      children: [
+        icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { children: icon }),
+        /* @__PURE__ */ jsx(Slottable, { children })
+      ]
+    }
+  );
+  const shouldShowTooltip = state === "collapsed" && mode !== "expand-on-hover" && tooltip;
+  if (shouldShowTooltip) {
+    const tooltipPlacement = side === "right" ? "left" : "right";
+    return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: true, children: button });
+  }
+  return button;
+};
+var SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("tw:group/sidebar-menu-item", "tw:relative", className), ...props });
+var SidebarMenuAction = ({
+  ref,
+  className,
+  asChild = false,
+  showOnHover = false,
+  children,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...props,
+      "data-slot": "sidebar-menu-action",
+      "data-hover-only": showOnHover,
+      ref,
+      className: cn(
+        "tw:absolute",
+        "tw:top-1/2",
+        "tw:-translate-y-1/2",
+        "tw:right-3",
+        "tw:z-10",
+        "tw:p-0.5",
+        // display
+        "tw:flex",
+        "tw:items-center",
+        "tw:justify-center",
+        "tw:aspect-square",
+        // hiding
+        "tw:data-[hover-only=true]:opacity-0",
+        "tw:group-data-[state=collapsed]/sidebar:hidden",
+        "tw:group-data-[state=expanded]/sidebar:group-hover/sidebar-menu-item:opacity-100",
+        "tw:group-data-[state=expanded]/sidebar:group-focus-within/sidebar-menu-item:opacity-100",
+        // keyboard navigation
+        "tw:group-data-[state=expanded]/sidebar:data-[hover-only=true]:data-[state=open]:opacity-100",
+        // for triggers (dropdown, tooltip, popover)
+        "tw:size-4",
+        "tw:rounded",
+        // icon styling
+        "tw:[&_svg]:shrink-0",
+        'tw:[&_svg:not([class*="tw:size-"])]:size-3.5',
+        "tw:[&_svg]:text-sidebar-accent-foreground",
+        // focus visible
+        "tw:focus-visible:outline-hidden",
+        "tw:focus-visible:z-10",
+        "tw:focus-visible:ring-2",
+        "tw:focus-visible:ring-sidebar-ring/50",
+        "tw:focus-visible:text-sidebar-foreground",
+        className
+      ),
+      children
+    }
+  );
+};
+var wrapperClassnames = cn(
+  "tw:group/search-input",
+  "tw:relative",
+  "tw:flex",
+  "tw:items-center",
+  "tw:min-h-9",
+  "tw:rounded-lg",
+  "tw:border",
+  "tw:transition-all",
+  // collapsed state - transparent border/bg, hover like search button
+  "tw:group-data-[state=collapsed]/sidebar:cursor-pointer",
+  "tw:group-data-[state=collapsed]/sidebar:border-transparent",
+  "tw:group-data-[state=collapsed]/sidebar:hover:bg-sidebar-accent",
+  // expanded state - visible border/bg, padding for input, text cursor
+  "tw:group-data-[state=expanded]/sidebar:cursor-text",
+  "tw:group-data-[state=expanded]/sidebar:px-2",
+  "tw:group-data-[state=expanded]/sidebar:border-neutral-200",
+  // focus styles (only relevant when expanded)
+  "tw:focus-within:ring-2",
+  "tw:focus-within:ring-sidebar-ring/50",
+  "tw:focus-within:text-sidebar-foreground"
+);
+var SidebarSearchInput = ({ ref: forwardedRef, className, ...inputProps }) => {
+  const { side } = useSidebarInstance();
+  const { setMode } = useSidebar(side);
+  const inputRef = useRef(null);
+  const handleFocus = () => {
+    setMode("expanded");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassnames, className), children: [
+    /* @__PURE__ */ jsx(
+      Search,
+      {
+        className: cn(
+          "tw:pointer-events-none",
+          "tw:absolute",
+          "tw:left-2",
+          "tw:size-4",
+          "tw:text-sidebar-primary",
+          "tw:group-data-[state=expanded]/sidebar:text-neutral-400"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: mergeRefs(forwardedRef ?? null, inputRef),
+        ...inputProps,
+        onFocus: (e) => {
+          handleFocus();
+          inputProps.onFocus?.(e);
+        },
+        className: cn(
+          "tw:w-full",
+          "tw:bg-transparent",
+          "tw:text-sm",
+          "tw:font-sans",
+          "tw:outline-hidden",
+          "tw:placeholder:text-neutral-400",
+          // collapsed state - visually hidden but still focusable for a11y
+          "tw:group-data-[state=collapsed]/sidebar:opacity-0",
+          "tw:group-data-[state=collapsed]/sidebar:cursor-pointer",
+          // expanded state
+          "tw:group-data-[state=expanded]/sidebar:pl-6"
+        )
+      }
+    )
+  ] });
+};
+var Title = ({ children }) => /* @__PURE__ */ jsx("div", { className: "tw:flex tw:select-none tw:gap-2 tw:text-sm tw:font-semibold", children });
+var Content = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw:whitespace-pre-line",
+      "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:invisible",
+      className
+    ),
+    children
+  }
+);
+var SidebarMenuCard = ({ children, className, icon, title, ...rest }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { side = "left" } = useSidebarInstance();
+  const { state, isFill } = useSidebar(side);
+  const isExpanded = state === "expanded" || isFill;
+  const handleOnOpenChange = useCallback(
+    (open) => {
+      setIsOpen(isExpanded || document.hidden ? false : open);
+    },
+    [isExpanded]
+  );
+  return /* @__PURE__ */ jsxs(HoverCard, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ jsx(HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        "data-slot": "sidebar-menu-card",
+        tabIndex: isExpanded ? -1 : 0,
+        className: cn(
+          "tw:group/sidebar-menu-card",
+          "tw:peer/sidebar-menu-card",
+          "tw:overflow-hidden",
+          "tw:border",
+          "tw:border-sidebar-border",
+          "tw:rounded-2xl",
+          // layout
+          "tw:grid",
+          "tw:grid-rows-[1fr]",
+          "tw:flex-1",
+          "tw:p-4",
+          // icon collapsed
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:p-2",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:border-transparent",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:grid-rows-[18px]",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:rounded-md",
+          // focus-visible
+          "tw:outline-hidden",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:hover:bg-sidebar-accent",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-2",
+          "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-sidebar-ring/50",
+          // transition
+          "tw:transition-[padding,border]",
+          "tw:duration-200",
+          "tw:ease-linear"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
+          /* @__PURE__ */ jsxs(Title, { children: [
+            /* @__PURE__ */ jsx(SidebarMenuIcon, { className: "tw:p-px", children: icon }),
+            title
+          ] }),
+          /* @__PURE__ */ jsx(Content, { className, children })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      HoverCard.Content,
+      {
+        sideOffset: 10,
+        align: "center",
+        side: side === "left" ? "right" : "left",
+        className: "tw:flex tw:flex-col tw:gap-2",
+        children: [
+          /* @__PURE__ */ jsx(Title, { children: title }),
+          /* @__PURE__ */ jsx(Content, { className, children })
+        ]
+      }
+    )
+  ] });
+};
+var SidebarMenuBadge = ({ ref, className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        // layout
+        "tw:flex",
+        "tw:items-center",
+        "tw:justify-center",
+        "tw:z-20",
+        "tw:absolute",
+        // menu button position
+        "tw:peer-[]/sidebar-menu-button:right-2",
+        // menu card position
+        "tw:peer-[]/sidebar-menu-card:right-4",
+        "tw:peer-[]/sidebar-menu-card:top-4",
+        // icon collapsed position
+        "tw:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:right-0",
+        "tw:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:-top-1",
+        "tw:text-xs",
+        "tw:text-sidebar-primary-foreground",
+        "tw:bg-sidebar-primary",
+        "tw:px-1",
+        "tw:min-w-5",
+        "tw:h-5",
+        "tw:rounded-full",
+        "tw:pointer-events-none",
+        "tw:font-medium",
+        "tw:tabular-nums",
+        "tw:select-none",
+        "tw:transition-[top,right]",
+        "tw:delay-50",
+        "tw:ease-linear",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var SidebarMenuSub = ({
+  children,
+  icon,
+  isActive = false,
+  label,
+  // collapsible props
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange
+}) => {
+  const { state, side, mode } = useSidebarInstance();
+  const [open, setOpen] = useState(null);
+  const [innerCollapsibleOpen, setInnerCollapsibleOpen] = useState(defaultOpen);
+  const isCollapsibleOpen = (() => {
+    if (state === "collapsed") return false;
+    return openProp ?? innerCollapsibleOpen;
+  })();
+  const isDropdownMenu = mode === "expand-on-hover" || mode === "collapsed";
+  const handleCollapsibleOpenChange = (open2) => {
+    if (openProp === void 0) setInnerCollapsibleOpen(open2);
+    onOpenChange?.(open2);
+  };
+  const handleDropdownOpenChange = (open2) => {
+    setOpen(open2 ? "open-dropdown-menu" : null);
+  };
+  const handleTooltipOpenChange = (open2) => {
+    setOpen((currentOpen) => {
+      if (currentOpen === "open-dropdown-menu") return "open-dropdown-menu";
+      if (state === "expanded") return null;
+      return open2 ? "open-tooltip" : null;
+    });
+  };
+  if (isDropdownMenu) {
+    return /* @__PURE__ */ jsxs(DropdownMenu, { open: open === "open-dropdown-menu", onOpenChange: handleDropdownOpenChange, children: [
+      /* @__PURE__ */ jsxs(Tooltip.Root, { open: open === "open-tooltip", onOpenChange: handleTooltipOpenChange, children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            icon,
+            "data-active": isActive,
+            className: cn(
+              "tw:data-[active=true]:bg-sidebar-accent",
+              "tw:data-[active=true]:font-medium"
+            ),
+            children: label
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { variant: "action", placement: side, children: label })
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Content, { side, align: "start", children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Label, { children: label }),
+        children
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Collapsible, { open: isCollapsibleOpen, onOpenChange: handleCollapsibleOpenChange, children: [
+    /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        icon,
+        "data-active": isActive && !isCollapsibleOpen,
+        className: cn(
+          "tw:group",
+          "tw:data-[active=true]:bg-sidebar-accent",
+          "tw:data-[active=true]:font-medium"
+        ),
+        children: [
+          label,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "tw:ml-auto tw:size-5 tw:transition-transform tw:duration-200 tw:group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "data-sidebar": "menu-sub",
+        className: cn(
+          "tw:ml-3.5",
+          "tw:flex",
+          "tw:min-w-0",
+          "tw:translate-x-px",
+          "tw:flex-col",
+          "tw:gap-1",
+          "tw:border-l",
+          "tw:border-sidebar-border",
+          "tw:py-0.5",
+          "tw:pl-2.5",
+          "tw:pr-0",
+          // TODO: remove when bootstrap is gone
+          "tw:list-none"
+        ),
+        children
+      }
+    ) })
+  ] });
+};
+var SidebarMenuSubItem = ({
+  ref,
+  className,
+  asChild = false,
+  children,
+  disabled,
+  "aria-current": ariaCurrent,
+  ...props
+}) => {
+  const { mode } = useSidebarInstance();
+  const isDropdownMenu = mode === "collapsed" || mode === "expand-on-hover";
+  if (isDropdownMenu) {
+    return /* @__PURE__ */ jsx(
+      DropdownMenu.Item,
+      {
+        "aria-current": ariaCurrent,
+        asChild,
+        disabled,
+        className: cn(
+          // use sidebar colors for active and focus states
+          "tw:focus:!bg-sidebar-accent",
+          "tw:aria-[current=page]:bg-sidebar-accent",
+          "tw:aria-[current=page]:focus:text-sidebar-accent-foreground",
+          className
+        ),
+        children
+      }
+    );
+  }
+  const Component = asChild ? Root : "button";
+  return /* @__PURE__ */ jsx("li", { className: "tw:group/sidebar-menu-sub-item tw:relative", children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      ref,
+      "aria-current": ariaCurrent,
+      "data-slot": "sidebar-menu-sub-button",
+      type: "button",
+      disabled,
+      className: cn(
+        // layout
+        "tw:flex",
+        "tw:items-center",
+        "tw:gap-2",
+        // sizing
+        "tw:h-7",
+        "tw:w-full",
+        "tw:min-w-0",
+        "tw:px-2",
+        //font
+        "tw:text-sidebar-foreground",
+        "tw:text-sm",
+        "tw:font-normal",
+        "tw:text-start",
+        "tw:whitespace-nowrap",
+        "tw:overflow-hidden",
+        "tw:rounded-md",
+        "tw:no-underline",
+        "tw:select-none",
+        "tw:outline-hidden",
+        // hover
+        "tw:hover:not-disabled:bg-sidebar-accent",
+        "tw:hover:text-sidebar-accent-foreground",
+        "tw:focus:text-sidebar-accent-foreground",
+        // active
+        "tw:aria-selected:font-medium",
+        "tw:aria-selected:bg-sidebar-accent",
+        "tw:aria-[current=page]:bg-sidebar-accent",
+        "tw:aria-[current=page]:font-medium",
+        // disabled
+        "tw:disabled:opacity-50",
+        "tw:disabled:cursor-not-allowed",
+        // focus-visible
+        "tw:focus-visible:outline-hidden",
+        "tw:focus-visible:ring-2",
+        "tw:focus-visible:ring-sidebar-ring/50",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Slottable, { children })
+    }
+  ) });
+};
+var DEFAULT_MIN_WIDTH = 384;
+var DEFAULT_MAX_WIDTH = 800;
+var useResizeSidebar = ({
+  side,
+  minWidth = DEFAULT_MIN_WIDTH,
+  maxWidth = DEFAULT_MAX_WIDTH
+}) => {
+  const { onWidthChange, baseWidth, isFill, state, isDragging, setIsDragging, setDragWidth } = useSidebar(side);
+  const isResizable = state === "expanded" && !isFill && onWidthChange !== void 0;
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const cleanupRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const clampToRange = useCallback(
+    (width) => {
+      const effectiveMax = Math.max(minWidth, Math.min(maxWidth, window.innerWidth * 0.5));
+      return Math.round(Math.min(effectiveMax, Math.max(minWidth, width)));
+    },
+    [minWidth, maxWidth]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!isResizable || isDragging) return;
+      cleanupRef.current?.();
+      setIsDragging(true);
+      startWidthRef.current = baseWidth ?? SidebarWidthInPx.MIN_DEFAULT;
+      startXRef.current = e.clientX;
+      const handleMouseMove = (moveEvent) => {
+        const delta = side === "right" ? startXRef.current - moveEvent.clientX : moveEvent.clientX - startXRef.current;
+        setDragWidth(clampToRange(startWidthRef.current + delta));
+      };
+      const handleMouseUp = (upEvent) => {
+        const delta = side === "right" ? startXRef.current - upEvent.clientX : upEvent.clientX - startXRef.current;
+        onWidthChange?.(clampToRange(startWidthRef.current + delta));
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        cleanupRef.current = null;
+      };
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      cleanupRef.current = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        setIsDragging(false);
+        setDragWidth(null);
+      };
+    },
+    [
+      isResizable,
+      isDragging,
+      side,
+      onWidthChange,
+      baseWidth,
+      setIsDragging,
+      setDragWidth,
+      clampToRange
+    ]
+  );
+  const handleDoubleClick = useCallback(() => {
+    onWidthChange?.(minWidth);
+  }, [onWidthChange, minWidth]);
+  return {
+    handleProps: {
+      onMouseDown: handleMouseDown,
+      onDoubleClick: handleDoubleClick
+    },
+    isDragging,
+    isResizable
+  };
+};
+var SidebarResizeHandle = ({ side, minWidth, maxWidth }) => {
+  const { handleProps, isResizable } = useResizeSidebar({ side, minWidth, maxWidth });
+  if (!isResizable) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...handleProps,
+      "aria-hidden": true,
+      className: cn(
+        "tw:absolute tw:inset-y-0 tw:z-10 tw:w-3",
+        side === "right" ? "tw:left-0" : "tw:right-0",
+        "tw:cursor-col-resize"
+      )
+    }
+  );
+};
+var SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Separator,
+  {
+    ...props,
+    orientation: "horizontal",
+    size: "full",
+    className: cn("tw:before:bg-sidebar-border tw:p-2", className)
+  }
+);
+var SidebarTrigger = ({
+  side = "left",
+  onClick,
+  hideWhenCollapsed = false,
+  className,
+  ...rest
+}) => {
+  const { toggle } = useSidebar(side);
+  const handleOnClick = (event) => {
+    toggle();
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ...rest,
+      onClick: handleOnClick,
+      className: cn(
+        {
+          "tw:group-data-[state=collapsed]/sidebar:hidden": hideWhenCollapsed
+        },
+        className
+      )
+    }
+  );
+};
+var Sidebar = ({
+  children,
+  className,
+  id,
+  side = "left",
+  style,
+  container = false,
+  keepMounted,
+  resizable = false
+}) => {
+  const oppositeSide = side === "left" ? "right" : "left";
+  const { setSidebarElement, state, mode, isFill, widths, collapsible, variant, isDragging } = useSidebar(side);
+  const { isMounted, completeUnmount } = useTransitionPresence({
+    mounted: collapsible !== "off-canvas" || mode !== "collapsed",
+    keepMounted
+  });
+  const { widths: oppositeWidths } = useSidebar(oppositeSide);
+  const sidebarInstanceContextValue = useMemo(() => ({ state, mode, side }), [state, mode, side]);
+  const handleTransitionEnd = (event) => {
+    if (event.target !== event.currentTarget) return;
+    completeUnmount();
+  };
+  const styles = {
+    "--sidebar-floating-padding": `${SidebarWidthInPx.FLOATING_VARIANT_PADDING}px`,
+    "--sidebar-width": `${widths.sidebar}px`,
+    "--sidebar-width-gap": `${widths.gap}px`,
+    "--opposite-sidebar-width": `${oppositeWidths.fill}px`
+  };
+  if (variant === "none") return null;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SidebarInstanceContext, { value: sidebarInstanceContextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ref: setSidebarElement,
+      "data-state": state,
+      "data-side": side,
+      "data-mode": mode,
+      "data-collapsible": collapsible,
+      "data-variant": variant,
+      "data-fill": isFill,
+      style: styles,
+      className: cn(
+        "tailwindcss-preflight",
+        "tw:flex",
+        "tw:relative",
+        // expand-on-hover needs a higher z-index so the expanding sidebar
+        // overlaps the opposite filled sidebar instead of sliding behind it
+        mode === "expand-on-hover" ? "tw:z-[51]" : "tw:z-50",
+        {
+          // group/peer scoping is only for page-level sidebars — container
+          // sidebars are nested inside other components and must not leak
+          // group/peer selectors to avoid clashing with the outer sidebar
+          "tw:group/sidebar tw:peer/sidebar": !container
+        },
+        // ── GAP DIV ──
+        "tw:[&>[data-slot=gap]]:w-(--sidebar-width-gap)",
+        "tw:[&[data-side=right]>[data-slot=gap]]:rotate-180",
+        // ── SIDEBAR-WRAPPER DIV ──
+        "tw:[&>[data-slot=sidebar-wrapper]]:w-(--sidebar-width)",
+        "tw:[&[data-side=left]>[data-slot=sidebar-wrapper]]:left-0",
+        "tw:[&[data-side=right]>[data-slot=sidebar-wrapper]]:right-0",
+        // Off-canvas hiding.
+        // - `translate-x-*` sets the standalone `translate` property, not `transform`.
+        // - The wrapper's transition list must therefore name `translate`, or the rail
+        //   teleports instead of sliding.
+        "tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=left]>[data-slot=sidebar-wrapper]]:-translate-x-full",
+        "tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=right]>[data-slot=sidebar-wrapper]]:translate-x-full",
+        // floating variants styles
+        "tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]]:pt-(--sidebar-floating-padding)",
+        "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]]:pr-(--sidebar-floating-padding)",
+        "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]]:pl-(--sidebar-floating-padding)",
+        "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]]:p-(--sidebar-floating-padding)",
+        // fill state
+        "tw:[&[data-fill=true]>[data-slot=sidebar-wrapper]]:!w-[calc(100svw-var(--opposite-sidebar-width))]",
+        "tw:[&[data-fill=true][data-variant=floating]>[data-slot=sidebar-wrapper]]:!p-(--sidebar-floating-padding)",
+        "tw:[&[data-fill=true][data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tr-xl",
+        "tw:[&[data-fill=true][data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tl-xl",
+        // ── SIDEBAR DIV (INNERMOST) ──
+        "tw:[&[data-variant=inset][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r",
+        "tw:[&[data-variant=inset][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l",
+        "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow",
+        "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-xl",
+        "tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow",
+        "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tr-xl",
+        "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tl-xl",
+        // The rail's inner edge, mirroring `inset`. The shadow above cannot carry
+        // this alone: a shadow needs a lighter ground to fall on, and on the dark
+        // scheme `--sidebar` is darker than `--background`, so the rail's edge
+        // dissolves into the page beside it.
+        "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r",
+        "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l",
+        // transitions
+        isDragging ? "tw:transition-none" : "tw:transition-[width,translate,transform] tw:duration-200 tw:ease-linear"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "gap",
+            className: cn(
+              "tw:bg-transparent",
+              isDragging ? "" : "tw:transition-[width] tw:duration-200 tw:ease-linear"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "sidebar-wrapper",
+            onTransitionEnd: handleTransitionEnd,
+            className: cn(
+              "tw:fixed",
+              "tw:inset-y-0",
+              "tw:border-neutral-100",
+              // transition
+              isDragging ? "tw:transition-none" : "tw:transition-[width,translate,transform] tw:duration-200 tw:ease-linear",
+              className
+            ),
+            style,
+            children: [
+              resizable && /* @__PURE__ */ jsx(SidebarResizeHandle, { side }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "sidebar",
+                  className: cn(
+                    "tw:bg-sidebar",
+                    "tw:overflow-hidden",
+                    "tw:relative",
+                    "tw:flex",
+                    "tw:flex-col",
+                    "tw:size-full",
+                    "tw:border-sidebar-border",
+                    "tw:group-[]/sidebar:pt-2"
+                  ),
+                  children: isMounted ? children : null
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+Sidebar.Header = SidebarHeader;
+Sidebar.Content = SidebarContent;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Trigger = SidebarTrigger;
+Sidebar.FillTrigger = SidebarFillTrigger;
+Sidebar.Separator = SidebarSeparator;
+Sidebar.MenuIcon = SidebarMenuIcon;
+Sidebar.Group = SidebarGroup;
+Sidebar.GroupLabel = SidebarGroupLabel;
+Sidebar.GroupContent = SidebarGroupContent;
+Sidebar.GroupAction = SidebarGroupAction;
+Sidebar.Menu = SidebarMenu;
+Sidebar.MenuItem = SidebarMenuItem;
+Sidebar.MenuButton = SidebarMenuButton;
+Sidebar.MenuAction = SidebarMenuAction;
+Sidebar.SearchInput = SidebarSearchInput;
+Sidebar.MenuCard = SidebarMenuCard;
+Sidebar.MenuBadge = SidebarMenuBadge;
+Sidebar.SubMenu = SidebarMenuSub;
+Sidebar.SubItem = SidebarMenuSubItem;
+
+export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };
+//# sourceMappingURL=chunk-LCTGEH57.js.map
+//# sourceMappingURL=chunk-LCTGEH57.js.map