@reusable-ui/hamburger-menu-button/dist/states/hamburgerable.d.ts

A toggleable hamburger button for showing/hiding menu in Navbar.

/// <reference types="react" />
import { Factory, CssKnownProps, CssRule, CssStyleCollection, CssVars } from '@cssfn/core';
export interface HamburgerableVars {
    topTransformIn: any;
    midTransformIn: any;
    btmTransformIn: any;
    topTransformOut: any;
    midTransformOut: any;
    btmTransformOut: any;
    /**
     * final transform for the hamburger top.
     */
    topTransform: any;
    /**
     * final transform for the hamburger middle.
     */
    midTransform: any;
    /**
     * final transform for the hamburger bottom.
     */
    btmTransform: any;
    /**
     * final animation for the hamburger top.
     */
    topAnim: any;
    /**
     * final animation for the hamburger middle.
     */
    midAnim: any;
    /**
     * final animation for the hamburger bottom.
     */
    btmAnim: any;
}
export declare const ifCrossed: (styles: CssStyleCollection) => CssRule;
export declare const ifCrossing: (styles: CssStyleCollection) => CssRule;
export declare const ifHamburgering: (styles: CssStyleCollection) => CssRule;
export declare const ifHamburgered: (styles: CssStyleCollection) => CssRule;
export declare const ifCross: (styles: CssStyleCollection) => CssRule;
export declare const ifHamburger: (styles: CssStyleCollection) => CssRule;
export declare const ifCrossHamburgering: (styles: CssStyleCollection) => CssRule;
export interface HamburgerableStuff {
    hamburgerableRule: Factory<CssRule>;
    hamburgerableVars: CssVars<HamburgerableVars>;
}
export interface HamburgerableConfig {
    hamburgerTopTransformIn?: CssKnownProps['transform'];
    hamburgerMidTransformIn?: CssKnownProps['transform'];
    hamburgerBtmTransformIn?: CssKnownProps['transform'];
    hamburgerTopTransformOut?: CssKnownProps['transform'];
    hamburgerMidTransformOut?: CssKnownProps['transform'];
    hamburgerBtmTransformOut?: CssKnownProps['transform'];
    hamburgerTopAnimIn?: CssKnownProps['animation'];
    hamburgerMidAnimIn?: CssKnownProps['animation'];
    hamburgerBtmAnimIn?: CssKnownProps['animation'];
    hamburgerTopAnimOut?: CssKnownProps['animation'];
    hamburgerMidAnimOut?: CssKnownProps['animation'];
    hamburgerBtmAnimOut?: CssKnownProps['animation'];
}
/**
 * Uses hamburger animation.
 * @param config  A configuration of `hamburgerableRule`.
 * @returns A `HamburgerableStuff` represents a hamburgerable state.
 */
export declare const usesHamburgerable: (config?: HamburgerableConfig) => HamburgerableStuff;
export declare const enum HamburgerableState {
    Hamburgered = 0,
    Hamburgering = 1,
    Crossing = 2,
    Crossed = 3
}
export interface HamburgerableApi<TElement extends Element = HTMLElement> {
    active: boolean;
    state: HamburgerableState;
    class: string | null;
    handleAnimationStart: React.AnimationEventHandler<TElement>;
    handleAnimationEnd: React.AnimationEventHandler<TElement>;
    handleAnimationCancel: React.AnimationEventHandler<TElement>;
}
export declare const useHamburgerable: <TElement extends Element = HTMLElement>(isActive: boolean) => HamburgerableApi<TElement>;