@lego-box/ui-kit 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,998 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    shimmer?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'elevated' | 'glass';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    wrapperClassName?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: 'default' | 'primary' | 'muted';
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
+interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    wrapperClassName?: string;
+}
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string | number;
+    label: string;
+    icon?: React.ReactNode;
+    trend?: {
+        value: string;
+        positive?: boolean;
+    };
+}
+/**
+ * StatsCard - Displays a statistic with an icon and optional trend indicator
+ *
+ * Design specs from Pencil:
+ * - White background with rounded corners (16px)
+ * - Large value (32px, bold)
+ * - Label below (14px, muted)
+ * - Icon in top-right with colored background
+ * - Optional trend indicator with green/red color
+ */
+declare const StatsCard: React.ForwardRefExoticComponent<StatsCardProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "outline" | "secondary" | "muted" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * Badge - Small status indicator component
+ *
+ * Used for:
+ * - User status (Active, Inactive, Pending)
+ * - Roles (Admin, Editor, Viewer, etc.)
+ * - Filter chips
+ * - Status indicators
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: React.ReactNode;
+}
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    value: string;
+    children: React.ReactNode;
+    /** Optional badge (number or node) - active tab shows blue badge, inactive shows grey */
+    badge?: React.ReactNode | number;
+    /** When true, tab cannot be selected */
+    disabled?: boolean;
+}
+/**
+ * Tabs - Tab navigation component
+ *
+ * Design specs from Pencil:
+ * - Container with gray background and rounded corners
+ * - Active tab has white background with shadow
+ * - Inactive tabs are transparent with hover state
+ * - Gap between tabs
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & {
+    selectedValue?: string;
+    onValueChange?: (value: string) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & {
+    selectedValue?: string;
+    onValueChange?: (value: string) => void;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    width?: string;
+    cell: (row: T) => React.ReactNode;
+}
+interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    keyExtractor: (row: T) => string;
+    selectable?: boolean;
+    selectedRows?: Set<string>;
+    onSelectRow?: (id: string, selected: boolean) => void;
+    onSelectAll?: (selected: boolean) => void;
+    /**
+     * Layout variant:
+     * - "card": Wraps table in bordered card (matches /migrations style). Use for standalone tables.
+     * - "inline": No wrapper. Use when table is inside Card or other container.
+     */
+    variant?: 'card' | 'inline';
+}
+/**
+ * DataTable - Flexible table component for displaying tabular data
+ *
+ * Consistent design across pages (User Management, Migrations, etc.):
+ * - Card variant: Bordered card wrapper with rounded corners
+ * - Header row with muted background
+ * - Row dividers (divide-y)
+ * - Hover states
+ */
+declare function DataTable<T>({ columns, data, keyExtractor, selectable, selectedRows, onSelectRow, onSelectAll, variant, className, ...props }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface GroupedTableColumn<T> {
+    key: string;
+    header: string;
+    /** Width: Tailwind class (e.g. 'w-32') or CSS value (e.g. '8rem') */
+    width?: string;
+    cell: (row: T) => React.ReactNode;
+}
+interface GroupedTableProps<T> {
+    /** Data to display */
+    data: T[];
+    /** Extract the group key from each row (e.g. perm => perm.collection, log => log.resource) */
+    groupBy: (row: T) => string;
+    /** Unique key for each row */
+    keyExtractor: (row: T) => string;
+    /** Column definitions for child rows */
+    columns: GroupedTableColumn<T>[];
+    /** Message when data is empty */
+    emptyMessage?: string;
+    /** Customize group header label. Default: "{groupKey} ({count} item(s))" */
+    groupLabel?: (groupKey: string, count: number) => string;
+    /** Whether to expand all groups by default */
+    expandByDefault?: boolean;
+}
+/**
+ * GroupedTable - Reusable table with expand/collapse grouping
+ *
+ * Use for data that should be grouped by a key (e.g. permissions by collection,
+ * audit logs by resource). Groups are expandable/collapsible.
+ *
+ * Same visual design as DataTable card variant.
+ */
+declare function GroupedTable<T>({ data, groupBy, keyExtractor, columns, emptyMessage, groupLabel, expandByDefault, }: GroupedTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    icon?: React.ReactNode;
+}
+/**
+ * SearchInput - Search input with icon
+ *
+ * Design specs from Pencil:
+ * - Gray background (muted)
+ * - Search icon on left
+ * - Rounded corners
+ * - Placeholder text
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    count?: number;
+}
+/**
+ * FilterChip - Chip button for filtering data
+ *
+ * Design specs from Pencil:
+ * - Rounded pill shape
+ * - Active state has gray background
+ * - Inactive state has white background with border
+ * - Optional count badge
+ */
+declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;
+
+type StatusType = 'applied' | 'pending' | 'failed' | 'success' | 'warning' | 'error' | 'info';
+interface StatusBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    status: StatusType;
+    label?: string;
+    showDot?: boolean;
+}
+/**
+ * StatusBadge - Displays status with colored badge and dot
+ *
+ * Design specs from Pencil:
+ * - Colored background matching status
+ * - Small colored dot on the left
+ * - Rounded corners
+ * - Text label
+ *
+ * Statuses:
+ * - applied/success: Green background with green dot
+ * - pending/warning: Amber/Yellow background with amber dot
+ * - failed/error: Red background with red dot
+ */
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    perPage: number;
+    onPageChange: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    pageSizeOptions?: number[];
+    showPageSizeSelector?: boolean;
+    /** Label for items, e.g. "users" for "Showing 1-5 of 248 users" */
+    itemsLabel?: string;
+}
+/**
+ * Reusable pagination component with page navigation and optional page size selector.
+ *
+ * @example
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={10}
+ *   totalItems={250}
+ *   perPage={25}
+ *   onPageChange={(page) => setPage(page)}
+ *   onPerPageChange={(size) => setPerPage(size)}
+ *   showPageSizeSelector={true}
+ *   pageSizeOptions={[10, 25, 50, 100]}
+ * />
+ */
+declare function Pagination({ currentPage, totalPages, totalItems, perPage, onPageChange, onPerPageChange, pageSizeOptions, showPageSizeSelector, itemsLabel, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    options: SelectOption[];
+    label?: string;
+}
+/**
+ * Select - Dropdown select component
+ *
+ * Design specs from Pencil:
+ * - White background (light mode) / Dark background (dark mode)
+ * - Border
+ * - Rounded corners
+ * - Label support
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface LogEntry {
+    text: string;
+    color?: string;
+    type?: 'info' | 'success' | 'error' | 'warning' | 'command';
+}
+interface ConsoleLogProps extends React.HTMLAttributes<HTMLDivElement> {
+    logs: LogEntry[];
+    title?: string;
+    onClear?: () => void;
+    onCopy?: () => void;
+}
+/**
+ * ConsoleLog - Terminal-style log display component
+ *
+ * Design specs from Pencil:
+ * - Dark background (slate-800/900)
+ * - Monospace font
+ * - Optional title and action buttons (Clear, Copy)
+ * - Color-coded log entries
+ */
+declare const ConsoleLog: React.ForwardRefExoticComponent<ConsoleLogProps & React.RefAttributes<HTMLDivElement>>;
+
+interface UserFormData {
+    name: string;
+    email: string;
+    role: string;
+    status: 'Active' | 'Inactive';
+    password?: string;
+    passwordConfirm?: string;
+}
+interface UserFormDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: UserFormData) => Promise<void>;
+    user?: {
+        id: string;
+        name: string;
+        email: string;
+        roleId?: string;
+        status?: 'Active' | 'Inactive';
+    } | null;
+    roles: Array<{
+        id: string;
+        name: string;
+    }>;
+    loading?: boolean;
+    existingEmails?: string[];
+}
+declare function UserFormDialog({ isOpen, onClose, onSubmit, user, roles, loading, existingEmails, }: UserFormDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface Permission {
+    id: string;
+    name: string;
+    collection: string;
+    action: string;
+    description?: string;
+}
+interface RoleFormData {
+    name: string;
+    description: string;
+    permissions: string[];
+}
+interface RoleFormDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: RoleFormData) => Promise<void>;
+    role?: {
+        id: string;
+        name: string;
+        description?: string;
+        permissions?: string[];
+    } | null;
+    permissions: Permission[];
+    loading?: boolean;
+    /** Loading state for permissions list (e.g. when fetching for role form) */
+    permissionsLoading?: boolean;
+    /** Permission names that are mandatory for every role. Auto-selected and cannot be unchecked. */
+    mandatoryPermissionNames?: readonly string[];
+}
+declare function RoleFormDialog({ isOpen, onClose, onSubmit, role, permissions, loading, permissionsLoading, mandatoryPermissionNames, }: RoleFormDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface UserForAssign {
+    id: string;
+    name: string;
+    email: string;
+    roleId?: string;
+    roleName?: string;
+    is_superuser?: boolean;
+}
+interface AssignUsersToRoleDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    role: {
+        id: string;
+        name: string;
+    } | null;
+    users: UserForAssign[];
+    onAssign: (userId: string) => Promise<void>;
+    loading?: boolean;
+    /** Loading state when fetching users */
+    usersLoading?: boolean;
+}
+declare function AssignUsersToRoleDialog({ isOpen, onClose, role, users, onAssign, loading, usersLoading, }: AssignUsersToRoleDialogProps): react_jsx_runtime.JSX.Element;
+
+interface PermissionFormData {
+    name: string;
+    collection: string;
+    action: string;
+    description: string;
+    resourceType: 'collection' | 'field' | 'custom';
+    resourceName: string;
+}
+interface PermissionFormDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: PermissionFormData) => Promise<void>;
+    permission?: {
+        id: string;
+        name: string;
+        collection: string;
+        action: string;
+        description?: string;
+        resourceType: 'collection' | 'field' | 'custom';
+        resourceName?: string;
+    } | null;
+    loading?: boolean;
+    /** Existing collection names for autocomplete suggestions */
+    existingCollections?: string[];
+}
+declare function PermissionFormDialog({ isOpen, onClose, onSubmit, permission, loading, existingCollections, }: PermissionFormDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface DeleteConfirmationDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+    title?: string;
+    description?: string;
+    itemName?: string;
+    loading?: boolean;
+}
+declare function DeleteConfirmationDialog({ isOpen, onClose, onConfirm, title, description, itemName, loading, }: DeleteConfirmationDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface ChangePasswordDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (password: string, passwordConfirm: string) => Promise<void>;
+    userName?: string;
+    loading?: boolean;
+}
+declare function ChangePasswordDialog({ isOpen, onClose, onSubmit, userName, loading, }: ChangePasswordDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface BulkActionToolbarProps {
+    selectedCount: number;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onDelete?: () => void;
+    onAssignRole?: () => void;
+    onClearSelection: () => void;
+}
+declare function BulkActionToolbar({ selectedCount, onActivate, onDeactivate, onDelete, onAssignRole, onClearSelection, }: BulkActionToolbarProps): react_jsx_runtime.JSX.Element | null;
+
+interface BulkConfirmationDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    description?: string;
+    itemCount: number;
+    actionType: 'delete' | 'activate' | 'deactivate' | 'assign-role';
+    loading?: boolean;
+    affectedItems?: string[];
+}
+declare function BulkConfirmationDialog({ isOpen, onClose, onConfirm, title, description, itemCount, actionType, loading, affectedItems, }: BulkConfirmationDialogProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * CanGuard - Renders children only when allowed. Use for hiding menus/items.
+ */
+interface CanGuardProps {
+    /** Whether the action is allowed */
+    allowed: boolean;
+    /** Content to render when allowed */
+    children: React.ReactNode;
+    /** Optional fallback when not allowed (default: null) */
+    fallback?: React.ReactNode;
+}
+declare function CanGuard({ allowed, children, fallback }: CanGuardProps): react_jsx_runtime.JSX.Element;
+/**
+ * CanDisable - Disables children when not allowed and shows tooltip on hover.
+ * Use for tabs, buttons, and actions that should be disabled (not hidden) when lacking permission.
+ * Forwards all additional props (e.g. selectedValue, onValueChange from TabsList) to the child.
+ */
+interface CanDisableProps {
+    /** Whether the action is allowed */
+    allowed: boolean;
+    /** Content to render (typically Button, TabsTrigger, or other interactive element) */
+    children: React.ReactNode;
+    /** Tooltip message when disabled (default: "You do not have access") */
+    disabledTooltip?: string;
+}
+declare function CanDisable({ allowed, children, disabledTooltip, ...rest }: CanDisableProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Content shown on hover */
+    content: React.ReactNode;
+    /** Optional side for tooltip placement */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    children: React.ReactNode;
+}
+/** Default message when user lacks permission */
+declare const NO_ACCESS_MESSAGE = "You do not have access";
+/**
+ * Tooltip - Shows content on hover. Uses CSS for positioning.
+ * Wraps children in a span to ensure hover works even when child is disabled.
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+    variant: 'bug' | 'feature' | 'inquiry';
+    onClick: () => void;
+}
+declare function QuickActionCard({ title, description, icon, variant, onClick, className, ...props }: QuickActionCardProps): react_jsx_runtime.JSX.Element;
+
+interface TicketStatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string | number;
+    label: string;
+    icon: React.ReactNode;
+    iconBgColor: string;
+    iconColor: string;
+    badge?: {
+        icon: React.ReactNode;
+        text: string;
+        bgColor: string;
+        textColor: string;
+    };
+}
+declare function TicketStatsCard({ value, label, icon, iconBgColor, iconColor, badge, className, ...props }: TicketStatsCardProps): react_jsx_runtime.JSX.Element;
+
+interface TicketFormData {
+    title: string;
+    description: string;
+    category: 'bug' | 'feature' | 'inquiry';
+    priority: 'low' | 'medium' | 'high';
+    status: 'open' | 'in_progress' | 'resolved' | 'closed';
+}
+interface TicketFormDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: TicketFormData) => Promise<void>;
+    ticket?: {
+        id: string;
+        title: string;
+        description: string;
+        category: string;
+        priority: string;
+        status: string;
+    } | null;
+    loading?: boolean;
+    initialCategory?: 'bug' | 'feature' | 'inquiry';
+}
+declare function TicketFormDialog({ isOpen, onClose, onSubmit, ticket, loading, initialCategory, }: TicketFormDialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface HealthStatusCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Overall health status
+     */
+    status: 'healthy' | 'degraded' | 'unhealthy' | 'checking';
+    /**
+     * Health percentage (0-100)
+     */
+    percentage?: number;
+    /**
+     * Uptime information
+     */
+    uptime?: {
+        days: number;
+        hours: number;
+        minutes: number;
+    };
+    /**
+     * Last check timestamp
+     */
+    lastCheck?: string;
+}
+/**
+ * HealthStatusCard - Displays overall system health with a circular progress indicator
+ *
+ * Shows overall health percentage, uptime stats, and service count
+ */
+declare const HealthStatusCard: React.ForwardRefExoticComponent<HealthStatusCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ServiceStatusCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Service name
+     */
+    name: string;
+    /**
+     * Service description
+     */
+    description?: string;
+    /**
+     * Current status of the service
+     */
+    status: 'operational' | 'degraded' | 'down' | 'checking';
+    /**
+     * Response time in milliseconds
+     */
+    responseTime?: number;
+    /**
+     * Service icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional details about the service
+     */
+    details?: string;
+    /**
+     * Last checked timestamp
+     */
+    lastChecked?: string;
+}
+/**
+ * ServiceStatusCard - Displays the status of an individual service
+ *
+ * Shows service name, status badge, response time, and additional details
+ */
+declare const ServiceStatusCard: React.ForwardRefExoticComponent<ServiceStatusCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TopBarNavItem {
+    id: string;
+    label: string;
+    href: string;
+}
+interface TopBarMoreItem {
+    id: string;
+    label: string;
+    href: string;
+}
+interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo configuration
+     */
+    logo?: {
+        icon?: React.ReactNode;
+        text?: string;
+        href?: string;
+    };
+    /**
+     * Navigation items for the topbar center menu
+     */
+    navItems?: TopBarNavItem[];
+    /**
+     * Additional items for the "More" dropdown
+     */
+    moreItems?: TopBarMoreItem[];
+    /**
+     * User info for the profile section
+     */
+    user?: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+        role?: string;
+    };
+    /**
+     * Currently active navigation item ID
+     */
+    activeItemId?: string | null;
+    /**
+     * Callback when active item changes
+     */
+    onActiveItemChange?: (itemId: string | null) => void;
+    /**
+     * Callback for navigation
+     */
+    onNavigate?: (href: string) => void;
+    /**
+     * Callback for mobile menu toggle
+     */
+    onMobileMenuToggle?: () => void;
+    /**
+     * Callback for logout
+     */
+    onLogout?: () => void;
+    /**
+     * Callback when Profile menu item is clicked
+     */
+    onProfileClick?: () => void;
+    /**
+     * Callback when Settings menu item is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback when Help & Support menu item is clicked
+     */
+    onHelpSupportClick?: () => void;
+}
+/**
+ * TopBar - Global topbar component
+ *
+ * Props-driven component that accepts logo, navigation items, user info, and more
+ * via props for maximum reusability
+ */
+declare const TopBar: React.ForwardRefExoticComponent<TopBarProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MenuItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    children?: MenuItem[];
+}
+interface SideNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Menu items to display in the sidebar
+     */
+    menuItems?: MenuItem[];
+    /**
+     * Header title displayed at the top of the sidebar
+     */
+    headerTitle?: string;
+    /**
+     * Support section configuration
+     */
+    supportSection?: {
+        title: string;
+        subtitle: string;
+        buttonText: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    } | null;
+    /**
+     * Callback for navigation
+     */
+    onNavigate?: (href: string) => void;
+    /**
+     * Callback when sidebar collapse state changes
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Initially expanded section IDs
+     */
+    defaultExpandedSections?: string[];
+}
+/**
+ * SideNav - Sidebar navigation component
+ *
+ * Props-driven component that accepts menu items, header title, and support section
+ * via props for maximum reusability
+ */
+declare const SideNav: React.ForwardRefExoticComponent<SideNavProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AdminShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Navigation items for the topbar center menu
+     */
+    topBarNavItems?: TopBarNavItem[];
+    /**
+     * Additional items for the topbar "More" dropdown
+     */
+    topBarMoreItems?: TopBarMoreItem[];
+    /**
+     * Menu items for the sidebar
+     */
+    sideNavMenuItems?: MenuItem[];
+    /**
+     * Sidebar header title
+     */
+    sideNavHeaderTitle?: string;
+    /**
+     * Sidebar support section configuration
+     */
+    sideNavSupportSection?: {
+        title: string;
+        subtitle: string;
+        buttonText: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    } | null;
+    /**
+     * Logo configuration
+     */
+    logo?: {
+        icon?: React.ReactNode;
+        text?: string;
+        href?: string;
+    };
+    /**
+     * User info for the profile section
+     */
+    user?: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+        role?: string;
+    };
+    /**
+     * Callback for navigation
+     */
+    onNavigate?: (href: string) => void;
+    /**
+     * Callback for logout
+     */
+    onLogout?: () => void;
+    /**
+     * Callback when Profile menu item is clicked
+     */
+    onProfileClick?: () => void;
+    /**
+     * Callback when Settings menu item is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback when Help & Support menu item is clicked
+     */
+    onHelpSupportClick?: () => void;
+}
+/**
+ * AdminShell - Main layout wrapper with fixed positioning.
+ *
+ * Layout Structure (matching Pencil design exactly):
+ * - Topbar: Fixed at top, full width, 68px height, z-50
+ * - Sidebar: Fixed below topbar, 260px width (72px collapsed), full height minus topbar
+ * - Content: Absolute positioned with left offset for sidebar, top offset for topbar
+ */
+declare const AdminShell: React.ForwardRefExoticComponent<AdminShellProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ThemeToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * ThemeToggle - Toggle between light and dark themes.
+ * 40px square button with icon.
+ * Persists theme preference to localStorage.
+ */
+declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface ProfileDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    user?: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+    };
+    onLogout?: () => void;
+    onProfileClick?: () => void;
+    onSettingsClick?: () => void;
+    onHelpSupportClick?: () => void;
+}
+/**
+ * ProfileDropdown - User profile dropdown menu.
+ * Shows avatar/name and dropdown with options.
+ */
+declare const ProfileDropdown: React.ForwardRefExoticComponent<ProfileDropdownProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    /** Optional className for the dialog container (e.g. max-w-2xl for wider modals) */
+    className?: string;
+}
+interface DialogTriggerProps {
+    children: React.ReactNode;
+    onClick: () => void;
+}
+declare const Dialog: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const DialogTrigger: React.FC<DialogTriggerProps>;
+declare const DialogContent: React.FC<DialogProps>;
+declare const DialogHeader: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const DialogFooter: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const DialogTitle: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const DialogDescription: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+
+interface WelcomeBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    userName?: string;
+    subtitle?: string;
+    badge?: string;
+}
+/**
+ * WelcomeBanner - Hero section with user personalization
+ *
+ * Features gradient background, backdrop blur, and theme-aware styling
+ */
+declare const WelcomeBanner: React.ForwardRefExoticComponent<WelcomeBannerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TechStackCardProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    name: string;
+    description: string;
+    icon: React.ReactNode;
+}
+/**
+ * TechStackCard - Technology stack item with external link
+ *
+ * Features hover effects, external link indicator, and theme-aware styling
+ */
+declare const TechStackCard: React.ForwardRefExoticComponent<TechStackCardProps & React.RefAttributes<HTMLAnchorElement>>;
+
+interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    iconClassName?: string;
+    variant?: 'default' | 'primary' | 'secondary';
+    children?: React.ReactNode;
+}
+/**
+ * FeatureCard - Reusable card for displaying features/info
+ *
+ * Supports different color variants and theme-aware styling
+ */
+declare const FeatureCard: React.ForwardRefExoticComponent<FeatureCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the loading spinner
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Message to display below the spinner
+     */
+    message?: string;
+    /**
+     * Whether to show the full page overlay
+     */
+    fullPage?: boolean;
+}
+/**
+ * Loading - Professional loading component with animated spinner
+ *
+ * Features gradient background matching the Lego Box design system,
+ * smooth animations, and theme-aware styling
+ */
+declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>>;
+
+interface NotFoundProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title text for the 404 page
+     */
+    title?: string;
+    /**
+     * Description message
+     */
+    description?: string;
+    /**
+     * Callback when home button is clicked
+     */
+    onNavigateHome?: () => void;
+    /**
+     * Home button text
+     */
+    homeButtonText?: string;
+}
+/**
+ * NotFound - Professional 404 error page component
+ *
+ * Features animated 404 display, gradient styling matching Lego Box design system,
+ * glassmorphism effects, and clear navigation options
+ */
+declare const NotFound: React.ForwardRefExoticComponent<NotFoundProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AccessDeniedProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title text for the access denied page
+     */
+    title?: string;
+    /**
+     * Description message
+     */
+    description?: string;
+    /**
+     * Callback when home button is clicked
+     */
+    onNavigateHome?: () => void;
+    /**
+     * Home button text
+     */
+    homeButtonText?: string;
+}
+/**
+ * AccessDenied - Professional access denied / 403 error page component
+ *
+ * Matches the NotFound design with gradient styling, Lego Box branding,
+ * and clear navigation options
+ */
+declare const AccessDenied: React.ForwardRefExoticComponent<AccessDeniedProps & React.RefAttributes<HTMLDivElement>>;
+
+export { AccessDenied, type AccessDeniedProps, AdminShell, type AdminShellProps, AssignUsersToRoleDialog, type AssignUsersToRoleDialogProps, Badge, type BadgeProps, BulkActionToolbar, type BulkActionToolbarProps, BulkConfirmationDialog, type BulkConfirmationDialogProps, Button, type ButtonProps, CanDisable, type CanDisableProps, CanGuard, type CanGuardProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, ChangePasswordDialog, type ChangePasswordDialogProps, Checkbox, type CheckboxProps, ConsoleLog, type ConsoleLogProps, DataTable, type DataTableColumn, type DataTableProps, DeleteConfirmationDialog, type DeleteConfirmationDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, DialogTrigger, FeatureCard, type FeatureCardProps, FilterChip, type FilterChipProps, GroupedTable, type GroupedTableColumn, type GroupedTableProps, HealthStatusCard, type HealthStatusCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Loading, type LoadingProps, type LogEntry, type MenuItem, NO_ACCESS_MESSAGE, NotFound, type NotFoundProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type Permission, type PermissionFormData, PermissionFormDialog, type PermissionFormDialogProps, ProfileDropdown, type ProfileDropdownProps, QuickActionCard, type QuickActionCardProps, type RoleFormData, RoleFormDialog, type RoleFormDialogProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, ServiceStatusCard, type ServiceStatusCardProps, SideNav, type SideNavProps, StatsCard, type StatsCardProps, StatusBadge, type StatusBadgeProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TechStackCard, type TechStackCardProps, ThemeToggle, type ThemeToggleProps, type TicketFormData, TicketFormDialog, type TicketFormDialogProps, TicketStatsCard, type TicketStatsCardProps, Tooltip, type TooltipProps, TopBar, type TopBarMoreItem, type TopBarNavItem, type TopBarProps, type UserForAssign, type UserFormData, UserFormDialog, type UserFormDialogProps, WelcomeBanner, type WelcomeBannerProps, badgeVariants, cn };