@mdxui/tremor 6.0.0

package/dist/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/utils.ts","../src/dashboard/components/sidebar/sidebar.tsx","../src/dashboard/pages/settings.tsx","../src/dashboard/index.ts","../src/shared/adapters/chart-adapter.ts","../src/shared/adapters/metric-adapter.ts","../src/shared/adapters/table-adapter.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","/**\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 { 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","/**\n * Chart Adapter - Maps mdxui chart props to Tremor chart props\n *\n * The adapter pattern ensures:\n * - No modification of Tremor component code\n * - Pixel-perfect visual fidelity\n * - mdxui type compliance\n */\n\nimport type {\n\tDonutChartProps,\n\tSparkChartProps,\n\tTremorAreaChartProps,\n\tTremorBarChartProps,\n\tTremorLineChartProps,\n} from \"mdxui\";\n\n/**\n * Adapt mdxui AreaChartProps to Tremor AreaChart props\n */\nexport function adaptAreaChartProps(props: TremorAreaChartProps) {\n\tconst {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tstartEndOnly,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tstack,\n\t\tcurveType,\n\t\tconnectNulls,\n\t\tyAxisWidth,\n\t\tminValue,\n\t\tmaxValue,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tstartEndOnly,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tstack,\n\t\tcurveType,\n\t\tconnectNulls,\n\t\tyAxisWidth,\n\t\tminValue,\n\t\tmaxValue,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui BarChartProps to Tremor BarChart props\n */\nexport function adaptBarChartProps(props: TremorBarChartProps) {\n\tconst {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tlayout,\n\t\tstack,\n\t\trelative,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tyAxisWidth,\n\t\tbarCategoryGap,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tlayout,\n\t\tstack,\n\t\trelative,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tyAxisWidth,\n\t\tbarCategoryGap,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui LineChartProps to Tremor LineChart props\n */\nexport function adaptLineChartProps(props: TremorLineChartProps) {\n\tconst {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tcurveType,\n\t\tconnectNulls,\n\t\tshowDots,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tyAxisWidth,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata,\n\t\tindex,\n\t\tcategories,\n\t\tcolors,\n\t\tvalueFormatter,\n\t\tcurveType,\n\t\tconnectNulls,\n\t\tshowDots,\n\t\tshowLegend,\n\t\tshowGridLines,\n\t\tshowAnimation,\n\t\tyAxisWidth,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui DonutChartProps to Tremor DonutChart props\n */\nexport function adaptDonutChartProps(props: DonutChartProps) {\n\tconst {\n\t\tdata,\n\t\tcategory,\n\t\tvalue,\n\t\tcolors,\n\t\tvariant,\n\t\tlabel,\n\t\tshowLegend,\n\t\tshowTooltip,\n\t\tanimationDuration,\n\t\tvalueFormatter,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata,\n\t\tcategory,\n\t\tvalue,\n\t\tcolors,\n\t\tvariant,\n\t\tlabel,\n\t\tshowLegend,\n\t\tshowTooltip,\n\t\tanimationDuration,\n\t\tvalueFormatter,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui SparkChartProps to Tremor SparkChart props\n */\nexport function adaptSparkChartProps(props: SparkChartProps) {\n\tconst { data, type, color, showMinMax, height, width, animate, className } =\n\t\tprops;\n\n\treturn {\n\t\tdata,\n\t\ttype,\n\t\tcolor,\n\t\tshowMinMax,\n\t\theight,\n\t\twidth,\n\t\tanimate,\n\t\tclassName,\n\t};\n}\n","/**\n * Metric Adapter - Maps mdxui metric props to Tremor metric props\n *\n * The adapter pattern ensures:\n * - No modification of Tremor component code\n * - Pixel-perfect visual fidelity\n * - mdxui type compliance\n */\n\nimport type {\n\tAnalyticsCardProps,\n\tBarListProps,\n\tCategoryBarProps,\n\tDeltaBarProps,\n\tTrackerProps,\n\tTremorMetricCardProps,\n} from \"mdxui\";\n\n/**\n * Adapt mdxui TremorMetricCardProps to Tremor Card props\n */\nexport function adaptMetricCardProps(props: TremorMetricCardProps) {\n\tconst { title, value, delta, deltaType, decorationColor, icon, className } =\n\t\tprops;\n\n\treturn {\n\t\ttitle,\n\t\tvalue,\n\t\tdelta: delta\n\t\t\t? {\n\t\t\t\t\tvalue: delta.value,\n\t\t\t\t\ttype: delta.type,\n\t\t\t\t\tisIncreasePositive: delta.isIncreasePositive,\n\t\t\t\t}\n\t\t\t: undefined,\n\t\tdeltaType,\n\t\tdecorationColor,\n\t\ticon,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui AnalyticsCardProps to composite Tremor card props\n */\nexport function adaptAnalyticsCardProps(props: AnalyticsCardProps) {\n\tconst {\n\t\ttitle,\n\t\tdescription,\n\t\tmetric,\n\t\tsubtext,\n\t\tchartType,\n\t\tchartData,\n\t\tchartConfig,\n\t\ttimeRange,\n\t\tshowTimeRangeSelector,\n\t\tloading,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\ttitle,\n\t\tdescription,\n\t\tmetric,\n\t\tsubtext,\n\t\tchartType,\n\t\tchartData,\n\t\tchartConfig,\n\t\ttimeRange,\n\t\tshowTimeRangeSelector,\n\t\tloading,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui CategoryBarProps to Tremor CategoryBar props\n */\nexport function adaptCategoryBarProps(props: CategoryBarProps) {\n\tconst {\n\t\tvalues,\n\t\tcolors,\n\t\tlabels,\n\t\tmarkerValue,\n\t\tshowMarker,\n\t\tshowLabels,\n\t\tshowValues,\n\t\theight,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tvalues,\n\t\tcolors,\n\t\tlabels,\n\t\tmarkerValue,\n\t\tshowMarker,\n\t\tshowLabels,\n\t\tshowValues,\n\t\theight,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui BarListProps to Tremor BarList props\n */\nexport function adaptBarListProps(props: BarListProps) {\n\tconst { data, valueFormatter, color, showAnimation, sortOrder, className } =\n\t\tprops;\n\n\treturn {\n\t\tdata,\n\t\tvalueFormatter,\n\t\tcolor,\n\t\tshowAnimation,\n\t\tsortOrder,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui TrackerProps to Tremor Tracker props\n */\nexport function adaptTrackerProps(props: TrackerProps) {\n\tconst { data, className } = props;\n\n\treturn {\n\t\tdata,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui DeltaBarProps to Tremor DeltaBar props\n */\nexport function adaptDeltaBarProps(props: DeltaBarProps) {\n\tconst { value, showAnimation, positiveColor, negativeColor, className } =\n\t\tprops;\n\n\treturn {\n\t\tvalue,\n\t\tshowAnimation,\n\t\tpositiveColor,\n\t\tnegativeColor,\n\t\tclassName,\n\t};\n}\n\n/**\n * Format delta value for display\n */\nexport function formatDelta(\n\tvalue: number | string,\n\ttype: \"percentage\" | \"absolute\" = \"percentage\",\n): string {\n\tconst numValue = typeof value === \"string\" ? parseFloat(value) : value;\n\tconst sign = numValue >= 0 ? \"+\" : \"\";\n\n\tif (type === \"percentage\") {\n\t\treturn `${sign}${numValue.toFixed(1)}%`;\n\t}\n\n\treturn `${sign}${numValue}`;\n}\n\n/**\n * Determine trend direction from delta value\n */\nexport function getTrendFromDelta(\n\tvalue: number | string,\n): \"up\" | \"down\" | \"unchanged\" {\n\tconst numValue = typeof value === \"string\" ? parseFloat(value) : value;\n\n\tif (numValue > 0) return \"up\";\n\tif (numValue < 0) return \"down\";\n\treturn \"unchanged\";\n}\n","/**\n * Table Adapter - Maps mdxui table props to Tremor/TanStack Table props\n *\n * The adapter pattern ensures:\n * - No modification of Tremor component code\n * - Pixel-perfect visual fidelity\n * - mdxui type compliance\n */\n\nimport type { AuditLogTableProps, TransactionsListProps } from \"mdxui\";\n\n/**\n * Adapt mdxui TransactionsListProps to Tremor table props\n */\nexport function adaptTransactionsListProps(props: TransactionsListProps) {\n\tconst {\n\t\ttransactions,\n\t\ttitle,\n\t\tcurrency,\n\t\tvalueFormatter,\n\t\tshowCategoryFilter,\n\t\tshowDateFilter,\n\t\tshowExport,\n\t\tpageSize,\n\t\temptyMessage,\n\t\tloading,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata: transactions,\n\t\ttitle,\n\t\tcurrency,\n\t\tvalueFormatter,\n\t\tshowCategoryFilter,\n\t\tshowDateFilter,\n\t\tshowExport,\n\t\tpageSize,\n\t\temptyMessage,\n\t\tloading,\n\t\tclassName,\n\t};\n}\n\n/**\n * Adapt mdxui AuditLogTableProps to Tremor table props\n */\nexport function adaptAuditLogTableProps(props: AuditLogTableProps) {\n\tconst {\n\t\tlogs,\n\t\ttitle,\n\t\tsearchable,\n\t\tfilterByActor,\n\t\tfilterByAction,\n\t\tfilterByResource,\n\t\tshowDateRange,\n\t\tshowExport,\n\t\tpageSize,\n\t\tloading,\n\t\tclassName,\n\t} = props;\n\n\treturn {\n\t\tdata: logs,\n\t\ttitle,\n\t\tsearchable,\n\t\tfilterByActor,\n\t\tfilterByAction,\n\t\tfilterByResource,\n\t\tshowDateRange,\n\t\tshowExport,\n\t\tpageSize,\n\t\tloading,\n\t\tclassName,\n\t};\n}\n\n/**\n * Transform transaction data for TanStack Table column definitions\n */\nexport function createTransactionColumns(currency: string = \"USD\") {\n\treturn [\n\t\t{\n\t\t\taccessorKey: \"date\",\n\t\t\theader: \"Date\",\n\t\t\tcell: (info: { getValue: () => string }) =>\n\t\t\t\tnew Date(info.getValue()).toLocaleDateString(),\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"description\",\n\t\t\theader: \"Description\",\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"amount\",\n\t\t\theader: \"Amount\",\n\t\t\tcell: (info: {\n\t\t\t\tgetValue: () => number;\n\t\t\t\trow: { original: { type: string } };\n\t\t\t}) => {\n\t\t\t\tconst value = info.getValue();\n\t\t\t\tconst type = info.row.original.type;\n\t\t\t\tconst formatted = new Intl.NumberFormat(\"en-US\", {\n\t\t\t\t\tstyle: \"currency\",\n\t\t\t\t\tcurrency,\n\t\t\t\t}).format(Math.abs(value));\n\t\t\t\treturn type === \"debit\" ? `-${formatted}` : formatted;\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"status\",\n\t\t\theader: \"Status\",\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"category\",\n\t\t\theader: \"Category\",\n\t\t},\n\t];\n}\n\n/**\n * Transform audit log data for TanStack Table column definitions\n */\nexport function createAuditLogColumns() {\n\treturn [\n\t\t{\n\t\t\taccessorKey: \"timestamp\",\n\t\t\theader: \"Time\",\n\t\t\tcell: (info: { getValue: () => string }) =>\n\t\t\t\tnew Date(info.getValue()).toLocaleString(),\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"actor.name\",\n\t\t\theader: \"User\",\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"action\",\n\t\t\theader: \"Action\",\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"resource.type\",\n\t\t\theader: \"Resource\",\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"resource.name\",\n\t\t\theader: \"Name\",\n\t\t},\n\t];\n}\n"],"mappings":"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","names":["twMerge","jsx","jsxs","twMerge","jsx","jsxs","twMerge","jsx","jsxs","jsx","jsxs"]}

