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

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';

export type SegmentedVariant = 'solid' | 'outline' | 'ghost' | 'filled' | 'minimal' | 'underline';
export type SegmentedSize = 'sm' | 'md' | 'lg';
export type SegmentedDirection = 'horizontal' | 'vertical';
export type SegmentedTransition = 'smooth' | 'bouncy' | 'swift' | 'elastic' | 'instant' | 'fade';
export interface SegmentedOption {
    label: string;
    value: string;
    icon?: React.ReactNode;
    disabled?: boolean;
}
export interface SegmentedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    value?: string;
    defaultValue?: string;
    onChange?: (value: string) => void;
    options: SegmentedOption[];
    disabled?: boolean;
    readOnly?: boolean;
    fullWidth?: boolean;
    rounded?: boolean;
    stretch?: boolean;
    variant?: SegmentedVariant;
    size?: SegmentedSize;
    direction?: SegmentedDirection;
    transition?: SegmentedTransition;
    borderWidth?: string;
    borderColor?: string;
    borderRadius?: string;
    borderStyle?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    hoverColor?: string;
    activeColor?: string;
    selectedTextColor?: string;
    indicatorColor?: string;
    indicatorTransition?: string;
    indicatorBorderRadius?: string;
    padding?: string;
    gap?: string;
    margin?: string;
    focusRingColor?: string;
    focusBorderColor?: string;
    hoverShadow?: string;
    animateIndicator?: boolean;
    flexWrap?: boolean;
    renderItem?: (option: SegmentedOption, isSelected: boolean, isDisabled: boolean) => React.ReactNode;
    'aria-label'?: string;
    'aria-labelledby'?: string;
}
interface SegmentedContextValue {
    value?: string;
    onChange: (value: string) => void;
    disabled?: boolean;
    readOnly?: boolean;
    variant: SegmentedVariant;
    size: SegmentedSize;
    direction: SegmentedDirection;
    transition: SegmentedTransition;
    options: SegmentedOption[];
    borderWidth?: string;
    borderColor?: string;
    borderRadius?: string;
    borderStyle?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    hoverColor?: string;
    activeColor?: string;
    selectedTextColor?: string;
    indicatorColor?: string;
    indicatorTransition?: string;
    indicatorBorderRadius?: string;
    padding?: string;
    gap?: string;
    focusRingColor?: string;
    focusBorderColor?: string;
    hoverShadow?: string;
    animateIndicator?: boolean;
    renderItem?: (option: SegmentedOption, isSelected: boolean, isDisabled: boolean) => React.ReactNode;
    indicatorStyle: React.CSSProperties;
    updateIndicator: (element: HTMLElement | null) => void;
}
export declare const useSegmented: () => SegmentedContextValue;
interface SegmentedItemProps {
    option: SegmentedOption;
}
declare const SegmentedItem: React.FC<SegmentedItemProps>;
declare const SegmentedIndicator: {
    (): React.JSX.Element | null;
    displayName: string;
};
interface SegmentedComponent extends React.ForwardRefExoticComponent<SegmentedProps & React.RefAttributes<HTMLDivElement>> {
    Item: typeof SegmentedItem;
    Indicator: typeof SegmentedIndicator;
}
declare const SegmentedCompound: SegmentedComponent;
export { SegmentedCompound as Segmented };
export default SegmentedCompound;