its-just-ui/dist/components/Badge/Badge.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 BadgeContextValue {
    variant: BadgeVariant;
    size: BadgeSize;
    status: BadgeStatus;
    isDisabled: boolean;
    isLoading: boolean;
    isRequired: boolean;
    hasIcon: boolean;
    hasCloseButton: boolean;
    onClose?: () => void;
    onIconClick?: () => void;
}
export type BadgeVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'solid' | 'gradient' | 'glass' | 'neon';
export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
export type BadgeStatus = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
export interface BadgeBaseProps {
    variant?: BadgeVariant;
    size?: BadgeSize;
    status?: BadgeStatus;
    disabled?: boolean;
    loading?: boolean;
    required?: boolean;
    interactive?: boolean;
    animated?: boolean;
    animation?: 'pulse' | 'bounce' | 'shake' | 'glow';
    label?: string;
    helperText?: string;
    icon?: React.ReactNode;
    closeButton?: boolean;
    onClose?: () => void;
    onIconClick?: () => void;
    loadingText?: string;
    loadingSpinner?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    borderWidth?: string | number;
    borderColor?: string;
    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
    borderRadius?: string | number;
    fontSize?: string | number;
    fontWeight?: string | number;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    color?: string;
    hoverBackgroundColor?: string;
    hoverTextColor?: string;
    scale?: string;
    hoverScale?: string;
    opacity?: string;
    hoverOpacity?: string;
    transform?: string;
    hoverTransform?: string;
    focusRingColor?: string;
    focusRingWidth?: string | number;
    focusRingOffset?: string | number;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    hoverBoxShadow?: string;
    padding?: string | number;
    paddingX?: string | number;
    paddingY?: string | number;
    margin?: string | number;
    marginX?: string | number;
    marginY?: string | number;
    transitionDuration?: string;
    transitionProperty?: string;
    transitionTimingFunction?: string;
    animationDuration?: number;
    animationDelay?: number;
    animationIterationCount?: string | number;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
    'aria-required'?: boolean;
    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
}
export interface BadgeProps extends BadgeBaseProps {
    children: React.ReactNode;
}
export interface BadgeIconProps {
    className?: string;
    style?: React.CSSProperties;
    color?: string;
    size?: string | number;
    onClick?: () => void;
    children: React.ReactNode;
}
export interface BadgeCloseButtonProps {
    className?: string;
    style?: React.CSSProperties;
    color?: string;
    size?: string | number;
    onClick?: () => void;
    'aria-label'?: string;
}
export interface BadgeLabelProps {
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
export interface BadgeHelperTextProps {
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
declare const BadgeIcon: React.MemoExoticComponent<React.ForwardRefExoticComponent<BadgeIconProps & React.RefAttributes<HTMLSpanElement>>>;
declare const BadgeCloseButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<BadgeCloseButtonProps & React.RefAttributes<HTMLButtonElement>>>;
declare const BadgeLabel: React.MemoExoticComponent<React.ForwardRefExoticComponent<BadgeLabelProps & React.RefAttributes<HTMLSpanElement>>>;
declare const BadgeHelperText: React.MemoExoticComponent<React.ForwardRefExoticComponent<BadgeHelperTextProps & React.RefAttributes<HTMLSpanElement>>>;
interface BadgeComponent extends React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>> {
    Icon: typeof BadgeIcon;
    CloseButton: typeof BadgeCloseButton;
    Label: typeof BadgeLabel;
    HelperText: typeof BadgeHelperText;
}
declare const BadgeWithSubComponents: BadgeComponent;
export { BadgeWithSubComponents as Badge, BadgeIcon, BadgeCloseButton, BadgeLabel, BadgeHelperText };