package/dist/insights/components/index.d.ts

@@ -0,0 +1,362 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WidgetSize, Trend, TransactionItem } from 'mdxui';
+
+/**
+ * AreaChart Props - Compatible with mdxui TremorAreaChartProps
+ * All properties with defaults are optional for consumers
+ */
+interface AreaChartProps {
+    /** Chart data array */
+    data: Record<string, unknown>[];
+    /** Data key for x-axis (index) */
+    index: string;
+    /** Data keys for y-axis values */
+    categories: string[];
+    /** Color for each category */
+    colors?: string[];
+    /** Function to format numeric values for display */
+    valueFormatter?: (value: number) => string;
+    /** Show only first/last x-axis labels */
+    startEndOnly?: boolean;
+    /** Display chart legend */
+    showLegend?: boolean;
+    /** Display grid lines */
+    showGridLines?: boolean;
+    /** Enable animation */
+    showAnimation?: boolean;
+    /** Stack areas */
+    stack?: boolean;
+    /** Curve type for the area line */
+    curveType?: "linear" | "monotone" | "step";
+    /** Connect data points across null values */
+    connectNulls?: boolean;
+    /** Y-axis label width */
+    yAxisWidth?: number;
+    /** Y-axis minimum */
+    minValue?: number;
+    /** Y-axis maximum */
+    maxValue?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * AreaChart - Tremor-style area chart adapter implementing mdxui TremorAreaChartProps
+ *
+ * Wraps Recharts AreaChart with mdxui-compliant props interface.
+ *
+ * @example
+ * ```tsx
+ * <AreaChart
+ *   data={[
+ *     { date: '2024-01', revenue: 100 },
+ *     { date: '2024-02', revenue: 150 },
+ *   ]}
+ *   index="date"
+ *   categories={['revenue']}
+ * />
+ * ```
+ */
+declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * BarChart Props - Compatible with mdxui TremorBarChartProps
+ * All properties with defaults are optional for consumers
+ */
+interface BarChartProps {
+    /** Chart data array */
+    data: Record<string, unknown>[];
+    /** Data key for x-axis (index) */
+    index: string;
+    /** Data keys for bar values */
+    categories: string[];
+    /** Colors for each category */
+    colors?: string[];
+    /** Function to format numeric values for display */
+    valueFormatter?: (value: number) => string;
+    /** Bar chart layout direction */
+    layout?: "vertical" | "horizontal";
+    /** Stack bars */
+    stack?: boolean;
+    /** Show as 100% stacked */
+    relative?: boolean;
+    /** Display chart legend */
+    showLegend?: boolean;
+    /** Display grid lines */
+    showGridLines?: boolean;
+    /** Enable animation */
+    showAnimation?: boolean;
+    /** Y-axis label width */
+    yAxisWidth?: number;
+    /** Gap between bar groups */
+    barCategoryGap?: string | number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * BarChart - Tremor-style bar chart adapter implementing mdxui TremorBarChartProps
+ *
+ * Wraps Recharts BarChart with mdxui-compliant props interface.
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={[
+ *     { category: 'A', value: 100 },
+ *     { category: 'B', value: 150 },
+ *   ]}
+ *   index="category"
+ *   categories={['value']}
+ * />
+ * ```
+ */
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+
+interface BarChartVariantProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Chart data */
+    data: Record<string, unknown>[];
+    /** X-axis data key */
+    index: string;
+    /** Categories (series) */
+    categories: string[];
+    /** Colors for each category */
+    colors?: string[];
+    /** Value formatter */
+    valueFormatter?: (value: number) => string;
+    /** X-axis value formatter */
+    xValueFormatter?: (value: string) => string;
+    /** Show X axis */
+    showXAxis?: boolean;
+    /** Show Y axis */
+    showYAxis?: boolean;
+    /** Show grid lines */
+    showGridLines?: boolean;
+    /** Y axis width */
+    yAxisWidth?: number;
+    /** Show tooltip */
+    showTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Auto min value */
+    autoMinValue?: boolean;
+    /** Min value */
+    minValue?: number;
+    /** Max value */
+    maxValue?: number;
+    /** Allow decimals */
+    allowDecimals?: boolean;
+    /** Bar category gap */
+    barCategoryGap?: string | number;
+    /** X axis label */
+    xAxisLabel?: string;
+    /** Y axis label */
+    yAxisLabel?: string;
+    /** Chart type */
+    type?: "default" | "stacked" | "percent";
+    /** Legend position */
+    legendPosition?: "left" | "center" | "right";
+    /** Layout direction */
+    layout?: "vertical" | "horizontal";
+    /** Value change handler */
+    onValueChange?: (value: Record<string, unknown> | null) => void;
+    /** Sync ID for multiple charts */
+    syncId?: string;
+}
+declare const BarChartVariant: React.ForwardRefExoticComponent<BarChartVariantProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DonutChart data segment
+ */
+interface DonutChartDataItem {
+    /** Category name */
+    name: string;
+    /** Numeric value */
+    value: number;
+    /** Segment color */
+    color?: string;
+    /** Index signature for Recharts compatibility */
+    [key: string]: string | number | undefined;
+}
+/**
+ * DonutChart Props - Compatible with mdxui DonutChartProps
+ * All properties with defaults are optional for consumers
+ */
+interface DonutChartProps {
+    /** Donut chart data segments */
+    data: DonutChartDataItem[];
+    /** Data key for category names */
+    category: string;
+    /** Data key for numeric values */
+    value: string;
+    /** Color palette for segments */
+    colors?: string[];
+    /** Chart display variant */
+    variant?: "donut" | "pie";
+    /** Center label text */
+    label?: string;
+    /** Display chart legend */
+    showLegend?: boolean;
+    /** Enable hover tooltips */
+    showTooltip?: boolean;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Function to format numeric values for display */
+    valueFormatter?: (value: number) => string;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * DonutChart - Tremor-style donut/pie chart adapter implementing mdxui DonutChartProps
+ *
+ * Wraps Recharts PieChart with mdxui-compliant props interface.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     { name: 'Category A', value: 40 },
+ *     { name: 'Category B', value: 60 },
+ *   ]}
+ *   category="name"
+ *   value="value"
+ * />
+ * ```
+ */
+declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Chart types supported by the TransactionChart
+ */
+type ChartType = "amount" | "count" | "category" | "merchant";
+interface ChartDataItem {
+    key: string;
+    value: number;
+}
+interface ChartConfig {
+    title: string;
+    tooltipContent: string;
+    valueFormatter: (value: number) => string;
+    layout?: "horizontal" | "vertical";
+    color: string;
+    xValueFormatter?: (value: string) => string;
+}
+interface TransactionChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Chart type */
+    type: ChartType;
+    /** Chart data */
+    data: ChartDataItem[];
+    /** Y axis width */
+    yAxisWidth?: number;
+    /** Show Y axis */
+    showYAxis?: boolean;
+    /** Title override */
+    title?: string;
+    /** Tooltip content override */
+    tooltipContent?: string;
+}
+/**
+ * TransactionChart - Insights template transaction chart component
+ *
+ * Displays transaction data in various chart formats with consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <TransactionChart
+ *   type="amount"
+ *   data={[
+ *     { key: '2024-01-01', value: 1000 },
+ *     { key: '2024-01-02', value: 1500 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const TransactionChart: React.ForwardRefExoticComponent<TransactionChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * KPICard Props - with proper optional defaults
+ *
+ * Note: We define this locally because Zod's z.infer makes fields with .default()
+ * required in the TypeScript type, but we want them optional with runtime defaults.
+ */
+interface KPICardProps {
+    /** Widget title */
+    title?: string;
+    /** Widget description/subtitle */
+    description?: string;
+    /** Responsive sizing configuration */
+    size?: WidgetSize;
+    /** Widget theme variant */
+    variant?: "default" | "outlined" | "elevated" | "ghost";
+    /** Show loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string;
+    /** Metric label */
+    label: string;
+    /** Current value */
+    value: string | number;
+    /** Previous value for comparison */
+    previousValue?: string | number;
+    /** Change percentage */
+    change?: number;
+    /** Trend direction */
+    trend?: Trend;
+    /** Value prefix (e.g., "$", "EUR") */
+    prefix?: string;
+    /** Value suffix (e.g., "%", "ms") */
+    suffix?: string;
+    /** Target value or goal */
+    target?: number;
+    /** Format type for value display */
+    format?: "number" | "currency" | "percent" | "duration" | "bytes";
+    /** Icon name */
+    icon?: string;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * KPICard - A Tremor-style KPI display card
+ *
+ * Renders a key performance indicator with label, value, optional trend,
+ * prefix/suffix formatting, and loading states.
+ */
+declare function KPICard({ label, value, previousValue, change, trend, prefix, suffix, target, format: _format, icon, title: _title, description: _description, size: _size, variant, loading, error, className, }: KPICardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TransactionsTableProps - Input props for TransactionsTable component
+ *
+ * This is the consumer-facing type where defaulted fields are optional.
+ */
+interface TransactionsTableProps {
+    /** Transaction data - required */
+    transactions: TransactionItem[];
+    /** Title */
+    title?: string;
+    /** Currency */
+    currency?: string;
+    /** Value formatter */
+    valueFormatter?: (value: number) => string;
+    /** Show category filter */
+    showCategoryFilter?: boolean;
+    /** Show date filter */
+    showDateFilter?: boolean;
+    /** Show export button */
+    showExport?: boolean;
+    /** Page size */
+    pageSize?: number;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * TransactionsTable - A paginated table displaying financial transactions
+ *
+ * Implements the mdxui TransactionsListProps interface with TanStack Table
+ * for sorting and pagination.
+ */
+declare function TransactionsTable(props: TransactionsTableProps): react_jsx_runtime.JSX.Element;
+
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, BarChartVariant, type BarChartVariantProps, type ChartConfig, type ChartDataItem, type ChartType, DonutChart, type DonutChartDataItem, type DonutChartProps, KPICard, type KPICardProps, TransactionChart, type TransactionChartProps, TransactionsTable, type TransactionsTableProps };