import * as solid_js from 'solid-js';
import { Accessor, Setter, ValidComponent, JSX } from 'solid-js';
import { Size } from '@corvu/utils';
export { Size } from '@corvu/utils';
import { Ref, ElementOf } from '@corvu/utils/dom';
import { DynamicProps } from '@corvu/utils/dynamic';
export { DynamicProps } from '@corvu/utils/dynamic';

type ResizeStrategy = 'preceding' | 'following' | 'both';

type ResizableContextValue = {
    /** The orientation of the resizable. */
    orientation: Accessor<'horizontal' | 'vertical'>;
    /** The sizes of the panels. */
    sizes: Accessor<number[]>;
    /** Change the sizes of the panels. */
    setSizes: Setter<number[]>;
    /** The delta to use when resizing with arrow keys. */
    keyboardDelta: Accessor<Size>;
    /** Whether to handle the cursor style when resizing. */
    handleCursorStyle: Accessor<boolean>;
    /** Resize a panel to a specific size with the given strategy. */
    resize: (panelIndex: number, size: Size, strategy?: ResizeStrategy) => void;
    /** Collapse a panel with the given strategy. Only works if `collapsible` is set to `true`. */
    collapse: (panelIndex: number, strategy?: ResizeStrategy) => void;
    /** Expand a panel with the given strategy. Only works if `collapsible` is set to `true`. */
    expand: (panelIndex: number, strategy?: ResizeStrategy) => void;
};
/** Context which exposes various properties to interact with the resizable. Optionally provide a contextId to access a keyed context. */
declare const useResizableContext: (contextId?: string) => ResizableContextValue;

type ResizableHandleCorvuProps = {
    /**
     * Whether the handle is allowed to intersect with another handle at its start (Left/Top of the handle)
     * @defaultValue `true`
     */
    startIntersection?: boolean;
    /**
     * Whether the handle is allowed to intersect with another handle at its end (Right/Bottom of the handle)
     * @defaultValue `true`
     */
    endIntersection?: boolean;
    /**
     * Whether Alt key resize mode is enabled. Set to `'only'` to make it the default  and only way to resize.
     * @defaultValue `true`
     */
    altKey?: boolean | 'only';
    /**
     * Callback fired when the handle starts being dragged. Can be prevented by calling `event.preventDefault`.
     */
    onHandleDragStart?: (event: PointerEvent) => void;
    /**
     * Callback fired when the handle is being dragged. Can be prevented by calling `event.preventDefault`.
     */
    onHandleDrag?: (event: CustomEvent) => void;
    /**
     * Callback fired when the handle stops being dragged.
     */
    onHandleDragEnd?: (event: PointerEvent | TouchEvent | MouseEvent) => void;
    /**
     * The `id` of the resizable context to use.
     */
    contextId?: string;
};
type ResizableHandleSharedElementProps<T extends ValidComponent = 'button'> = {
    ref: Ref<ElementOf<T>>;
    style: string | JSX.CSSProperties;
    disabled: boolean | undefined;
    onBlur: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
    onFocus: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
    onKeyDown: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
    onKeyUp: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
    onMouseEnter: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
    onMouseLeave: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
    onPointerDown: JSX.EventHandlerUnion<ElementOf<T>, PointerEvent>;
    children: JSX.Element;
};
type ResizableHandleElementProps = ResizableHandleSharedElementProps & {
    role: 'separator';
    'aria-controls': string | undefined;
    'aria-orientation': 'horizontal' | 'vertical';
    'aria-valuemax': number | undefined;
    'aria-valuemin': number | undefined;
    'aria-valuenow': number | undefined;
    'data-active': '' | undefined;
    'data-dragging': '' | undefined;
    'data-orientation': 'horizontal' | 'vertical';
    'data-corvu-resizable-handle': '';
};
type ResizableHandleProps<T extends ValidComponent = 'button'> = ResizableHandleCorvuProps & Partial<ResizableHandleSharedElementProps<T>>;
/** Resizable handle.
 *
 * @data `data-corvu-resizable-handle` - Present on every resizable handle.
 * @data `data-active` - Present when the handle is active.
 * @data `data-dragging` - Present when the handle is being dragged.
 * @data `data-orientation` - The orientation of the resizable.
 */
declare const ResizableHandle: <T extends ValidComponent = "button">(props: DynamicProps<T, ResizableHandleProps<T>>) => JSX.Element;

