@mesob/ui 0.1.1 → 0.2.1

package/dist/components/app-sidebar.js

@@ -0,0 +1,669 @@
+"use client";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tooltip({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function useMesob() {
+  return useContext(MesobContext);
+}
+
+// src/components/link.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Link({
+  href,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  const mesob = useMesob();
+  const LinkComponent = mesob?.linkComponent ?? "a";
+  if (LinkComponent === "a") {
+    return /* @__PURE__ */ jsx3("a", { href, className, onClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx3(
+    LinkComponent,
+    {
+      href,
+      className,
+      onClick,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// src/components/input.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/components/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// src/components/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { IconX } from "@tabler/icons-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(SheetPortal, { children: [
+    /* @__PURE__ */ jsx6(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs3(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs3(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx6(IconX, { className: "size-4" }),
+            /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/skeleton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/hooks/use-mobile.ts
+import * as React from "react";
+
+// src/components/sidebar.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { IconMenu2 } from "@tabler/icons-react";
+import { cva as cva2 } from "class-variance-authority";
+import * as React2 from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SidebarContext = React2.createContext(null);
+function useSidebar() {
+  const context = React2.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx8(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx8(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx8(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "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",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx8(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx8(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva2(
+  'peer/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-active focus-visible:ring-2 active:bg-sidebar-active 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=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[""] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-active",
+        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"
+    }
+  }
+);
+
+// src/components/app-sidebar.tsx
+import { IconChevronDown } from "@tabler/icons-react";
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useToggle } from "react-use";
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function isLinkActive(pathname, href, pathMatch = "prefix") {
+  if (!pathname) {
+    return false;
+  }
+  if (!href) {
+    return false;
+  }
+  if (pathMatch === "exact") {
+    return pathname === href;
+  }
+  if (pathname === href) {
+    return true;
+  }
+  return pathname.startsWith(`${href}/`);
+}
+function hasActiveDescendant(item, pathname) {
+  if (!pathname) {
+    return false;
+  }
+  if (isLinkActive(pathname, item.href, item.pathMatch ?? "prefix")) {
+    return true;
+  }
+  return item.children?.some((c) => hasActiveDescendant(c, pathname)) ?? false;
+}
+function hasPermission(roles, permission) {
+  if (!permission?.length) {
+    return true;
+  }
+  if (!roles?.length) {
+    return true;
+  }
+  return permission.some((p) => roles.includes(p));
+}
+var TRUNCATION_TOOLTIP_MIN_LENGTH = 24;
+function TruncationTooltip({
+  text,
+  children
+}) {
+  const ref = useRef(null);
+  const [truncated, setTruncated] = useState3(false);
+  useEffect3(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const check = () => setTruncated(el.scrollWidth > el.clientWidth);
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [text]);
+  const showTooltip = truncated || text.length >= TRUNCATION_TOOLTIP_MIN_LENGTH;
+  const inner = /* @__PURE__ */ jsx9("span", { ref, className: "min-w-0 truncate block", children });
+  if (!showTooltip) {
+    return inner;
+  }
+  return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+    /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: inner }),
+    /* @__PURE__ */ jsx9(TooltipContent, { side: "right", sideOffset: 8, children: text })
+  ] });
+}
+function MenuLabel({ icon: Icon, label }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "text-sidebar-foreground flex min-h-0 min-w-0 flex-1 cursor-pointer items-center gap-2 text-sm", children: [
+    Icon ? /* @__PURE__ */ jsx9(Icon, { className: "size-4 shrink-0" }) : null,
+    /* @__PURE__ */ jsx9(TruncationTooltip, { text: label, children: label })
+  ] });
+}
+function RowContent({
+  item,
+  hasChildren,
+  showChildren
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx9(MenuLabel, { icon: item.icon, label: item.title }),
+    hasChildren && /* @__PURE__ */ jsx9(
+      IconChevronDown,
+      {
+        className: cn(
+          "ml-auto size-4 shrink-0 cursor-pointer transition-transform",
+          showChildren && "rotate-180"
+        ),
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+function NavItemRow({
+  item,
+  level,
+  pathname,
+  roles,
+  onNavClick
+}) {
+  const [open, toggle] = useToggle(hasActiveDescendant(item, pathname));
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const showChildren = (open || hasActiveDescendant(item, pathname)) && hasChildren;
+  const pathMatch = item.pathMatch ?? "prefix";
+  const isActive = isLinkActive(pathname, item.href, pathMatch);
+  const lineLeft = 28 + 20 * level;
+  if (!hasPermission(roles, item.permission)) {
+    return null;
+  }
+  const paddingLeft = 20 + 20 * level;
+  const rowWrapperClass = cn(
+    "text-sidebar-foreground relative flex h-8 w-full min-w-0 items-center rounded-md pr-2 text-left text-sm transition duration-300 ease-in-out",
+    "hover:bg-sidebar-active",
+    isActive && "bg-sidebar-active text-sidebar-primary"
+  );
+  const rowContent = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    isActive && /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "absolute left-1 top-1.5 bottom-1.5 z-10 w-[3px] rounded-full bg-primary",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      RowContent,
+      {
+        item,
+        hasChildren,
+        showChildren
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs5("li", { className: "relative mt-1", children: [
+    item.href ? /* @__PURE__ */ jsx9(
+      Link,
+      {
+        href: item.href,
+        onClick: hasChildren ? toggle : onNavClick,
+        className: rowWrapperClass,
+        style: { paddingLeft },
+        "aria-current": isActive ? "page" : void 0,
+        children: rowContent
+      }
+    ) : /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: rowWrapperClass,
+        style: { paddingLeft },
+        "aria-expanded": showChildren,
+        "aria-label": item.title,
+        children: rowContent
+      }
+    ),
+    showChildren && /* @__PURE__ */ jsxs5("ul", { className: "relative mt-1", children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "absolute top-0 bottom-0 z-10 w-px bg-sidebar-border",
+          style: { left: lineLeft },
+          "aria-hidden": true
+        }
+      ),
+      (item.children ?? []).map((child) => /* @__PURE__ */ jsx9(
+        NavItemRow,
+        {
+          item: child,
+          level: level + 1,
+          pathname,
+          roles,
+          onNavClick
+        },
+        child.href ?? child.title
+      ))
+    ] })
+  ] });
+}
+function AppSidebar({
+  logo,
+  navItems,
+  footer,
+  pathname,
+  roles
+}) {
+  const { isMobile, setOpenMobile } = useSidebar();
+  const closeSidebar = () => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+  };
+  const groupedItems = navItems.reduce(
+    (acc, item) => {
+      const group = item.group ?? "default";
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(item);
+      return acc;
+    },
+    {}
+  );
+  return /* @__PURE__ */ jsxs5(Sidebar, { children: [
+    /* @__PURE__ */ jsx9(SidebarHeader, { children: logo }),
+    /* @__PURE__ */ jsx9(SidebarContent, { children: /* @__PURE__ */ jsx9(
+      "nav",
+      {
+        "aria-label": "Main navigation",
+        className: "flex min-h-0 min-w-0 flex-1 flex-col  overflow-x-hidden overflow-y-auto",
+        children: Object.entries(groupedItems).map(([groupName, items]) => /* @__PURE__ */ jsxs5(SidebarGroup, { className: "py-0", children: [
+          groupName !== "default" && /* @__PURE__ */ jsx9(SidebarGroupLabel, { className: "uppercase tracking-wide", children: groupName }),
+          /* @__PURE__ */ jsx9(SidebarGroupContent, { children: /* @__PURE__ */ jsx9("ul", { className: "flex w-full min-w-0 list-none flex-col gap-0 p-0", children: items.map((item) => /* @__PURE__ */ jsx9(
+            NavItemRow,
+            {
+              item,
+              level: 0,
+              pathname,
+              roles,
+              onNavClick: closeSidebar
+            },
+            item.href ?? item.title
+          )) }) })
+        ] }, groupName))
+      }
+    ) }),
+    footer && /* @__PURE__ */ jsx9(SidebarFooter, { children: footer })
+  ] });
+}
+export {
+  AppSidebar
+};
+//# sourceMappingURL=app-sidebar.js.map