@marcoschwartz/lite-ui 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
     size?: 'sm' | 'md' | 'lg' | 'xl';
     children: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
 }
 declare const Button: React.FC<ButtonProps>;
 
@@ -20,9 +23,412 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
 }
 declare const Select: React.FC<SelectProps>;
 
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showCloseButton?: boolean;
+}
+declare const Modal: React.FC<ModalProps>;
+
+interface NavbarProps {
+    logo?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    sticky?: boolean;
+}
+declare const Navbar: React.FC<NavbarProps>;
+
+interface SidebarProps {
+    children: React.ReactNode;
+    className?: string;
+    width?: 'sm' | 'md' | 'lg';
+    position?: 'left' | 'right';
+}
+declare const Sidebar: React.FC<SidebarProps>;
+
+interface SidebarContextValue {
+    isOpen: boolean;
+    isMobile: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setIsMobile: (isMobile: boolean) => void;
+}
+interface SidebarProviderProps {
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+declare const SidebarProvider: React.FC<SidebarProviderProps>;
+declare const useSidebar: () => SidebarContextValue;
+
+interface AppShellProps {
+    children: React.ReactNode;
+    navbar?: {
+        content: React.ReactNode;
+        width?: 'sm' | 'md' | 'lg';
+        breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+        position?: 'side' | 'top';
+    };
+    header?: React.ReactNode;
+    navbarTitle?: string;
+    navbarLogo?: React.ReactNode;
+    defaultNavbarOpen?: boolean;
+    responsive?: boolean;
+    className?: string;
+}
+declare const AppShell: React.FC<AppShellProps>;
+
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    showCloseButton?: boolean;
+}
+declare const Drawer: React.FC<DrawerProps>;
+
+interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface NumberInputProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    value?: number;
+    onChange?: (value: number | undefined) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    disabled?: boolean;
+    hideControls?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare const NumberInput: React.FC<NumberInputProps>;
+
+type ActionMenuItem = {
+    type?: 'item';
+    label: string;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+} | {
+    type: 'divider';
+};
+interface ActionMenuProps {
+    items: ActionMenuItem[];
+    trigger?: React.ReactNode;
+    position?: 'left' | 'right';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const ActionMenu: React.FC<ActionMenuProps>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hover?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+
+interface AlertProps {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare const Alert: React.FC<AlertProps>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'primary' | 'secondary' | 'white';
+    className?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+
+interface Tab {
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    className?: string;
+}
+declare const Tabs: React.FC<TabsProps>;
+
+interface Column<T = any> {
+    key: string;
+    title: string;
+    render?: (value: any, row: T, index: number) => React.ReactNode;
+    width?: string;
+}
+interface TableProps<T = any> {
+    columns: Column<T>[];
+    data: T[];
+    keyField?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    className?: string;
+}
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    className?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+interface DatePickerProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    value?: Date;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+
+interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+
+interface DateTimePickerProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    value?: Date;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+declare const DateTimePicker: React.FC<DateTimePickerProps>;
+
+interface CalendarProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+}
+declare const Calendar: React.FC<CalendarProps>;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioProps {
+    name: string;
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+declare const Radio: React.FC<RadioProps>;
+
+interface ProgressBarProps {
+    value: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'success' | 'warning' | 'danger';
+    showLabel?: boolean;
+    label?: string;
+    className?: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+
+interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    showValue?: boolean;
+    label?: string;
+    className?: string;
+    range?: boolean;
+    rangeValue?: [number, number];
+    defaultRangeValue?: [number, number];
+    onRangeChange?: (value: [number, number]) => void;
+}
+declare const Slider: React.FC<SliderProps>;
+
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    className?: string;
+    fallbackColor?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+declare const Textarea: React.FC<TextareaProps>;
+
+interface RichTextEditorProps {
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    className?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const RichTextEditor: React.FC<RichTextEditorProps>;
+
+interface Toast {
+    id: string;
+    message: string;
+    type?: 'success' | 'error' | 'warning' | 'info';
+    duration?: number;
+}
+interface ToastContextValue {
+    toasts: Toast[];
+    addToast: (toast: Omit<Toast, 'id'>) => void;
+    removeToast: (id: string) => void;
+}
+declare const useToast: () => ToastContextValue;
+interface ToastProviderProps {
+    children: React.ReactNode;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+declare const ToastProvider: React.FC<ToastProviderProps>;
+declare const toast: {
+    success: (message: string, duration?: number) => {
+        message: string;
+        type: "success";
+        duration: number | undefined;
+    };
+    error: (message: string, duration?: number) => {
+        message: string;
+        type: "error";
+        duration: number | undefined;
+    };
+    warning: (message: string, duration?: number) => {
+        message: string;
+        type: "warning";
+        duration: number | undefined;
+    };
+    info: (message: string, duration?: number) => {
+        message: string;
+        type: "info";
+        duration: number | undefined;
+    };
+};
+
+interface Step {
+    label: string;
+    description?: string;
+}
+interface StepperProps {
+    steps: Step[];
+    currentStep: number;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+declare const Stepper: React.FC<StepperProps>;
+
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'solid' | 'dashed' | 'dotted';
+    className?: string;
+    label?: string;
+    labelPosition?: 'left' | 'center' | 'right';
+}
+declare const Divider: React.FC<DividerProps>;
+
+interface FileUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    onChange?: (files: File[]) => void;
+    onError?: (error: string) => void;
+    className?: string;
+    label?: string;
+    helperText?: string;
+}
+declare const FileUpload: React.FC<FileUploadProps>;
+
 type ThemeName = 'default' | 'minimalistic';
 interface ButtonTheme {
     primary: string;
@@ -66,6 +472,7 @@ interface ThemeContextValue {
     setTheme: (themeName: ThemeName) => void;
     colorMode: ColorMode;
     setColorMode: (mode: ColorMode) => void;
+    toggleColorMode: () => void;
     resolvedColorMode: 'light' | 'dark';
 }
 declare function useTheme(): ThemeContextValue;
@@ -84,4 +491,71 @@ declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: The
 declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n";
 declare function getThemeScript(): string;
 
-export { Button, type ButtonProps, type ButtonTheme, type ColorMode, Select, type SelectOption, type SelectProps, type SelectTheme, type Theme, type ThemeName, ThemeProvider, getThemeScript, themeScript, themes, useTheme };
+interface IconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+interface IconComponent extends React.FC<IconProps> {
+    displayName?: string;
+}
+
+declare const HomeIcon: IconComponent;
+
+declare const UserIcon: IconComponent;
+
+declare const SearchIcon: IconComponent;
+
+declare const BellIcon: IconComponent;
+
+declare const SettingsIcon: IconComponent;
+
+declare const MenuIcon: IconComponent;
+
+declare const CloseIcon: IconComponent;
+
+declare const ChevronDownIcon: IconComponent;
+
+declare const ChevronRightIcon: IconComponent;
+
+declare const CheckIcon: IconComponent;
+
+declare const PlusIcon: IconComponent;
+
+declare const TrashIcon: IconComponent;
+
+declare const EditIcon: IconComponent;
+
+declare const MailIcon: IconComponent;
+
+declare const StarIcon: IconComponent;
+
+declare const HeartIcon: IconComponent;
+
+declare const DownloadIcon: IconComponent;
+
+declare const UploadIcon: IconComponent;
+
+declare const CameraIcon: IconComponent;
+
+declare const LockIcon: IconComponent;
+
+declare const CalendarIcon: IconComponent;
+
+declare const GoogleIcon: IconComponent;
+
+declare const GitHubIcon: IconComponent;
+
+declare const TwitterIcon: IconComponent;
+
+declare const FacebookIcon: IconComponent;
+
+declare const AppleIcon: IconComponent;
+
+declare const LinkedInIcon: IconComponent;
+
+declare const YouTubeIcon: IconComponent;
+
+declare const SlackIcon: IconComponent;
+
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, type AlertProps, AppShell, type AppShellProps, AppleIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BellIcon, Button, type ButtonProps, type ButtonTheme, Calendar, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronRightIcon, CloseIcon, type ColorMode, type Column, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, FacebookIcon, FileUpload, type FileUploadProps, GitHubIcon, GoogleIcon, HeartIcon, HomeIcon, type IconComponent, type IconProps, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, RichTextEditor, type RichTextEditorProps, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SlackIcon, Slider, type SliderProps, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, type Tab, Table, type TableProps, Tabs, type TabsProps, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, YouTubeIcon, getThemeScript, themeScript, themes, toast, useSidebar, useTheme, useToast };