its-just-ui/dist/components/ToggleButtons/ToggleButtons.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 type ToggleButtonsVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'elevated';
export type ToggleButtonsSize = 'sm' | 'md' | 'lg';
export type ToggleButtonsStatus = 'default' | 'success' | 'warning' | 'error';
export type ToggleButtonsOrientation = 'horizontal' | 'vertical';
export type ToggleButtonsSelectionMode = 'single' | 'multiple';
export interface ToggleButtonsContextValue {
    value?: string | string[];
    onChange?: (value: string | string[]) => void;
    disabled?: boolean;
    required?: boolean;
    loading?: boolean;
    variant?: ToggleButtonsVariant;
    size?: ToggleButtonsSize;
    status?: ToggleButtonsStatus;
    selectionMode?: ToggleButtonsSelectionMode;
    name?: string;
}
export interface ToggleButtonsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    value?: string | string[];
    defaultValue?: string | string[];
    onChange?: (value: string | string[]) => void;
    disabled?: boolean;
    required?: boolean;
    loading?: boolean;
    name?: string;
    selectionMode?: ToggleButtonsSelectionMode;
    variant?: ToggleButtonsVariant;
    size?: ToggleButtonsSize;
    status?: ToggleButtonsStatus;
    orientation?: ToggleButtonsOrientation;
    fullWidth?: boolean;
    exclusive?: boolean;
    label?: React.ReactNode;
    helperText?: React.ReactNode;
    errorMessage?: string;
    emptyMessage?: string;
    transition?: 'none' | 'slide' | 'fade' | 'bounce' | 'smooth';
    transitionDuration?: number;
    containerClassName?: string;
    containerStyle?: React.CSSProperties;
    backgroundColor?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    boxShadow?: string;
    gap?: string;
    groupBackgroundColor?: string;
    groupBorderWidth?: string;
    groupBorderColor?: string;
    groupBorderRadius?: string;
    groupPadding?: string;
    buttonBorderRadius?: string;
    buttonBackgroundColor?: string;
    buttonBackgroundColorSelected?: string;
    buttonTextColor?: string;
    buttonTextColorSelected?: string;
    buttonBorderColorSelected?: string;
    buttonBorderWidth?: string;
    groupGap?: string;
    labelColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelFontFamily?: string;
    helperTextColor?: string;
    helperTextFontSize?: string;
    errorMessageColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    focusBoxShadow?: string;
    renderLabel?: (required?: boolean) => React.ReactNode;
    renderButton?: (button: ToggleButtonProps, isSelected: boolean, isDisabled?: boolean) => React.ReactNode;
    successColor?: string;
    warningColor?: string;
    errorColor?: string;
    children?: React.ReactNode;
}
export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
    value: string;
    label?: React.ReactNode;
    icon?: React.ReactNode;
    iconPosition?: 'start' | 'end';
    disabled?: boolean;
    loading?: boolean;
    loadingIcon?: React.ReactNode;
    buttonBackgroundColor?: string;
    buttonBackgroundColorSelected?: string;
    buttonBorderColor?: string;
    buttonBorderColorSelected?: string;
    buttonBorderWidth?: string;
    buttonBorderRadius?: string;
    buttonPadding?: string;
    buttonTextColor?: string;
    buttonTextColorSelected?: string;
    buttonBoxShadow?: string;
    buttonBoxShadowSelected?: string;
    labelColor?: string;
    labelColorSelected?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    iconColor?: string;
    iconColorSelected?: string;
    iconSize?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusBackgroundColor?: string;
    hoverBackgroundColor?: string;
    hoverBorderColor?: string;
    hoverTextColor?: string;
    hoverScale?: string;
    activeBackgroundColor?: string;
    activeScale?: string;
    renderContent?: (isSelected: boolean, isDisabled?: boolean) => React.ReactNode;
    children?: React.ReactNode;
}
export interface ToggleButtonsLabelProps {
    className?: string;
    style?: React.CSSProperties;
    required?: boolean;
    children: React.ReactNode;
}
export interface ToggleButtonsHelperTextProps {
    className?: string;
    style?: React.CSSProperties;
    id?: string;
    children: React.ReactNode;
}
export declare const useToggleButtonsContext: () => ToggleButtonsContextValue;
export declare const ToggleButtonsLabel: React.ForwardRefExoticComponent<ToggleButtonsLabelProps & React.RefAttributes<HTMLLabelElement>>;
export declare const ToggleButtonsHelperText: React.ForwardRefExoticComponent<ToggleButtonsHelperTextProps & React.RefAttributes<HTMLDivElement>>;
export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
interface ToggleButtonsComponent extends React.ForwardRefExoticComponent<ToggleButtonsProps & React.RefAttributes<HTMLDivElement>> {
    Button: typeof ToggleButton;
    Label: typeof ToggleButtonsLabel;
    HelperText: typeof ToggleButtonsHelperText;
}
declare const ToggleButtons: ToggleButtonsComponent;
export { ToggleButtons };
export default ToggleButtons;