type ResizablePanelCorvuProps = {
    /**
     * The initial size of the panel. If the panel is rendered on the server, this should be a percentage to avoid layout shifts.
     */
    initialSize?: Size;
    /**
     * The minimum size of the panel.
     * @defaultValue 0
     */
    minSize?: Size;
    /**
     * The maximum size of the panel.
     * @defaultValue 1
     */
    maxSize?: Size;
    /**
     * Whether the panel is collapsible.
     * @defaultValue `false`
     */
    collapsible?: boolean;
    /**
     * The size the panel should collapse to.
     * @defaultValue 0
     */
    collapsedSize?: Size;
    /**
     * How much the user has to "overdrag" for the panel to collapse.
     * @defaultValue 0.05
     */
    collapseThreshold?: Size;
    /**
     * Callback fired when the panel is resized.
     * @param size - The new size of the panel.
     */
    onResize?: (size: number) => void;
    /**
     * Callback fired when the panel is collapsed.
     * @param size - The new size of the panel.
     */
    onCollapse?: (size: number) => void;
    /**
     * Callback fired when the panel is expanded.
     * @param size - The new size of the panel.
     */
    onExpand?: (size: number) => void;
    /**
     * The `id` of the resizable context to use.
     */
    contextId?: string;
    /**
     * The `id` attribute of the resizable panel element.
     * @defaultValue `createUniqueId()`
     */
    panelId?: string;
};
type ResizablePanelSharedElementProps<T extends ValidComponent = 'div'> = {
    ref: Ref<ElementOf<T>>;
    style: string | JSX.CSSProperties;
    children: JSX.Element | ((props: ResizablePanelChildrenProps) => JSX.Element);
};
type ResizablePanelElementProps = ResizablePanelSharedElementProps & {
    id: string;
    'data-collapsed': '' | undefined;
    'data-expanded': '' | undefined;
    'data-orientation': 'horizontal' | 'vertical';
    'data-corvu-resizable-panel': '';
};
type ResizablePanelProps<T extends ValidComponent = 'div'> = ResizablePanelCorvuProps & Partial<ResizablePanelSharedElementProps<T>>;
type ResizablePanelChildrenProps = {
    /** The current size of the panel. */
    size: number;
    /** The minimum size of the panel. */
    minSize: Size;
    /** The maximum size of the panel. */
    maxSize: Size;
    /** Whether the panel is collapsible. */
    collapsible: boolean;
    /** The size the panel should collapse to. */
    collapsedSize: Size;
    /** How much the user has to "overdrag" for the panel to collapse. */
    collapseThreshold: Size;
    /** Whether the panel is currently collapsed. */
    collapsed: boolean;
    /** Resize the panel to a specific size with the given strategy. */
    resize: (size: Size, strategy?: ResizeStrategy) => void;
    /** Collapse the panel with the given strategy. Only works if `collapsible` is set to `true`. */
    collapse: (strategy?: ResizeStrategy) => void;
    /** Expand the panel with the given strategy. Only works if `collapsible` is set to `true`. */
    expand: (strategy?: ResizeStrategy) => void;
    /** The `id` attribute of the resizable panel element. */
    panelId: string;
};
/** Resizable panel.
 *
 * @data `data-corvu-resizable-panel` - Present on every resizable panel.
 * @data `data-orientation` - The orientation of the resizable.
 * @data `data-collapsed` - Present if the panel is currently collapsed.
 * @data `data-expanded` - Present if the panel is currently expanded. Only present on panels that are collapsible.
 */
declare const ResizablePanel: <T extends ValidComponent = "div">(props: DynamicProps<T, ResizablePanelProps<T>>) => JSX.Element;

type ResizablePanelContextValue = {
    /** The current size of the panel. */
    size: Accessor<number>;
    /** The minimum size of the panel. */
    minSize: Accessor<Size | null>;
    /** The maximum size of the panel. */
    maxSize: Accessor<Size | null>;
    /** Whether the panel is collapsible. */
    collapsible: Accessor<boolean>;
    /** The size the panel should collapse to. */
    collapsedSize: Accessor<Size>;
    /** How much the user has to "overdrag" for the panel to collapse. */
    collapseThreshold: Accessor<Size>;
    /** Whether the panel is currently collapsed. */
    collapsed: Accessor<boolean>;
    /** Resize the panel to a specific size with the given strategy. */
    resize: (size: Size, strategy?: ResizeStrategy) => void;
    /** Collapse the panel with the given strategy. Only works if `collapsible` is set to `true`. */
    collapse: (strategy?: ResizeStrategy) => void;
    /** Expand the panel with the given strategy. Only works if `collapsible` is set to `true`. */
    expand: (strategy?: ResizeStrategy) => void;
    /** The `id` attribute of the resizable panel element. */
    panelId: Accessor<string>;
};
/** Context which exposes various properties to interact with a resizable panel. Optionally provide a contextId to access a keyed context. */
declare const useResizablePanelContext: (contextId?: string) => ResizablePanelContextValue;

