@keypix/ui
Version:
A premium React component library built with TypeScript, Tailwind CSS, and Atomic Design principles. The most comprehensive and beautiful UI library available.
504 lines (482 loc) • 17.1 kB
text/typescript
import * as React from 'react';
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ClassValue } from 'clsx';
type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
src?: string;
alt?: string;
fallback?: string;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
status?: AvatarStatus;
statusPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
loading?: boolean;
bordered?: boolean;
ring?: boolean;
ringColor?: string;
}
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
max?: number;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
spacing?: 'tight' | 'normal' | 'loose';
}
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
/** Badge variant */
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info';
/** Badge size */
size?: 'sm' | 'md' | 'lg';
/** Icon to display before text */
leftIcon?: React.ReactNode;
/** Icon to display after text */
rightIcon?: React.ReactNode;
/** Removable badge with close button */
removable?: boolean;
/** On remove callback */
onRemove?: () => void;
/** Custom remove icon */
removeIcon?: React.ReactNode;
}
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
declare const badgeVariants: (props?: {
variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info";
size?: "sm" | "md" | "lg";
} & class_variance_authority_dist_types.ClassProp) => string;
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Button variant */
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning' | 'info';
/** Button size */
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon';
/** Loading state - shows spinner and disables button */
loading?: boolean;
/** Text to show when loading */
loadingText?: string;
/** Icon to show on the left side */
leftIcon?: React.ReactNode;
/** Icon to show on the right side */
rightIcon?: React.ReactNode;
/** Full width button */
fullWidth?: boolean;
/** Disable button when loading */
disableOnLoading?: boolean;
/** Accessible label for screen readers */
ariaLabel?: string;
/** Description for screen readers */
ariaDescription?: string;
/** Live region for dynamic content */
ariaLive?: 'off' | 'polite' | 'assertive';
}
declare const Button: React.NamedExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
declare const buttonVariants: (props?: {
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "ghost";
size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg";
} & class_variance_authority_dist_types.ClassProp) => string;
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>>;
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
/** Label for the input */
label?: string;
/** Helper text below the input */
helperText?: string;
/** Error state */
error?: boolean;
/** Required field indicator */
required?: boolean;
/** Left icon */
leftIcon?: React.ReactNode;
/** Right icon */
rightIcon?: React.ReactNode;
}
declare const Input: React.NamedExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
type SpinnerType = 'dots' | 'spinner' | 'pulse' | 'bars';
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
type?: SpinnerType;
text?: string;
textPosition?: 'top' | 'bottom' | 'left' | 'right';
overlay?: boolean;
overlayText?: string;
}
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
icon?: React.ReactNode;
}
declare const Alert: React.ForwardRefExoticComponent<AlertProps & 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>>;
interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
isOpen: boolean;
onClose: () => void;
title?: string;
description?: string;
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
closeOnOverlayClick?: boolean;
closeOnEscape?: boolean;
}
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
interface SearchBarProps {
placeholder?: string;
onSearch: (value: string) => void;
className?: string;
disabled?: boolean;
}
declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>;
interface Column<T> {
key: keyof T;
title: string;
sortable?: boolean;
render?: (value: T[keyof T], row: T) => React.ReactNode;
width?: string;
}
interface DataTableProps<T> {
data: T[];
columns: Column<T>[];
loading?: boolean;
searchable?: boolean;
sortable?: boolean;
pagination?: boolean;
pageSize?: number;
onRowClick?: (row: T) => void;
className?: string;
}
declare function DataTable<T extends Record<string, unknown>>({ data, columns, loading, searchable, sortable, pagination, pageSize, onRowClick, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
interface HeaderProps {
title: string;
onSearch: (value: string) => void;
onLogin: () => void;
onSignup: () => void;
className?: string;
showSearch?: boolean;
}
declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
type Theme = 'light' | 'dark' | 'system';
interface ThemeColors {
background: string;
foreground: string;
card: string;
cardForeground: string;
popover: string;
popoverForeground: string;
primary: string;
primaryForeground: string;
secondary: string;
secondaryForeground: string;
muted: string;
mutedForeground: string;
accent: string;
accentForeground: string;
destructive: string;
destructiveForeground: string;
border: string;
input: string;
ring: string;
chart: string;
chartForeground: string;
}
declare const lightTheme: ThemeColors;
declare const darkTheme: ThemeColors;
declare const themes: {
readonly light: ThemeColors;
readonly dark: ThemeColors;
};
declare function getThemeColors(theme: Theme): ThemeColors;
interface ThemeProviderProps {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
}
declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
interface ThemeProviderState {
theme: Theme;
setTheme: (theme: Theme) => void;
}
declare const useTheme: () => ThemeProviderState;
declare function cn(...inputs: ClassValue[]): string;
declare const colors: {
readonly primary: {
readonly 50: "#eff6ff";
readonly 100: "#dbeafe";
readonly 200: "#bfdbfe";
readonly 300: "#93c5fd";
readonly 400: "#60a5fa";
readonly 500: "#3b82f6";
readonly 600: "#2563eb";
readonly 700: "#1d4ed8";
readonly 800: "#1e40af";
readonly 900: "#1e3a8a";
};
readonly gray: {
readonly 50: "#f9fafb";
readonly 100: "#f3f4f6";
readonly 200: "#e5e7eb";
readonly 300: "#d1d5db";
readonly 400: "#9ca3af";
readonly 500: "#6b7280";
readonly 600: "#4b5563";
readonly 700: "#374151";
readonly 800: "#1f2937";
readonly 900: "#111827";
};
readonly success: {
readonly 50: "#f0fdf4";
readonly 100: "#dcfce7";
readonly 200: "#bbf7d0";
readonly 300: "#86efac";
readonly 400: "#4ade80";
readonly 500: "#22c55e";
readonly 600: "#16a34a";
readonly 700: "#15803d";
readonly 800: "#166534";
readonly 900: "#14532d";
};
readonly warning: {
readonly 50: "#fffbeb";
readonly 100: "#fef3c7";
readonly 200: "#fde68a";
readonly 300: "#fcd34d";
readonly 400: "#fbbf24";
readonly 500: "#f59e0b";
readonly 600: "#d97706";
readonly 700: "#b45309";
readonly 800: "#92400e";
readonly 900: "#78350f";
};
readonly error: {
readonly 50: "#fef2f2";
readonly 100: "#fee2e2";
readonly 200: "#fecaca";
readonly 300: "#fca5a5";
readonly 400: "#f87171";
readonly 500: "#ef4444";
readonly 600: "#dc2626";
readonly 700: "#b91c1c";
readonly 800: "#991b1b";
readonly 900: "#7f1d1d";
};
};
declare const spacing: {
readonly 0: "0px";
readonly 1: "4px";
readonly 2: "8px";
readonly 3: "12px";
readonly 4: "16px";
readonly 5: "20px";
readonly 6: "24px";
readonly 8: "32px";
readonly 10: "40px";
readonly 12: "48px";
readonly 16: "64px";
readonly 20: "80px";
readonly 24: "96px";
};
declare const borderRadius: {
readonly none: "0px";
readonly sm: "2px";
readonly md: "4px";
readonly lg: "8px";
readonly xl: "12px";
readonly '2xl': "16px";
readonly full: "9999px";
};
declare const shadows: {
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
};
declare const typography: {
readonly fontSizes: {
readonly xs: "12px";
readonly sm: "14px";
readonly md: "16px";
readonly lg: "18px";
readonly xl: "20px";
readonly '2xl': "24px";
readonly '3xl': "30px";
readonly '4xl': "36px";
readonly '5xl': "48px";
readonly '6xl': "60px";
};
readonly fontWeights: {
readonly normal: "400";
readonly medium: "500";
readonly semibold: "600";
readonly bold: "700";
readonly extrabold: "800";
};
readonly lineHeights: {
readonly tight: "1.25";
readonly normal: "1.5";
readonly relaxed: "1.75";
};
};
declare const breakpoints: {
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly '2xl': "1536px";
};
declare const zIndex: {
readonly hide: -1;
readonly auto: "auto";
readonly base: 0;
readonly docked: 10;
readonly dropdown: 1000;
readonly sticky: 1100;
readonly banner: 1200;
readonly overlay: 1300;
readonly modal: 1400;
readonly popover: 1500;
readonly skipLink: 1600;
readonly toast: 1700;
readonly tooltip: 1800;
};
declare const animations: {
readonly fadeIn: {
readonly from: {
readonly opacity: 0;
};
readonly to: {
readonly opacity: 1;
};
readonly duration: 200;
};
readonly fadeOut: {
readonly from: {
readonly opacity: 1;
};
readonly to: {
readonly opacity: 0;
};
readonly duration: 200;
};
readonly slideInFromTop: {
readonly from: {
readonly transform: "translateY(-100%)";
readonly opacity: 0;
};
readonly to: {
readonly transform: "translateY(0)";
readonly opacity: 1;
};
readonly duration: 300;
};
readonly slideInFromBottom: {
readonly from: {
readonly transform: "translateY(100%)";
readonly opacity: 0;
};
readonly to: {
readonly transform: "translateY(0)";
readonly opacity: 1;
};
readonly duration: 300;
};
readonly slideInFromLeft: {
readonly from: {
readonly transform: "translateX(-100%)";
readonly opacity: 0;
};
readonly to: {
readonly transform: "translateX(0)";
readonly opacity: 1;
};
readonly duration: 300;
};
readonly slideInFromRight: {
readonly from: {
readonly transform: "translateX(100%)";
readonly opacity: 0;
};
readonly to: {
readonly transform: "translateX(0)";
readonly opacity: 1;
};
readonly duration: 300;
};
readonly scaleIn: {
readonly from: {
readonly transform: "scale(0.95)";
readonly opacity: 0;
};
readonly to: {
readonly transform: "scale(1)";
readonly opacity: 1;
};
readonly duration: 200;
};
readonly scaleOut: {
readonly from: {
readonly transform: "scale(1)";
readonly opacity: 1;
};
readonly to: {
readonly transform: "scale(0.95)";
readonly opacity: 0;
};
readonly duration: 200;
};
readonly bounce: {
readonly from: {
readonly transform: "scale(1)";
};
readonly to: {
readonly transform: "scale(1.05)";
};
readonly duration: 100;
};
readonly shake: {
readonly from: {
readonly transform: "translateX(0)";
};
readonly to: readonly [{
readonly transform: "translateX(-5px)";
}, {
readonly transform: "translateX(5px)";
}, {
readonly transform: "translateX(-5px)";
}, {
readonly transform: "translateX(0)";
}];
readonly duration: 400;
};
readonly pulse: {
readonly from: {
readonly opacity: 1;
};
readonly to: {
readonly opacity: 0.5;
};
readonly duration: 1000;
readonly repeat: number;
readonly repeatType: "reverse";
};
readonly spin: {
readonly from: {
readonly transform: "rotate(0deg)";
};
readonly to: {
readonly transform: "rotate(360deg)";
};
readonly duration: 1000;
readonly repeat: number;
};
};
declare const transitions: {
readonly fast: "150ms ease-in-out";
readonly normal: "250ms ease-in-out";
readonly slow: "350ms ease-in-out";
readonly bounce: "250ms cubic-bezier(0.68, -0.55, 0.265, 1.55)";
readonly elastic: "400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)";
};
export { Alert, AlertDescription, type AlertProps, AlertTitle, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type Column, DataTable, type DataTableProps, Header, type HeaderProps, Input, type InputProps, Modal, type ModalProps, SearchBar, type SearchBarProps, Spinner, type SpinnerProps, type SpinnerType, type Theme, type ThemeColors, ThemeProvider, animations, badgeVariants, borderRadius, breakpoints, buttonVariants, cn, colors, darkTheme, getThemeColors, lightTheme, shadows, spacing, themes, transitions, typography, useTheme, zIndex };