niva-ui
Version:
A beautiful, minimalistic React + Tailwind UI framework for SaaS applications
480 lines (455 loc) • 23.2 kB
TypeScript
import * as class_variance_authority_types from 'class-variance-authority/types';
import * as React from 'react';
import { VariantProps } from 'class-variance-authority';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { ClassValue } from 'clsx';
declare const buttonVariants: (props?: {
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
size?: "default" | "sm" | "lg" | "icon";
} & class_variance_authority_types.ClassProp) => string;
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
declare const badgeVariants: (props?: {
variant?: "default" | "destructive" | "outline" | "secondary";
} & class_variance_authority_types.ClassProp) => string;
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
}
declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & 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>>;
declare const inputVariants: (props?: {
variant?: "default" | "destructive" | "ghost";
size?: "default" | "sm" | "lg";
} & class_variance_authority_types.ClassProp) => string;
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
label?: string;
error?: string;
icon?: React.ReactNode;
suffix?: React.ReactNode;
}
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
declare const selectVariants: (props?: {
variant?: "default" | "destructive";
size?: "default" | "sm" | "lg";
} & class_variance_authority_types.ClassProp) => string;
interface SelectOption {
value: string;
label: string;
disabled?: boolean;
}
interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, VariantProps<typeof selectVariants> {
options: SelectOption[];
value?: string;
onValueChange?: (value: string) => void;
placeholder?: string;
label?: string;
error?: string;
searchable?: boolean;
}
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
declare const avatarVariants: (props?: {
size?: "default" | "sm" | "lg" | "xl" | "2xl";
} & class_variance_authority_types.ClassProp) => string;
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
src?: string;
alt?: string;
fallback?: string;
status?: "online" | "offline" | "away" | "busy";
}
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<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> & {
hover?: boolean;
} & React.RefAttributes<HTMLTableRowElement>>;
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
sortable?: boolean;
sortDirection?: "asc" | "desc" | null;
onSort?: () => void;
}
declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & 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 Column<T> {
key: keyof T;
header: string;
sortable?: boolean;
render?: (value: T[keyof T], row: T) => React.ReactNode;
width?: string;
}
interface DataTableProps<T> {
data: T[];
columns: Column<T>[];
loading?: boolean;
emptyMessage?: string;
onRowClick?: (row: T) => void;
selectable?: boolean;
selectedRows?: T[];
onSelectionChange?: (rows: T[]) => void;
}
declare function DataTable<T extends Record<string, any>>({ data, columns, loading, emptyMessage, onRowClick, selectable, selectedRows, onSelectionChange, }: DataTableProps<T>): React.JSX.Element;
declare const toastVariants: (props?: {
variant?: "default" | "error" | "success" | "warning" | "info";
} & class_variance_authority_types.ClassProp) => string;
interface ToastProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
title?: string;
description?: string;
action?: React.ReactNode;
onClose?: () => void;
duration?: number;
}
declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
interface ToastContainerProps {
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
}
declare const ToastContainer: React.FC<ToastContainerProps>;
interface ToastOptions extends Omit<ToastProps, 'onClose'> {
id?: string;
}
interface ToastContextType {
toasts: (ToastOptions & {
id: string;
})[];
toast: (options: ToastOptions) => string;
dismiss: (id: string) => void;
clear: () => void;
}
declare function ToastProvider({ children }: {
children: React.ReactNode;
}): React.JSX.Element;
declare function useToast(): ToastContextType;
declare const toast: {
success: (message: string, options?: Omit<ToastOptions, "variant">) => void;
error: (message: string, options?: Omit<ToastOptions, "variant">) => void;
warning: (message: string, options?: Omit<ToastOptions, "variant">) => void;
info: (message: string, options?: Omit<ToastOptions, "variant">) => void;
};
declare const modalVariants: (props?: {
size?: "default" | "sm" | "lg" | "xl" | "full";
} & class_variance_authority_types.ClassProp) => string;
interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof modalVariants> {
isOpen: boolean;
onClose: () => void;
title?: string;
description?: string;
showCloseButton?: boolean;
closeOnOverlayClick?: boolean;
closeOnEscape?: boolean;
}
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const ModalContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const ModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
interface UseConfirmModalOptions {
title?: string;
description?: string;
confirmText?: string;
cancelText?: string;
variant?: "default" | "destructive";
}
declare function useConfirmModal(): {
confirm: (opts?: UseConfirmModalOptions) => Promise<boolean>;
ConfirmModal: () => React.JSX.Element;
};
declare const navbarVariants: (props?: {
size?: "default" | "sm" | "lg";
variant?: "default" | "minimal" | "elevated";
} & class_variance_authority_types.ClassProp) => string;
interface NavItem {
label: string;
href?: string;
onClick?: () => void;
icon?: React.ReactNode;
badge?: string | number;
disabled?: boolean;
items?: NavItem[];
}
interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {
logo?: React.ReactNode;
items?: NavItem[];
actions?: React.ReactNode;
mobileMenuButton?: boolean;
onMobileMenuToggle?: () => void;
isMobileMenuOpen?: boolean;
}
declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
declare const sidebarVariants: (props?: {
variant?: "default" | "minimal" | "elevated";
size?: "default" | "sm" | "lg";
} & class_variance_authority_types.ClassProp) => string;
interface SidebarItem {
label: string;
href?: string;
onClick?: () => void;
icon?: React.ReactNode;
badge?: string | number;
disabled?: boolean;
active?: boolean;
items?: SidebarItem[];
}
interface SidebarSection {
title?: string;
items: SidebarItem[];
}
interface SidebarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebarVariants> {
header?: React.ReactNode;
footer?: React.ReactNode;
sections?: SidebarSection[];
collapsible?: boolean;
collapsed?: boolean;
onCollapse?: (collapsed: boolean) => void;
showCollapseButton?: boolean;
}
declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
declare function useSidebar(defaultCollapsed?: boolean): {
collapsed: boolean;
toggle: () => void;
expand: () => void;
collapse: () => void;
setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
};
declare const formVariants: (props?: {
variant?: "default" | "inline" | "card";
} & class_variance_authority_types.ClassProp) => string;
interface FormFieldError {
message: string;
type?: string;
}
interface FormState {
[key: string]: any;
}
interface FormErrors {
[key: string]: FormFieldError | undefined;
}
interface FormContextType {
values: FormState;
errors: FormErrors;
touched: {
[key: string]: boolean;
};
isSubmitting: boolean;
setValue: (name: string, value: any) => void;
setError: (name: string, error: FormFieldError | undefined) => void;
setTouched: (name: string, touched?: boolean) => void;
validateField: (name: string) => Promise<boolean>;
resetForm: () => void;
}
declare function useFormContext(): FormContextType;
interface ValidationRule {
required?: boolean | string;
minLength?: number | {
value: number;
message: string;
};
maxLength?: number | {
value: number;
message: string;
};
pattern?: RegExp | {
value: RegExp;
message: string;
};
validate?: (value: any, values: FormState) => string | boolean | undefined;
}
interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>, VariantProps<typeof formVariants> {
initialValues?: FormState;
validationRules?: {
[key: string]: ValidationRule;
};
onFormSubmit?: (values: FormState, { setSubmitting, setErrors }: {
setSubmitting: (submitting: boolean) => void;
setErrors: (errors: FormErrors) => void;
}) => void | Promise<void>;
validateOnChange?: boolean;
validateOnBlur?: boolean;
}
declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
interface FormFieldProps {
name: string;
children: (field: {
value: any;
onChange: (value: any) => void;
onBlur: () => void;
error?: FormFieldError;
touched: boolean;
}) => React.ReactNode;
}
declare const FormField: React.FC<FormFieldProps>;
interface FormSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
loadingText?: string;
}
declare const FormSubmit: React.ForwardRefExoticComponent<FormSubmitProps & React.RefAttributes<HTMLButtonElement>>;
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuShortcut: {
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
displayName: string;
};
declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: {
variant?: "default" | "destructive" | "success" | "warning" | "info";
} & class_variance_authority_types.ClassProp) => string> & React.RefAttributes<HTMLDivElement>>;
declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const AlertIcon: ({ variant }: {
variant?: "default" | "destructive" | "warning" | "success" | "info";
}) => React.JSX.Element;
declare const loaderVariants: (props?: {
size?: "sm" | "lg" | "xl" | "xs" | "md";
variant?: "default" | "secondary" | "muted" | "white";
} & class_variance_authority_types.ClassProp) => string;
interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants> {
text?: string;
}
declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
declare const skeletonVariants: (props?: {
variant?: "default" | "text" | "card";
} & class_variance_authority_types.ClassProp) => string;
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
}
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
interface PageLoaderProps {
text?: string;
size?: "sm" | "md" | "lg";
}
declare const PageLoader: React.FC<PageLoaderProps>;
declare const chipVariants: (props?: {
variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info";
size?: "sm" | "lg" | "md";
} & class_variance_authority_types.ClassProp) => string;
interface ChipProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chipVariants> {
onRemove?: () => void;
removable?: boolean;
disabled?: boolean;
}
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
interface ChipGroupProps extends React.HTMLAttributes<HTMLDivElement> {
chips: Array<{
id: string;
label: string;
variant?: ChipProps["variant"];
removable?: boolean;
}>;
onRemove?: (id: string) => void;
maxVisible?: number;
}
declare const ChipGroup: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const paginationVariants: (props?: {
size?: "default" | "sm" | "lg";
} & class_variance_authority_types.ClassProp) => string;
interface PaginationProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof paginationVariants> {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
showFirstLast?: boolean;
showPrevNext?: boolean;
maxVisiblePages?: number;
}
declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
interface PaginationInfoProps {
currentPage: number;
totalPages: number;
totalItems: number;
itemsPerPage: number;
className?: string;
}
declare const PaginationInfo: React.FC<PaginationInfoProps>;
declare const searchBarVariants: (props?: {
variant?: "default" | "ghost" | "elevated";
size?: "sm" | "lg" | "md";
} & class_variance_authority_types.ClassProp) => string;
interface SearchFilter {
id: string;
label: string;
value: string;
type: "text" | "select" | "date" | "number";
options?: Array<{
value: string;
label: string;
}>;
placeholder?: string;
}
interface ActiveFilter {
id: string;
label: string;
value: string;
display: string;
}
interface SearchBarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof searchBarVariants> {
searchValue: string;
onSearchChange: (value: string) => void;
placeholder?: string;
filters?: SearchFilter[];
activeFilters?: ActiveFilter[];
onFilterAdd?: (filter: ActiveFilter) => void;
onFilterRemove?: (filterId: string) => void;
onClearAll?: () => void;
showFilterButton?: boolean;
showClearButton?: boolean;
}
declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>;
declare const statCardVariants: (props?: {
variant?: "default" | "elevated" | "accent" | "gradient";
size?: "sm" | "lg" | "md";
} & class_variance_authority_types.ClassProp) => string;
interface StatCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statCardVariants> {
title: string;
value: string | number;
change?: {
value: number;
label?: string;
period?: string;
};
icon?: React.ReactNode;
trend?: "up" | "down" | "neutral";
format?: "number" | "currency" | "percentage";
loading?: boolean;
}
declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
interface MetricCardProps extends Omit<StatCardProps, 'icon' | 'format'> {
type: 'revenue' | 'users' | 'conversion' | 'views' | 'custom';
}
declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>>;
interface CodeBlockProps {
children: string;
className?: string;
}
declare function CodeBlock({ children, className }: CodeBlockProps): React.JSX.Element;
interface ThemeProviderProps {
children: React.ReactNode;
[key: string]: any;
}
declare function ThemeProvider({ children, ...props }: ThemeProviderProps): React.JSX.Element;
/**
* Utility function to merge class names with tailwind-merge
* This ensures that conflicting Tailwind classes are properly resolved
*/
declare function cn(...inputs: ClassValue[]): string;
export { type ActiveFilter, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CodeBlock, type CodeBlockProps, type Column, DataTable, type DataTableProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormField, type FormFieldProps, type FormProps, FormSubmit, type FormSubmitProps, Input, type InputProps, Loader, type LoaderProps, MetricCard, type MetricCardProps, Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type NavItem, Navbar, type NavbarProps, PageLoader, type PageLoaderProps, Pagination, PaginationInfo, type PaginationInfoProps, type PaginationProps, SearchBar, type SearchBarProps, type SearchFilter, Select, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, ThemeProvider, Toast, ToastContainer, type ToastProps, ToastProvider, avatarVariants, badgeVariants, buttonVariants, cn, formVariants, inputVariants, modalVariants, navbarVariants, paginationVariants, searchBarVariants, selectVariants, sidebarVariants, statCardVariants, toast, toastVariants, useConfirmModal, useFormContext, useSidebar, useToast };