its-just-ui/dist/components/Chip/Chip.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSelect'> {
    value?: string | string[];
    onChange?: (value: string | string[] | null) => void;
    variant?: 'default' | 'filled' | 'outlined' | 'soft' | 'gradient';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error' | 'info';
    disabled?: boolean;
    loading?: boolean;
    removable?: boolean;
    selectable?: boolean;
    multiple?: boolean;
    maxChips?: number;
    label?: string;
    helperText?: string;
    required?: boolean;
    emptyMessage?: string;
    loadingMessage?: string;
    onRemove?: (value: string) => void;
    onSelect?: (value: string) => void;
    renderChip?: (value: string, isSelected: boolean) => React.ReactNode;
    children?: React.ReactNode;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    selectedBackgroundColor?: string;
    hoverBackgroundColor?: string;
    disabledBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    hoverBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    gap?: string;
    iconColor?: string;
    removeIconColor?: string;
    loadingIconColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelColor?: string;
    labelMarginBottom?: string;
    helperTextFontSize?: string;
    helperTextColor?: string;
    helperTextMarginTop?: string;
    requiredColor?: string;
    containerBackgroundColor?: string;
    containerBorderColor?: string;
    containerBorderWidth?: string;
    containerBorderRadius?: string;
    containerPadding?: string;
    containerGap?: string;
}
interface ChipContextValue {
    value: string | string[] | null;
    onChange: (value: string | string[] | null) => void;
    variant?: 'default' | 'filled' | 'outlined' | 'soft' | 'gradient';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error' | 'info';
    disabled?: boolean;
    loading?: boolean;
    removable?: boolean;
    selectable?: boolean;
    multiple?: boolean;
    maxChips?: number;
    onRemove?: (value: string) => void;
    onSelect?: (value: string) => void;
    renderChip?: (value: string, isSelected: boolean) => React.ReactNode;
    emptyMessage?: string;
    loadingMessage?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    selectedBackgroundColor?: string;
    hoverBackgroundColor?: string;
    disabledBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    hoverBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    gap?: string;
    iconColor?: string;
    removeIconColor?: string;
    loadingIconColor?: string;
    containerBackgroundColor?: string;
    containerBorderColor?: string;
    containerBorderWidth?: string;
    containerBorderRadius?: string;
    containerPadding?: string;
    containerGap?: string;
}
export declare const useChip: () => ChipContextValue;
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
export interface ChipContainerProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const ChipContainer: React.ForwardRefExoticComponent<ChipContainerProps & React.RefAttributes<HTMLDivElement>>;
export interface ChipItemProps extends React.HTMLAttributes<HTMLDivElement> {
    value: string;
    icon?: React.ReactNode;
    avatar?: React.ReactNode;
}
declare const ChipItem: React.ForwardRefExoticComponent<ChipItemProps & React.RefAttributes<HTMLDivElement>>;
export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    placeholder?: string;
    onAdd?: (value: string) => void;
    validateInput?: (value: string) => boolean | string;
}
declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLInputElement>>;
export { Chip, ChipContainer, ChipItem, ChipInput };