@mdxui/tremor 6.0.0

package/dist/dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dashboard/components/shell/shell.tsx","../../src/dashboard/components/shell/shell-sidebar-left.tsx","../../src/dashboard/components/shell/shell-top-nav.tsx","../../src/dashboard/components/sidebar/mobile-sidebar.tsx","../../src/dashboard/utils.ts","../../src/dashboard/components/sidebar/sidebar.tsx","../../src/dashboard/layouts/app.tsx","../../src/dashboard/layouts/dashboard.tsx","../../src/dashboard/layouts/header.tsx","../../src/dashboard/pages/settings.tsx","../../src/dashboard/index.ts"],"sourcesContent":["\"use client\";\n\nimport type { ComponentType, ReactNode, SVGProps } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type ShellVariant =\n\t| \"sidebar-left\"\n\t| \"sidebar-right\"\n\t| \"top-nav\"\n\t| \"minimal\";\n\n/**\n * Navigation item configuration for the shell\n */\nexport interface ShellNavItem {\n\t/** Unique identifier */\n\tid: string;\n\t/** Display label */\n\tlabel: string;\n\t/** Link href */\n\thref?: string;\n\t/** Icon component */\n\ticon?: ComponentType<SVGProps<SVGSVGElement>>;\n\t/** Is currently active */\n\tactive?: boolean;\n\t/** Is disabled */\n\tdisabled?: boolean;\n\t/** Click handler */\n\tonClick?: () => void;\n}\n\n/**\n * Workspace configuration for workspace switcher\n */\nexport interface ShellWorkspace {\n\t/** Workspace identifier */\n\tid: string;\n\t/** Workspace name */\n\tname: string;\n\t/** Initials for avatar */\n\tinitials: string;\n\t/** User role in workspace */\n\trole: string;\n\t/** Background color class */\n\tcolor?: string;\n}\n\n/**\n * User profile configuration\n */\nexport interface ShellUser {\n\t/** User display name */\n\tname: string;\n\t/** User email */\n\temail?: string;\n\t/** User initials for avatar */\n\tinitials: string;\n}\n\nexport interface ShellProps {\n\t/** Shell variant determines layout structure */\n\tvariant?: ShellVariant;\n\t/** Main content area */\n\tchildren?: any;\n\t/** Navigation items for sidebar */\n\tnavigation?: ShellNavItem[];\n\t/** Shortcut items for sidebar */\n\tshortcuts?: ShellNavItem[];\n\t/** Current workspace */\n\tworkspace?: ShellWorkspace;\n\t/** Available workspaces */\n\tworkspaces?: ShellWorkspace[];\n\t/** Current user */\n\tuser?: ShellUser;\n\t/** Is sidebar collapsed */\n\tsidebarCollapsed?: boolean;\n\t/** Sidebar collapse handler */\n\tonSidebarCollapse?: (collapsed: boolean) => void;\n\t/** Current pathname for active navigation state */\n\tpathname?: string;\n\t/** Link component for routing (e.g., Next.js Link) */\n\tLinkComponent?: ComponentType<{\n\t\thref: string;\n\t\tclassName?: string;\n\t\tchildren: ReactNode;\n\t}>;\n\t/** Custom sidebar content or boolean to show/hide default sidebar */\n\tsidebar?: ReactNode | boolean;\n\t/** Custom header content or boolean to show/hide default header */\n\theader?: ReactNode | boolean;\n\t/** Theme mode */\n\ttheme?: \"light\" | \"dark\" | \"system\";\n\t/** Loading state */\n\tloading?: boolean;\n\t/** Additional className for the main content area */\n\tclassName?: string;\n\t/** Additional className for the shell container */\n\tcontainerClassName?: string;\n}\n\n/**\n * Shell - Flexible dashboard shell component with variant support\n *\n * A polymorphic shell component that renders different layouts based on the variant prop.\n * Use the named exports (ShellSidebarLeft, ShellTopNav) for full control over layout props.\n *\n * Based on Tremor dashboard template layout patterns:\n * - Fixed sidebar with workspace switcher and user profile\n * - Mobile-responsive with drawer navigation\n * - Support for collapsed sidebar state\n *\n * @example\n * ```tsx\n * // Basic usage with default variant (sidebar-left)\n * <Shell navigation={navItems} user={currentUser}>\n *   <Dashboard />\n * </Shell>\n *\n * // With top-nav variant\n * <Shell variant=\"top-nav\" header={<TopNav />}>\n *   <Dashboard />\n * </Shell>\n *\n * // With collapsed sidebar\n * <Shell sidebarCollapsed={true}>\n *   <Dashboard />\n * </Shell>\n * ```\n */\nexport function Shell({\n\tvariant = \"sidebar-left\",\n\tchildren,\n\tnavigation: _navigation = [],\n\tshortcuts: _shortcuts = [],\n\tworkspace: _workspace,\n\tworkspaces: _workspaces = [],\n\tuser: _user,\n\tsidebarCollapsed = false,\n\tonSidebarCollapse: _onSidebarCollapse,\n\tpathname: _pathname,\n\tLinkComponent: _LinkComponent,\n\tsidebar,\n\theader,\n\ttheme: _theme = \"system\",\n\tloading = false,\n\tclassName,\n\tcontainerClassName,\n}: ShellProps) {\n\tconst showSidebar = variant === \"sidebar-left\" || variant === \"sidebar-right\";\n\tconst sidebarWidth = sidebarCollapsed ? \"lg:pl-16\" : \"lg:pl-72\";\n\n\t// Loading state\n\tif (loading) {\n\t\treturn (\n\t\t\t<div className=\"flex h-screen items-center justify-center\">\n\t\t\t\t<div className=\"h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-indigo-600\" />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Top-nav variant\n\tif (variant === \"top-nav\") {\n\t\treturn (\n\t\t\t<div className={twMerge(\"mx-auto max-w-screen-2xl\", containerClassName)}>\n\t\t\t\t{header}\n\t\t\t\t<main role=\"main\" className={twMerge(\"flex-1\", className)}>\n\t\t\t\t\t{children}\n\t\t\t\t</main>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Minimal variant\n\tif (variant === \"minimal\") {\n\t\treturn (\n\t\t\t<div className={twMerge(\"mx-auto max-w-screen-2xl\", containerClassName)}>\n\t\t\t\t<main role=\"main\" className={twMerge(\"flex-1\", className)}>\n\t\t\t\t\t{children}\n\t\t\t\t</main>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Sidebar variants (sidebar-left, sidebar-right)\n\treturn (\n\t\t<div className={twMerge(\"mx-auto max-w-screen-2xl\", containerClassName)}>\n\t\t\t{/* Custom sidebar or render default */}\n\t\t\t{sidebar}\n\n\t\t\t{/* Main Content */}\n\t\t\t<main\n\t\t\t\trole=\"main\"\n\t\t\t\tclassName={twMerge(showSidebar && sidebarWidth, className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n","\"use client\";\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { ShellNavItem, ShellUser, ShellWorkspace } from \"./shell\";\n\nexport interface ShellSidebarLeftProps {\n\t/** Content to render in the sidebar (left side) - if not provided, uses built-in sidebar */\n\tsidebar?: ReactNode;\n\t/** Content to render in the mobile header (optional) */\n\tmobileHeader?: ReactNode;\n\t/** Main content area */\n\tchildren: ReactNode;\n\t/** Navigation items for built-in sidebar */\n\tnavigation?: ShellNavItem[];\n\t/** Shortcut items for built-in sidebar */\n\tshortcuts?: ShellNavItem[];\n\t/** Current workspace */\n\tworkspace?: ShellWorkspace;\n\t/** Available workspaces */\n\tworkspaces?: ShellWorkspace[];\n\t/** Current user */\n\tuser?: ShellUser;\n\t/** Is sidebar collapsed */\n\tcollapsed?: boolean;\n\t/** Sidebar collapse handler */\n\tonCollapse?: (collapsed: boolean) => void;\n\t/** Current pathname for active navigation state */\n\tpathname?: string;\n\t/** Link component for routing (e.g., Next.js Link) */\n\tLinkComponent?: ComponentType<{\n\t\thref: string;\n\t\tclassName?: string;\n\t\tchildren: ReactNode;\n\t}>;\n\t/** Additional className for the main content area */\n\tclassName?: string;\n\t/** Additional className for the container */\n\tcontainerClassName?: string;\n}\n\n/**\n * ShellSidebarLeft - Dashboard shell with sidebar on the left\n *\n * A layout component that provides a sidebar-left dashboard shell structure\n * based on the Tremor dashboard template:\n * - Fixed sidebar (72px wide, or 16px when collapsed) on the left\n * - Sticky mobile header with workspace switcher and user profile\n * - Responsive layout with drawer navigation on mobile\n * - Main content area with proper padding for sidebar\n *\n * @example\n * ```tsx\n * <ShellSidebarLeft\n *   navigation={[\n *     { id: 'overview', label: 'Overview', href: '/overview', icon: HomeIcon },\n *     { id: 'details', label: 'Details', href: '/details', icon: ListIcon },\n *   ]}\n *   workspace={{ id: '1', name: 'Retail Analytics', initials: 'RA', role: 'Member' }}\n *   user={{ name: 'Emma Stone', initials: 'ES' }}\n *   pathname=\"/overview\"\n * >\n *   <DashboardContent />\n * </ShellSidebarLeft>\n * ```\n */\nexport function ShellSidebarLeft({\n\tsidebar,\n\tmobileHeader,\n\tchildren,\n\tnavigation: _navigation = [],\n\tshortcuts: _shortcuts = [],\n\tworkspace: _workspace,\n\tworkspaces: _workspaces = [],\n\tuser: _user,\n\tcollapsed = false,\n\tonCollapse: _onCollapse,\n\tpathname: _pathname,\n\tLinkComponent: _LinkComponent,\n\tclassName,\n\tcontainerClassName,\n}: ShellSidebarLeftProps) {\n\tconst sidebarWidth = collapsed ? \"lg:pl-16\" : \"lg:pl-72\";\n\n\treturn (\n\t\t<div className={twMerge(\"mx-auto max-w-screen-2xl\", containerClassName)}>\n\t\t\t{/* Sidebar - fixed position on large screens */}\n\t\t\t{sidebar && (\n\t\t\t\t<nav\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col\",\n\t\t\t\t\t\tcollapsed ? \"lg:w-16\" : \"lg:w-72\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{sidebar}\n\t\t\t\t</nav>\n\t\t\t)}\n\n\t\t\t{/* Mobile Header - sticky on small screens */}\n\t\t\t{mobileHeader && (\n\t\t\t\t<div\n\t\t\t\t\tdata-testid=\"mobile-header\"\n\t\t\t\t\tclassName=\"sticky top-0 z-40 flex h-16 shrink-0 items-center justify-between border-b border-gray-200 bg-white px-2 shadow-sm sm:gap-x-6 sm:px-4 lg:hidden dark:border-gray-800 dark:bg-gray-950\"\n\t\t\t\t>\n\t\t\t\t\t{mobileHeader}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Main Content */}\n\t\t\t<main role=\"main\" className={twMerge(sidebarWidth, className)}>\n\t\t\t\t{children}\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n","import type { ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface ShellTopNavProps {\n\t/** Content to render in the header/top nav */\n\theader: ReactNode;\n\t/** Content to render in the sidebar (optional) */\n\tsidebar?: ReactNode;\n\t/** Main content area */\n\tchildren: ReactNode;\n\t/** Additional className for the main content area */\n\tclassName?: string;\n}\n\n/**\n * ShellTopNav - Dashboard shell with top navigation\n *\n * A layout component that provides a top-nav dashboard shell structure:\n * - Header/navigation at the top\n * - Optional sidebar below header\n * - Main content area\n */\nexport function ShellTopNav({\n\theader,\n\tsidebar,\n\tchildren,\n\tclassName,\n}: ShellTopNavProps) {\n\treturn (\n\t\t<div className=\"flex min-h-screen flex-col\">\n\t\t\t{/* Top Navigation */}\n\t\t\t{header}\n\n\t\t\t{/* Content area with optional sidebar */}\n\t\t\t<div className=\"flex flex-1\">\n\t\t\t\t{/* Optional Sidebar */}\n\t\t\t\t{sidebar && <aside className=\"flex-shrink-0\">{sidebar}</aside>}\n\n\t\t\t\t{/* Main content */}\n\t\t\t\t<main role=\"main\" className={twMerge(\"flex-1\", className)}>\n\t\t\t\t\t{children}\n\t\t\t\t</main>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","\"use client\";\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport { cx, focusRing } from \"../../utils\";\nimport type { SidebarNavItem, SidebarShortcutItem } from \"./sidebar\";\n\n/**\n * Link component props\n */\ninterface LinkProps {\n\thref: string;\n\tclassName?: string;\n\tchildren: ReactNode;\n\tonClick?: () => void;\n}\n\n/**\n * Props for the MobileSidebar component\n */\nexport interface MobileSidebarProps {\n\t/** Navigation items */\n\titems?: SidebarNavItem[];\n\t/** Shortcut items */\n\tshortcuts?: SidebarShortcutItem[];\n\t/** Title for the mobile drawer */\n\ttitle?: string;\n\t/** Current pathname for active state detection */\n\tpathname?: string;\n\t/** Link component for routing (e.g., Next.js Link) */\n\tLinkComponent?: ComponentType<LinkProps>;\n\t/** Additional className */\n\tclassName?: string;\n}\n\n/**\n * Default link component (plain anchor)\n */\nfunction DefaultLink({ href, className, children, onClick }: LinkProps) {\n\treturn (\n\t\t<a href={href} className={className} onClick={onClick}>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\n/**\n * Helper to determine if a nav item is active\n */\nfunction isItemActive(\n\titemHref: string | undefined,\n\tpathname: string | undefined,\n\tsettingsPath = \"/settings\",\n): boolean {\n\tif (!itemHref || !pathname) return false;\n\tif (itemHref === settingsPath) {\n\t\treturn pathname.startsWith(\"/settings\");\n\t}\n\treturn pathname === itemHref || pathname.startsWith(itemHref);\n}\n\n/**\n * Mobile Sidebar - Drawer-based navigation for smaller screens\n *\n * A slide-out drawer that displays navigation on mobile devices.\n * Features a hamburger menu button and animated drawer transition.\n */\nexport function MobileSidebar({\n\titems = [],\n\tshortcuts = [],\n\ttitle = \"Navigation\",\n\tpathname,\n\tLinkComponent = DefaultLink,\n\tclassName,\n}: MobileSidebarProps) {\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst toggleDrawer = () => setIsOpen(!isOpen);\n\tconst closeDrawer = () => setIsOpen(false);\n\n\treturn (\n\t\t<>\n\t\t\t{/* Menu Button */}\n\t\t\t<button\n\t\t\t\tonClick={toggleDrawer}\n\t\t\t\taria-label=\"open sidebar\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group flex items-center rounded-md p-2 text-sm font-medium hover:bg-gray-100 data-[state=open]:bg-gray-100 data-[state=open]:bg-gray-400/10 hover:dark:bg-gray-400/10\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-state={isOpen ? \"open\" : \"closed\"}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclassName=\"size-6 shrink-0 sm:size-5\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n\t\t\t\t\t<line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n\t\t\t\t\t<line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n\t\t\t\t</svg>\n\t\t\t</button>\n\n\t\t\t{/* Backdrop */}\n\t\t\t{isOpen && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"fixed inset-0 z-50 bg-black/50\"\n\t\t\t\t\tonClick={closeDrawer}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{/* Drawer */}\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"fixed inset-y-0 right-0 z-50 w-full max-w-sm transform bg-white transition-transform duration-300 ease-in-out dark:bg-gray-950\",\n\t\t\t\t\tisOpen ? \"translate-x-0\" : \"translate-x-full\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* Header */}\n\t\t\t\t<div className=\"flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-800\">\n\t\t\t\t\t<h2 className=\"text-lg font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={closeDrawer}\n\t\t\t\t\t\taria-label=\"close sidebar\"\n\t\t\t\t\t\tclassName=\"rounded-md p-2 hover:bg-gray-100 hover:dark:bg-gray-800\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName=\"size-5\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path d=\"M18 6 6 18\" />\n\t\t\t\t\t\t\t<path d=\"m6 6 12 12\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Content */}\n\t\t\t\t<div className=\"p-4\">\n\t\t\t\t\t<nav\n\t\t\t\t\t\taria-label=\"core mobile navigation links\"\n\t\t\t\t\t\tclassName=\"flex flex-1 flex-col space-y-10\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Primary Navigation */}\n\t\t\t\t\t\t<ul role=\"list\" className=\"space-y-1.5\">\n\t\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\titem.active ?? isItemActive(item.href, pathname);\n\t\t\t\t\t\t\t\tconst Icon = item.icon;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<li key={item.id}>\n\t\t\t\t\t\t\t\t\t\t<LinkComponent\n\t\t\t\t\t\t\t\t\t\t\thref={item.href || \"#\"}\n\t\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\t\tisActive\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-indigo-600 dark:text-indigo-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-gray-600 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50\",\n\t\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-base font-medium transition hover:bg-gray-100 sm:text-sm hover:dark:bg-gray-900\",\n\t\t\t\t\t\t\t\t\t\t\t\tfocusRing,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\tonClick={closeDrawer}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"size-5 shrink-0\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t\t</LinkComponent>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</ul>\n\n\t\t\t\t\t\t{/* Shortcuts Section */}\n\t\t\t\t\t\t{shortcuts.length > 0 && (\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium leading-6 text-gray-500 sm:text-xs\">\n\t\t\t\t\t\t\t\t\tShortcuts\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ul aria-label=\"shortcuts\" role=\"list\" className=\"space-y-0.5\">\n\t\t\t\t\t\t\t\t\t{shortcuts.map((shortcut) => {\n\t\t\t\t\t\t\t\t\t\tconst isActive = isItemActive(shortcut.href, pathname);\n\t\t\t\t\t\t\t\t\t\tconst Icon = shortcut.icon;\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<li key={shortcut.name}>\n\t\t\t\t\t\t\t\t\t\t\t\t<LinkComponent\n\t\t\t\t\t\t\t\t\t\t\t\t\thref={shortcut.href}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisActive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-indigo-600 dark:text-indigo-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-x-2.5 rounded-md px-2 py-1.5 font-medium transition hover:bg-gray-100 sm:text-sm hover:dark:bg-gray-900\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfocusRing,\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={closeDrawer}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{shortcut.name}\n\t\t\t\t\t\t\t\t\t\t\t\t</LinkComponent>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","/**\n * Dashboard Template Utilities\n *\n * Shared utility functions and style constants for the dashboard template.\n */\n\nimport { type ClassNameValue, twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS class conflict resolution\n */\nexport function cx(...args: ClassNameValue[]) {\n\treturn twMerge(...args);\n}\n\n/**\n * Focus input ring styles (for form inputs)\n */\nexport const focusInput = [\n\t// base\n\t\"focus:ring-2\",\n\t// ring color\n\t\"focus:ring-indigo-200 focus:dark:ring-indigo-700/30\",\n\t// border color\n\t\"focus:border-indigo-500 focus:dark:border-indigo-700\",\n].join(\" \");\n\n/**\n * Focus ring styles (for buttons and interactive elements)\n */\nexport const focusRing = [\n\t// base\n\t\"outline outline-offset-2 outline-0 focus-visible:outline-2\",\n\t// outline color\n\t\"outline-indigo-500 dark:outline-indigo-500\",\n].join(\" \");\n\n/**\n * Error input ring styles\n */\nexport const hasErrorInput = [\n\t// base\n\t\"ring-2\",\n\t// border color\n\t\"border-red-500 dark:border-red-700\",\n\t// ring color\n\t\"ring-red-200 dark:ring-red-700/30\",\n].join(\" \");\n","\"use client\";\n\nimport type { ComponentType, ReactNode, SVGProps } from \"react\";\nimport { cx, focusRing } from \"../../utils\";\n\n/**\n * Navigation item configuration for the sidebar\n */\nexport interface SidebarNavItem {\n\t/** Unique identifier */\n\tid: string;\n\t/** Display label */\n\tlabel: string;\n\t/** Link href */\n\thref?: string;\n\t/** Icon component */\n\ticon?: ComponentType<SVGProps<SVGSVGElement>>;\n\t/** Is currently active */\n\tactive?: boolean;\n\t/** Is disabled */\n\tdisabled?: boolean;\n\t/** Click handler */\n\tonClick?: () => void;\n}\n\n/**\n * Shortcut item configuration\n */\nexport interface SidebarShortcutItem {\n\t/** Display name */\n\tname: string;\n\t/** Link href */\n\thref: string;\n\t/** Icon component */\n\ticon?: ComponentType<SVGProps<SVGSVGElement>>;\n}\n\n/**\n * Workspace configuration for the workspace switcher\n */\nexport interface SidebarWorkspace {\n\t/** Workspace identifier */\n\tid: string;\n\t/** Workspace name */\n\tname: string;\n\t/** Initials for avatar */\n\tinitials: string;\n\t/** User role in workspace */\n\trole: string;\n\t/** Background color class */\n\tcolor?: string;\n}\n\n/**\n * User profile configuration for the sidebar footer\n */\nexport interface SidebarUser {\n\t/** User display name */\n\tname: string;\n\t/** User email */\n\temail?: string;\n\t/** User initials for avatar */\n\tinitials: string;\n}\n\n/**\n * Props for the Sidebar adapter component\n */\nexport interface SidebarProps {\n\t/** Navigation items */\n\titems?: SidebarNavItem[];\n\t/** Shortcut items */\n\tshortcuts?: SidebarShortcutItem[];\n\t/** Current workspace */\n\tworkspace?: SidebarWorkspace;\n\t/** Available workspaces for switching */\n\tworkspaces?: SidebarWorkspace[];\n\t/** Current user */\n\tuser?: SidebarUser;\n\t/** Is sidebar collapsed */\n\tcollapsed?: boolean;\n\t/** Collapse toggle handler */\n\tonCollapse?: (collapsed: boolean) => void;\n\t/** Custom header content */\n\theader?: ReactNode;\n\t/** Custom footer content */\n\tfooter?: ReactNode;\n\t/** Additional className */\n\tclassName?: string;\n\t/** Current pathname for active state detection */\n\tpathname?: string;\n\t/** Link component for routing (e.g., Next.js Link) */\n\tLinkComponent?: ComponentType<{\n\t\thref: string;\n\t\tclassName?: string;\n\t\tchildren: ReactNode;\n\t}>;\n}\n\n/**\n * Default link component (plain anchor)\n */\nfunction DefaultLink({\n\thref,\n\tclassName,\n\tchildren,\n}: {\n\thref: string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) {\n\treturn (\n\t\t<a href={href} className={className}>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\n/**\n * Helper to determine if a nav item is active\n */\nfunction isItemActive(\n\titemHref: string | undefined,\n\tpathname: string | undefined,\n\tsettingsPath = \"/settings\",\n): boolean {\n\tif (!itemHref || !pathname) return false;\n\tif (itemHref === settingsPath) {\n\t\treturn pathname.startsWith(\"/settings\");\n\t}\n\treturn pathname === itemHref || pathname.startsWith(itemHref);\n}\n\n/**\n * Sidebar - Navigation sidebar with workspace switcher and user profile\n *\n * A vertical navigation bar featuring:\n * - Workspace dropdown at the top\n * - Primary navigation links\n * - Shortcuts section\n * - User profile at the bottom\n *\n * Based on Tremor dashboard template sidebar design.\n */\nexport function Sidebar({\n\titems = [],\n\tshortcuts = [],\n\tworkspace,\n\tworkspaces = [],\n\tuser,\n\tcollapsed = false,\n\tonCollapse: _onCollapse,\n\theader,\n\tfooter,\n\tclassName,\n\tpathname,\n\tLinkComponent = DefaultLink,\n}: SidebarProps) {\n\treturn (\n\t\t<nav\n\t\t\tdata-testid=\"sidebar\"\n\t\t\tclassName={cx(\n\t\t\t\t\"hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col\",\n\t\t\t\tcollapsed ? \"lg:w-16\" : \"lg:w-72\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<aside className=\"flex grow flex-col gap-y-6 overflow-y-auto border-r border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950\">\n\t\t\t\t{/* Workspace Switcher */}\n\t\t\t\t{workspace && (\n\t\t\t\t\t<WorkspaceSwitcher\n\t\t\t\t\t\tworkspace={workspace}\n\t\t\t\t\t\tworkspaces={workspaces}\n\t\t\t\t\t\tcollapsed={collapsed}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{/* Custom Header */}\n\t\t\t\t{header}\n\n\t\t\t\t{/* Main Navigation */}\n\t\t\t\t<nav\n\t\t\t\t\taria-label=\"core navigation links\"\n\t\t\t\t\tclassName=\"flex flex-1 flex-col space-y-10\"\n\t\t\t\t>\n\t\t\t\t\t{/* Primary Navigation Items */}\n\t\t\t\t\t<ul role=\"list\" className=\"space-y-0.5\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst isActive = item.active ?? isItemActive(item.href, pathname);\n\t\t\t\t\t\t\tconst Icon = item.icon;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={item.id}>\n\t\t\t\t\t\t\t\t\t<LinkComponent\n\t\t\t\t\t\t\t\t\t\thref={item.href || \"#\"}\n\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\tisActive\n\t\t\t\t\t\t\t\t\t\t\t\t? \"text-indigo-600 dark:text-indigo-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t: \"text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50\",\n\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-sm font-medium transition hover:bg-gray-100 hover:dark:bg-gray-900\",\n\t\t\t\t\t\t\t\t\t\t\tfocusRing,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"nav-item\"\n\t\t\t\t\t\t\t\t\t\tdata-active={isActive}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{!collapsed && item.label}\n\t\t\t\t\t\t\t\t\t</LinkComponent>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\n\t\t\t\t\t{/* Shortcuts Section */}\n\t\t\t\t\t{shortcuts.length > 0 && !collapsed && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<span className=\"text-xs font-medium leading-6 text-gray-500\">\n\t\t\t\t\t\t\t\tShortcuts\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<ul aria-label=\"shortcuts\" role=\"list\" className=\"space-y-0.5\">\n\t\t\t\t\t\t\t\t{shortcuts.map((shortcut) => {\n\t\t\t\t\t\t\t\t\tconst isActive = isItemActive(shortcut.href, pathname);\n\t\t\t\t\t\t\t\t\tconst Icon = shortcut.icon;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<li key={shortcut.name}>\n\t\t\t\t\t\t\t\t\t\t\t<LinkComponent\n\t\t\t\t\t\t\t\t\t\t\t\thref={shortcut.href}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\t\t\tisActive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-indigo-600 dark:text-indigo-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-sm font-medium transition hover:bg-gray-100 hover:dark:bg-gray-900\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tfocusRing,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t{shortcut.name}\n\t\t\t\t\t\t\t\t\t\t\t</LinkComponent>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</nav>\n\n\t\t\t\t{/* User Profile Footer */}\n\t\t\t\t{user && !footer && (\n\t\t\t\t\t<div className=\"mt-auto\">\n\t\t\t\t\t\t<UserProfile user={user} collapsed={collapsed} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Custom Footer */}\n\t\t\t\t{footer && <div className=\"mt-auto\">{footer}</div>}\n\t\t\t</aside>\n\t\t</nav>\n\t);\n}\n\n/**\n * Workspace Switcher component\n */\ninterface WorkspaceSwitcherProps {\n\tworkspace: SidebarWorkspace;\n\tworkspaces?: SidebarWorkspace[];\n\tcollapsed?: boolean;\n}\n\nfunction WorkspaceSwitcher({\n\tworkspace,\n\tworkspaces: _workspaces = [],\n\tcollapsed,\n}: WorkspaceSwitcherProps) {\n\tif (collapsed) {\n\t\treturn (\n\t\t\t<div className=\"flex justify-center\">\n\t\t\t\t<span\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\tworkspace.color || \"bg-indigo-600 dark:bg-indigo-500\",\n\t\t\t\t\t\t\"flex aspect-square size-8 items-center justify-center rounded p-2 text-xs font-medium text-white\",\n\t\t\t\t\t)}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{workspace.initials}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center gap-x-2.5 rounded-md border border-gray-300 bg-white p-2 text-sm shadow-sm transition-all hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-950 hover:dark:bg-gray-900\",\n\t\t\t\t\"focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 focus:dark:ring-indigo-700/30 focus:dark:border-indigo-700\",\n\t\t\t)}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName={cx(\n\t\t\t\t\tworkspace.color || \"bg-indigo-600 dark:bg-indigo-500\",\n\t\t\t\t\t\"flex aspect-square size-8 items-center justify-center rounded p-2 text-xs font-medium text-white\",\n\t\t\t\t)}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{workspace.initials}\n\t\t\t</span>\n\t\t\t<div className=\"flex w-full items-center justify-between gap-x-4 truncate\">\n\t\t\t\t<div className=\"truncate\">\n\t\t\t\t\t<p className=\"truncate whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t{workspace.name}\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"whitespace-nowrap text-left text-xs text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\t{workspace.role}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<svg\n\t\t\t\t\tclassName=\"size-5 shrink-0 text-gray-500\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"m7 15 5 5 5-5\" />\n\t\t\t\t\t<path d=\"m7 9 5-5 5 5\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t);\n}\n\n/**\n * User Profile component for sidebar footer\n */\ninterface UserProfileProps {\n\tuser: SidebarUser;\n\tcollapsed?: boolean;\n}\n\nfunction UserProfile({ user, collapsed }: UserProfileProps) {\n\tif (collapsed) {\n\t\treturn (\n\t\t\t<button\n\t\t\t\taria-label=\"User settings\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\tfocusRing,\n\t\t\t\t\t\"flex w-full justify-center rounded-md p-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:text-gray-50 hover:dark:bg-gray-400/10\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"flex size-8 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-xs text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{user.initials}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\taria-label=\"User settings\"\n\t\t\tclassName={cx(\n\t\t\t\tfocusRing,\n\t\t\t\t\"group flex w-full items-center justify-between rounded-md p-2 text-sm font-medium text-gray-900 hover:bg-gray-100 data-[state=open]:bg-gray-100 data-[state=open]:bg-gray-400/10 hover:dark:bg-gray-400/10\",\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"flex items-center gap-3\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"flex size-8 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-xs text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{user.initials}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"dark:text-gray-50\">{user.name}</span>\n\t\t\t</span>\n\t\t\t<svg\n\t\t\t\tclassName=\"size-4 shrink-0 text-gray-500 group-hover:text-gray-700 group-hover:dark:text-gray-400\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t>\n\t\t\t\t<circle cx=\"12\" cy=\"6\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"18\" r=\"2\" />\n\t\t\t</svg>\n\t\t</button>\n\t);\n}\n\nexport { WorkspaceSwitcher, UserProfile };\n","import type { AppProps } from \"mdxui\";\n\nexport interface DashboardAppProps extends AppProps {\n\t/** App display name */\n\tname: string;\n\t/** Child content */\n\tchildren?: any;\n\t/** Authentication configuration (inherited from AppProps) */\n\tauth?: AppProps[\"auth\"];\n}\n\n/**\n * DashboardApp - Root wrapper component for the Dashboard template\n *\n * Provides the root application wrapper with providers and theme setup.\n * In the Dashboard template, this wraps the entire application.\n *\n * @example\n * ```tsx\n * <DashboardApp name=\"My SaaS\">\n *   <DashboardShell>\n *     <Dashboard />\n *   </DashboardShell>\n * </DashboardApp>\n * ```\n */\nexport function DashboardApp({ name, children }: DashboardAppProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-app-name={name}\n\t\t\tclassName=\"min-h-screen bg-white dark:bg-gray-950\"\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n","import type { DashboardProps } from \"mdxui\";\nimport type { ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface DashboardViewProps extends DashboardProps {\n\t/** Dashboard title */\n\ttitle?: string;\n\t/** Optional description text */\n\tdescription?: string;\n\t/** Metrics to display */\n\tmetrics?: Array<{\n\t\tlabel: string;\n\t\tvalue: string | number;\n\t\tchange?: number;\n\t\ttrend?: \"up\" | \"down\" | \"neutral\";\n\t}>;\n\t/** Action buttons or controls to render on the right */\n\tactions?: ReactNode;\n\t/** Main content area */\n\tchildren?: any;\n\t/** Additional className for the container */\n\tclassName?: string;\n}\n\n/**\n * DashboardView - Main dashboard view component for the Dashboard template\n *\n * Provides a consistent layout structure for dashboard pages:\n * - Title and description header\n * - Optional metrics bar\n * - Optional action buttons area\n * - Divider\n * - Main content area\n *\n * @example\n * ```tsx\n * <DashboardView\n *   title=\"Analytics Dashboard\"\n *   description=\"Real-time monitoring of key metrics\"\n *   metrics={[\n *     { label: 'Revenue', value: '$12,345', change: 12, trend: 'up' },\n *     { label: 'Users', value: '1,234', change: -5, trend: 'down' },\n *   ]}\n *   actions={<Button>Export</Button>}\n * >\n *   <Charts />\n *   <DataTable />\n * </DashboardView>\n * ```\n */\nexport function DashboardView({\n\ttitle,\n\tdescription,\n\tmetrics,\n\tactions,\n\tchildren,\n\tclassName,\n}: DashboardViewProps) {\n\treturn (\n\t\t<main role=\"main\" className={twMerge(\"\", className)}>\n\t\t\t{/* Header section */}\n\t\t\t{(title || description || actions) && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<h1 className=\"text-2xl font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<p className=\"text-gray-500 sm:text-sm/6 dark:text-gray-500\">\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{actions && (\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">{actions}</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Divider */}\n\t\t\t\t\t<div className=\"my-6 border-t border-gray-200 dark:border-gray-800\" />\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{/* Metrics section */}\n\t\t\t{metrics && metrics.length > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n\t\t\t\t\t\t{metrics.map((metric, index) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p className=\"text-sm font-medium text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t{metric.label}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className=\"mt-1 flex items-baseline gap-2\">\n\t\t\t\t\t\t\t\t\t<p className=\"text-2xl font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\t\t{metric.value}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t{metric.change !== undefined && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\"text-sm font-medium\",\n\t\t\t\t\t\t\t\t\t\t\t\tmetric.trend === \"up\" &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"text-green-600 dark:text-green-400\",\n\t\t\t\t\t\t\t\t\t\t\t\tmetric.trend === \"down\" &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"text-red-600 dark:text-red-400\",\n\t\t\t\t\t\t\t\t\t\t\t\tmetric.trend === \"neutral\" &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"text-gray-500 dark:text-gray-400\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{metric.change > 0 ? \"+\" : \"\"}\n\t\t\t\t\t\t\t\t\t\t\t{metric.change}%\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Divider after metrics */}\n\t\t\t\t\t<div className=\"my-6 border-t border-gray-200 dark:border-gray-800\" />\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{/* Main content */}\n\t\t\t{children}\n\t\t</main>\n\t);\n}\n","import type { AppHeaderProps } from \"mdxui\";\nimport type { ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface Breadcrumb {\n\tlabel: string;\n\thref?: string;\n}\n\nexport interface DashboardHeaderProps\n\textends Omit<AppHeaderProps, \"showSearch\" | \"showNotifications\"> {\n\t/** Current user */\n\tuser?: {\n\t\tname: string;\n\t\temail: string;\n\t\tavatar?: string;\n\t};\n\t/** Show search */\n\tshowSearch?: boolean;\n\t/** Show notifications */\n\tshowNotifications?: boolean;\n\t/** Breadcrumbs */\n\tbreadcrumbs?: Breadcrumb[];\n\t/** Logo component */\n\tlogo?: ReactNode;\n\t/** Notifications component */\n\tnotifications?: ReactNode;\n\t/** User profile component */\n\tuserProfile?: ReactNode;\n\t/** Additional className */\n\tclassName?: string;\n}\n\n/**\n * DashboardHeader - Top header bar for the Dashboard template\n *\n * Provides a header bar with logo, user profile, and notifications.\n * This is typically used inside the Shell but can be used standalone.\n *\n * @example\n * ```tsx\n * <DashboardHeader\n *   user={{ name: 'John Doe', email: 'john@example.com.ai' }}\n *   showSearch={true}\n *   showNotifications={true}\n * />\n * ```\n */\nexport function DashboardHeader({\n\tuser,\n\tshowSearch = true,\n\tshowNotifications = true,\n\tbreadcrumbs,\n\tlogo,\n\tnotifications,\n\tuserProfile,\n\tclassName,\n}: DashboardHeaderProps) {\n\treturn (\n\t\t<header\n\t\t\tclassName={twMerge(\n\t\t\t\t\"flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-950 sm:px-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{/* Left side - Logo and breadcrumbs */}\n\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t{logo ?? (\n\t\t\t\t\t<div className=\"h-6 w-20 rounded bg-gray-200 dark:bg-gray-800\" />\n\t\t\t\t)}\n\n\t\t\t\t{breadcrumbs && breadcrumbs.length > 0 && (\n\t\t\t\t\t<nav aria-label=\"Breadcrumb\" className=\"hidden sm:block\">\n\t\t\t\t\t\t<ol className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t{breadcrumbs.map((crumb, index) => (\n\t\t\t\t\t\t\t\t<li key={index} className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t{index > 0 && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-gray-400 dark:text-gray-600\">/</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{crumb.href ? (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={crumb.href}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{crumb.label}\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-gray-900 dark:text-gray-100\">\n\t\t\t\t\t\t\t\t\t\t\t{crumb.label}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ol>\n\t\t\t\t\t</nav>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Right side - Search, notifications, user */}\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t{showSearch && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n\t\t\t\t\t\taria-label=\"Search\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\td=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t)}\n\n\t\t\t\t{showNotifications &&\n\t\t\t\t\t(notifications ?? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n\t\t\t\t\t\t\taria-label=\"Notifications\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\td=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{userProfile ??\n\t\t\t\t\t(user && (\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t{user.avatar ? (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={user.avatar}\n\t\t\t\t\t\t\t\t\talt={user.name}\n\t\t\t\t\t\t\t\t\tclassName=\"h-8 w-8 rounded-full\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\t\t\t\t{user.name.charAt(0)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</header>\n\t);\n}\n","import type { SettingsProps } from \"mdxui\";\nimport type { ReactElement, ReactNode } from \"react\";\n\n/**\n * User information for pre-filling forms\n */\ninterface SettingsUser {\n\tname?: string;\n\temail?: string;\n\tavatar?: string;\n}\n\n/**\n * Extended Settings props with user information\n */\nexport interface DashboardSettingsProps extends Partial<SettingsProps> {\n\t/** User info for pre-filling form fields */\n\tuser?: SettingsUser;\n\t/** Children to render inside the settings page */\n\tchildren?: ReactNode;\n}\n\n/**\n * Default sections to show if none specified\n */\nconst DEFAULT_SECTIONS: SettingsProps[\"sections\"] = [\n\t\"profile\",\n\t\"notifications\",\n\t\"security\",\n\t\"billing\",\n\t\"team\",\n\t\"api\",\n\t\"integrations\",\n];\n\n/**\n * Profile Settings Section\n */\nfunction ProfileSection({ user }: { user?: SettingsUser }) {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"profile-heading\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"Profile\"\n\t\t>\n\t\t\t<div className=\"grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3\">\n\t\t\t\t<div>\n\t\t\t\t\t<h2\n\t\t\t\t\t\tid=\"profile-heading\"\n\t\t\t\t\t\tclassName=\"scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t>\n\t\t\t\t\t\tProfile\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-2 text-sm leading-6 text-gray-500\">\n\t\t\t\t\t\tManage your personal information and preferences.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"md:col-span-2\">\n\t\t\t\t\t<form className=\"space-y-4\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\thtmlFor=\"name\"\n\t\t\t\t\t\t\t\tclassName=\"block text-sm font-medium text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tName\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tid=\"name\"\n\t\t\t\t\t\t\t\tname=\"name\"\n\t\t\t\t\t\t\t\tdefaultValue={user?.name || \"\"}\n\t\t\t\t\t\t\t\tplaceholder=\"Your name\"\n\t\t\t\t\t\t\t\tclassName=\"mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\thtmlFor=\"email\"\n\t\t\t\t\t\t\t\tclassName=\"block text-sm font-medium text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tEmail\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\tid=\"email\"\n\t\t\t\t\t\t\t\tname=\"email\"\n\t\t\t\t\t\t\t\tdefaultValue={user?.email || \"\"}\n\t\t\t\t\t\t\t\tplaceholder=\"your@email.com\"\n\t\t\t\t\t\t\t\tclassName=\"mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex justify-end\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\tclassName=\"rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tSave changes\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n/**\n * Notifications Settings Section\n */\nfunction NotificationsSection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"notifications-heading\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"Notifications\"\n\t\t>\n\t\t\t<div className=\"grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3\">\n\t\t\t\t<div>\n\t\t\t\t\t<h2\n\t\t\t\t\t\tid=\"notifications-heading\"\n\t\t\t\t\t\tclassName=\"scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t>\n\t\t\t\t\t\tNotifications\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-2 text-sm leading-6 text-gray-500\">\n\t\t\t\t\t\tConfigure how and when you receive notifications.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"md:col-span-2\">\n\t\t\t\t\t<form className=\"space-y-4\">\n\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<h3 className=\"text-sm font-medium text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\tEmail notifications\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-gray-500\">\n\t\t\t\t\t\t\t\t\tReceive email updates about your account.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\t\t\taria-checked=\"true\"\n\t\t\t\t\t\t\t\tclassName=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-blue-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<h3 className=\"text-sm font-medium text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\tPush notifications\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-gray-500\">\n\t\t\t\t\t\t\t\t\tReceive push notifications on your devices.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\t\t\taria-checked=\"false\"\n\t\t\t\t\t\t\t\tclassName=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-700\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n/**\n * Security Settings Section\n */\nfunction SecuritySection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"security-heading\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"Security\"\n\t\t>\n\t\t\t<div className=\"grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3\">\n\t\t\t\t<div>\n\t\t\t\t\t<h2\n\t\t\t\t\t\tid=\"security-heading\"\n\t\t\t\t\t\tclassName=\"scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t>\n\t\t\t\t\t\tSecurity\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-2 text-sm leading-6 text-gray-500\">\n\t\t\t\t\t\tManage your password and security preferences.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"md:col-span-2\">\n\t\t\t\t\t<form className=\"space-y-4\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\thtmlFor=\"current-password\"\n\t\t\t\t\t\t\t\tclassName=\"block text-sm font-medium text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCurrent password\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\t\tid=\"current-password\"\n\t\t\t\t\t\t\t\tname=\"current-password\"\n\t\t\t\t\t\t\t\tplaceholder=\"Enter current password\"\n\t\t\t\t\t\t\t\tclassName=\"mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\thtmlFor=\"new-password\"\n\t\t\t\t\t\t\t\tclassName=\"block text-sm font-medium text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tNew password\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\t\tid=\"new-password\"\n\t\t\t\t\t\t\t\tname=\"new-password\"\n\t\t\t\t\t\t\t\tplaceholder=\"Enter new password\"\n\t\t\t\t\t\t\t\tclassName=\"mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex justify-end\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\tclassName=\"rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tUpdate password\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n/**\n * Account Settings Section\n */\nfunction AccountSection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"account-heading\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"Account\"\n\t\t>\n\t\t\t<div className=\"grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3\">\n\t\t\t\t<div>\n\t\t\t\t\t<h2\n\t\t\t\t\t\tid=\"account-heading\"\n\t\t\t\t\t\tclassName=\"scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50\"\n\t\t\t\t\t>\n\t\t\t\t\t\tAccount\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-2 text-sm leading-6 text-gray-500\">\n\t\t\t\t\t\tManage your account settings and preferences.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"md:col-span-2\">\n\t\t\t\t\t<div className=\"space-y-6\">\n\t\t\t\t\t\t<div className=\"rounded-md border border-gray-200 p-4 dark:border-gray-700\">\n\t\t\t\t\t\t\t<h3 className=\"text-sm font-medium text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\tExport data\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<p className=\"mt-1 text-sm text-gray-500\">\n\t\t\t\t\t\t\t\tDownload a copy of all your data.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"mt-3 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tExport data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"rounded-md border border-red-200 p-4 dark:border-red-900\">\n\t\t\t\t\t\t\t<h3 className=\"text-sm font-medium text-red-700 dark:text-red-400\">\n\t\t\t\t\t\t\t\tDelete account\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<p className=\"mt-1 text-sm text-gray-500\">\n\t\t\t\t\t\t\t\tPermanently delete your account and all associated data.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"mt-3 rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tDelete account\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n/**\n * Divider component for separating sections\n */\nfunction Divider() {\n\treturn <hr className=\"my-10 border-gray-200 dark:border-gray-800\" />;\n}\n\n/**\n * Settings Page Component\n *\n * A comprehensive settings page with profile, notifications, security,\n * and account sections. Implements the SettingsProps interface from mdxui.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Settings />\n *\n * // With pre-filled user data\n * <Settings user={{ name: 'John', email: 'john@example.com.ai' }} />\n *\n * // With specific sections\n * <Settings sections={['profile', 'security']} />\n * ```\n */\nexport function Settings({\n\tsections = DEFAULT_SECTIONS,\n\tuser,\n\tchildren,\n}: DashboardSettingsProps) {\n\t// Map section names to components\n\tconst sectionComponents: Record<string, ReactElement | null> = {\n\t\tprofile: <ProfileSection key=\"profile\" user={user} />,\n\t\tnotifications: <NotificationsSection key=\"notifications\" />,\n\t\tsecurity: <SecuritySection key=\"security\" />,\n\t\tbilling: null, // Placeholder for future implementation\n\t\tteam: null, // Placeholder for future implementation\n\t\tapi: null, // Placeholder for future implementation\n\t\tintegrations: null, // Placeholder for future implementation\n\t};\n\n\t// Always include Account section as it's a core settings feature\n\tconst showAccount =\n\t\tsections?.length === undefined ||\n\t\tsections.length === DEFAULT_SECTIONS?.length;\n\n\t// Filter to only the specified sections\n\tconst activeSections = (sections || DEFAULT_SECTIONS || [])\n\t\t.map((section) => sectionComponents[section])\n\t\t.filter((component): component is ReactElement => component !== null);\n\n\treturn (\n\t\t<div className=\"min-h-dvh bg-white p-4 sm:p-6 lg:rounded-lg lg:border lg:border-gray-200 dark:bg-gray-925 lg:dark:border-gray-900\">\n\t\t\t<h1 className=\"text-lg font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\tSettings\n\t\t\t</h1>\n\t\t\t<div data-testid=\"settings-content\" className=\"mt-8 space-y-0\">\n\t\t\t\t{activeSections.map((component, index) => (\n\t\t\t\t\t<div key={index}>\n\t\t\t\t\t\t{index > 0 && <Divider />}\n\t\t\t\t\t\t{component}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t{showAccount && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{activeSections.length > 0 && <Divider />}\n\t\t\t\t\t\t<AccountSection />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n","/**\n * Dashboard Template - General SaaS Dashboard\n *\n * Implements AppComponents interface for general-purpose SaaS dashboards.\n * Based on Tremor dashboard template patterns.\n *\n * @example\n * ```tsx\n * import { AppComponents, ShellSidebarLeft, Sidebar, Settings } from '@mdxui/tremor/dashboard'\n *\n * // Use AppComponents interface\n * const { App, Shell, Sidebar, Header, Dashboard, Settings } = AppComponents\n *\n * // Or use variant exports directly\n * <ShellSidebarLeft sidebar={<Sidebar {...sidebarProps} />}>\n *   <Settings sections={['profile', 'security']} />\n * </ShellSidebarLeft>\n * ```\n *\n * @example Using with MDX\n * ```tsx\n * import { AppComponents } from '@mdxui/tremor/dashboard'\n *\n * <MDXProvider components={AppComponents}>\n *   <App>\n *     <Shell>\n *       <Dashboard title=\"Analytics\">\n *         {content}\n *       </Dashboard>\n *     </Shell>\n *   </App>\n * </MDXProvider>\n * ```\n */\n\n// Component exports\nexport * from \"./components\";\n// Layout exports\nexport * from \"./layouts\";\n// Page exports\nexport * from \"./pages\";\n\n// Utility exports\nexport { cx, focusInput, focusRing } from \"./utils\";\n\n// Import components for the interface\nimport { Shell, ShellSidebarLeft, ShellTopNav, Sidebar } from \"./components\";\nimport { DashboardApp, DashboardHeader, DashboardView } from \"./layouts\";\nimport { Settings } from \"./pages\";\n\n/**\n * Legacy components object (deprecated - use AppComponents instead)\n *\n * @deprecated Use AppComponents for conformance with mdxui interface\n */\nexport const components = {\n\tShell,\n\tShellSidebarLeft,\n\tShellTopNav,\n\tSidebar,\n\tSettings,\n} as const;\n\nexport type DashboardComponents = typeof components;\n\n/**\n * AppComponents implementation for the Dashboard template.\n *\n * This object provides all required components for the mdxui AppComponents interface.\n * Use this when you need a complete set of components for a Dashboard-style application.\n *\n * The Dashboard template provides:\n * - Flexible shell layouts (sidebar-left, top-nav variants)\n * - Navigation sidebar with workspace switcher and user profile\n * - Header bar with search, notifications, and user profile\n * - Dashboard page layout with metrics and content areas\n * - Settings page with multiple sections\n *\n * @example\n * ```tsx\n * import { AppComponents } from '@mdxui/tremor/dashboard'\n *\n * // Use with mdxui\n * <MDXProvider components={AppComponents}>\n *   <App>\n *     <Shell>\n *       <Dashboard title=\"Analytics\">\n *         {content}\n *       </Dashboard>\n *     </Shell>\n *   </App>\n * </MDXProvider>\n * ```\n */\nexport const AppComponents = {\n\t/** Root application wrapper */\n\tApp: DashboardApp,\n\t/** Flexible shell layout */\n\tShell,\n\t/** Navigation sidebar */\n\tSidebar,\n\t/** Header bar component */\n\tHeader: DashboardHeader,\n\t/** Dashboard page layout */\n\tDashboard: DashboardView,\n\t/** Settings page layout */\n\tSettings,\n\t/** Sidebar-left shell variant */\n\tShellSidebarLeft,\n\t/** Top-nav shell variant */\n\tShellTopNav,\n} as const;\n"],"mappings":"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","names":["twMerge","jsx","jsxs","twMerge","jsx","jsxs","twMerge","jsx","jsxs","jsx","jsxs","DefaultLink","isItemActive","jsx","twMerge","Fragment","jsx","jsxs","twMerge","jsx","jsxs","Fragment","jsx","jsxs"]}

package/dist/database/index.d.ts

@@ -0,0 +1,334 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentType } from 'react';
+import { SiteComponents } from 'mdxui';
+
+/**
+ * Footer link configuration
+ */
+interface FooterLink {
+    /** Link label */
+    label: string;
+    /** Link destination */
+    href: string;
+    /** Open in new tab */
+    external?: boolean;
+}
+/**
+ * Footer link group configuration
+ */
+interface FooterLinkGroup {
+    /** Group title */
+    title: string;
+    /** Links in this group */
+    links: FooterLink[];
+}
+/**
+ * Social link configuration
+ */
+interface SocialLink {
+    /** Platform name (twitter, github, discord, linkedin, youtube, instagram) */
+    platform: "twitter" | "github" | "discord" | "linkedin" | "youtube" | "instagram" | string;
+    /** Profile URL */
+    href: string;
+}
+/**
+ * Link component props for custom routing
+ */
+interface FooterLinkProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    target?: string;
+    rel?: string;
+}
+/**
+ * Footer component props
+ */
+interface FooterProps {
+    /** Logo element or string */
+    logo?: ReactNode;
+    /** Simple footer links (flat list) or grouped links */
+    links: FooterLink[] | FooterLinkGroup[];
+    /** Social media links */
+    social?: SocialLink[];
+    /** Copyright text */
+    copyright?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<FooterLinkProps>;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Footer component for Database template
+ *
+ * A responsive footer with logo, link columns, social links, and copyright.
+ * Based on the Database template design with clean, professional styling.
+ */
+declare function Footer({ logo, links, social, copyright, LinkComponent, className, }: FooterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Navigation item configuration
+ */
+interface NavItem {
+    /** Link label */
+    label: string;
+    /** Link destination */
+    href: string;
+}
+/**
+ * CTA button configuration
+ */
+interface HeaderCTA {
+    /** Button label */
+    label: string;
+    /** Button destination */
+    href: string;
+    /** Click handler (alternative to href) */
+    onClick?: () => void;
+}
+/**
+ * Link component props for custom routing
+ */
+interface HeaderLinkProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * Header component props
+ */
+interface HeaderProps {
+    /** Logo element or string */
+    logo: ReactNode;
+    /** Navigation items */
+    nav: NavItem[];
+    /** Primary CTA button */
+    cta?: HeaderCTA;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<HeaderLinkProps>;
+    /** Sticky header behavior */
+    sticky?: boolean;
+    /** Transparent when at top */
+    transparentOnTop?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Header component for Database template
+ *
+ * A responsive navigation header with logo, nav items, and optional CTA button.
+ * Features a clean, database-focused design with dark theme support.
+ */
+declare function Header({ logo, nav, cta, LinkComponent, sticky, transparentOnTop, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface DatabaseHeroProps {
+    title: string;
+    subtitle?: string;
+    callToAction: string;
+    secondaryCallToAction?: string;
+}
+interface DatabaseFeatureItem {
+    title: string;
+    description: string;
+}
+interface DatabaseFeaturesProps {
+    title?: string;
+    features: DatabaseFeatureItem[];
+}
+interface DatabasePricingTier {
+    name: string;
+    price: string;
+    description?: string;
+    features: string[];
+    callToAction: string;
+    highlighted?: boolean;
+}
+interface DatabasePricingProps {
+    title?: string;
+    tiers: DatabasePricingTier[];
+}
+interface DatabaseTestimonial {
+    quote: string;
+    author: string;
+    title?: string;
+}
+interface DatabaseTestimonialsProps {
+    testimonials: DatabaseTestimonial[];
+}
+interface DatabaseCTAProps {
+    title: string;
+    description?: string;
+    callToAction: string;
+}
+interface DatabaseFAQItem {
+    question: string;
+    answer: string;
+}
+interface DatabaseFAQProps {
+    items: DatabaseFAQItem[];
+}
+/**
+ * LandingPage props for database template
+ *
+ * All section props accept either:
+ * - A config object (will render the built-in section component)
+ * - A ReactNode (will render the custom component directly)
+ */
+interface DatabaseLandingPageProps {
+    /** Hero section - config object or custom ReactNode */
+    hero?: DatabaseHeroProps | ReactNode;
+    /** Features section - config object or custom ReactNode */
+    features?: DatabaseFeaturesProps | ReactNode;
+    /** Pricing section - config object or custom ReactNode */
+    pricing?: DatabasePricingProps | ReactNode;
+    /** Testimonials section - config object or custom ReactNode */
+    testimonials?: DatabaseTestimonialsProps | ReactNode;
+    /** CTA section - config object or custom ReactNode */
+    cta?: DatabaseCTAProps | ReactNode;
+    /** FAQ section - config object or custom ReactNode */
+    faq?: DatabaseFAQProps | ReactNode;
+    /** Additional content */
+    children?: ReactNode;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * LandingPage orchestrator for database template
+ *
+ * Composes a complete landing page from section configurations or custom ReactNodes.
+ */
+declare function LandingPage({ hero, features, pricing, testimonials, cta, faq, children, className }: DatabaseLandingPageProps): react_jsx_runtime.JSX.Element;
+
+interface PageProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Simple Page wrapper component
+ */
+declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Site header configuration
+ */
+interface SiteHeaderConfig {
+    /** Logo element or string */
+    logo: ReactNode;
+    /** Navigation items */
+    nav: NavItem[];
+    /** Primary CTA button */
+    cta?: HeaderCTA;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<HeaderLinkProps>;
+    /** Sticky header behavior */
+    sticky?: boolean;
+    /** Transparent when at top */
+    transparentOnTop?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Site footer configuration
+ */
+interface SiteFooterConfig {
+    /** Logo element or string */
+    logo?: ReactNode;
+    /** Simple footer links (flat list) or grouped links */
+    links: FooterLink[] | FooterLinkGroup[];
+    /** Social media links */
+    social?: SocialLink[];
+    /** Copyright text */
+    copyright?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<FooterLinkProps>;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Site props including header and footer configuration
+ *
+ * Both header and footer can be either:
+ * - A config object (will render the built-in Header/Footer components)
+ * - A ReactNode (will render the custom component directly)
+ */
+interface DatabaseSiteProps {
+    /** Site display name */
+    name?: string;
+    /** Primary domain (e.g., "example.com.ai") */
+    domain?: string;
+    /** Theme mode */
+    theme?: 'light' | 'dark' | 'system';
+    /** Header configuration or custom header ReactNode */
+    header: SiteHeaderConfig | ReactNode;
+    /** Footer configuration or custom footer ReactNode */
+    footer: SiteFooterConfig | ReactNode;
+    /** Child content */
+    children?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Site component
+ *
+ * Root wrapper for the database template. Provides header and footer
+ * layout with theme support and responsive design.
+ *
+ * @example
+ * ```tsx
+ * <Site
+ *   name="My Database"
+ *   header={{
+ *     logo: <Logo />,
+ *     nav: [{ label: 'Home', href: '/' }],
+ *   }}
+ *   footer={{
+ *     logo: <Logo />,
+ *     links: [
+ *       { title: 'Company', links: [{ label: 'About', href: '/about' }] }
+ *     ],
+ *     copyright: '2024 My Company',
+ *   }}
+ * >
+ *   <LandingPage {...} />
+ * </Site>
+ * ```
+ */
+declare function Site({ name: _name, domain: _domain, theme, header, footer, children, className }: DatabaseSiteProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Database Template - Marketing/Content Site
+ *
+ * Implements SiteComponents interface for marketing sites with
+ * home, about, changelog, and pricing pages.
+ *
+ * @example
+ * ```tsx
+ * import { components, siteComponents } from '@mdxui/tremor/database'
+ *
+ * // Use SiteComponents interface
+ * const { Site, Header, Footer, LandingPage, Page } = components
+ *
+ * // Or use page components directly
+ * import { HomePage, AboutPage, ChangelogPage, PricingPage } from '@mdxui/tremor/database'
+ * ```
+ */
+
+/**
+ * SiteComponents interface implementation for Database template.
+ * Provides core layout components for marketing sites.
+ */
+declare const components: {
+    readonly Site: typeof Site;
+    readonly Header: typeof Header;
+    readonly Footer: typeof Footer;
+    readonly LandingPage: typeof LandingPage;
+    readonly Page: typeof Page;
+};
+/**
+ * Type-safe SiteComponents export for mdxui integration.
+ * Cast to any to avoid type mismatch with Database-specific props.
+ */
+declare const siteComponents: Partial<SiteComponents>;
+
+export { type DatabaseLandingPageProps, type DatabaseSiteProps, Footer, type FooterLink, type FooterLinkGroup, type FooterLinkProps, type FooterProps, Header, type HeaderCTA, type HeaderLinkProps, type HeaderProps, LandingPage, type NavItem, Page, type PageProps, Site, type SiteFooterConfig, type SiteHeaderConfig, type SocialLink, components, siteComponents };