type ResizableRootCorvuProps = {
    /**
     * The orientation of the resizable.
     * @defaultValue 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Panel sizes in percentage.
     */
    sizes?: number[];
    /**
     * Callback fired when the panel sizes change.
     */
    onSizesChange?: (sizes: number[]) => void;
    /**
     * Initial panel sizes. Gets overridden by the `initialSize` prop on `<Panel />` components.
     */
    initialSizes?: Size[];
    /**
     * The delta to use when resizing with arrow keys.
     * @defaultValue 0.1
     */
    keyboardDelta?: Size;
    /**
     * Whether to handle the cursor style when resizing.
     * @defaultValue true
     */
    handleCursorStyle?: boolean;
    /**
     * The `id` of the resizable context to use.
     */
    contextId?: string;
};
type ResizableRootSharedElementProps<T extends ValidComponent = 'div'> = {
    ref: Ref<ElementOf<T>>;
    style: string | JSX.CSSProperties;
    children: JSX.Element | ((props: ResizableRootChildrenProps) => JSX.Element);
};
type ResizableRootElementProps = ResizableRootSharedElementProps & {
    'data-orientation': 'horizontal' | 'vertical';
    'data-corvu-resizable-root': '';
};
type ResizableRootProps<T extends ValidComponent = 'div'> = ResizableRootCorvuProps & Partial<ResizableRootSharedElementProps<T>>;
type ResizableRootChildrenProps = {
    /** The orientation of the resizable. */
    orientation: 'vertical' | 'horizontal';
    /** The sizes of the panels. */
    sizes: number[];
    /** Change the sizes of the panels. */
    setSizes: Setter<number[]>;
    /** The delta to use when resizing with arrow keys. */
    keyboardDelta: Size;
    /** Whether to handle the cursor style when resizing. */
    handleCursorStyle: boolean;
    /** Resize a panel to a specific size with the given strategy. */
    resize: (panelIndex: number, size: Size, strategy?: ResizeStrategy) => void;
    /** Collapse a panel with the given strategy. Only works if `collapsible` is set to `true`. */
    collapse: (panelIndex: number, strategy?: ResizeStrategy) => void;
    /** Expand a panel with the given strategy. Only works if `collapsible` is set to `true`. */
    expand: (panelIndex: number, strategy?: ResizeStrategy) => void;
};
/** Wrapper for the resizable.
 *
 * @data `data-corvu-resizable-root` - Present on every resizable root element.
 * @data `data-orientation` - The orientation of the resizable.
 */
declare const ResizableRoot: <T extends ValidComponent = "div">(props: DynamicProps<T, ResizableRootProps<T>>) => JSX.Element;

declare const Resizable: (<T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, ResizableRootProps<T>>) => solid_js.JSX.Element) & {
    Panel: <T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, ResizablePanelProps<T>>) => solid_js.JSX.Element;
    Handle: <T extends solid_js.ValidComponent = "button">(props: DynamicProps<T, ResizableHandleProps<T>>) => solid_js.JSX.Element;
    useContext: (contextId?: string) => ResizableContextValue;
    usePanelContext: (contextId?: string) => ResizablePanelContextValue;
};

export { type ResizableContextValue as ContextValue, ResizableHandle as Handle, type ResizableHandleCorvuProps as HandleCorvuProps, type ResizableHandleElementProps as HandleElementProps, type ResizableHandleProps as HandleProps, type ResizableHandleSharedElementProps as HandleSharedElementProps, ResizablePanel as Panel, type ResizablePanelChildrenProps as PanelChildrenProps, type ResizablePanelContextValue as PanelContextValue, type ResizablePanelCorvuProps as PanelCorvuProps, type ResizablePanelElementProps as PanelElementProps, type ResizablePanelProps as PanelProps, type ResizablePanelSharedElementProps as PanelSharedElementProps, type ResizeStrategy, ResizableRoot as Root, type ResizableRootChildrenProps as RootChildrenProps, type ResizableRootCorvuProps as RootCorvuProps, type ResizableRootElementProps as RootElementProps, type ResizableRootProps as RootProps, type ResizableRootSharedElementProps as RootSharedElementProps, Resizable as default, useResizableContext as useContext, useResizablePanelContext as usePanelContext };