@tapizlabs/ui 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,576 @@
+import * as react from 'react';
+import react__default, { ReactNode, MouseEvent, ComponentType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, LabelHTMLAttributes, HTMLAttributes, Component, ErrorInfo, CSSProperties } from 'react';
+
+interface IconProps {
+    size?: number;
+    className?: string;
+    style?: react__default.CSSProperties;
+}
+
+declare const Clipboard: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Home: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Scan: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Users: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Book: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Calendar: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const CheckSquare: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const BarChart: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Table: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Report: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const QrCode: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Layers: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const OfficeHours: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const FileUpload: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const University: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Faculty: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const GraduationCap: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Globe: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const CreditCard: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const HelpCircle: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const NavQrAttendance: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const NavScoresheet: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const NavAnalytics: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const NavSecurity: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const Edit: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Trash: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Plus: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Download: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Refresh: ({ size, className, spinning, style }: IconProps & {
+    spinning?: boolean;
+}) => react.JSX.Element;
+declare const UserPlus: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const UserMinus: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const UserCog: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Check: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const X: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Menu: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Grid: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const History: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const RotateCcw: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Pdf: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Printer: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ExternalLink: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Image: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Star: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const AppleIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const GooglePlayIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const Mail: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const LockIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const TwoFAIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const FingerprintIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Eye: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const EyeOff: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const User: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const UserCheck: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Hash: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const LogOut: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const Alert: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Info: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const CheckCircle: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Ban: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ArrowRight: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ArrowLeft: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ChevronLeft: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ChevronRight: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ChevronDown: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ChevronUp: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Search: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Bell: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Shield: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Copy: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Repeat: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const FileText: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Trophy: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Monitor: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Smartphone: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Tablet: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const ActivityMenu: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Compare: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Intersect: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Megaphone: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const Sun: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Moon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Gear: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Clock: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+interface LogoMarkProps {
+    size?: number;
+    className?: string;
+    bgClassName?: string;
+    bgFill?: string;
+    bgOpacity?: number;
+}
+declare const LogoMark: ({ size, className, }: LogoMarkProps) => react.JSX.Element;
+
+declare const FormIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const CalendarWeek: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const CalendarMonth: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const NumberIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const TextIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const FormulaIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const RefreshCw: ({ size, className, spinning, style }: IconProps & {
+    spinning?: boolean;
+}) => react.JSX.Element;
+declare const Database: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Server: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Activity: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Cpu: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const Zap: ({ size, className, style }: IconProps) => react.JSX.Element;
+declare const HardDrive: ({ size, className, style }: IconProps) => react.JSX.Element;
+
+declare const SectionIcons: {
+    studenti: react.JSX.Element;
+    nastava: react.JSX.Element;
+    evidencija: react.JSX.Element;
+    analitika: react.JSX.Element;
+    forme: react.JSX.Element;
+    nastavaS: react.JSX.Element;
+    evidencijaS: react.JSX.Element;
+};
+declare const Icons: {
+    clipboard: react.JSX.Element;
+    postClipboard: react.JSX.Element;
+    university: react.JSX.Element;
+    users: react.JSX.Element;
+    book: react.JSX.Element;
+    layers: react.JSX.Element;
+    officeHours: react.JSX.Element;
+    calendar: react.JSX.Element;
+    calendarAlt: react.JSX.Element;
+    checkSquare: react.JSX.Element;
+    barChart: react.JSX.Element;
+    qrCode: react.JSX.Element;
+    home: react.JSX.Element;
+    scan: react.JSX.Element;
+    lock: react.JSX.Element;
+    logOut: react.JSX.Element;
+    logOutAlt: react.JSX.Element;
+    user: react.JSX.Element;
+    cancel: react.JSX.Element;
+    report: react.JSX.Element;
+    table: react.JSX.Element;
+    gear: react.JSX.Element;
+    formIcon: react.JSX.Element;
+    grades: react.JSX.Element;
+    activity: react.JSX.Element;
+    zap: react.JSX.Element;
+    compare: react.JSX.Element;
+    intersect: react.JSX.Element;
+    repeat: react.JSX.Element;
+    info: react.JSX.Element;
+    todos: react.JSX.Element;
+    eyeOff: react.JSX.Element;
+    userMinus: react.JSX.Element;
+    fileText: react.JSX.Element;
+    megaphone: react.JSX.Element;
+    grid: react.JSX.Element;
+    userCheck: react.JSX.Element;
+    fm: react.JSX.Element;
+    history: react.JSX.Element;
+    externalLink: react.JSX.Element;
+};
+
+type Variant$1 = "primary" | "secondary" | "danger" | "ghost" | "success" | "warning" | "info" | "muted-primary" | "outline-primary" | "outline-secondary" | "outline-danger" | "outline-success" | "link";
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+interface ButtonProps {
+    children?: ReactNode;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: Variant$1;
+    size?: Size;
+    icon?: ButtonIcon;
+    iconRight?: ButtonIcon;
+    className?: string;
+    type?: "button" | "submit" | "reset";
+    title?: string;
+    fullWidth?: boolean;
+}
+type ButtonIcon = ReactNode | ComponentType<{
+    size?: number | string;
+    strokeWidth?: number;
+    className?: string;
+}>;
+declare function Button({ children, onClick, disabled, loading, variant, size, icon, iconRight, className, type, title, fullWidth, }: ButtonProps): react.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalid?: boolean;
+}
+declare function Input({ className, invalid, ...props }: InputProps): react.JSX.Element;
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    invalid?: boolean;
+}
+declare function Select({ className, invalid, ...props }: SelectProps): react.JSX.Element;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+}
+declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
+
+interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, ...props }: FieldLabelProps): react.JSX.Element;
+
+interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+declare function FieldHint({ children, className, ...props }: FieldHintProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare function Checkbox({ label, size, className, id: providedId, checked, defaultChecked, onChange, ...props }: CheckboxProps): react.JSX.Element;
+
+interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare function RadioButton({ label, size, className, id: providedId, checked, defaultChecked, onChange, ...props }: RadioButtonProps): react.JSX.Element;
+
+interface SpinnerProps {
+    size?: string;
+    color?: string;
+}
+declare const Spinner: ({ size, color }: SpinnerProps) => react.JSX.Element;
+
+declare function PageSpinner(): react.JSX.Element;
+
+interface ToastProps {
+    message: string;
+    ok: boolean;
+    durationMs?: number;
+}
+declare function Toast({ message, ok, durationMs }: ToastProps): react.ReactPortal;
+
+interface ToastState {
+    message: string;
+    ok: boolean;
+    durationMs?: number;
+}
+interface ToastContextValue {
+    hideToast: () => void;
+    showToast: (message: string, ok: boolean, durationMs?: number) => void;
+}
+interface ToastProviderProps {
+    children?: ReactNode;
+}
+declare function ToastProvider({ children }: ToastProviderProps): react.JSX.Element;
+declare function useToast(): ToastContextValue;
+
+interface FormErrorProps {
+    message: string | null | undefined;
+    className?: string;
+}
+declare function FormError({ message, className }: FormErrorProps): react.JSX.Element | null;
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+interface DefaultErrorFallbackProps {
+    title?: string;
+    description?: string;
+    label?: string;
+    reloadLabel?: string;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | bigint | boolean | react.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+declare function DefaultErrorFallback({ title, description, label, reloadLabel, }: DefaultErrorFallbackProps): react.JSX.Element;
+declare function GridBg(): react.JSX.Element;
+declare function Spotlight({ color }: {
+    color: string;
+}): react.JSX.Element;
+
+interface BaseModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    xShown?: boolean;
+    icon?: ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    closeLabel?: string;
+}
+declare function BaseModal({ isOpen, onClose, title, subtitle, children, icon, xShown, size, closeLabel, }: BaseModalProps): react.ReactPortal | null;
+
+interface ConfirmDialogProps {
+    title: string;
+    description?: ReactNode;
+    message?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    icon?: ReactNode;
+    danger?: boolean;
+    open?: boolean;
+}
+declare function ConfirmDialog({ title, description, message, confirmLabel, cancelLabel, loading, onConfirm, onCancel, icon, danger, open, }: ConfirmDialogProps): react.ReactPortal | null;
+
+interface TooltipProps {
+    text: string;
+    children: ReactNode;
+    position?: "top" | "bottom";
+    align?: "center" | "right";
+    width?: string;
+    wFull?: boolean;
+}
+declare function Tooltip({ text, children, position, align, width, wFull }: TooltipProps): react.JSX.Element;
+
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    hover?: boolean;
+    style?: CSSProperties;
+}
+interface CardSectionProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function Card({ children, className, hover, style }: CardProps): react.JSX.Element;
+declare function CardHeader({ children, className }: CardSectionProps): react.JSX.Element;
+declare function CardBody({ children, className }: CardSectionProps): react.JSX.Element;
+
+interface SkeletonProps {
+    className?: string;
+}
+declare function Skeleton({ className }: SkeletonProps): react.JSX.Element;
+
+declare function SkeletonCard({ className }: {
+    className?: string;
+}): react.JSX.Element;
+declare function SkeletonKpiCard({ delay }: {
+    delay?: number;
+}): react.JSX.Element;
+declare function SkeletonBanner(): react.JSX.Element;
+declare function SkeletonTable({ rows, cols }: {
+    rows?: number;
+    cols?: number;
+}): react.JSX.Element;
+declare function SkeletonPageHeader(): react.JSX.Element;
+
+type Variant = "default" | "success" | "warning" | "danger" | "muted";
+interface BadgeProps {
+    children: ReactNode;
+    variant?: Variant;
+    className?: string;
+}
+declare function Badge({ children, variant, className }: BadgeProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    message?: string;
+    icon?: ReactNode;
+}
+declare function EmptyState({ title, description, message, icon }: EmptyStateProps): react.JSX.Element;
+declare function ErrorState({ title, error, }: {
+    title?: string;
+    error: Error | null;
+}): react.JSX.Element;
+
+interface StructuredInfoBannerProps {
+    title: string;
+    description: string;
+    text?: never;
+    variant?: never;
+    className?: string;
+}
+interface InlineInfoBannerProps {
+    text: string;
+    variant?: "info" | "warn" | "lock";
+    className?: string;
+    title?: never;
+    description?: never;
+}
+type InfoBannerProps = StructuredInfoBannerProps | InlineInfoBannerProps;
+declare function InfoBanner(props: InfoBannerProps): react.JSX.Element;
+
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, subtitle, action, icon, className }: PageHeaderProps): react.JSX.Element;
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+    inputClassName?: string;
+    iconClassName?: string;
+    clearable?: boolean;
+    clearTitle?: string;
+}
+declare function SearchInput({ value, onChange, placeholder, wrapperClassName, wrapperStyle, inputClassName, iconClassName, clearable, clearTitle, ...props }: SearchInputProps): react.JSX.Element;
+
+interface PaginationLabels {
+    showing?: (args: {
+        from: number;
+        to: number;
+        total: number;
+    }) => string;
+    page?: (args: {
+        page: number;
+        totalPages: number;
+    }) => string;
+    prev?: string;
+    next?: string;
+    prevTitle?: string;
+    nextTitle?: string;
+}
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    totalItems?: number;
+    pageSize?: number;
+    labels?: PaginationLabels;
+}
+declare function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }: PaginationProps): react.JSX.Element | null;
+
+interface SectionTitleProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function SectionTitle({ children, className }: SectionTitleProps): react.JSX.Element;
+
+type StatusBadgeVariant = "default" | "active" | "inactive" | "warning" | "success" | "danger" | "pending";
+interface StatusBadgeProps {
+    label: ReactNode;
+    variant?: StatusBadgeVariant;
+    className?: string;
+}
+declare function StatusBadge({ label, variant, className }: StatusBadgeProps): react.JSX.Element;
+
+interface ActionMenuItem {
+    key: string;
+    label: string;
+    onSelect: () => void;
+    icon?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+interface ActionMenuProps {
+    label: string;
+    items: ActionMenuItem[];
+    icon?: ReactNode;
+    buttonSize?: "xs" | "sm" | "md" | "lg" | "xl";
+    buttonVariant?: "primary" | "secondary" | "danger" | "ghost" | "success" | "warning" | "info" | "muted-primary" | "outline-primary" | "outline-secondary" | "outline-danger" | "outline-success" | "link";
+    buttonClassName?: string;
+    menuClassName?: string;
+    menuStyle?: CSSProperties;
+    fullWidth?: boolean;
+    closeLabel?: string;
+}
+declare function ActionMenu({ label, items, icon, buttonSize, buttonVariant, buttonClassName, menuClassName, menuStyle, fullWidth, closeLabel, }: ActionMenuProps): react.JSX.Element;
+
+type ColumnAlign = "left" | "center" | "right";
+type SortDirection = "asc" | "desc";
+/**
+ * Declarative description of a single column for {@link DataTable}.
+ *
+ * `header` and any user-facing text are passed in as `ReactNode` so callers
+ * own translation (i18n) — the component never hardcodes strings.
+ */
+interface Column<T> {
+    /** Stable identifier, also used as the React key for the header cell. */
+    id: string;
+    /** Header content. Pass an already-translated string/node. */
+    header: ReactNode;
+    /** Renders the cell body for a given row. */
+    cell: (row: T) => ReactNode;
+    /** Enables client-side sorting on this column. Requires `sortAccessor`. */
+    sortable?: boolean;
+    /** Returns the comparable value used when sorting by this column. */
+    sortAccessor?: (row: T) => string | number | boolean | Date | null | undefined;
+    /** Text alignment for header and cells. Defaults to "left". */
+    align?: ColumnAlign;
+    /** Extra classes applied to the body cell (`<td>`). */
+    className?: string;
+}
+interface SortState {
+    columnId: string;
+    direction: SortDirection;
+}
+/** Controls server-driven sort when passed to {@link DataTable}. */
+interface ServerSort {
+    /** The currently sorted column id. */
+    field: string;
+    /** Current sort direction. */
+    dir: SortDirection;
+    /** Called with the column id when a sortable header is clicked. */
+    onSort: (field: string) => void;
+}
+
+interface DataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    /** Stable unique key per row. */
+    rowKey: (row: T) => string;
+    isLoading?: boolean;
+    /** Rendered (inside a full-width row) when there is no data. */
+    emptyState?: ReactNode;
+    onRowClick?: (row: T) => void;
+    /** Number of skeleton rows shown while loading. Defaults to 8. */
+    loadingRows?: number;
+    /**
+     * When provided, renders an extra right-aligned column at the end of every
+     * row. The function receives the row and must return a `ReactNode` (e.g.
+     * action buttons). When omitted, no extra column is added.
+     */
+    rowActions?: (row: T) => ReactNode;
+    /**
+     * When provided, disables internal client-side sort and delegates sorting to
+     * the caller. Clicking a sortable column header calls `onSort(column.id)`.
+     * `aria-sort` reflects `field` and `dir`.
+     */
+    serverSort?: ServerSort;
+    /**
+     * When provided, renders the node below the `<table>` inside the outer
+     * border wrapper. No styling is added — callers own all padding/layout.
+     */
+    footer?: ReactNode;
+    /**
+     * When provided:
+     * - The `<table>` is hidden on small screens (`hidden md:table`).
+     * - A `<div className="md:hidden">` is rendered before the table, mapping
+     *   each row to a card via this function (keyed by `rowKey(row)`).
+     */
+    mobileCard?: (row: T) => ReactNode;
+}
+/**
+ * Generic, accessible, client-sortable table.
+ *
+ * - Pass already-translated `ReactNode`s for headers and `emptyState`; the
+ *   component never hardcodes user-facing strings (full i18n compatibility).
+ * - Sorting toggles asc/desc on sortable columns and is purely client-side
+ *   unless `serverSort` is provided.
+ * - Rows are memoized and the sorted view is memoized via `useMemo`.
+ * - Optional `rowActions`, `serverSort`, `footer`, and `mobileCard` props are
+ *   all additive — existing usages continue to work with zero changes.
+ */
+declare function DataTable<T>({ data, columns, rowKey, isLoading, emptyState, onRowClick, loadingRows, rowActions, serverSort, footer, mobileCard, }: DataTableProps<T>): react.JSX.Element;
+
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Activity, ActivityMenu, Alert, AppleIcon, ArrowLeft, ArrowRight, Badge, Ban, BarChart, BaseModal, type BaseModalProps, Bell, Book, Button, type ButtonProps, Calendar, CalendarMonth, CalendarWeek, Card, CardBody, CardHeader, type CardProps, type CardSectionProps, Check, CheckCircle, CheckSquare, Checkbox, type CheckboxProps, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clipboard, Clock, type Column, type ColumnAlign, Compare, ConfirmDialog, type ConfirmDialogProps, Copy, Cpu, CreditCard, DataTable, type DataTableProps, Database, DefaultErrorFallback, Download, Edit, EmptyState, type EmptyStateProps, ErrorBoundary, ErrorState, ExternalLink, Eye, EyeOff, Faculty, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FileText, FileUpload, FingerprintIcon, FormError, type FormErrorProps, FormIcon, FormulaIcon, Gear, Globe, GooglePlayIcon, GraduationCap, Grid, GridBg, HardDrive, Hash, HelpCircle, History, Home, Icons, Image, Info, InfoBanner, type InfoBannerProps, Input, type InputProps, Intersect, Layers, LockIcon, LogOut, LogoMark, Mail, Megaphone, Menu, Monitor, Moon, NavAnalytics, NavQrAttendance, NavScoresheet, NavSecurity, NumberIcon, OfficeHours, PageHeader, type PageHeaderProps, PageSpinner, Pagination, type PaginationLabels, type PaginationProps, Pdf, Plus, Printer, QrCode, RadioButton, type RadioButtonProps, Refresh, RefreshCw, Repeat, Report, RotateCcw, Scan, Search, SearchInput, type SearchInputProps, SectionIcons, SectionTitle, type SectionTitleProps, Select, type SelectProps, Server, type ServerSort, Shield, Skeleton, SkeletonBanner, SkeletonCard, SkeletonKpiCard, SkeletonPageHeader, type SkeletonProps, SkeletonTable, Smartphone, type SortDirection, type SortState, Spinner, type SpinnerProps, Spotlight, Star, StatusBadge, type StatusBadgeProps, type StatusBadgeVariant, Sun, Table, Tablet, TextIcon, Textarea, type TextareaProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, Tooltip, type TooltipProps, Trash, Trophy, TwoFAIcon, University, User, UserCheck, UserCog, UserMinus, UserPlus, Users, X, Zap, useToast };