shinodalabs-ui/dist/index.d.mts

A collection of reusable React components styled with Tailwind CSS, including buttons, date pickers, modals, tabs, progress bars, forms, checkboxes, radio buttons, selects, inputs, textareas, dropdowns, tooltips, alerts, and badges.

import { LucideIcon } from 'lucide-react';
import React, { FC, ReactNode } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { FieldValues, ControllerRenderProps, Path } from 'react-hook-form';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: "emerald" | "blue" | "red" | "neutral";
    size?: "sm" | "md" | "lg";
    icon?: LucideIcon;
    loading?: boolean;
    children?: React.ReactNode;
    disabled?: boolean;
}
declare const Button: FC<ButtonProps>;

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label: string;
    error?: string;
    type?: string;
    onChange?: (value: number | React.ChangeEvent<HTMLInputElement>) => void;
    headerRight?: React.ReactNode;
    centerContent?: boolean;
    currency?: string;
    language?: string;
}
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
    label?: string;
    options: {
        value: string;
        label: string;
    }[];
    error?: string;
}
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

interface RadioOption {
    value: string;
    label: string;
}
interface RadioGroupProps {
    name: string;
    label?: string;
    value: string;
    options: RadioOption[];
    onChange: (value: string) => void;
}
declare const RadioGroup: ({ name, label, value, options, onChange, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;

interface ToggleSwitchProps {
    label: string;
    description?: string;
    checked: boolean;
    onChange: (checked: boolean) => void;
}
declare const ToggleSwitch: ({ label, description, checked, onChange, }: ToggleSwitchProps) => react_jsx_runtime.JSX.Element;

interface DatePickerProps<TFormValues extends FieldValues> {
    field: ControllerRenderProps<TFormValues, Path<TFormValues>>;
    error?: string;
    label?: string;
    placeholder?: string;
}
declare const DatePicker: <TFormValues extends FieldValues>({ field, error, label, placeholder, }: DatePickerProps<TFormValues>) => react_jsx_runtime.JSX.Element;

interface MonthDatePickerProps {
    selectedDate?: Date;
    onChange: (date: Date) => void;
    minDate?: Date;
    maxDate?: Date;
    isOpen: boolean;
    onClose: () => void;
}
declare const MonthDatePicker: ({ selectedDate, onChange, minDate, maxDate, isOpen, onClose, }: MonthDatePickerProps) => react_jsx_runtime.JSX.Element | null;

interface ModalProps {
    isOpen: boolean;
    title: string;
    description?: string;
    children: ReactNode;
    onClose: () => void;
    onConfirm?: () => void;
    confirmLabel?: string;
    cancelLabel?: string;
    isLoading?: boolean;
}
declare const Modal: ({ isOpen, title, description, children, onClose, onConfirm, isLoading, confirmLabel, cancelLabel, }: ModalProps) => react_jsx_runtime.JSX.Element | null;

interface Tab<T> {
    label: string;
    value: T;
}
interface TabsProps<T> {
    tabs: Tab<T>[];
    selectedValue: T;
    onChange: (value: T) => void;
    disabled?: boolean;
}
declare const Tabs: <T extends string | number>({ tabs, selectedValue, onChange, disabled, }: TabsProps<T>) => react_jsx_runtime.JSX.Element;

interface ProgressBarProps {
    percentage: number;
}
declare const ProgressBar: ({ percentage }: ProgressBarProps) => react_jsx_runtime.JSX.Element;

interface IconButtonProps {
    icon: LucideIcon;
    name: string;
    disabled?: boolean;
    onClick: () => void;
}
declare const IconButton: ({ icon: Icon, name, onClick, disabled, }: IconButtonProps) => react_jsx_runtime.JSX.Element;

interface DialogProps {
    isOpen: boolean;
    title: string;
    description?: string | ReactNode;
    confirmLabel?: string;
    cancelLabel?: string;
    onClose: () => void;
    onConfirm: () => void;
    isLoading?: boolean;
}
declare const Dialog: ({ isOpen, title, description, confirmLabel, cancelLabel, onClose, onConfirm, isLoading, }: DialogProps) => react_jsx_runtime.JSX.Element | null;

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    perPage?: number;
    optionsItemsPerPage: {
        label: string;
        value: string;
    }[];
    onPageChange: (page: number) => void;
    onItemsPerPageChange: (itemsPerPage: number) => void;
    labels: {
        previous: string;
        next: string;
        showing: string;
        of: string;
        results: string;
        page: string;
        itemsPerPage: string;
    };
}
declare const Pagination: ({ currentPage, totalPages, totalItems, onPageChange, perPage, onItemsPerPageChange, optionsItemsPerPage, labels, }: PaginationProps) => react_jsx_runtime.JSX.Element;

interface DateRangeProps {
    selectedRange?: {
        from: Date | undefined;
        to: Date | undefined;
    };
    onChange: (range: {
        from: Date | undefined;
        to: Date | undefined;
    }) => void;
    labels?: {
        filterByDate?: string;
        clear?: string;
        selectDate?: string;
        closeCalendar?: string;
    };
}
declare const DateRange: ({ selectedRange, onChange, labels, }: DateRangeProps) => react_jsx_runtime.JSX.Element;

interface FilterCardProps {
    title?: string;
    children?: ReactNode;
}
declare const FilterCard: ({ children, title }: FilterCardProps) => react_jsx_runtime.JSX.Element;

interface TableProps {
    children: React.ReactNode;
}
interface HeaderColumn<T> {
    key: keyof T | "actions";
    label: React.ReactNode;
    align?: "left" | "right" | "center";
    hidden?: boolean;
    render?: (value: any, row: T) => React.ReactNode;
    format?: (value: any, row: T) => React.ReactNode;
    style?: (value: any, row: T) => string;
    showMobile?: boolean;
}
interface TableHeaderProps<T> {
    columns: HeaderColumn<T>[];
}
interface TableRowProps<T> {
    data: T;
    columns: HeaderColumn<T>[];
    onClickEdit?: () => void;
    onClickDelete?: () => void;
}
declare function TableRow<T extends Record<string, any>>({ data, columns, onClickEdit, onClickDelete, }: TableRowProps<T>): react_jsx_runtime.JSX.Element;
declare const Table: (({ children }: TableProps) => react_jsx_runtime.JSX.Element) & {
    Header: <T>({ columns }: TableHeaderProps<T>) => react_jsx_runtime.JSX.Element;
    Body: ({ children }: {
        children: React.ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    Row: typeof TableRow;
};

export { Button, DatePicker, DateRange, Dialog, FilterCard, IconButton, Input, Modal, MonthDatePicker, Pagination, ProgressBar, RadioGroup, Select, Table, Tabs, ToggleSwitch };