@lax-wp/design-system
Version:
A comprehensive React + TypeScript design system built with Vite, providing reusable UI components for the LAX web portal applications. Features a complete set of form components, data display elements, and interactive controls with full TypeScript suppor
49 lines (48 loc) • 1.77 kB
TypeScript
/**
* Sidebar placement options
*/
export type ResizableSidebarPlacement = "left" | "right";
/**
* Props for the ResizableSidebar component
*/
export interface ResizableSidebarProps {
/** Whether the sidebar is open */
isOpen: boolean;
/** Content to display in the sidebar */
children: React.ReactNode;
/** Whether to display in full screen mode */
fullScreen?: boolean;
/** Callback when drag/resize ends */
onDragEnd?: (() => void) | null;
/** Callback when resize occurs */
onResize?: (width: number) => void;
/** Additional CSS classes for the wrapper */
className?: string;
/** Default size of the sidebar */
defaultSize?: string;
/** Minimum width of the sidebar */
minWidth?: number;
/** Placement of the sidebar */
placement?: ResizableSidebarPlacement;
/** Parent container ID for portal rendering */
parentContainer?: string;
/** Header content */
header?: React.ReactNode;
/** Unique ID for the sidebar */
id?: string;
/** Additional CSS classes for the container */
containerClassName?: string;
/** Whether to ignore parent container height */
ignoreParentContainerHeight?: boolean;
/** Custom height */
height?: string;
/** Whether the main sidebar is expanded (affects max width calculation) */
isMainSidebarExpanded?: boolean;
/** Width of the main sidebar when expanded */
mainSidebarExpandedWidth?: number;
/** Width of the main sidebar when collapsed */
mainSidebarCollapsedWidth?: number;
/** Height offset for navbar */
navbarHeight?: number;
}
export declare const ResizableSidebar: import("react").ForwardRefExoticComponent<ResizableSidebarProps & import("react").RefAttributes<HTMLDivElement>>;