@snow-labs/brutal-ui 0.1.0 → 0.2.0

package/dist/templates/dashboard.js

@@ -0,0 +1,658 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React from 'react';
+import { createContext, useState, useContext } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { XIcon } from 'lucide-react';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { Menu } from '@base-ui/react/menu';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        // Primary: Black bg, white text, offset shadow
+        default: "border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // CTA: Mint green bg — the Bannerbear signature
+        cta: "border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Brand: Dynamic brand color bg
+        brand: "border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Outline: White bg, black border, offset shadow
+        outline: "border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Secondary: Light bg, border, smaller shadow
+        secondary: "border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none",
+        // Ghost: No border/shadow, subtle hover
+        ghost: "hover:bg-secondary hover:text-foreground",
+        // Link: Text only
+        link: "text-foreground underline-offset-4 hover:underline",
+        // Destructive
+        destructive: "border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Nav: Thin border, no shadow (for nav Sign In buttons)
+        nav: "border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background"
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        default: "h-10 gap-2 px-5 text-sm",
+        lg: "h-12 gap-2 px-7 text-base",
+        xl: "h-14 gap-2.5 px-9 text-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/60 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 border-brutal border-foreground bg-background bg-clip-padding text-sm shadow-brutal-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-3 right-3",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-base font-bold text-foreground", className),
+      ...props
+    }
+  );
+}
+var AppShellContext = createContext({
+  collapsed: false,
+  setCollapsed: () => {
+  },
+  mobileOpen: false,
+  setMobileOpen: () => {
+  }
+});
+var useAppShell = () => useContext(AppShellContext);
+function AppShell({
+  sidebar,
+  header,
+  children,
+  defaultCollapsed = false,
+  className
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    AppShellContext.Provider,
+    {
+      value: { collapsed, setCollapsed, mobileOpen, setMobileOpen },
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen bg-background", className), children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden border-r-brutal border-foreground bg-background transition-all duration-200 md:block",
+              collapsed ? "w-16" : "w-64"
+            ),
+            children: sidebar
+          }
+        ),
+        /* @__PURE__ */ jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-64 p-0 md:hidden", children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+          sidebar
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+          header && /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-4 border-b-brutal border-foreground px-6", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "md:hidden",
+                onClick: () => setMobileOpen(true),
+                children: "\u2630"
+              }
+            ),
+            header
+          ] }),
+          /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto p-6", children })
+        ] })
+      ] })
+    }
+  );
+}
+function Sidebar({
+  logo,
+  logoCollapsed,
+  groups,
+  footer,
+  className
+}) {
+  const { collapsed, setCollapsed } = useAppShell();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between border-b-brutal border-foreground px-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-black", children: collapsed ? logoCollapsed || logo : logo }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCollapsed(!collapsed),
+          className: "hidden text-xs text-muted-foreground hover:text-foreground md:block",
+          children: collapsed ? "\u2192" : "\u2190"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-auto p-2", children: groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      group.title && !collapsed && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-2 px-2 text-muted-foreground", children: group.title }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: group.links.map((link) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: link.href,
+          className: cn(
+            "flex items-center gap-3 rounded-sm px-3 py-2 text-sm font-medium transition-colors",
+            link.active ? "bg-brand text-brand-foreground" : "hover:bg-secondary",
+            collapsed && "justify-center"
+          ),
+          title: collapsed ? link.label : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0", children: link.icon }),
+            !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
+              link.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "border border-foreground bg-brand-muted px-1.5 font-mono text-[10px] font-bold", children: link.badge })
+            ] })
+          ]
+        },
+        link.href
+      )) })
+    ] }, gi)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "border-t-brutal border-foreground p-3", children: footer })
+  ] });
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SearchBar({
+  placeholder = "Search...",
+  shortcut = "\u2318K",
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "search",
+        placeholder,
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        className: "pr-12"
+      }
+    ),
+    shortcut && /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 border border-foreground bg-secondary px-1.5 font-mono text-[10px] text-muted-foreground", children: shortcut })
+  ] });
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border-brutal border-foreground bg-popover p-1 text-popover-foreground shadow-brutal duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function UserMenu({ name, email, avatar, items, onSignOut }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        className: "inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium outline-none hover:bg-secondary",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "size-7", children: [
+            avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: name[0] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "hidden text-sm font-medium sm:inline", children: name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: name }),
+        email && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: email })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      items && /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: item.onClick, children: item.href ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : item.label }, item.label)) }),
+      onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onSignOut, children: "Sign out" })
+      ] })
+    ] })
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  change,
+  changeLabel,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-brutal border-foreground bg-background p-5 shadow-brutal",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "brutal-label text-muted-foreground", children: label }),
+          icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: icon })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "brutal-h1 mb-1", children: value }),
+        change !== void 0 && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: cn(
+              "flex items-center gap-1 font-mono text-xs font-bold",
+              change >= 0 ? "text-cta" : "text-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: change >= 0 ? "\u2191" : "\u2193" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                Math.abs(change),
+                "%"
+              ] }),
+              changeLabel && /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: changeLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:border-brutal aria-pressed:border-foreground aria-pressed:bg-muted aria-pressed:shadow-brutal-sm data-[state=on]:border-brutal data-[state=on]:border-foreground data-[state=on]:bg-muted data-[state=on]:shadow-brutal-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-brutal border-foreground bg-transparent shadow-brutal-sm hover:bg-muted"
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[var(--gap)] rounded-lg border-brutal border-foreground data-vertical:flex-col data-vertical:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ToggleGroupContext.Provider,
+        {
+          value: { variant, size, spacing, orientation },
+          children
+        }
+      )
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var viewLabels = {
+  table: "Table",
+  kanban: "Board",
+  grid: "Grid",
+  calendar: "Calendar",
+  list: "List"
+};
+function ViewSwitcher({
+  value,
+  onChange,
+  views = ["table", "kanban", "grid", "calendar", "list"],
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      value: [value],
+      onValueChange: (vals) => {
+        if (vals.length > 0) {
+          onChange(vals[0]);
+        }
+      },
+      className,
+      children: views.map((view) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: view, className: "brutal-label text-xs", children: viewLabels[view] }, view))
+    }
+  );
+}
+function DashboardTemplate({
+  logo,
+  logoCollapsed,
+  sidebarGroups,
+  user,
+  userMenuItems,
+  onSignOut,
+  stats,
+  views,
+  children,
+  sidebarFooter
+}) {
+  const [view, setView] = useState("table");
+  return /* @__PURE__ */ jsxs(
+    AppShell,
+    {
+      sidebar: /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          logo,
+          logoCollapsed,
+          groups: sidebarGroups,
+          footer: sidebarFooter
+        }
+      ),
+      header: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SearchBar, { className: "flex-1 max-w-sm" }),
+        /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+          UserMenu,
+          {
+            name: user.name,
+            email: user.email,
+            avatar: user.avatar,
+            items: userMenuItems,
+            onSignOut
+          }
+        ) })
+      ] }),
+      children: [
+        stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: stats.map((stat) => /* @__PURE__ */ jsx(StatCard, { ...stat }, stat.label)) }),
+        views && views.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(ViewSwitcher, { value: view, onChange: setView, views }) }),
+        children
+      ]
+    }
+  );
+}
+
+export { DashboardTemplate };
+//# sourceMappingURL=dashboard.js.map
+//# sourceMappingURL=dashboard.js.map