@classytic/fluid 0.1.1

package/dist/dashboard.js

@@ -0,0 +1,992 @@
+"use client";
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React4 from 'react';
+import React4__default, { useState } from 'react';
+import Link3 from 'next/link';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { Separator } from '@/components/ui/separator';
+import { SidebarTrigger, useSidebar, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarGroup, SidebarGroupLabel, Sidebar, SidebarHeader, SidebarContent, SidebarFooter } from '@/components/ui/sidebar';
+import { ChevronRight, ChevronsUpDown, CircleUserRound, LogOut, Building2, ChevronLeft, Check } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { SheetTitle, SheetDescription } from '@/components/ui/sheet';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+
+// src/dashboard/header-section.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var variants = {
+  default: {
+    wrapper: "px-6 py-5 rounded-xl shadow-sm border bg-background hover:shadow-md",
+    title: "text-2xl font-semibold tracking-tight",
+    description: "text-sm text-muted-foreground",
+    iconSize: "size-10",
+    iconInner: "size-5",
+    spacing: "space-y-1"
+  },
+  compact: {
+    wrapper: "px-4 py-3 rounded-lg border bg-background/50",
+    title: "text-lg font-semibold",
+    description: "text-xs text-muted-foreground",
+    iconSize: "size-8",
+    iconInner: "size-4",
+    spacing: "space-y-0.5"
+  },
+  hero: {
+    wrapper: "px-8 py-8 rounded-2xl shadow-lg border bg-gradient-to-br from-background to-muted/20",
+    title: "text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent",
+    description: "text-base text-muted-foreground mt-2",
+    iconSize: "size-14",
+    iconInner: "size-7",
+    spacing: "space-y-2"
+  },
+  minimal: {
+    wrapper: "px-0 py-2",
+    title: "text-xl font-medium",
+    description: "text-sm text-muted-foreground",
+    iconSize: "size-8",
+    iconInner: "size-4",
+    spacing: "space-y-0.5"
+  }
+};
+function HeaderSection({
+  title,
+  description,
+  actions = null,
+  icon: Icon = null,
+  iconClassName,
+  loading = false,
+  variant = "default",
+  className,
+  badge,
+  breadcrumbs,
+  metadata,
+  children
+}) {
+  const currentVariant = variants[variant] || variants.default;
+  const isBadgeObject = (badge2) => {
+    return typeof badge2 === "object" && badge2 !== null && "text" in badge2;
+  };
+  if (loading && !title) {
+    return /* @__PURE__ */ jsx("div", { className: cn(currentVariant.wrapper, "transition-all duration-300", className), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        Icon && /* @__PURE__ */ jsx(Skeleton, { className: cn(currentVariant.iconSize, "rounded-lg") }),
+        /* @__PURE__ */ jsxs("div", { className: currentVariant.spacing, children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-48" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64 mt-1" })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-4 sm:mt-0", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-300",
+        currentVariant.wrapper,
+        className
+      ),
+      children: [
+        breadcrumbs && /* @__PURE__ */ jsx("nav", { className: "mb-3 text-sm text-muted-foreground", children: breadcrumbs }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start sm:items-center gap-4", children: [
+            Icon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex aspect-square items-center justify-center rounded-lg flex-shrink-0",
+                  "bg-primary/10 text-primary",
+                  currentVariant.iconSize,
+                  iconClassName
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { className: currentVariant.iconInner })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex-1", currentVariant.spacing), children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsx("h1", { className: cn("leading-none", currentVariant.title), children: title }),
+                badge && (isBadgeObject(badge) ? /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: badge.variant || "secondary",
+                    className: cn("ml-2", badge.className),
+                    children: badge.text
+                  }
+                ) : badge)
+              ] }),
+              description && /* @__PURE__ */ jsx("p", { className: currentVariant.description, children: description }),
+              metadata && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 mt-2 text-xs text-muted-foreground", children: metadata.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                item.icon && /* @__PURE__ */ jsx(item.icon, { className: "size-3" }),
+                /* @__PURE__ */ jsx("span", { children: item.text })
+              ] }, index)) })
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4 sm:mt-0", children: actions.map((action, index) => {
+            const isActionLoading = action.loading ?? false;
+            const isDisabled = loading || action.disabled || isActionLoading;
+            const displayText = isActionLoading ? action.loadingText || action.text : action.text;
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: action.onClick,
+                disabled: isDisabled,
+                variant: action.variant || "default",
+                size: action.size || (variant === "compact" ? "sm" : "default"),
+                className: cn(
+                  variant === "hero" && "shadow-md hover:shadow-lg",
+                  action.className
+                ),
+                children: [
+                  action.icon && action.iconPosition !== "right" && /* @__PURE__ */ jsx(action.icon, { className: "size-4 mr-2" }),
+                  /* @__PURE__ */ jsx("span", { children: displayText }),
+                  action.icon && action.iconPosition === "right" && /* @__PURE__ */ jsx(action.icon, { className: "size-4 ml-2" })
+                ]
+              },
+              index
+            );
+          }) })
+        ] }),
+        children && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-4 pt-4 border-t",
+              variant === "minimal" && "border-0 pt-2"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function PageHeader({ items, className, actions }) {
+  return /* @__PURE__ */ jsxs("header", { className: cn("flex h-12 shrink-0 items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" }),
+      /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React4__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          BreadcrumbItem,
+          {
+            className: item.current ? "" : "hidden md:block",
+            children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { render: /* @__PURE__ */ jsx(Link3, { href: item.href || "#" }), children: item.label })
+          }
+        ),
+        index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })
+      ] }, `breadcrumb-${index}`)) }) })
+    ] }),
+    actions
+  ] });
+}
+function SidebarBrand({
+  title,
+  icon,
+  href = "/",
+  className,
+  tooltip
+}) {
+  const { isMobile, state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(SidebarMenu, { className, children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    SidebarMenuButton,
+    {
+      size: "lg",
+      tooltip: isCollapsed ? tooltip || title : void 0,
+      render: /* @__PURE__ */ jsx(
+        Link3,
+        {
+          href,
+          className: cn(
+            "flex items-center text-sidebar-foreground",
+            isCollapsed && !isMobile && "justify-center"
+          )
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center bg-sidebar-primary text-sidebar-primary-foreground shadow-sm flex-shrink-0", children: icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ml-2 font-semibold tracking-tight truncate",
+              !isMobile && isCollapsed && "hidden"
+            ),
+            children: title
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+function SidebarNavItem({ item, onClick }) {
+  const hasSubItems = item.items && item.items.length > 0;
+  const Icon = item.icon;
+  const [open, setOpen] = useState(item.isActive ?? false);
+  if (hasSubItems) {
+    return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+      Collapsible,
+      {
+        open,
+        onOpenChange: setOpen,
+        className: "group/collapsible",
+        children: [
+          /* @__PURE__ */ jsxs(
+            CollapsibleTrigger,
+            {
+              render: /* @__PURE__ */ jsx(SidebarMenuButton, {}),
+              children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: item.title }),
+                item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded", children: item.badge }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4 transition-transform duration-200 group-data-open/collapsible:rotate-90" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items.map((subItem, idx) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs(SidebarMenuSubButton, { render: /* @__PURE__ */ jsx(Link3, { href: subItem.url }), children: [
+            /* @__PURE__ */ jsx("span", { children: subItem.title }),
+            subItem.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs opacity-60", children: subItem.badge })
+          ] }) }, `${item.title}-${subItem.title}-${idx}`)) }) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(Link3, { href: item.url, className: "w-full", children: /* @__PURE__ */ jsxs(
+    SidebarMenuButton,
+    {
+      isActive: item.isActive,
+      onClick,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { children: item.title }),
+        item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded", children: item.badge })
+      ]
+    }
+  ) }) });
+}
+function SidebarNavGroup({
+  title,
+  items,
+  className,
+  onItemClick
+}) {
+  return /* @__PURE__ */ jsxs(SidebarGroup, { className, children: [
+    title && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: title }),
+    /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item, idx) => /* @__PURE__ */ jsx(
+      SidebarNavItem,
+      {
+        item,
+        onClick: () => onItemClick?.(item)
+      },
+      `${item.title}-${idx}`
+    )) })
+  ] });
+}
+function SidebarNav({ groups, className, onItemClick }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: groups.map((group, index) => /* @__PURE__ */ jsx(
+    SidebarNavGroup,
+    {
+      title: group.title,
+      items: group.items,
+      onItemClick
+    },
+    group.title || `nav-group-${index}`
+  )) });
+}
+function getUserInitials(name) {
+  if (!name) return "?";
+  const names = name.trim().split(" ");
+  if (names.length === 1) return names[0].slice(0, 2).toUpperCase();
+  return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+}
+function UserAvatar({ user, className }) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: cn("h-8 w-8 rounded-lg", className), children: [
+    /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: getUserInitials(user.name) })
+  ] });
+}
+function UserInfo({ user }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
+    /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
+  ] });
+}
+function SidebarUserMenu({
+  user,
+  menuItems = [],
+  onLogout,
+  className
+}) {
+  const { isMobile, state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const defaultItems = [
+    {
+      label: "Account",
+      icon: CircleUserRound,
+      href: "/dashboard/profile"
+    }
+  ];
+  const items = menuItems.length > 0 ? menuItems : defaultItems;
+  return /* @__PURE__ */ jsx(SidebarMenu, { className, children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            size: "lg",
+            tooltip: isCollapsed ? user.name : void 0,
+            className: cn(
+              "data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground",
+              isCollapsed && !isMobile && "justify-center"
+            )
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(UserAvatar, { user }),
+          (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(UserInfo, { user }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-(--anchor-width) min-w-56 rounded-lg",
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsx(UserAvatar, { user }),
+            /* @__PURE__ */ jsx(UserInfo, { user })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+            item.separator && index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            item.href ? /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                render: /* @__PURE__ */ jsx(Link3, { href: item.href }),
+                className: "w-full flex items-center",
+                children: [
+                  item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }),
+                  item.label
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: item.onClick,
+                className: "w-full flex items-center",
+                children: [
+                  item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }),
+                  item.label
+                ]
+              }
+            )
+          ] }, item.label)) }),
+          onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: onLogout,
+                className: "w-full flex items-center",
+                children: [
+                  /* @__PURE__ */ jsx(LogOut, { className: "mr-2 h-4 w-4" }),
+                  "Log out"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+}
+function DropdownContent({
+  items,
+  selected,
+  onSelect,
+  label,
+  renderItem,
+  isMobile = false
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuContent,
+    {
+      className: "w-64 rounded-lg",
+      side: isMobile ? "bottom" : "right",
+      align: "start",
+      sideOffset: 4,
+      children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: label }),
+        items.map((item) => {
+          const isSelected = selected.id === item.id;
+          if (renderItem) {
+            return /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onClick: () => onSelect(item),
+                className: "cursor-pointer",
+                children: renderItem(item, isSelected)
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: () => onSelect(item),
+              className: "gap-2 cursor-pointer",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate", children: item.name }),
+                  isSelected && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary shrink-0" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [
+                  item.code && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.code }),
+                  item.type && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    item.code && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\u2022" }),
+                    /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] h-4 px-1", children: item.type })
+                  ] }),
+                  item.isDefault && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px] h-4 px-1", children: "Default" }),
+                  item.isActive === false && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-[10px] h-4 px-1", children: "Inactive" })
+                ] }),
+                item.subtitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5 truncate", children: item.subtitle })
+              ] })
+            },
+            item.id
+          );
+        })
+      ] })
+    }
+  );
+}
+function SidebarLoadingSkeleton({ isCollapsed, isMobile }) {
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    SidebarMenuButton,
+    {
+      className: cn(
+        "h-10 py-1.5 bg-sidebar-accent/50",
+        isCollapsed && !isMobile && "justify-center"
+      ),
+      disabled: true,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-sm shrink-0" }),
+        (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-14" })
+        ] })
+      ]
+    }
+  ) }) });
+}
+function SidebarProjectDisplay({
+  project,
+  Icon,
+  isCollapsed,
+  isMobile
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+    (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 leading-tight text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium truncate", children: project.name }),
+      project.code && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: project.code })
+    ] })
+  ] });
+}
+function StandaloneLoadingSkeleton({ size }) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size,
+      className: cn("gap-2", size === "sm" ? "h-8" : "h-9"),
+      disabled: true,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-sm" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+      ]
+    }
+  );
+}
+function StandaloneProjectDisplay({
+  project,
+  Icon,
+  size
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { className: cn("text-muted-foreground shrink-0", size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4") }),
+    /* @__PURE__ */ jsx("span", { className: cn("font-medium truncate max-w-[120px]", size === "sm" ? "text-xs" : "text-sm"), children: project.name }),
+    project.code && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground truncate", size === "sm" ? "text-[10px]" : "text-xs"), children: [
+      "(",
+      project.code,
+      ")"
+    ] })
+  ] });
+}
+function ProjectSwitcher({
+  items,
+  selected,
+  onSelect,
+  isLoading = false,
+  label = "Switch Project",
+  icon: Icon = Building2,
+  className,
+  disabled = false,
+  variant = "sidebar",
+  size = "default",
+  renderItem
+}) {
+  const hasMultipleItems = items.length > 1;
+  if (variant === "standalone") {
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StandaloneLoadingSkeleton, { size });
+    }
+    if (!selected) {
+      return null;
+    }
+    if (!hasMultipleItems || disabled) {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size,
+          className: cn("gap-2 cursor-default", size === "sm" ? "h-8" : "h-9", className),
+          disabled: true,
+          children: /* @__PURE__ */ jsx(StandaloneProjectDisplay, { project: selected, Icon, size })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size,
+              className: cn("gap-2", size === "sm" ? "h-8" : "h-9", className)
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(StandaloneProjectDisplay, { project: selected, Icon, size }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("text-muted-foreground shrink-0", size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownContent,
+        {
+          items,
+          selected,
+          onSelect,
+          label,
+          renderItem
+        }
+      )
+    ] });
+  }
+  const { isMobile, state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(SidebarLoadingSkeleton, { isCollapsed, isMobile });
+  }
+  if (!selected) {
+    return null;
+  }
+  if (!hasMultipleItems || disabled) {
+    return /* @__PURE__ */ jsx(SidebarMenu, { className, children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+      SidebarMenuButton,
+      {
+        className: cn(
+          "h-10 py-1.5 bg-sidebar-accent/50",
+          isCollapsed && !isMobile && "justify-center"
+        ),
+        tooltip: isCollapsed ? selected.name : void 0,
+        disabled: true,
+        children: /* @__PURE__ */ jsx(
+          SidebarProjectDisplay,
+          {
+            project: selected,
+            Icon,
+            isCollapsed,
+            isMobile
+          }
+        )
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarMenu, { className, children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            className: cn(
+              "h-10 py-1.5 bg-sidebar-accent/50 hover:bg-sidebar-accent transition-colors",
+              isCollapsed && !isMobile && "justify-center"
+            ),
+            tooltip: isCollapsed ? selected.name : void 0
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            SidebarProjectDisplay,
+            {
+              project: selected,
+              Icon,
+              isCollapsed,
+              isMobile
+            }
+          ),
+          (!isCollapsed || isMobile) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DropdownContent,
+      {
+        items,
+        selected,
+        onSelect,
+        label,
+        renderItem,
+        isMobile
+      }
+    )
+  ] }) }) });
+}
+function BreadcrumbNav({ items }) {
+  return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { className: item.current ? "" : "hidden md:block", children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { render: /* @__PURE__ */ jsx(Link3, { href: item.href || "#" }), children: item.label }) }),
+    index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })
+  ] }, `breadcrumb-${index}`)) }) });
+}
+function DashboardHeader({
+  breadcrumbs,
+  leftContent,
+  rightContent,
+  showSidebarTrigger = true,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex h-12 shrink-0 items-center justify-between gap-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          showSidebarTrigger && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" })
+          ] }),
+          children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(BreadcrumbNav, { items: breadcrumbs }),
+            leftContent
+          ] })
+        ] }),
+        rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rightContent })
+      ]
+    }
+  );
+}
+function InsetSidebar({
+  brand,
+  navigation,
+  secondaryNavigation,
+  project,
+  user,
+  headerContent,
+  ariaLabel = "Navigation Menu",
+  className,
+  children
+}) {
+  const { isMobile } = useSidebar();
+  return /* @__PURE__ */ jsxs(Sidebar, { variant: "inset", collapsible: "icon", className, children: [
+    isMobile && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: ariaLabel }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: "Application navigation menu containing links to different sections" })
+    ] }),
+    /* @__PURE__ */ jsxs(SidebarHeader, { className: "gap-1", children: [
+      /* @__PURE__ */ jsx(
+        SidebarBrand,
+        {
+          title: brand.title,
+          icon: brand.icon,
+          href: brand.href
+        }
+      ),
+      project && /* @__PURE__ */ jsx(
+        ProjectSwitcher,
+        {
+          items: project.items,
+          selected: project.selected,
+          onSelect: project.onSelect,
+          isLoading: project.isLoading,
+          label: project.label,
+          icon: project.icon
+        }
+      ),
+      headerContent
+    ] }),
+    /* @__PURE__ */ jsx(SidebarContent, { children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SidebarNav, { groups: navigation }),
+      secondaryNavigation && /* @__PURE__ */ jsx(SidebarNav, { groups: secondaryNavigation, className: "mt-auto" })
+    ] }) }),
+    user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(
+      SidebarUserMenu,
+      {
+        user: user.data,
+        menuItems: user.menuItems,
+        onLogout: user.onLogout
+      }
+    ) })
+  ] });
+}
+var SIDEBAR_RAIL_WIDTH = "3.5rem";
+var SIDEBAR_PANEL_WIDTH = "13rem";
+var SIDEBAR_WIDTH_EXPANDED = "16.5rem";
+var SIDEBAR_WIDTH_COLLAPSED = "3.5rem";
+var SIDEBAR_PADDING = "0.5rem";
+var railVariants = {
+  default: "bg-sidebar",
+  dark: "bg-zinc-900 dark:bg-zinc-950",
+  primary: "bg-primary",
+  muted: "bg-muted"
+};
+var railTextVariants = {
+  default: "text-sidebar-foreground",
+  dark: "text-zinc-100",
+  primary: "text-primary-foreground",
+  muted: "text-muted-foreground"
+};
+function DualSidebar({
+  brand,
+  categories,
+  user,
+  defaultCategoryId,
+  onCategoryChange,
+  defaultCollapsed = false,
+  railVariant = "default",
+  ariaLabel = "Navigation Menu",
+  className
+}) {
+  const [activeCategory, setActiveCategory] = React4.useState(
+    defaultCategoryId || (categories.length > 0 ? categories[0].id : null)
+  );
+  const [isExpanded, setIsExpanded] = React4.useState(!defaultCollapsed);
+  const { isMobile } = useSidebar();
+  const handleCategorySelect = (id) => {
+    setActiveCategory(id);
+    onCategoryChange?.(id);
+    if (!isExpanded) {
+      setIsExpanded(true);
+    }
+  };
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const activeCategoryData = categories.find((c) => c.id === activeCategory) || null;
+  const currentWidth = isExpanded ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED;
+  const totalWidth = `calc(${currentWidth} + ${SIDEBAR_PADDING} * 2)`;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": "expanded",
+      "data-collapsible": "",
+      "data-variant": "inset",
+      "data-side": "left",
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: "relative bg-transparent transition-[width] duration-200 ease-linear",
+            style: { width: totalWidth }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 left-0 z-10 hidden h-svh transition-[width] duration-200 ease-linear md:flex",
+              className
+            ),
+            style: {
+              width: totalWidth,
+              padding: SIDEBAR_PADDING
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "bg-sidebar flex h-full w-full flex-row overflow-hidden rounded-lg border border-sidebar-border shadow-sm",
+                children: [
+                  isMobile && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    /* @__PURE__ */ jsx(SheetTitle, { children: ariaLabel }),
+                    /* @__PURE__ */ jsx(SheetDescription, { children: "Navigation menu with category icons and expanded content" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-col shrink-0 transition-colors",
+                        railVariants[railVariant],
+                        railTextVariants[railVariant],
+                        isExpanded && "border-r border-sidebar-border"
+                      ),
+                      style: { width: SIDEBAR_RAIL_WIDTH, minWidth: SIDEBAR_RAIL_WIDTH },
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 h-14", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                          /* @__PURE__ */ jsx(
+                            TooltipTrigger,
+                            {
+                              render: /* @__PURE__ */ jsx(
+                                Link3,
+                                {
+                                  href: brand.href || "/",
+                                  className: cn(
+                                    "flex items-center justify-center h-10 w-10 rounded-lg shadow-sm transition-colors",
+                                    railVariant === "dark" || railVariant === "primary" ? "bg-white/10 hover:bg-white/20 text-inherit" : "bg-sidebar-primary text-sidebar-primary-foreground"
+                                  )
+                                }
+                              ),
+                              children: brand.icon
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: brand.title })
+                        ] }) }),
+                        /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-1 p-2", children: categories.map((category) => {
+                          const Icon = category.icon;
+                          const isActive = activeCategory === category.id;
+                          return /* @__PURE__ */ jsxs(Tooltip, { children: [
+                            /* @__PURE__ */ jsx(
+                              TooltipTrigger,
+                              {
+                                render: /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => handleCategorySelect(category.id),
+                                    className: cn(
+                                      "flex items-center justify-center h-10 w-10 rounded-lg transition-colors",
+                                      isActive ? railVariant === "dark" || railVariant === "primary" ? "bg-white/20" : "bg-sidebar-accent text-sidebar-accent-foreground" : railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50"
+                                    )
+                                  }
+                                ),
+                                children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: category.name })
+                          ] }, category.id);
+                        }) }),
+                        /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                          /* @__PURE__ */ jsx(
+                            TooltipTrigger,
+                            {
+                              render: /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: toggleExpanded,
+                                  className: cn(
+                                    "flex items-center justify-center h-10 w-10 rounded-lg transition-colors",
+                                    railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50"
+                                  )
+                                }
+                              ),
+                              children: isExpanded ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isExpanded ? "Collapse sidebar" : "Expand sidebar" })
+                        ] }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-col bg-sidebar overflow-hidden transition-[width,opacity] duration-200 ease-linear",
+                        isExpanded ? "opacity-100" : "opacity-0 w-0"
+                      ),
+                      style: { width: isExpanded ? SIDEBAR_PANEL_WIDTH : 0 },
+                      children: activeCategoryData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(SidebarHeader, { className: "h-14 border-b border-sidebar-border px-4 flex items-center shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(activeCategoryData.icon, { className: "h-5 w-5 text-sidebar-foreground" }),
+                          /* @__PURE__ */ jsx("span", { className: "font-semibold text-sidebar-foreground truncate", children: activeCategoryData.name })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(SidebarContent, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs(SidebarGroup, { className: "p-2", children: [
+                          /* @__PURE__ */ jsxs(SidebarGroupLabel, { className: "px-2 text-xs text-sidebar-foreground/60", children: [
+                            activeCategoryData.name,
+                            " Menu"
+                          ] }),
+                          /* @__PURE__ */ jsx(SidebarMenu, { children: activeCategoryData.items.map((item, idx) => {
+                            const Icon = item.icon;
+                            return /* @__PURE__ */ jsx(
+                              SidebarMenuItem,
+                              {
+                                children: /* @__PURE__ */ jsxs(
+                                  SidebarMenuButton,
+                                  {
+                                    isActive: item.isActive,
+                                    render: /* @__PURE__ */ jsx(Link3, { href: item.url }),
+                                    children: [
+                                      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+                                      /* @__PURE__ */ jsx("span", { className: "truncate", children: item.title }),
+                                      item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0", children: item.badge })
+                                    ]
+                                  }
+                                )
+                              },
+                              `${activeCategoryData.id}-${item.title}-${idx}`
+                            );
+                          }) })
+                        ] }) }),
+                        user && /* @__PURE__ */ jsx(SidebarFooter, { className: "border-t border-sidebar-border shrink-0", children: /* @__PURE__ */ jsx(
+                          SidebarUserMenu,
+                          {
+                            user: user.data,
+                            menuItems: user.menuItems,
+                            onLogout: user.onLogout
+                          }
+                        ) })
+                      ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-sidebar-foreground/60 text-sm", children: "Select a category" })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { DashboardHeader, DualSidebar, HeaderSection, InsetSidebar, PageHeader, ProjectSwitcher, SidebarBrand, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarUserMenu, cn };
+//# sourceMappingURL=dashboard.js.map
+//# sourceMappingURL=dashboard.js.map