@fewings/react/dist/components/index.d.ts

Useful react components and hooks

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React$1 from 'react';
import React__default, { RefObject, ReactNode, ReactElement } from 'react';

declare const Accordion: {
    Root: {
        ({ children, initialOpen, open: openProp, onChangeOpen, disabled, }: {
            children: React__default.ReactNode;
            open?: boolean;
            onChangeOpen?: (v: boolean) => void;
            initialOpen?: boolean;
            disabled?: boolean;
        }): react_jsx_runtime.JSX.Element;
        displayName: string;
    };
    Trigger: {
        ({ children }: {
            children: React__default.ReactElement<any>;
        }): React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>[];
        displayName: string;
    };
    Panel: {
        ({ children, wrapper, }: {
            children: React__default.ReactNode;
            wrapper?: React__default.ComponentType;
        }): react_jsx_runtime.JSX.Element;
        displayName: string;
    };
    Consumer: React__default.Consumer<{
        open: boolean;
        setOpen: (v: boolean) => void;
    }>;
};

interface Props$5 {
    width?: number | string;
    height?: number | string;
    children?: React.ReactNode;
    theme?: "dark" | "light";
}
declare function DummyArea({ width, height, theme, children, style, ...props }: Props$5 & React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

type TPopoverTrigger = "click" | "hover";
type TPopoverContext = {
    open: boolean;
    setOpen: (v: boolean) => void;
    triggerRef: RefObject<HTMLElement | null>;
    panelRef: RefObject<HTMLElement | null>;
    closeOnClickOutSide: boolean;
    type: TPopoverTrigger;
    controlled?: boolean;
};
type TPopoverAnchor = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" | "left-center" | "left-top" | "left-bottom" | "right-center" | "right-top" | "right-bottom";

declare const Popover: {
    Root: {
        ({ children, closeOnClickOutSide, type, initialOpen, open: openProp, onChangeOpen, disabled, }: {
            children: React__default.ReactNode;
            closeOnClickOutSide?: boolean;
            type?: TPopoverTrigger;
            open?: boolean;
            onChangeOpen?: (v: boolean) => void;
            initialOpen?: boolean;
            disabled?: boolean;
        }): react_jsx_runtime.JSX.Element;
        displayName: string;
    };
    Trigger: {
        ({ children }: {
            children: React__default.ReactElement<any>;
        }): React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>[];
        displayName: string;
    };
    Panel: {
        ({ children, anchor, wrapper, zIndex, portal, fitOnTriggerWidth, }: {
            children: React__default.ReactNode;
            anchor?: TPopoverAnchor;
            zIndex?: number;
            portal?: boolean;
            wrapper?: React__default.ComponentType;
            fitOnTriggerWidth?: boolean;
        }): react_jsx_runtime.JSX.Element;
        displayName: string;
    };
    Consumer: React__default.Consumer<TPopoverContext>;
};

declare const PopoverContext: React$1.Context<TPopoverContext>;

interface TSliderContext {
    value: number;
    setValue: (value: number) => void;
    min: number;
    max: number;
    step: number;
    disabled?: boolean;
    dir: "horizontal" | "vertical";
    thumbRef: RefObject<HTMLElement | null>;
    trackRef: RefObject<HTMLElement | null>;
    ratio: number;
    isDragging: boolean;
    setIsDragging: (isDragging: boolean) => void;
}

declare const Slider: {
    Root: ({ children, dir, ...props }: {
        children: ReactNode;
    } & Omit<TSliderContext, "ratio" | "thumbRef" | "trackRef" | "isDragging" | "setIsDragging" | "setRatio">) => react_jsx_runtime.JSX.Element;
    Thumb: ({ children, }: {
        children: (props: {
            value: number;
            ratio: number;
            isDragging: boolean;
        }) => ReactElement<any>;
    }) => ReactElement<any, string | React$1.JSXElementConstructor<any>>;
    Track: ({ children, }: {
        children: (props: {
            value: number;
            ratio: number;
            isDragging: boolean;
        }) => ReactElement<any>;
    }) => ReactElement<any, string | React$1.JSXElementConstructor<any>>;
};

declare const TOOLTIP_DIRS: readonly ["top", "bottom", "left", "right"];
type TToolTipDirection = (typeof TOOLTIP_DIRS)[number];
type TToolTipOptions = {
    dir?: TToolTipDirection;
    gap?: number;
    arrowColor?: string;
};

interface Props$4 extends TToolTipOptions {
    children: React.ReactElement;
    content: React.ReactNode;
    open?: boolean;
}
declare function ToolTip({ children, content, open, dir: _dir, gap, arrowColor, }: Props$4): react_jsx_runtime.JSX.Element;

declare function Space({ x, y }: {
    x?: string | number;
    y?: string | number;
}): react_jsx_runtime.JSX.Element;

type Props$3<T extends keyof React.JSX.IntrinsicElements> = React.PropsWithChildren<{
    position?: "absolute" | "fixed" | "relative" | "sticky";
    top?: number | string;
    right?: number | string;
    bottom?: number | string;
    left?: number | string;
    zIndex?: number;
    as?: T;
}> & React.ComponentProps<"div">;
declare function Float<T extends keyof React.JSX.IntrinsicElements>({ children, position, top, right, bottom, left, zIndex, style, as, ...props }: Props$3<T>): react_jsx_runtime.JSX.Element;

type Props$2<T extends keyof React.JSX.IntrinsicElements> = React.PropsWithChildren<{
    inline?: boolean;
    gap?: number | string;
    align?: "start" | "center" | "end" | "stretch" | "baseline";
    justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
    padding?: number | string;
    as?: T;
}> & React.ComponentProps<"div">;
declare function VStack<T extends keyof React.JSX.IntrinsicElements>({ inline, children, gap, align, justify, padding, style, as, ...props }: Props$2<T>): react_jsx_runtime.JSX.Element;

type Props$1<T extends keyof React.JSX.IntrinsicElements> = React.PropsWithChildren<{
    inline?: boolean;
    gap?: number | string;
    align?: "start" | "center" | "end" | "stretch" | "baseline";
    justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
    padding?: number | string;
    as?: T;
}> & React.ComponentProps<"div">;
declare function HStack<T extends keyof React.JSX.IntrinsicElements>({ inline, children, gap, align, justify, padding, style, as, ...props }: Props$1<T>): react_jsx_runtime.JSX.Element;

interface Props {
    children: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
}
declare function Grid({ children, className, style, rowGap, colGap, gap, }: Props & {
    rowGap?: number;
    colGap?: number;
    gap?: number;
}): react_jsx_runtime.JSX.Element;
declare namespace Grid {
    var Row: ({ children, className, style, gap, }: Props & {
        gap?: number;
    }) => react_jsx_runtime.JSX.Element;
    var Col: ({ children, className, style }: Props) => react_jsx_runtime.JSX.Element;
    var displayName: string;
}

export { Accordion, DummyArea, Float, Grid, HStack, Popover, PopoverContext, Slider, Space, type TPopoverAnchor, type TPopoverContext, type TPopoverTrigger, type TToolTipDirection, type TToolTipOptions, ToolTip, VStack };