@mdxui/tremor 6.0.0

package/dist/dashboard/index.d.ts

@@ -0,0 +1,275 @@
+import { Shell, ShellSidebarLeft, ShellTopNav, Sidebar } from './components/index.js';
+export { MobileSidebar, MobileSidebarProps, ShellNavItem, ShellProps, ShellSidebarLeftProps, ShellTopNavProps, ShellUser, ShellVariant, ShellWorkspace, SidebarNavItem, SidebarProps, SidebarShortcutItem, SidebarUser, SidebarWorkspace, UserProfile, WorkspaceSwitcher } from './components/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppProps, DashboardProps, AppHeaderProps, SettingsProps } from 'mdxui';
+import { ReactNode } from 'react';
+import { ClassNameValue } from 'tailwind-merge';
+
+interface DashboardAppProps extends AppProps {
+    /** App display name */
+    name: string;
+    /** Child content */
+    children?: any;
+    /** Authentication configuration (inherited from AppProps) */
+    auth?: AppProps["auth"];
+}
+/**
+ * DashboardApp - Root wrapper component for the Dashboard template
+ *
+ * Provides the root application wrapper with providers and theme setup.
+ * In the Dashboard template, this wraps the entire application.
+ *
+ * @example
+ * ```tsx
+ * <DashboardApp name="My SaaS">
+ *   <DashboardShell>
+ *     <Dashboard />
+ *   </DashboardShell>
+ * </DashboardApp>
+ * ```
+ */
+declare function DashboardApp({ name, children }: DashboardAppProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardViewProps extends DashboardProps {
+    /** Dashboard title */
+    title?: string;
+    /** Optional description text */
+    description?: string;
+    /** Metrics to display */
+    metrics?: Array<{
+        label: string;
+        value: string | number;
+        change?: number;
+        trend?: "up" | "down" | "neutral";
+    }>;
+    /** Action buttons or controls to render on the right */
+    actions?: ReactNode;
+    /** Main content area */
+    children?: any;
+    /** Additional className for the container */
+    className?: string;
+}
+/**
+ * DashboardView - Main dashboard view component for the Dashboard template
+ *
+ * Provides a consistent layout structure for dashboard pages:
+ * - Title and description header
+ * - Optional metrics bar
+ * - Optional action buttons area
+ * - Divider
+ * - Main content area
+ *
+ * @example
+ * ```tsx
+ * <DashboardView
+ *   title="Analytics Dashboard"
+ *   description="Real-time monitoring of key metrics"
+ *   metrics={[
+ *     { label: 'Revenue', value: '$12,345', change: 12, trend: 'up' },
+ *     { label: 'Users', value: '1,234', change: -5, trend: 'down' },
+ *   ]}
+ *   actions={<Button>Export</Button>}
+ * >
+ *   <Charts />
+ *   <DataTable />
+ * </DashboardView>
+ * ```
+ */
+declare function DashboardView({ title, description, metrics, actions, children, className, }: DashboardViewProps): react_jsx_runtime.JSX.Element;
+
+interface Breadcrumb {
+    label: string;
+    href?: string;
+}
+interface DashboardHeaderProps extends Omit<AppHeaderProps, "showSearch" | "showNotifications"> {
+    /** Current user */
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    /** Show search */
+    showSearch?: boolean;
+    /** Show notifications */
+    showNotifications?: boolean;
+    /** Breadcrumbs */
+    breadcrumbs?: Breadcrumb[];
+    /** Logo component */
+    logo?: ReactNode;
+    /** Notifications component */
+    notifications?: ReactNode;
+    /** User profile component */
+    userProfile?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * DashboardHeader - Top header bar for the Dashboard template
+ *
+ * Provides a header bar with logo, user profile, and notifications.
+ * This is typically used inside the Shell but can be used standalone.
+ *
+ * @example
+ * ```tsx
+ * <DashboardHeader
+ *   user={{ name: 'John Doe', email: 'john@example.com.ai' }}
+ *   showSearch={true}
+ *   showNotifications={true}
+ * />
+ * ```
+ */
+declare function DashboardHeader({ user, showSearch, showNotifications, breadcrumbs, logo, notifications, userProfile, className, }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * User information for pre-filling forms
+ */
+interface SettingsUser {
+    name?: string;
+    email?: string;
+    avatar?: string;
+}
+/**
+ * Extended Settings props with user information
+ */
+interface DashboardSettingsProps extends Partial<SettingsProps> {
+    /** User info for pre-filling form fields */
+    user?: SettingsUser;
+    /** Children to render inside the settings page */
+    children?: ReactNode;
+}
+/**
+ * Settings Page Component
+ *
+ * A comprehensive settings page with profile, notifications, security,
+ * and account sections. Implements the SettingsProps interface from mdxui.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Settings />
+ *
+ * // With pre-filled user data
+ * <Settings user={{ name: 'John', email: 'john@example.com.ai' }} />
+ *
+ * // With specific sections
+ * <Settings sections={['profile', 'security']} />
+ * ```
+ */
+declare function Settings({ sections, user, children, }: DashboardSettingsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Dashboard Template Utilities
+ *
+ * Shared utility functions and style constants for the dashboard template.
+ */
+
+/**
+ * Merge class names with Tailwind CSS class conflict resolution
+ */
+declare function cx(...args: ClassNameValue[]): string;
+/**
+ * Focus input ring styles (for form inputs)
+ */
+declare const focusInput: string;
+/**
+ * Focus ring styles (for buttons and interactive elements)
+ */
+declare const focusRing: string;
+
+/**
+ * Dashboard Template - General SaaS Dashboard
+ *
+ * Implements AppComponents interface for general-purpose SaaS dashboards.
+ * Based on Tremor dashboard template patterns.
+ *
+ * @example
+ * ```tsx
+ * import { AppComponents, ShellSidebarLeft, Sidebar, Settings } from '@mdxui/tremor/dashboard'
+ *
+ * // Use AppComponents interface
+ * const { App, Shell, Sidebar, Header, Dashboard, Settings } = AppComponents
+ *
+ * // Or use variant exports directly
+ * <ShellSidebarLeft sidebar={<Sidebar {...sidebarProps} />}>
+ *   <Settings sections={['profile', 'security']} />
+ * </ShellSidebarLeft>
+ * ```
+ *
+ * @example Using with MDX
+ * ```tsx
+ * import { AppComponents } from '@mdxui/tremor/dashboard'
+ *
+ * <MDXProvider components={AppComponents}>
+ *   <App>
+ *     <Shell>
+ *       <Dashboard title="Analytics">
+ *         {content}
+ *       </Dashboard>
+ *     </Shell>
+ *   </App>
+ * </MDXProvider>
+ * ```
+ */
+
+/**
+ * Legacy components object (deprecated - use AppComponents instead)
+ *
+ * @deprecated Use AppComponents for conformance with mdxui interface
+ */
+declare const components: {
+    readonly Shell: typeof Shell;
+    readonly ShellSidebarLeft: typeof ShellSidebarLeft;
+    readonly ShellTopNav: typeof ShellTopNav;
+    readonly Sidebar: typeof Sidebar;
+    readonly Settings: typeof Settings;
+};
+type DashboardComponents = typeof components;
+/**
+ * AppComponents implementation for the Dashboard template.
+ *
+ * This object provides all required components for the mdxui AppComponents interface.
+ * Use this when you need a complete set of components for a Dashboard-style application.
+ *
+ * The Dashboard template provides:
+ * - Flexible shell layouts (sidebar-left, top-nav variants)
+ * - Navigation sidebar with workspace switcher and user profile
+ * - Header bar with search, notifications, and user profile
+ * - Dashboard page layout with metrics and content areas
+ * - Settings page with multiple sections
+ *
+ * @example
+ * ```tsx
+ * import { AppComponents } from '@mdxui/tremor/dashboard'
+ *
+ * // Use with mdxui
+ * <MDXProvider components={AppComponents}>
+ *   <App>
+ *     <Shell>
+ *       <Dashboard title="Analytics">
+ *         {content}
+ *       </Dashboard>
+ *     </Shell>
+ *   </App>
+ * </MDXProvider>
+ * ```
+ */
+declare const AppComponents: {
+    /** Root application wrapper */
+    readonly App: typeof DashboardApp;
+    /** Flexible shell layout */
+    readonly Shell: typeof Shell;
+    /** Navigation sidebar */
+    readonly Sidebar: typeof Sidebar;
+    /** Header bar component */
+    readonly Header: typeof DashboardHeader;
+    /** Dashboard page layout */
+    readonly Dashboard: typeof DashboardView;
+    /** Settings page layout */
+    readonly Settings: typeof Settings;
+    /** Sidebar-left shell variant */
+    readonly ShellSidebarLeft: typeof ShellSidebarLeft;
+    /** Top-nav shell variant */
+    readonly ShellTopNav: typeof ShellTopNav;
+};
+
+export { AppComponents, type Breadcrumb, DashboardApp, type DashboardAppProps, type DashboardComponents, DashboardHeader, type DashboardHeaderProps, type DashboardSettingsProps, DashboardView, type DashboardViewProps, Settings, Shell, ShellSidebarLeft, ShellTopNav, Sidebar, components, cx, focusInput, focusRing };