its-just-ui/dist/components/Splitter/Splitter.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 SplitterDirection = 'horizontal' | 'vertical';
export type SplitterSize = 'sm' | 'md' | 'lg';
export type SplitterVariant = 'basic' | 'shadowed' | 'bordered' | 'compact';
/**
 * Context value for the Splitter component
 */
export interface SplitterContextValue {
    direction: SplitterDirection;
    sizes: number[];
    setSizes: (sizes: number[]) => void;
    isDragging: boolean;
    setIsDragging: (dragging: boolean) => void;
    activeHandleIndex: number | null;
    setActiveHandleIndex: (index: number | null) => void;
    minSize: number;
    maxSize: number;
    onResize?: (index: number, sizes: number[]) => void;
    onDragStart?: (index: number) => void;
    onDragEnd?: (index: number) => void;
}
/**
 * Base props for the Splitter component
 */
export interface SplitterBaseProps {
    direction?: SplitterDirection;
    sizes?: number[];
    initialSizes?: number[];
    minSize?: number;
    maxSize?: number;
    controlled?: boolean;
    variant?: SplitterVariant;
    handleSize?: SplitterSize;
    onResize?: (index: number, sizes: number[]) => void;
    onDragStart?: (index: number) => void;
    onDragEnd?: (index: number) => void;
    className?: string;
    style?: React.CSSProperties;
    borderWidth?: string | number;
    borderColor?: string;
    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
    borderRadius?: string | number;
    animateResize?: boolean;
    transitionDuration?: string;
    persistSizes?: boolean;
    storageKey?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    role?: string;
    tabIndex?: number;
}
/**
 * Props for the main Splitter component
 */
export interface SplitterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof SplitterBaseProps>, SplitterBaseProps {
    children?: React.ReactNode;
}
/**
 * Props for individual Splitter panes
 */
export interface SplitterPaneProps {
    index: number;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    minSize?: number;
    maxSize?: number;
    collapsed?: boolean;
}
/**
 * Props for Splitter handles
 */
export interface SplitterHandleProps {
    index: number;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    icon?: React.ReactNode;
    disabled?: boolean;
    'aria-label'?: string;
}
export declare const useSplitterContext: () => SplitterContextValue;
/**
 * Splitter Pane Component
 *
 * Represents a resizable pane within the splitter. Each pane can be resized
 * by dragging the handles between them.
 *
 * @example
 * ```tsx
 * <Splitter.Pane index={0}>
 *   <div>Content for this pane</div>
 * </Splitter.Pane>
 * ```
 */
declare const SplitterPane: React.ForwardRefExoticComponent<SplitterPaneProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Splitter Handle Component
 *
 * Represents a draggable handle between panes that allows users to resize
 * the adjacent panes by dragging.
 *
 * @example
 * ```tsx
 * <Splitter.Handle index={0} />
 * ```
 */
declare const SplitterHandle: React.ForwardRefExoticComponent<SplitterHandleProps & React.RefAttributes<HTMLDivElement>>;
declare const Splitter: React.ForwardRefExoticComponent<SplitterProps & React.RefAttributes<HTMLDivElement>> & {
    Pane: typeof SplitterPane;
    Handle: typeof SplitterHandle;
};
export { Splitter };