@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
82 lines • 3.02 kB
TypeScript
import * as React from "react";
import type { GroupImperativeHandle, PanelImperativeHandle } from "react-resizable-panels";
import * as ResizablePrimitive from "react-resizable-panels";
export type { GroupImperativeHandle, PanelImperativeHandle };
/**
* Props for the {@link ResizablePanelGroup} component.
*/
export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.Group>;
/**
* Props for the {@link ResizablePanel} component.
*/
export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;
/**
* Props for the {@link ResizableHandle} component.
*
* @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
*/
export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.Separator> {
/**
* Renders a visual drag grip inside the resize handle to indicate that adjacent panels can be resized.
*
* @default false
* @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
*/
withHandle?: boolean;
}
/**
* Wraps `react-resizable-panels` panel groups with shared styles.
*
* @remarks
* - Third-party wrapper component (v4 API: `Group` with `orientation` prop)
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example
* ```tsx
* <ResizablePanelGroup orientation='horizontal'>...</ResizablePanelGroup>
* ```
*
* @see {@link ResizablePanelGroupProps} for available props
* @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
*/
declare function ResizablePanelGroup({ className, ...props }: Readonly<ResizablePanelGroupProps>): React.JSX.Element;
declare namespace ResizablePanelGroup {
var displayName: string;
}
/**
* Re-exports the underlying resizable panel primitive for consistent composition.
*
* @remarks
* - Third-party wrapper component
* - Styling is applied by parent panel group and handles
*
* @example
* ```tsx
* <ResizablePanel defaultSize="50%">Content</ResizablePanel>
* ```
*
* @see {@link ResizablePanelProps} for available props
* @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
*/
declare const ResizablePanel: typeof ResizablePrimitive.Panel;
/**
* Renders a draggable resize handle between resizable panels.
*
* @remarks
* - Third-party wrapper component (v4 API: `Separator`)
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example
* ```tsx
* <ResizableHandle withHandle />
* ```
*
* @see {@link ResizableHandleProps} for available props
* @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
*/
declare function ResizableHandle({ withHandle, className, children, ...props }: Readonly<ResizableHandleProps>): React.JSX.Element;
declare namespace ResizableHandle {
var displayName: string;
}
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
//# sourceMappingURL=resizable.d.ts.map