@specscreen/backoffice-core 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,665 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ComponentType, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ColumnDef } from '@tanstack/react-table';
+import { ClassValue } from 'clsx';
+
+interface User {
+    id: string;
+    email: string;
+    name?: string;
+    roles?: string[];
+    permissions?: string[];
+}
+interface AuthProvider {
+    /**
+     * Authenticate the user with the given credentials.
+     * Should throw or reject on failure.
+     */
+    login(params: {
+        email: string;
+        password: string;
+    }): Promise<void>;
+    /** Terminate the current session. */
+    logout(): Promise<void>;
+    /**
+     * Verify whether the current session is still valid.
+     * Return true if authenticated, false otherwise.
+     * Should NOT throw — return false on any error.
+     */
+    checkAuth(): Promise<boolean>;
+    /**
+     * Retrieve the current authenticated user profile including roles/permissions.
+     * Return null if not authenticated or user cannot be fetched.
+     */
+    getUser(): Promise<User | null>;
+}
+interface AuthState {
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    user: User | null;
+    error: string | null;
+}
+
+interface ResourceMeta {
+    /**
+     * Roles required to access this resource.
+     * If set, the user must have at least one of these roles.
+     */
+    requiredRoles?: string[];
+    /**
+     * Permissions required to access this resource.
+     * If set, the user must have ALL of these permissions.
+     */
+    requiredPermissions?: string[];
+    /**
+     * If true (default), hide this resource from navigation when the user lacks access.
+     * If false, show it but disable/restrict it.
+     */
+    hideIfUnauthorized?: boolean;
+}
+interface Resource {
+    /** Unique identifier for the resource (e.g. "users", "projects") */
+    name: string;
+    /** Human-readable display label shown in the sidebar */
+    label: string;
+    /** Route path (e.g. "/users", "/projects") */
+    path: string;
+    /** Lucide icon name or a React component */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Component rendered for the list/index view */
+    list?: ComponentType;
+    /** Component rendered for the create view */
+    create?: ComponentType;
+    /** Component rendered for the edit view */
+    edit?: ComponentType;
+    /** Component rendered for the show/detail view */
+    show?: ComponentType;
+    /** Access control and display metadata */
+    meta?: ResourceMeta;
+}
+interface SidebarGroup {
+    /** Group label (e.g. "Platform", "Documents") */
+    label: string;
+    resources: Resource[];
+}
+interface BackofficeConfig {
+    /**
+     * Application name shown in the sidebar header.
+     */
+    appName: string;
+    /**
+     * Optional company name shown in the sidebar header.
+     * When omitted, `appName` is used.
+     */
+    companyName?: string;
+    /**
+     * Optional logo component or URL shown next to the app name.
+     */
+    logo?: ComponentType<{
+        className?: string;
+    }> | string;
+    /**
+     * Flat list of resources OR grouped sidebar resources.
+     */
+    resources?: Resource[];
+    /**
+     * Grouped sidebar navigation. Takes precedence over `resources` for sidebar.
+     */
+    sidebarGroups?: SidebarGroup[];
+    /**
+     * Bottom-of-sidebar utility links (e.g. Settings, Analytics, Go to website).
+     */
+    sidebarFooterLinks?: Array<{
+        label: string;
+        path: string;
+        icon?: ComponentType<{
+            className?: string;
+        }>;
+    }>;
+    /**
+     * Optional dedicated external website link shown at the bottom of the sidebar.
+     */
+    goToWebsite?: {
+        /** Destination URL, e.g. https://example.com */
+        url: string;
+        /** Label in the sidebar. Default: "Go to website" */
+        label?: string;
+        /** Optional icon component shown before the label */
+        icon?: ComponentType<{
+            className?: string;
+        }>;
+        /** Link target. Default: "_blank" */
+        target?: "_self" | "_blank";
+    };
+    /**
+     * Redirect path after successful login. Default: "/" or first accessible resource.
+     */
+    loginRedirect?: string;
+    /**
+     * Redirect path after logout. Default: "/login".
+     */
+    logoutRedirect?: string;
+    /**
+     * Children rendered inside the main content area.
+     * Used when the consumer manages routing themselves (e.g. Next.js App Router).
+     */
+    children?: ReactNode;
+}
+interface DataProvider {
+    /** Fetch a paginated list of records for a resource */
+    getList(resource: string, params?: GetListParams): Promise<GetListResult>;
+    /** Fetch a single record by ID */
+    getOne(resource: string, id: string | number): Promise<Record<string, unknown>>;
+    /** Create a new record */
+    create(resource: string, data: Record<string, unknown>): Promise<Record<string, unknown>>;
+    /** Update an existing record */
+    update(resource: string, id: string | number, data: Record<string, unknown>): Promise<Record<string, unknown>>;
+    /** Delete a record */
+    delete(resource: string, id: string | number): Promise<void>;
+}
+interface GetListParams {
+    page?: number;
+    perPage?: number;
+    sort?: {
+        field: string;
+        order: "asc" | "desc";
+    };
+    filter?: Record<string, unknown>;
+}
+interface GetListResult {
+    data: Record<string, unknown>[];
+    total: number;
+}
+
+interface NavLinkProps {
+    href: string;
+    children: React__default.ReactNode;
+    className?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+/** Render adapter consumed by the sidebar. Defaults to a plain anchor element. */
+type NavLinkComponent = React__default.ComponentType<NavLinkProps>;
+interface SidebarProps {
+    config: BackofficeConfig;
+    /** Current active path (used to highlight the active item) */
+    currentPath?: string;
+    /** Custom NavLink component for framework-specific routing (e.g. Next.js Link) */
+    NavLink?: NavLinkComponent;
+    /** Called when the user clicks their profile area at the bottom */
+    onUserMenuClick?: () => void;
+    /** Called when the user clicks the logout option */
+    onLogout?: () => void;
+}
+declare function Sidebar({ config, currentPath, NavLink, onLogout, }: SidebarProps): react_jsx_runtime.JSX.Element;
+interface SidebarToggleProps {
+    collapsed: boolean;
+    onToggle: () => void;
+}
+declare function SidebarToggle({ collapsed, onToggle }: SidebarToggleProps): react_jsx_runtime.JSX.Element;
+
+interface LoginPageProps {
+    /** Application name shown as the heading. Default: "backoffice" */
+    appName?: string;
+    /** Logo element shown above the title */
+    logo?: React__default.ReactNode;
+    /** Called after a successful login (e.g. for router redirect) */
+    onLoginSuccess?: () => void;
+    /** Optional "Forgot password?" click handler */
+    onForgotPassword?: () => void;
+    /** Custom subtitle / hint shown below the heading. Overrides the default description. */
+    description?: React__default.ReactNode;
+}
+/**
+ * Full-page login form matching the Figma design.
+ * Delegates credential validation to the configured AuthProvider.
+ */
+declare function LoginPage({ appName, logo, onLoginSuccess, onForgotPassword, description, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
+interface BackofficeAppProps {
+    /** Global configuration: app name, resources, sidebar groups, etc. */
+    config: BackofficeConfig;
+    /** Auth backend adapter — login, logout, checkAuth, getUser */
+    authProvider: AuthProvider;
+    /**
+     * Data backend adapter — getList, getOne, create, update, delete.
+     * Optional: only needed when using built-in data-aware components.
+     */
+    dataProvider?: DataProvider;
+    /**
+     * Custom NavLink component for framework-specific routing.
+     *
+     * @example
+     * // Next.js App Router
+     * import Link from "next/link"
+     * const NavLink = ({ href, children, className }) => (
+     *   <Link href={href} className={className}>{children}</Link>
+     * )
+     */
+    NavLink?: NavLinkComponent;
+    /**
+     * Current path used to highlight the active sidebar item.
+     * In Next.js: use `usePathname()` from "next/navigation".
+     */
+    currentPath?: string;
+    /**
+     * Props forwarded to the default LoginPage.
+     * Ignored when `renderLogin` is provided.
+     */
+    loginPageProps?: Omit<LoginPageProps, "onLoginSuccess">;
+    /**
+     * Render a completely custom login page instead of the default.
+     * The custom component MUST call the `login` method from `useAuth()`.
+     */
+    renderLogin?: () => React__default.ReactNode;
+    /**
+     * Render a custom loading screen shown during the auth boot phase.
+     */
+    renderLoading?: () => React__default.ReactNode;
+    /**
+     * Label for the primary action button in the top-right of the header.
+     */
+    headerActionLabel?: string;
+    /** Callback for the primary action button */
+    onHeaderAction?: () => void;
+    /**
+     * Called after a successful login (e.g. router.push to the default resource).
+     */
+    onLoginSuccess?: () => void;
+    /**
+     * Page content — your routes/pages rendered inside the main area.
+     * In Next.js App Router, pass `{children}` from your layout.
+     */
+    children?: React__default.ReactNode;
+}
+/**
+ * Root component of the backoffice framework.
+ *
+ * Sets up:
+ * - AuthContext (boot flow: checkAuth → getUser → store state)
+ * - AuthGuard (shows LoginPage when unauthenticated)
+ * - AppShell (sidebar + header + main content area)
+ *
+ * @example
+ * // app/layout.tsx (Next.js App Router)
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <BackofficeApp
+ *       config={config}
+ *       authProvider={authProvider}
+ *       currentPath={usePathname()}
+ *       NavLink={NextNavLink}
+ *     >
+ *       {children}
+ *     </BackofficeApp>
+ *   )
+ * }
+ */
+declare function BackofficeApp({ config, authProvider, NavLink, currentPath, loginPageProps, renderLogin, renderLoading, headerActionLabel, onHeaderAction, onLoginSuccess, children, }: BackofficeAppProps): react_jsx_runtime.JSX.Element;
+
+interface UseAuthReturn extends AuthState {
+    login(params: {
+        email: string;
+        password: string;
+    }): Promise<void>;
+    logout(): Promise<void>;
+    refreshUser(): Promise<void>;
+}
+/**
+ * Access the current authentication state and login/logout actions.
+ *
+ * @example
+ * const { isAuthenticated, user, login, logout } = useAuth()
+ */
+declare function useAuth(): UseAuthReturn;
+
+interface UsePermissionsReturn {
+    /** All roles assigned to the current user */
+    roles: string[];
+    /** All permissions assigned to the current user */
+    permissions: string[];
+    /**
+     * Returns true if the user has the specified permission.
+     * Always returns false when the user is not authenticated.
+     *
+     * @example
+     * can("users.delete") // true | false
+     */
+    can(permission: string): boolean;
+    /**
+     * Returns true if the user has ANY of the specified permissions.
+     *
+     * @example
+     * canAny(["posts.edit", "posts.create"])
+     */
+    canAny(permissions: string[]): boolean;
+    /**
+     * Returns true if the user has ALL of the specified permissions.
+     *
+     * @example
+     * canAll(["orders.view", "orders.export"])
+     */
+    canAll(permissions: string[]): boolean;
+    /**
+     * Returns true if the user has the specified role.
+     * Always returns false when the user is not authenticated.
+     *
+     * @example
+     * hasRole("admin") // true | false
+     */
+    hasRole(role: string): boolean;
+}
+/**
+ * Access the current user's RBAC permissions and roles.
+ *
+ * @example
+ * const { can, hasRole } = usePermissions()
+ * can("users.create")  // true | false
+ * hasRole("admin")     // true | false
+ */
+declare function usePermissions(): UsePermissionsReturn;
+
+interface AuthGuardProps {
+    /** Content to show when authenticated */
+    children: React__default.ReactNode;
+    /** Props forwarded to the built-in LoginPage. Ignored when renderLogin is provided. */
+    loginPageProps?: Omit<LoginPageProps, "onLoginSuccess">;
+    /** Render a custom login UI instead of the default LoginPage */
+    renderLogin?: () => React__default.ReactNode;
+    /** Render a custom loading state instead of the default LoadingScreen */
+    renderLoading?: () => React__default.ReactNode;
+    /** Called after successful login (e.g. router.push) */
+    onLoginSuccess?: () => void;
+}
+/**
+ * Redirects to the login page if the user is not authenticated.
+ * Shows a loading screen during the auth boot phase.
+ *
+ * Place this at the root of the protected area.
+ */
+declare function AuthGuard({ children, loginPageProps, renderLogin, renderLoading, onLoginSuccess, }: AuthGuardProps): react_jsx_runtime.JSX.Element;
+
+interface ResourceGuardProps {
+    /** The access requirements to evaluate */
+    meta: ResourceMeta;
+    /** Protected content */
+    children: React__default.ReactNode;
+    /** Custom fallback rendered when access is denied. Defaults to <AccessDenied /> */
+    fallback?: React__default.ReactNode;
+}
+/**
+ * Renders `children` only when the current user satisfies the resource's
+ * `requiredRoles` and `requiredPermissions` constraints.
+ *
+ * @example
+ * <ResourceGuard meta={{ requiredPermissions: ["users.read"] }}>
+ *   <UsersPage />
+ * </ResourceGuard>
+ */
+declare function ResourceGuard({ meta, children, fallback }: ResourceGuardProps): react_jsx_runtime.JSX.Element | null;
+
+interface CanProps {
+    /** Permission string to check */
+    permission?: string;
+    /** Role string to check */
+    role?: string;
+    /** If true, checks ALL listed permissions instead of just one */
+    permissions?: string[];
+    /** Content rendered when access is granted */
+    children: React__default.ReactNode;
+    /**
+     * Content rendered when access is denied.
+     * Pass a disabled button or any placeholder. Defaults to null (hidden).
+     */
+    fallback?: React__default.ReactNode;
+}
+/**
+ * Conditionally renders `children` based on a permission or role check.
+ *
+ * @example
+ * // Hide a button when user lacks the permission
+ * <Can permission="users.delete">
+ *   <DeleteButton />
+ * </Can>
+ *
+ * // Disable a button instead of hiding it
+ * <Can permission="users.create" fallback={<CreateButton disabled />}>
+ *   <CreateButton />
+ * </Can>
+ *
+ * // Role-based
+ * <Can role="admin">
+ *   <AdminPanel />
+ * </Can>
+ */
+declare function Can({ permission, role, permissions, children, fallback }: CanProps): react_jsx_runtime.JSX.Element;
+
+interface AppShellProps {
+    config: BackofficeConfig;
+    /** Current path for active link highlighting */
+    currentPath?: string;
+    /** Custom NavLink component (e.g. next/link wrapper) */
+    NavLink?: NavLinkComponent;
+    /** Primary action button label for the header */
+    headerActionLabel?: string;
+    /** Primary action click handler */
+    onHeaderAction?: () => void;
+    /** Content to render in the main area */
+    children: React__default.ReactNode;
+}
+/**
+ * Main application shell: sidebar + header bar + content area.
+ * Matches the Figma backoffice layout design.
+ */
+declare function AppShell({ config, currentPath, NavLink, headerActionLabel, onHeaderAction, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface AccessDeniedProps {
+    /** Custom message. Default: "You do not have permission to access this page." */
+    message?: string;
+    /** Label for the action button. If provided, onAction must also be set. */
+    actionLabel?: string;
+    /** Callback for the action button (e.g. navigate back or to home) */
+    onAction?: () => void;
+}
+/**
+ * Default access-denied page shown when a user attempts to access
+ * a resource they are not authorized to view.
+ */
+declare function AccessDenied({ message, actionLabel, onAction, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingScreenProps {
+    /** Custom message shown below the spinner */
+    message?: string;
+}
+/**
+ * Full-screen loading indicator shown during the auth boot phase.
+ */
+declare function LoadingScreen({ message }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Evaluate whether a user has access to a resource based on its meta constraints.
+ *
+ * Rules:
+ * - If no constraints are defined (no requiredRoles, no requiredPermissions), access is GRANTED.
+ * - If requiredRoles is set, the user must have AT LEAST ONE matching role.
+ * - If requiredPermissions is set, the user must have ALL of the listed permissions.
+ * - If both are set, BOTH conditions must pass.
+ * - If a condition is set but the user has no roles/permissions at all, access is DENIED.
+ */
+declare function canAccessResource(user: User | null, meta: ResourceMeta | undefined): boolean;
+/** Check whether a user possesses a specific permission string. */
+declare function evaluateCan(user: User | null, permission: string): boolean;
+/** Check whether a user possesses a specific role string. */
+declare function evaluateHasRole(user: User | null, role: string): boolean;
+/** Check whether a user possesses ANY of the given permissions. */
+declare function evaluateCanAny(user: User | null, permissions: string[]): boolean;
+/** Check whether a user possesses ALL of the given permissions. */
+declare function evaluateCanAll(user: User | null, permissions: string[]): boolean;
+
+interface AuthContextValue extends AuthState {
+    /** Log in with email + password via the configured AuthProvider */
+    login(params: {
+        email: string;
+        password: string;
+    }): Promise<void>;
+    /** Log out and clear auth state */
+    logout(): Promise<void>;
+    /** Re-fetch the user profile and update context */
+    refreshUser(): Promise<void>;
+    /** Check a single permission */
+    can(permission: string): boolean;
+    /** Check if user has ANY of the given permissions */
+    canAny(permissions: string[]): boolean;
+    /** Check if user has ALL of the given permissions */
+    canAll(permissions: string[]): boolean;
+    /** Check if user has a specific role */
+    hasRole(role: string): boolean;
+}
+declare const AuthContext: React__default.Context<AuthContextValue | null>;
+interface AuthContextProviderProps {
+    authProvider: AuthProvider;
+    children: React__default.ReactNode;
+}
+declare function AuthContextProvider({ authProvider, children, }: AuthContextProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAuthContext(): AuthContextValue;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | 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;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type ModalWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+interface RenderModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    renderContent?: () => React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    width?: ModalWidth;
+    closeOnOverlayClick?: boolean;
+    showCloseButton?: boolean;
+    overlayClassName?: string;
+    panelClassName?: string;
+    contentClassName?: string;
+}
+declare function RenderModal({ open, onOpenChange, title, description, children, renderContent, footer, width, closeOnOverlayClick, showCloseButton, overlayClassName, panelClassName, contentClassName, }: RenderModalProps): React__default.ReactPortal | null;
+
+type SettingsSection = "general" | "personalization" | "users";
+interface AccentOption {
+    value: string;
+    label: string;
+    previewClassName?: string;
+}
+interface SettingsModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    mode: "light" | "dark";
+    onModeChange: (mode: "light" | "dark") => void;
+    accent: string;
+    onAccentChange: (accent: string) => void;
+    accentOptions?: AccentOption[];
+    personalizationContent?: React__default.ReactNode;
+    usersContent?: React__default.ReactNode;
+    defaultSection?: SettingsSection;
+    width?: RenderModalProps["width"];
+    closeOnOverlayClick?: boolean;
+    overlayClassName?: string;
+    panelClassName?: string;
+    contentClassName?: string;
+    sidebarClassName?: string;
+    bodyClassName?: string;
+}
+declare function SettingsModal({ open, onOpenChange, mode, onModeChange, accent, onAccentChange, accentOptions, personalizationContent, usersContent, defaultSection, width, closeOnOverlayClick, overlayClassName, panelClassName, contentClassName, sidebarClassName, bodyClassName, }: SettingsModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface TableActionConfirmOptions {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}
+interface TableActionItem {
+    key: string;
+    label: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    variant?: "default" | "destructive";
+    confirm?: boolean | TableActionConfirmOptions;
+}
+interface TableActionMenuProps {
+    items: TableActionItem[];
+    ariaLabel?: string;
+}
+declare function TableActionMenu({ items, ariaLabel, }: TableActionMenuProps): react_jsx_runtime.JSX.Element | null;
+
+interface TableBadgeProps {
+    children: React__default.ReactNode;
+    tone?: "neutral" | "success" | "danger" | "warning";
+    className?: string;
+}
+declare function TableBadge({ children, tone, className, }: TableBadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+interface DataTableRowDragOptions<TData> {
+    getRowId: (row: TData) => string;
+    onReorder: (reorderedRows: TData[]) => void;
+}
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    className?: string;
+    emptyMessage?: string;
+    rowDragOptions?: DataTableRowDragOptions<TData>;
+}
+declare function DataTable<TData, TValue>({ columns, data, className, emptyMessage, rowDragOptions, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+type TablePageSizeOption = number | "all";
+interface TablePaginationProps {
+    totalRows: number;
+    selectedRows?: number;
+    page: number;
+    pageSize: number;
+    pageSizeOptions?: TablePageSizeOption[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    className?: string;
+}
+declare function TablePagination({ totalRows, selectedRows, page, pageSize, pageSizeOptions, onPageChange, onPageSizeChange, className, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type AccentOption, type AccessDeniedProps, type AppShellProps, type AuthContextProviderProps, type AuthContextValue, type AuthGuardProps, type AuthProvider, type AuthState, type BackofficeAppProps, type BackofficeConfig, type ButtonProps, type CanProps, type DataProvider, type DataTableProps, type GetListParams, type GetListResult, type LoadingScreenProps, type LoginPageProps, type NavLinkComponent, type NavLinkProps, type RenderModalProps, type Resource, type ResourceGuardProps, type ResourceMeta, AccessDenied as SPC_AccessDenied, AppShell as SPC_AppShell, AuthContext as SPC_AuthContext, AuthContextProvider as SPC_AuthContextProvider, AuthGuard as SPC_AuthGuard, BackofficeApp as SPC_BackofficeApp, Button as SPC_Button, Can as SPC_Can, DataTable as SPC_DataTable, Input as SPC_Input, Label as SPC_Label, LoadingScreen as SPC_LoadingScreen, LoginPage as SPC_LoginPage, RenderModal as SPC_RenderModal, ResourceGuard as SPC_ResourceGuard, Select as SPC_Select, SelectContent as SPC_SelectContent, SelectGroup as SPC_SelectGroup, SelectItem as SPC_SelectItem, SelectScrollDownButton as SPC_SelectScrollDownButton, SelectScrollUpButton as SPC_SelectScrollUpButton, SelectSeparator as SPC_SelectSeparator, SelectTrigger as SPC_SelectTrigger, SelectValue as SPC_SelectValue, SettingsModal as SPC_SettingsModal, Sidebar as SPC_Sidebar, SidebarToggle as SPC_SidebarToggle, Table as SPC_Table, TableActionMenu as SPC_TableActionMenu, TableBadge as SPC_TableBadge, TableBody as SPC_TableBody, TableCaption as SPC_TableCaption, TableCell as SPC_TableCell, TableFooter as SPC_TableFooter, TableHead as SPC_TableHead, TableHeader as SPC_TableHeader, TablePagination as SPC_TablePagination, TableRow as SPC_TableRow, buttonVariants as SPC_buttonVariants, canAccessResource as SPC_canAccessResource, cn as SPC_cn, evaluateCan as SPC_evaluateCan, evaluateCanAll as SPC_evaluateCanAll, evaluateCanAny as SPC_evaluateCanAny, evaluateHasRole as SPC_evaluateHasRole, useAuth as SPC_useAuth, useAuthContext as SPC_useAuthContext, usePermissions as SPC_usePermissions, type SettingsModalProps, type SettingsSection, type SidebarGroup, type SidebarProps, type TableActionItem, type TableActionMenuProps, type TableBadgeProps, type TablePaginationProps, type UseAuthReturn, type UsePermissionsReturn, type User };