@accelint/design-toolkit/dist/components/sidenav/types.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import { Payload } from '@accelint/bus';
import { UniqueId } from '@accelint/core';
import { ComponentPropsWithRef, PropsWithChildren } from 'react';
import { ButtonProps, ToggleButtonProps, LinkProps, DisclosureProps, DisclosurePanelProps, PopoverProps, Pressable } from 'react-aria-components';
import { SidenavEventTypes } from './events.js';

type SidenavProps = ComponentPropsWithRef<'nav'> & {
    id: UniqueId;
    isHiddenWhenClosed?: boolean;
};
type SidenavHeaderProps = PropsWithChildren<{
    classNames?: {
        header?: string;
        button?: ButtonProps['className'];
        container?: string;
        icon?: string;
    };
}>;
type SidenavContentProps = ComponentPropsWithRef<'div'>;
type SidenavItemProps = ToggleButtonProps & {
    classNames?: {
        button?: ToggleButtonProps['className'];
        icon?: string;
    };
    textValue?: string;
};
type SidenavLinkProps = LinkProps & {
    classNames?: {
        button?: LinkProps['className'];
        icon?: string;
    };
    textValue: string;
};
type SidenavAvatarProps = ComponentPropsWithRef<'div'>;
type SidenavDividerProps = ComponentPropsWithRef<'hr'>;
type SidenavFooterProps = ComponentPropsWithRef<'footer'>;
type SidenavCloseEvent = Payload<typeof SidenavEventTypes.close, {
    id: UniqueId;
}>;
type SidenavOpenEvent = Payload<typeof SidenavEventTypes.open, {
    id: UniqueId;
}>;
type SidenavToggleEvent = Payload<typeof SidenavEventTypes.toggle, {
    id: UniqueId;
}>;
type SidenavEvent = SidenavOpenEvent | SidenavToggleEvent | SidenavCloseEvent;
type TargetedEvents = `close:${UniqueId}` | `open:${UniqueId}` | `toggle:${UniqueId}`;
type SidenavTriggerProps = ComponentPropsWithRef<typeof Pressable> & {
    for: TargetedEvents | UniqueId;
};
type SidenavContextValue = {
    id: UniqueId;
    isOpen: boolean;
};
type SidenavMenuProps = {
    title: string;
    icon: React.ReactNode;
    children: React.ReactNode;
    classNames?: {
        menu?: DisclosureProps['className'];
        button?: ButtonProps['className'];
        icon?: string;
        disclosurePanel?: DisclosurePanelProps['className'];
        popoverPanel?: PopoverProps['className'];
        panelContent?: string;
    };
};
type SidenavMenuItemProps = ToggleButtonProps;

export type { SidenavAvatarProps, SidenavCloseEvent, SidenavContentProps, SidenavContextValue, SidenavDividerProps, SidenavEvent, SidenavFooterProps, SidenavHeaderProps, SidenavItemProps, SidenavLinkProps, SidenavMenuItemProps, SidenavMenuProps, SidenavOpenEvent, SidenavProps, SidenavToggleEvent, SidenavTriggerProps };