"use client";
import { jsx as t, jsxs as p } from "react/jsx-runtime";
import { c as I } from "../../../index-UgeK3A8s.js";
import { PanelLeftIcon as T } from "lucide-react";
import * as o from "react";
import { Button as C } from "./button.js";
import { Input as E } from "./input.js";
import { Separator as D } from "./separator.js";
import { Sheet as B, SheetContent as A, SheetHeader as O, SheetTitle as R, SheetDescription as H } from "./sheet.js";
import { Skeleton as _ } from "./skeleton.js";
import { TooltipTrigger as K, Tooltip as j, TooltipContent as G } from "./tooltip.js";
import { useIsMobile as L } from "../../../hooks/use-mobile.js";
import { cn as r } from "../../../lib/utils.js";
import { u as h } from "../../../useRender-BNXBkp2o.js";
import { m as v } from "../../../useRenderElement-DNB2vtF1.js";
const $ = "sidebar_state", P = 3600 * 24 * 7, V = "16rem", W = "18rem", q = "3rem", F = "b", k = o.createContext(null);
function S() {
  const e = o.useContext(k);
  if (!e)
    throw new Error("useSidebar must be used within a SidebarProvider.");
  return e;
}
function oe({
  defaultOpen: e = !0,
  open: a,
  onOpenChange: i,
  className: s,
  style: n,
  children: g,
  ...c
}) {
  const l = L(), [b, f] = o.useState(!1), [N, z] = o.useState(e), m = a ?? N, x = o.useCallback(
    (d) => {
      const u = typeof d == "function" ? d(m) : d;
      i ? i(u) : z(u), document.cookie = `${$}=${u}; path=/; max-age=${P}`;
    },
    [i, m]
  ), w = o.useCallback(() => l ? f((d) => !d) : x((d) => !d), [l, x]);
  o.useEffect(() => {
    const d = (u) => {
      u.key === F && (u.metaKey || u.ctrlKey) && (u.preventDefault(), w());
    };
    return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
  }, [w]);
  const y = m ? "expanded" : "collapsed", M = o.useMemo(
    () => ({
      state: y,
      open: m,
      setOpen: x,
      isMobile: l,
      openMobile: b,
      setOpenMobile: f,
      toggleSidebar: w
    }),
    [y, m, x, l, b, w]
  );
  return /* @__PURE__ */ t(k.Provider, { value: M, children: /* @__PURE__ */ t(
    "div",
    {
      className: r(
        "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
        s
      ),
      "data-slot": "sidebar-wrapper",
      style: {
        "--sidebar-width": V,
        "--sidebar-width-icon": q,
        ...n
      },
      ...c,
      children: g
    }
  ) });
}
function le({
  side: e = "left",
  variant: a = "sidebar",
  collapsible: i = "offcanvas",
  className: s,
  children: n,
  dir: g,
  ...c
}) {
  const { isMobile: l, state: b, openMobile: f, setOpenMobile: N } = S();
  return i === "none" ? /* @__PURE__ */ t(
    "div",
    {
      className: r(
        "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
        s
      ),
      "data-slot": "sidebar",
      ...c,
      children: n
    }
  ) : l ? /* @__PURE__ */ t(B, { onOpenChange: N, open: f, ...c, children: /* @__PURE__ */ p(
    A,
    {
      className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
      "data-mobile": "true",
      "data-sidebar": "sidebar",
      "data-slot": "sidebar",
      dir: g,
      side: e,
      style: {
        "--sidebar-width": W
      },
      children: [
        /* @__PURE__ */ p(O, { className: "sr-only", children: [
          /* @__PURE__ */ t(R, { children: "Sidebar" }),
          /* @__PURE__ */ t(H, { children: "Displays the mobile sidebar." })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex h-full w-full flex-col", children: n })
      ]
    }
  ) }) : /* @__PURE__ */ p(
    "div",
    {
      className: "group peer hidden text-sidebar-foreground md:block",
      "data-collapsible": b === "collapsed" ? i : "",
      "data-side": e,
      "data-slot": "sidebar",
      "data-state": b,
      "data-variant": a,
      children: [
        /* @__PURE__ */ t(
          "div",
          {
            className: r(
              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
              "group-data-[collapsible=offcanvas]:w-0",
              "group-data-[side=right]:rotate-180",
              a === "floating" || a === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
            ),
            "data-slot": "sidebar-gap"
          }
        ),
        /* @__PURE__ */ t(
          "div",
          {
            className: r(
              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex",
              // Adjust the padding for floating and inset variants.
              a === "floating" || a === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
              s
            ),
            "data-side": e,
            "data-slot": "sidebar-container",
            ...c,
            children: /* @__PURE__ */ t(
              "div",
              {
                className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
                "data-sidebar": "sidebar",
                "data-slot": "sidebar-inner",
                children: n
              }
            )
          }
        )
      ]
    }
  );
}
function ue({
  className: e,
  onClick: a,
  ...i
}) {
  const { toggleSidebar: s } = S();
  return /* @__PURE__ */ p(
    C,
    {
      className: r(e),
      "data-sidebar": "trigger",
      "data-slot": "sidebar-trigger",
      onClick: (n) => {
        a?.(n), s();
      },
      size: "icon-sm",
      variant: "ghost",
      ...i,
      children: [
        /* @__PURE__ */ t(T, {}),
        /* @__PURE__ */ t("span", { className: "sr-only", children: "Toggle Sidebar" })
      ]
    }
  );
}
function ce({ className: e, ...a }) {
  const { toggleSidebar: i } = S();
  return /* @__PURE__ */ t(
    "button",
    {
      "aria-label": "Toggle Sidebar",
      className: r(
        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        e
      ),
      "data-sidebar": "rail",
      "data-slot": "sidebar-rail",
      onClick: i,
      tabIndex: -1,
      title: "Toggle Sidebar",
      ...a
    }
  );
}
function be({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "main",
    {
      className: r(
        "relative flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-collapsed:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
        e
      ),
      "data-slot": "sidebar-inset",
      ...a
    }
  );
}
function fe({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    E,
    {
      className: r("h-8 w-full bg-background shadow-none", e),
      "data-sidebar": "input",
      "data-slot": "sidebar-input",
      ...a
    }
  );
}
function pe({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r("flex flex-col gap-2 p-2", e),
      "data-sidebar": "header",
      "data-slot": "sidebar-header",
      ...a
    }
  );
}
function ge({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r("flex flex-col gap-2 p-2", e),
      "data-sidebar": "footer",
      "data-slot": "sidebar-footer",
      ...a
    }
  );
}
function me({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    D,
    {
      className: r("mx-2 w-auto bg-sidebar-border", e),
      "data-sidebar": "separator",
      "data-slot": "sidebar-separator",
      ...a
    }
  );
}
function he({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r(
        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        e
      ),
      "data-sidebar": "content",
      "data-slot": "sidebar-content",
      ...a
    }
  );
}
function ve({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r("relative flex w-full min-w-0 flex-col p-2", e),
      "data-sidebar": "group",
      "data-slot": "sidebar-group",
      ...a
    }
  );
}
function xe({
  className: e,
  render: a,
  ...i
}) {
  return h({
    defaultTagName: "div",
    props: v(
      {
        className: r(
          "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
          e
        )
      },
      i
    ),
    render: a,
    state: {
      slot: "sidebar-group-label",
      sidebar: "group-label"
    }
  });
}
function we({
  className: e,
  render: a,
  ...i
}) {
  return h({
    defaultTagName: "button",
    props: v(
      {
        className: r(
          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
          e
        )
      },
      i
    ),
    render: a,
    state: {
      slot: "sidebar-group-action",
      sidebar: "group-action"
    }
  });
}
function Se({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r("w-full text-sm", e),
      "data-sidebar": "group-content",
      "data-slot": "sidebar-group-content",
      ...a
    }
  );
}
function Ne({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "ul",
    {
      className: r("flex w-full min-w-0 flex-col gap-0", e),
      "data-sidebar": "menu",
      "data-slot": "sidebar-menu",
      ...a
    }
  );
}
function ye({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "li",
    {
      className: r("group/menu-item relative", e),
      "data-sidebar": "menu-item",
      "data-slot": "sidebar-menu-item",
      ...a
    }
  );
}
const U = I(
  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
function _e({
  render: e,
  isActive: a = !1,
  variant: i = "default",
  size: s = "default",
  tooltip: n,
  className: g,
  ...c
}) {
  const { isMobile: l, state: b } = S(), f = h({
    defaultTagName: "button",
    props: v(
      {
        className: r(U({ variant: i, size: s }), g)
      },
      c
    ),
    render: n ? /* @__PURE__ */ t(K, { render: e }) : e,
    state: {
      slot: "sidebar-menu-button",
      sidebar: "menu-button",
      size: s,
      active: a
    }
  });
  return n ? (typeof n == "string" && (n = {
    children: n
  }), /* @__PURE__ */ p(j, { children: [
    f,
    /* @__PURE__ */ t(
      G,
      {
        align: "center",
        hidden: b !== "collapsed" || l,
        side: "right",
        ...n
      }
    )
  ] })) : f;
}
function ke({
  className: e,
  render: a,
  showOnHover: i = !1,
  ...s
}) {
  return h({
    defaultTagName: "button",
    props: v(
      {
        className: r(
          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
          i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0",
          e
        )
      },
      s
    ),
    render: a,
    state: {
      slot: "sidebar-menu-action",
      sidebar: "menu-action"
    }
  });
}
function ze({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    "div",
    {
      className: r(
        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
        e
      ),
      "data-sidebar": "menu-badge",
      "data-slot": "sidebar-menu-badge",
      ...a
    }
  );
}
function Me({
  className: e,
  showIcon: a = !1,
  ...i
}) {
  const [s] = o.useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
  return /* @__PURE__ */ p(
    "div",
    {
      className: r("flex h-8 items-center gap-2 rounded-md px-2", e),
      "data-sidebar": "menu-skeleton",
      "data-slot": "sidebar-menu-skeleton",
      ...i,
      children: [
        a && /* @__PURE__ */ t(
          _,
          {
            className: "size-4 rounded-md",
            "data-sidebar": "menu-skeleton-icon"
          }
        ),
        /* @__PURE__ */ t(
          _,
          {
            className: "h-4 max-w-(--skeleton-width) flex-1",
            "data-sidebar": "menu-skeleton-text",
            style: {
              "--skeleton-width": s
            }
          }
        )
      ]
    }
  );
}
function Ie({ className: e, ...a }) {
  return /* @__PURE__ */ t(
    "ul",
    {
      className: r(
        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
        e
      ),
      "data-sidebar": "menu-sub",
      "data-slot": "sidebar-menu-sub",
      ...a
    }
  );
}
function Te({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    "li",
    {
      className: r("group/menu-sub-item relative", e),
      "data-sidebar": "menu-sub-item",
      "data-slot": "sidebar-menu-sub-item",
      ...a
    }
  );
}
function Ce({
  render: e,
  size: a = "md",
  isActive: i = !1,
  className: s,
  ...n
}) {
  return h({
    defaultTagName: "a",
    props: v(
      {
        className: r(
          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-[size=md]:text-sm data-[size=sm]:text-xs data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
          s
        )
      },
      n
    ),
    render: e,
    state: {
      slot: "sidebar-menu-sub-button",
      sidebar: "menu-sub-button",
      size: a,
      active: i
    }
  });
}
export {
  le as Sidebar,
  he as SidebarContent,
  ge as SidebarFooter,
  ve as SidebarGroup,
  we as SidebarGroupAction,
  Se as SidebarGroupContent,
  xe as SidebarGroupLabel,
  pe as SidebarHeader,
  fe as SidebarInput,
  be as SidebarInset,
  Ne as SidebarMenu,
  ke as SidebarMenuAction,
  ze as SidebarMenuBadge,
  _e as SidebarMenuButton,
  ye as SidebarMenuItem,
  Me as SidebarMenuSkeleton,
  Ie as SidebarMenuSub,
  Ce as SidebarMenuSubButton,
  Te as SidebarMenuSubItem,
  oe as SidebarProvider,
  ce as SidebarRail,
  me as SidebarSeparator,
  ue as SidebarTrigger,
  S as useSidebar
};
