@headlessui/react - npm Package Compare versions

Comparing version 0.0.0-7d402c4 to 0.0.0-ba1bd52

dist/components/keyboard.d.ts

@@ -6,3 +6,5 @@ export declare enum Keys {
     Backspace = "Backspace",
+    ArrowLeft = "ArrowLeft",
     ArrowUp = "ArrowUp",
+    ArrowRight = "ArrowRight",
     ArrowDown = "ArrowDown",
@@ -9,0 +11,0 @@ Home = "Home",

dist/components/listbox/listbox.d.ts

@@ -1,47 +0,333 @@
-import * as React from 'react';
+import React, { ElementType } from 'react';
 import { Props } from '../../types';
-declare const DEFAULT_LISTBOX_TAG: React.ExoticComponent<{
+declare let DEFAULT_LISTBOX_TAG: React.ExoticComponent<{
     children?: React.ReactNode;
 }>;
-declare type ListboxRenderPropArg = {
+interface ListboxRenderPropArg {
     open: boolean;
-};
-export declare function Listbox<TTag extends React.ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg> & {
+    disabled: boolean;
+}
+export declare function Listbox<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg, 'value' | 'onChange'> & {
     value: TType;
     onChange(value: TType): void;
+    disabled?: boolean;
+    horizontal?: boolean;
 }): JSX.Element;
 export declare namespace Listbox {
-    var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    var Options: <TTag extends React.ElementType<any> = "ul">(props: ListboxOptionsProp<TTag>, ref: React.Ref<HTMLUListElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
-    var Option: <TTag extends React.ElementType<any> = "li", TType = string>(props: {
+    var Button: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null) & {
+        displayName: string;
+    };
+    var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+    var Options: (<TTag extends React.ElementType<any> = "ul">(props: (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
         as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-labelledby">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-labelledby">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onKeyDown">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onKeyDown">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-activedescendant">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-activedescendant">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-orientation">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-orientation">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }), ref: React.Ref<HTMLUListElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null) & {
+        displayName: string;
+    };
+    var Option: <TTag extends React.ElementType<any> = "li", TType = unknown>(props: (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "value" | "children" | "as" | "refName" | "className">> & {
+        as?: TTag | undefined;
         children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
-    } & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id" | "onFocus" | "role" | "tabIndex" | "aria-disabled" | "aria-selected" | "onPointerLeave" | "className">> & {
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
         disabled?: boolean | undefined;
         value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
         className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
-    }) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-disabled">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-selected">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onPointerLeave">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onMouseLeave">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onPointerMove">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onMouseMove">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onFocus">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        value: TType;
+    })) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }
-declare type ButtonPropsWeControl = 'ref' | 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPointerUp';
-declare type ButtonRenderPropArg = {
+interface ButtonRenderPropArg {
     open: boolean;
-    focused: boolean;
-};
-declare type LabelPropsWeControl = 'id' | 'ref' | 'onPointerUp';
-declare type LabelRenderPropArg = {
+    disabled: boolean;
+}
+declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onKeyDown' | 'onClick';
+interface LabelRenderPropArg {
     open: boolean;
-};
-declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex';
-declare type OptionsRenderPropArg = {
+    disabled: boolean;
+}
+declare type LabelPropsWeControl = 'id' | 'ref' | 'onClick';
+interface OptionsRenderPropArg {
     open: boolean;
-};
-declare type ListboxOptionsProp<TTag> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & {
-    static?: boolean;
-};
-declare type OptionRenderPropArg = {
+}
+interface OptionRenderPropArg {
     active: boolean;
     selected: boolean;
     disabled: boolean;
-};
+}
 export {};

dist/components/menu/menu.d.ts

@@ -1,24 +0,172 @@
-import * as React from 'react';
+import React, { ElementType } from 'react';
 import { Props } from '../../types';
-declare const DEFAULT_MENU_TAG: React.ExoticComponent<{
+declare let DEFAULT_MENU_TAG: React.ExoticComponent<{
     children?: React.ReactNode;
 }>;
-declare type MenuRenderPropArg = {
+interface MenuRenderPropArg {
     open: boolean;
-};
-export declare function Menu<TTag extends React.ElementType = typeof DEFAULT_MENU_TAG>(props: Props<TTag, MenuRenderPropArg>): JSX.Element;
+}
+export declare function Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: Props<TTag, MenuRenderPropArg>): JSX.Element;
 export declare namespace Menu {
-    var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    var Items: <TTag extends React.ElementType<any> = "div">(props: {
+    var Button: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null) & {
+        displayName: string;
+    };
+    var Items: (<TTag extends React.ElementType<any> = "div">(props: (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
         as?: TTag | undefined;
         children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
-    } & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, ItemsPropsWeControl>> & {
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
         static?: boolean | undefined;
-    }, ref: React.Ref<HTMLDivElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onKeyDown">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onKeyDown">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-activedescendant">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-activedescendant">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-labelledby">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-labelledby">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: undefined;
+    } & {
+        unmount?: boolean | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        unmount?: undefined;
+    } & {
+        static?: boolean | undefined;
+    }), ref: React.Ref<HTMLDivElement>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null) & {
+        displayName: string;
+    };
     var Item: <TTag extends React.ElementType<any> = React.ExoticComponent<{
         children?: React.ReactNode;
-    }>>(props: {
+    }>>(props: (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "id">> & {
         as?: TTag | undefined;
         children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
-    } & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id" | "onFocus" | "role" | "tabIndex" | "aria-disabled" | "onPointerLeave" | "className">> & {
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
         disabled?: boolean | undefined;
@@ -28,18 +176,119 @@ onClick?: ((event: {
         }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
         className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
-    }) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "tabIndex">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "aria-disabled">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onPointerLeave">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onPointerMove">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onMouseLeave">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onMouseMove">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    }) | (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "onFocus">> & {
+        as?: TTag | undefined;
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | null | undefined;
+        refName?: string | undefined;
+    } & (import("../../types").PropsOf<TTag> extends {
+        className?: any;
+    } ? {
+        className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean | undefined;
+        onClick?: ((event: {
+            preventDefault: Function;
+        }) => void) | undefined;
+    })) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }
-declare type ButtonPropsWeControl = 'ref' | 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPointerUp';
-declare type ButtonRenderPropArg = {
+interface ButtonRenderPropArg {
     open: boolean;
-    focused: boolean;
-};
-declare type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex';
-declare type ItemsRenderPropArg = {
+}
+declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onClick';
+interface ItemsRenderPropArg {
     open: boolean;
-};
-declare type ItemRenderPropArg = {
+}
+interface ItemRenderPropArg {
     active: boolean;
     disabled: boolean;
-};
+}
 export {};

dist/components/switch/switch.d.ts

@@ -1,21 +0,19 @@
-import * as React from 'react';
+import React, { ElementType } from 'react';
 import { Props } from '../../types';
-declare const DEFAULT_SWITCH_TAG = "button";
-declare type SwitchRenderPropArg = {
+declare let DEFAULT_SWITCH_TAG: "button";
+interface SwitchRenderPropArg {
     checked: boolean;
-};
-declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'onClick' | 'onKeyUp';
-export declare function Switch<TTag extends React.ElementType = typeof DEFAULT_SWITCH_TAG>(props: Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl | 'checked' | 'onChange' | 'className'> & {
+}
+declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'aria-labelledby' | 'aria-describedby' | 'onClick' | 'onKeyUp' | 'onKeyPress';
+export declare function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl | 'checked' | 'onChange'> & {
     checked: boolean;
     onChange(checked: boolean): void;
-    className?: ((bag: SwitchRenderPropArg) => string) | string;
-}): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+}): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 export declare namespace Switch {
     var Group: <TTag extends React.ElementType<any> = React.ExoticComponent<{
         children?: React.ReactNode;
-    }>>(props: Props<TTag, {}, "">) => JSX.Element;
-    var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    }>>(props: Props<TTag, any, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">) => JSX.Element;
+    var Label: typeof import("../label/label").Label;
+    var Description: typeof import("../description/description").Description;
 }
-declare type LabelPropsWeControl = 'id' | 'ref' | 'onPointerUp';
-declare type LabelRenderPropArg = {};
 export {};

dist/components/transitions/transition.d.ts

@@ -1,31 +0,33 @@
-import * as React from 'react';
-export declare type TransitionClasses = Partial<{
-    enter: string;
-    enterFrom: string;
-    enterTo: string;
-    leave: string;
-    leaveFrom: string;
-    leaveTo: string;
-}>;
-declare type HTMLTags = keyof JSX.IntrinsicElements;
-declare type HTMLTagProps<TTag extends HTMLTags> = JSX.IntrinsicElements[TTag];
-declare type AsShortcut<TTag extends HTMLTags> = {
-    children?: React.ReactNode;
-    as?: TTag;
-} & Omit<HTMLTagProps<TTag>, 'ref'>;
-declare type AsRenderPropFunction = {
-    children: (ref: React.MutableRefObject<any>) => JSX.Element;
+import React, { ElementType, MutableRefObject } from 'react';
+import { Props } from '../../types';
+import { Features, PropsForFeatures } from '../../utils/render';
+export interface TransitionClasses {
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    entered?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+}
+export interface TransitionEvents {
+    beforeEnter?: () => void;
+    afterEnter?: () => void;
+    beforeLeave?: () => void;
+    afterLeave?: () => void;
+}
+declare type TransitionChildProps<TTag> = Props<TTag, TransitionChildRenderPropArg> & PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
+    appear?: boolean;
 };
-declare type BaseConfig = Partial<{
-    appear: boolean;
-}>;
-declare type TransitionChildProps<TTag extends HTMLTags> = BaseConfig & (AsShortcut<TTag> | AsRenderPropFunction) & TransitionClasses;
-declare function TransitionChild<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag>): JSX.Element | null;
-export declare function Transition<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag> & {
-    show: boolean;
+declare let DEFAULT_TRANSITION_CHILD_TAG: "div";
+declare type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>;
+declare let TransitionChildRenderFeatures: Features;
+export declare function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & {
+    show?: boolean;
     appear?: boolean;
 }): JSX.Element;
 export declare namespace Transition {
-    var Child: typeof TransitionChild;
+    var Child: <TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag>) => JSX.Element;
+    var Root: typeof Transition;
 }
 export {};

dist/components/transitions/utils/transition.d.ts

@@ -5,2 +5,2 @@ export declare enum Reason {
 }
-export declare function transition(node: HTMLElement, base: string[], from: string[], to: string[], done?: (reason: Reason) => void): () => void;
+export declare function transition(node: HTMLElement, base: string[], from: string[], to: string[], entered: string[], done?: (reason: Reason) => void): () => void;

dist/hooks/use-computed.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare function useComputed<T>(cb: () => T, dependencies: React.DependencyList): T;

dist/hooks/use-is-mounted.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
-export declare function useIsMounted(): React.MutableRefObject<boolean>;
+/// <reference types="react" />
+export declare function useIsMounted(): import("react").MutableRefObject<boolean>;

dist/hooks/use-iso-morphic-effect.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
-export declare const useIsoMorphicEffect: typeof React.useLayoutEffect;
+import { useLayoutEffect } from 'react';
+export declare const useIsoMorphicEffect: typeof useLayoutEffect;

dist/hooks/use-sync-refs.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType> | ((instance: TType) => void) | null)[]): (value: TType) => void;

dist/index.d.ts

@@ -1,4 +0,11 @@
-export * from './components/transitions/transition';
+export * from './components/dialog/dialog';
+export * from './components/disclosure/disclosure';
+export * from './components/focus-trap/focus-trap';
+export * from './components/listbox/listbox';
 export * from './components/menu/menu';
-export * from './components/listbox/listbox';
+export * from './components/popover/popover';
+export * from './components/portal/portal';
+export * from './components/radio-group/radio-group';
 export * from './components/switch/switch';
+export * from './components/tabs/tabs';
+export * from './components/transitions/transition';

dist/test-utils/accessibility-assertions.d.ts

@@ -7,4 +7,8 @@ export declare function getMenuButton(): HTMLElement | null;
 export declare enum MenuState {
-    Open = 0,
-    Closed = 1
+    /** The menu is visible to the user. */
+    Visible = 0,
+    /** The menu is **not** visible to the user. It's still in the DOM, but it is hidden. */
+    InvisibleHidden = 1,
+    /** The menu is **not** visible to the user. It's not in the DOM, it is unmounted. */
+    InvisibleUnmounted = 2
 }
@@ -35,4 +39,8 @@ export declare function assertMenuButton(options: {
 export declare enum ListboxState {
-    Open = 0,
-    Closed = 1
+    /** The listbox is visible to the user. */
+    Visible = 0,
+    /** The listbox is **not** visible to the user. It's still in the DOM, but it is hidden. */
+    InvisibleHidden = 1,
+    /** The listbox is **not** visible to the user. It's not in the DOM, it is unmounted. */
+    InvisibleUnmounted = 2
 }
@@ -43,2 +51,3 @@ export declare function assertListbox(options: {
     state: ListboxState;
+    orientation?: 'horizontal' | 'vertical';
 }, listbox?: HTMLElement | null): void;
@@ -77,4 +86,101 @@ export declare function assertListboxButton(options: {
     label?: string;
+    description?: string;
 }, switchElement?: HTMLElement | null): void;
+export declare function getDisclosureButton(): HTMLElement | null;
+export declare function getDisclosurePanel(): HTMLElement | null;
+export declare enum DisclosureState {
+    /** The disclosure is visible to the user. */
+    Visible = 0,
+    /** The disclosure is **not** visible to the user. It's still in the DOM, but it is hidden. */
+    InvisibleHidden = 1,
+    /** The disclosure is **not** visible to the user. It's not in the DOM, it is unmounted. */
+    InvisibleUnmounted = 2
+}
+export declare function assertDisclosureButton(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DisclosureState;
+}, button?: HTMLElement | null): void;
+export declare function assertDisclosurePanel(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DisclosureState;
+}, panel?: HTMLElement | null): void;
+export declare function getPopoverButton(): HTMLElement | null;
+export declare function getPopoverPanel(): HTMLElement | null;
+export declare function getPopoverOverlay(): HTMLElement | null;
+export declare enum PopoverState {
+    /** The popover is visible to the user. */
+    Visible = 0,
+    /** The popover is **not** visible to the user. It's still in the DOM, but it is hidden. */
+    InvisibleHidden = 1,
+    /** The popover is **not** visible to the user. It's not in the DOM, it is unmounted. */
+    InvisibleUnmounted = 2
+}
+export declare function assertPopoverButton(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: PopoverState;
+}, button?: HTMLElement | null): void;
+export declare function assertPopoverPanel(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: PopoverState;
+}, panel?: HTMLElement | null): void;
 export declare function assertLabelValue(element: HTMLElement | null, value: string): void;
+export declare function assertDescriptionValue(element: HTMLElement | null, value: string): void;
+export declare function getDialog(): HTMLElement | null;
+export declare function getDialogs(): HTMLElement[];
+export declare function getDialogTitle(): HTMLElement | null;
+export declare function getDialogDescription(): HTMLElement | null;
+export declare function getDialogOverlay(): HTMLElement | null;
+export declare function getDialogOverlays(): HTMLElement[];
+export declare enum DialogState {
+    /** The dialog is visible to the user. */
+    Visible = 0,
+    /** The dialog is **not** visible to the user. It's still in the DOM, but it is hidden. */
+    InvisibleHidden = 1,
+    /** The dialog is **not** visible to the user. It's not in the DOM, it is unmounted. */
+    InvisibleUnmounted = 2
+}
+export declare function assertDialog(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DialogState;
+}, dialog?: HTMLElement | null): void;
+export declare function assertDialogTitle(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DialogState;
+}, title?: HTMLElement | null, dialog?: HTMLElement | null): void;
+export declare function assertDialogDescription(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DialogState;
+}, description?: HTMLElement | null, dialog?: HTMLElement | null): void;
+export declare function assertDialogOverlay(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+    state: DialogState;
+}, overlay?: HTMLElement | null): void;
+export declare function getRadioGroup(): HTMLElement | null;
+export declare function getRadioGroupLabel(): HTMLElement | null;
+export declare function getRadioGroupOptions(): HTMLElement[];
+export declare function assertRadioGroupLabel(options: {
+    attributes?: Record<string, string | null>;
+    textContent?: string;
+}, label?: HTMLElement | null, radioGroup?: HTMLElement | null): void;
+export declare function getTabList(): HTMLElement | null;
+export declare function getTabs(): HTMLElement[];
+export declare function getPanels(): HTMLElement[];
+export declare function assertTabs({ active, orientation, }: {
+    active: number;
+    orientation?: 'vertical' | 'horizontal';
+}, list?: HTMLElement | null, tabs?: HTMLElement[], panels?: HTMLElement[]): void;
 export declare function assertActiveElement(element: HTMLElement | null): void;
+export declare function assertContainsActiveElement(element: HTMLElement | null): void;
+export declare function assertHidden(element: HTMLElement | null): void;
+export declare function assertVisible(element: HTMLElement | null): void;
+export declare function assertFocusable(element: HTMLElement | null): void;
+export declare function assertNotFocusable(element: HTMLElement | null): void;
+export declare function getByText(text: string): HTMLElement | null;

dist/test-utils/interactions.d.ts

@@ -1,2 +0,2 @@
-export declare const Keys: Record<string, Partial<KeyboardEvent>>;
+export declare let Keys: Record<string, Partial<KeyboardEvent>>;
 export declare function shift(event: Partial<KeyboardEvent>): {
@@ -47,5 +47,9 @@ shiftKey: boolean;
 export declare function word(input: string): Partial<KeyboardEvent>[];
-export declare function type(events: Partial<KeyboardEvent>[]): Promise<void>;
-export declare function press(event: Partial<KeyboardEvent>): Promise<void>;
-export declare function click(element: Document | Element | Window | Node | null): Promise<void>;
+export declare function type(events: Partial<KeyboardEvent>[], element?: Element | null): Promise<void>;
+export declare function press(event: Partial<KeyboardEvent>, element?: Element | null): Promise<void>;
+export declare enum MouseButton {
+    Left = 0,
+    Right = 2
+}
+export declare function click(element: Document | Element | Window | Node | null, button?: MouseButton): Promise<void>;
 export declare function focus(element: Document | Element | Window | Node | null): Promise<void>;
@@ -52,0 +56,0 @@ export declare function mouseEnter(element: Document | Element | Window | null): Promise<void>;

dist/types.d.ts

@@ -1,6 +0,25 @@
-/// <reference types="react" />
+import { ReactNode, ReactElement } from 'react';
+declare let __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
+export declare type __ = typeof __;
+export declare type Expand<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;
 export declare type PropsOf<TTag = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never;
-export declare type Props<TTag, TSlot = {}, TOmitableProps extends keyof any = ''> = {
+declare type PropsWeControl = 'as' | 'children' | 'refName' | 'className';
+declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
+declare type OurProps<TTag, TSlot = any> = {
     as?: TTag;
-    children?: React.ReactNode | ((bag: TSlot) => React.ReactElement);
-} & Omit<PropsOf<TTag>, TOmitableProps>;
+    children?: ReactNode | ((bag: TSlot) => ReactElement);
+    refName?: string;
+};
+declare type ClassNameOverride<TTag, TSlot = any> = PropsOf<TTag> extends {
+    className?: any;
+} ? {
+    className?: string | ((bag: TSlot) => string);
+} : {};
+export declare type Props<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot>;
+declare type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+export declare type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

dist/utils/render.d.ts

@@ -1,4 +0,40 @@
-import * as React from 'react';
-import { Props } from '../types';
-export declare function render<TTag extends React.ElementType, TBag>(props: Props<TTag, TBag, any>, bag: TBag, tag: React.ElementType): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+import { ElementType, ReactElement } from 'react';
+import { Props, XOR, __, Expand } from '../types';
+export declare enum Features {
+    /** No features at all */
+    None = 0,
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderStrategy = 1,
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    Static = 2
+}
+export declare enum RenderStrategy {
+    Unmount = 0,
+    Hidden = 1
+}
+declare type PropsForFeature<TPassedInFeatures extends Features, TForFeature extends Features, TProps> = {
+    [P in TPassedInFeatures]: P extends TForFeature ? TProps : __;
+}[TPassedInFeatures];
+export declare type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, {
+    static?: boolean;
+}>, PropsForFeature<T, Features.RenderStrategy, {
+    unmount?: boolean;
+}>>;
+export declare function render<TFeature extends Features, TTag extends ElementType, TSlot>({ props, slot, defaultTag, features, visible, name, }: {
+    props: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>>;
+    slot?: TSlot;
+    defaultTag: ElementType;
+    features?: TFeature;
+    visible?: boolean;
+    name: string;
+}): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;
 /**
@@ -8,2 +44,8 @@ * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to
  */
-export declare function forwardRefWithAs<T>(component: T): T;
+export declare function forwardRefWithAs<T extends {
+    name: string;
+    displayName?: string;
+}>(component: T): T & {
+    displayName: string;
+};
+export {};

package.json

 {
   "name": "@headlessui/react",
-  "version": "0.0.0-7d402c4",
+  "version": "0.0.0-ba1bd52",
+  "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "module": "dist/headlessui.esm.js",
+  "module": "dist/index.esm.js",
   "license": "MIT",
   "files": [
+    "README.md",
     "dist"
   ],
+  "sideEffects": false,
   "engines": {
@@ -31,15 +34,16 @@ "node": ">=10"
   "peerDependencies": {
-    "react": ">=16"
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
   },
   "devDependencies": {
-    "@types/react": "^16.9.50",
-    "@types/react-dom": "^16.9.8",
-    "@popperjs/core": "^2.5.3",
-    "@testing-library/react": "^11.0.4",
-    "framer-motion": "^2.7.7",
-    "next": "9.5.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
+    "@popperjs/core": "^2.6.0",
+    "@testing-library/react": "^11.2.3",
+    "framer-motion": "^2.9.5",
+    "next": "10.0.5",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "snapshot-diff": "^0.8.1"
   }
 }

README.md

@@ -13,3 +13,3 @@ <h3 align="center">
   <a href="https://github.com/tailwindlabs/headlessui/releases"><img src="https://img.shields.io/npm/v/@headlessui/react.svg" alt="Latest Release"></a>
-  <a href="https://github.com/tailwindlabs/headlessui/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/react.svg" alt="License"></a>
+  <a href="https://github.com/tailwindlabs/headlessui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/react.svg" alt="License"></a>
 </p>
@@ -27,749 +27,15 @@
 
-## Components
+## Documentation
 
-_This project is still in early development. New components will be added regularly over the coming months._
+For full documentation, visit [headlessui.dev](https://headlessui.dev/react/menu).
 
-- [Transition](#transition)
-- [Menu Button (Dropdown)](#menu-button-dropdown)
+## Community
 
-### Roadmap
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-This project is still in early development, but the plan is to build out all of the primitives we need to provide interactive React examples of all of the components included in [Tailwind UI](https://tailwindui.com), the commercial component directory that helps us fund the development of our open-source work like [Tailwind CSS](https://tailwindcss.com).
+[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)
 
-This includes things like:
+For casual chit-chat with others using the library:
 
-- Listboxes
-- Toggles
-- Modals
-- Tabs
-- Slide-overs
-- Mobile menus
-- Accordions
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
-...and more in the future.
-
-We'll be continuing to develop new components on an on-going basis, with a goal of reaching a pretty fleshed out v1.0 by the end of the year.
-
----
-
-## Transition
-
-[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
-
-The `Transition` component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.
-
-- [Basic example](#basic-example)
-- [Showing and hiding content](#showing-and-hiding-content)
-- [Animating transitions](#animating-transitions)
-- [Co-ordinating multiple transitions](#co-ordinating-multiple-transitions)
-- [Transitioning on initial mount](#transitioning-on-initial-mount)
-- [Component API](#component-api)
-
-### Basic example
-
-The `Transition` accepts a `show` prop that controls whether the children should be shown or hidden, and a set of lifecycle props (like `enterFrom`, and `leaveTo`) that let you add CSS classes at specific phases of a transition.
-
-```tsx
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
-      <Transition
-        show={isOpen}
-        enter="transition-opacity duration-75"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-150"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        I will fade in and out
-      </Transition>
-    </>
-  )
-}
-```
-
-### Showing and hiding content
-
-Wrap the content that should be conditionally rendered in a `<Transition>` component, and use the `show` prop to control whether the content should be visible or hidden.
-
-```tsx
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
-      <Transition
-        show={isOpen}
-        // ...
-      >
-        I will fade in and out
-      </Transition>
-    </>
-  )
-}
-```
-
-The `Transition` component will render a `div` by default, but you can use the `as` prop to render a different element instead if needed. Any other HTML attributes (like `className`) can be added directly to the `Transition` the same way they would be to regular elements.
-
-```tsx
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
-      <Transition
-        show={isOpen}
-        as="a"
-        href="/my-url"
-        className="font-bold"
-        // ...
-      >
-        I will fade in and out
-      </Transition>
-    </>
-  )
-}
-```
-
-If you'd prefer not to render an additional element at all, you can pass your children as a function instead which will receive a `ref` that you need to attach to your root node:
-
-```tsx
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
-      <Transition
-        show={isOpen}
-        // ...
-      >
-        {(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
-      </Transition>
-    </>
-  )
-}
-```
-
-Be sure to attach the `ref` or your transitions will not work correctly.
-
-### Animating transitions
-
-By default, a `Transition` will enter and leave instantly, which is probably not what you're looking for if you're using this library.
-
-To animate your enter/leave transitions, add classes that provide the styling for each phase of the transitions using these props:
-
-- **enter**: Applied the entire time an element is entering. Usually you define your duration and what properties you want to transition here, for example `transition-opacity duration-75`.
-- **enterFrom**: The starting point to enter from, for example `opacity-0` if something should fade in.
-- **enterTo**: The ending point to enter to, for example `opacity-100` after fading in.
-- **leave**: Applied the entire time an element is leaving. Usually you define your duration and what properties you want to transition here, for example `transition-opacity duration-75`.
-- **leaveFrom**: The starting point to leave from, for example `opacity-100` if something should fade out.
-- **leaveTo**: The ending point to leave to, for example `opacity-0` after fading out.
-
-Here's an example:
-
-```tsx
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
-      <Transition
-        show={isOpen}
-        enter="transition-opacity duration-75"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-150"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        I will fade in and out
-      </Transition>
-    </>
-  )
-}
-```
-
-In this example, the transitioning element will take 75ms to enter (that's the `duration-75` class), and will transition the opacity property during that time (that's `transition-opacity`).
-
-It will start completely transparent before entering (that's `opacity-0` in the `enterFrom` phase), and fade in to completely opaque (`opacity-100`) when finished (that's the `enterTo` phase).
-
-When the element is being removed (the `leave` phase), it will transition the opacity property, and spend 150ms doing it (`transition-opacity duration-150`).
-
-It will start as completely opaque (the `opacity-100` in the `leaveFrom` phase), and finish as completely transparent (the `opacity-0` in the `leaveTo` phase).
-
-All of these props are optional, and will default to just an empty string.
-
-### Co-ordinating multiple transitions
-
-Sometimes you need to transition multiple elements with different animations but all based on the same state. For example, say the user clicks a button to open a sidebar that slides over the screen, and you also need to fade-in a background overlay at the same time.
-
-You can do this by wrapping the related elements with a parent `Transition` component, and wrapping each child that needs its own transition styles with a `Transition.Child` component, which will automatically communicate with the parent `Transition` and inherit the parent's `show` state.
-
-```tsx
-import { Transition } from '@headlessui/react'
-
-function Sidebar({ isOpen }) {
-  return (
-    <Transition show={isOpen}>
-      {/* Background overlay */}
-      <Transition.Child
-        enter="transition-opacity ease-linear duration-300"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity ease-linear duration-300"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        {/* ... */}
-      </Transition.Child>
-
-      {/* Sliding sidebar */}
-      <Transition.Child
-        enter="transition ease-in-out duration-300 transform"
-        enterFrom="-translate-x-full"
-        enterTo="translate-x-0"
-        leave="transition ease-in-out duration-300 transform"
-        leaveFrom="translate-x-0"
-        leaveTo="-translate-x-full"
-      >
-        {/* ... */}
-      </Transition.Child>
-    </Transition>
-  )
-}
-```
-
-The `Transition.Child` component has the exact same API as the `Transition` component, but with no `show` prop, since the `show` value is controlled by the parent.
-
-Parent `Transition` components will always automatically wait for all children to finish transitioning before unmounting, so you don't need to manage any of that timing yourself.
-
-### Transitioning on initial mount
-
-If you want an element to transition the very first time it's rendered, set the `appear` prop to `true`.
-
-This is useful if you want something to transition in on initial page load, or when its parent is conditionally rendered.
-
-```tsx
-import { Transition } from '@headlessui/react'
-
-function MyComponent({ isShowing }) {
-  return (
-    <Transition
-      appear={true}
-      show={isShowing}
-      enter="transition-opacity duration-75"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="transition-opacity duration-150"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
-      {/* Your content goes here*/}
-    </Transition>
-  )
-}
-```
-
-### Component API
-
-#### Transition
-
-```jsx
-<Transition
-  appear={true}
-  show={isOpen}
-  enter="transition-opacity duration-75"
-  enterFrom="opacity-0"
-  enterTo="opacity-100"
-  leave="transition-opacity duration-150"
-  leaveFrom="opacity-100"
-  leaveTo="opacity-0"
->
-  {/* Your content goes here*/}
-</Transition>
-```
-
-##### Props
-
-| Prop        | Type                                  | Description                                                                           |
-| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
-| `show`      | Boolean                               | Whether the children should be shown or hidden.                                       |
-| `as`        | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition` itself.               |
-| `appear`    | Boolean _(Default: `false`)_          | Whether the transition should run on initial mount.                                   |
-| `enter`     | String _(Default: '')_                | Classes to add to the transitioning element during the entire enter phase.            |
-| `enterFrom` | String _(Default: '')_                | Classes to add to the transitioning element before the enter phase starts.            |
-| `enterTo`   | String _(Default: '')_                | Classes to add to the transitioning element immediately after the enter phase starts. |
-| `leave`     | String _(Default: '')_                | Classes to add to the transitioning element during the entire leave phase.            |
-| `leaveFrom` | String _(Default: '')_                | Classes to add to the transitioning element before the leave phase starts.            |
-| `leaveTo`   | String _(Default: '')_                | Classes to add to the transitioning element immediately after the leave phase starts. |
-
-##### Render prop arguments
-
-| Prop  | Type                   | Description                                                                         |
-| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
-| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
-
-#### Transition.Child
-
-```jsx
-<Transition show={isOpen}>
-  <Transition.Child
-    enter="transition-opacity ease-linear duration-300"
-    enterFrom="opacity-0"
-    enterTo="opacity-100"
-    leave="transition-opacity ease-linear duration-300"
-    leaveFrom="opacity-100"
-    leaveTo="opacity-0"
-  >
-    {/* ... */}
-  </Transition.Child>
-  {/* ... */}
-</Transition>
-```
-
-##### Props
-
-| Prop        | Type                                  | Description                                                                           |
-| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
-| `as`        | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition.Child` itself.         |
-| `appear`    | Boolean _(Default: `false`)_          | Whether the transition should run on initial mount.                                   |
-| `enter`     | String _(Default: '')_                | Classes to add to the transitioning element during the entire enter phase.            |
-| `enterFrom` | String _(Default: '')_                | Classes to add to the transitioning element before the enter phase starts.            |
-| `enterTo`   | String _(Default: '')_                | Classes to add to the transitioning element immediately after the enter phase starts. |
-| `leave`     | String _(Default: '')_                | Classes to add to the transitioning element during the entire leave phase.            |
-| `leaveFrom` | String _(Default: '')_                | Classes to add to the transitioning element before the leave phase starts.            |
-| `leaveTo`   | String _(Default: '')_                | Classes to add to the transitioning element immediately after the leave phase starts. |
-
-##### Render prop arguments
-
-| Prop  | Type                   | Description                                                                         |
-| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
-| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
-
----
-
-## Menu Button (Dropdown)
-
-[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
-
-The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
-
-- [Basic example](#basic-example-1)
-- [Styling the active item](#styling-the-active-item)
-- [Showing/hiding the menu](#showinghiding-the-menu)
-- [Disabling an item](#disabling-an-item)
-- [Transitions](#transitions)
-- [Rendering additional content](#rendering-additional-content)
-- [Rendering a different element for a component](#rendering-a-different-element-for-a-component)
-- [Component API](#component-api-1)
-
-### Basic example
-
-Menu Buttons are built using the `Menu`, `Menu.Button`, `Menu.Items`, and `Menu.Item` components.
-
-The `Menu.Button` will automatically open/close the `Menu.Items` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      <Menu.Button>More</Menu.Button>
-      <Menu.Items>
-        <Menu.Item>
-          {({ active }) => (
-            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
-              Account settings
-            </a>
-          )}
-        </Menu.Item>
-        <Menu.Item>
-          {({ active }) => (
-            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
-              Documentation
-            </a>
-          )}
-        </Menu.Item>
-        <Menu.Item disabled>
-          <span className="opacity-75">Invite a friend (coming soon!)</span>
-        </Menu.Item>
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-### Styling the active item
-
-This is a headless component so there are no styles included by default. Instead, the components expose useful information via [render props](https://reactjs.org/docs/render-props.html) that you can use to apply the styles you'd like to apply yourself.
-
-To style the active `Menu.Item` you can read the `active` render prop argument, which tells you whether or not that menu item is the item that is currently focused via the mouse or keyboard.
-
-You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      <Menu.Button>More</Menu.Button>
-      <Menu.Items>
-        {/* Use the `active` state to conditionally style the active item. */}
-        <Menu.Item>
-          {({ active }) => (
-            <a
-              className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}
-              href="/account-settings"
-            >
-              Account settings
-            </a>
-          )}
-        </Menu.Item>
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-### Showing/hiding the menu
-
-By default, your `Menu.Items` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Menu` component itself.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      <Menu.Button>More</Menu.Button>
-
-      {/* By default, this will automatically show/hide when the Menu.Button is pressed. */}
-      <Menu.Items>
-        <Menu.Item>{/* ... */}</Menu.Item>
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `Menu.Items` instance to tell it to always render, and inspect the `open` slot prop provided by the `Menu` to control which element is shown/hidden yourself.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      {({ open }) => (
-        <Menu.Button>More</Menu.Button>
-        {open && (
-          <div>
-            {/* Using `static`, `Menu.Items` is always rendered and ignores the `open` state. */}
-            <Menu.Items static>
-              <Menu.Item>{/* ... */}</Menu.Item>
-              {/* ... */}
-            </Menu.Items>
-          </div>
-        )}
-      )}
-    </Menu>
-  )
-}
-```
-
-### Disabling an item
-
-Use the `disabled` prop to disable a `Menu.Item`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      <Menu.Button>More</Menu.Button>
-      <Menu.Items>
-        {/* ... */}
-
-        {/* This item will be skipped by keyboard navigation. */}
-        <Menu.Item disabled>
-          <span className="opacity-75">Invite a friend (coming soon!)</span>
-        </Menu.Item>
-
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-### Transitions
-
-To animate the opening/closing of the menu panel, use the provided `Transition` component. All you need to do is mark your `Menu.Items` as `static`, wrap it in a `<Transition>`, and the transition will be applied automatically.
-
-```jsx
-import { Menu, Transition } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      {({ open }) => (
-        <>
-          <Menu.Button>More</Menu.Button>
-
-          {/* Use the Transition + open render prop argument to add transitions. */}
-          <Transition
-            show={open}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
-          >
-            <Menu.Items static>
-              <Menu.Item>{/* ... */}</Menu.Item>
-              {/* ... */}
-            </Menu.Items>
-          </Transition>
-        </>
-      )}
-    </Menu>
-  )
-}
-```
-
-### Rendering additional content
-
-The `Menu` component is not limited to rendering only its related subcomponents. You can render anything you like within a menu, which gives you complete control over exactly what you are building.
-
-For example, if you'd like to add a little header section to the menu with some extra information in it, just render an extra `div` with your content in it.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      <Menu.Button>More</Menu.Button>
-      <Menu.Items>
-        <div class="px-4 py-3">
-          <p class="text-sm leading-5">Signed in as</p>
-          <p class="text-sm font-medium leading-5 text-gray-900 truncate">[e-mail]</p>
-        </div>
-        <Menu.Item>
-          {({ active }) => (
-            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
-              Account settings
-            </a>
-          )}
-        </Menu.Item>
-
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-Note that only `Menu.Item` instances will be navigable via the keyboard.
-
-### Rendering a different element for a component
-
-By default, the `Menu` and its subcomponents each render a default element that is sensible for that component.
-
-For example, `Menu.Button` renders a `button` by default, and `Menu.Items` renders a `div`. `Menu` and `Menu.Item` interestingly _do not render an extra element_, and instead render their children directly by default.
-
-This is easy to change using the `as` prop, which exists on every component.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    {/* Render a `div` instead of no wrapper element */}
-    <Menu as="div">
-      <Menu.Button>More</Menu.Button>
-      {/* Render a `ul` instead of a `div` */}
-      <Menu.Items as="ul">
-        {/* Render an `li` instead of no wrapper element */}
-        <Menu.Item as="li">
-          {({ active }) => (
-            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
-              Account settings
-            </a>
-          )}
-        </Menu.Item>
-
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-To tell an element to render its children directly with no wrapper element, use `as={React.Fragment}`.
-
-```jsx
-import { Menu } from '@headlessui/react'
-
-function MyDropdown() {
-  return (
-    <Menu>
-      {/* Render no wrapper, instead pass in a button manually. */}
-      <Menu.Button as={React.Fragment}>
-        <button>More</button>
-      </Menu.Button>
-      <Menu.Items>
-        <Menu.Item>
-          {({ active }) => (
-            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
-              Account settings
-            </a>
-          )}
-        </Menu.Item>
-        {/* ... */}
-      </Menu.Items>
-    </Menu>
-  )
-}
-```
-
-### Component API
-
-#### Menu
-
-```jsx
-<Menu>
-  <Menu.Button>More</Menu.Button>
-  <Menu.Items>
-    <Menu.Item>{/* ... */}</Menu.Item>
-    {/* ... */}
-  </Menu.Items>
-</Menu>
-```
-
-##### Props
-
-| Prop | Type                | Default                                 | Description                                           |
-| ---- | ------------------- | --------------------------------------- | ----------------------------------------------------- |
-| `as` | String \| Component | `React.Fragment` _(no wrapper element_) | The element or component the `Menu` should render as. |
-
-##### Render prop object
-
-| Prop   | Type    | Description                      |
-| ------ | ------- | -------------------------------- |
-| `open` | Boolean | Whether or not the menu is open. |
-
-#### Menu.Button
-
-```jsx
-<Menu.Button>
-  {({ open }) => (
-    <>
-      <span>More options</span>
-      <ChevronRightIcon className={`${open ? 'transform rotate-90' : ''}`} />
-    </>
-  )}
-</Menu.Button>
-```
-
-##### Props
-
-| Prop | Type                | Default  | Description                                                  |
-| ---- | ------------------- | -------- | ------------------------------------------------------------ |
-| `as` | String \| Component | `button` | The element or component the `Menu.Button` should render as. |
-
-##### Render prop object
-
-| Prop   | Type    | Description                      |
-| ------ | ------- | -------------------------------- |
-| `open` | Boolean | Whether or not the menu is open. |
-
-#### Menu.Items
-
-```jsx
-<Menu.Items>
-  <Menu.Item>{/* ... */}></Menu.Item>
-  {/* ... */}>
-</Menu.Items>
-```
-
-##### Props
-
-| Prop     | Type                | Default | Description                                                                 |
-| -------- | ------------------- | ------- | --------------------------------------------------------------------------- |
-| `as`     | String \| Component | `div`   | The element or component the `Menu.Items` should render as.                 |
-| `static` | Boolean             | `false` | Whether the element should ignore the internally managed open/closed state. |
-
-##### Render prop object
-
-| Prop   | Type    | Description                      |
-| ------ | ------- | -------------------------------- |
-| `open` | Boolean | Whether or not the menu is open. |
-
-#### Menu.Item
-
-```jsx
-<Menu.Item>
-  {({ active }) => (
-    <a
-      className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}
-      href="/account-settings"
-    >
-      Account settings
-    </a>
-  )}
-</Menu.Item>
-```
-
-##### Props
-
-| Prop       | Type                | Default                                 | Description                                                                           |
-| ---------- | ------------------- | --------------------------------------- | ------------------------------------------------------------------------------------- |
-| `as`       | String \| Component | `React.Fragment` _(no wrapper element)_ | The element or component the `Menu.Item` should render as.                            |
-| `disabled` | Boolean             | `false`                                 | Whether or not the item should be disabled for keyboard navigation and ARIA purposes. |
-
-##### Render prop object
-
-| Prop       | Type    | Description                                                                        |
-| ---------- | ------- | ---------------------------------------------------------------------------------- |
-| `active`   | Boolean | Whether or not the item is the active/focused item in the list.                    |
-| `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2356370

increased by180.53%

Number of package files

138

increased by253.85%

Lines of code

16563

increased by188.65%

Worsened metrics

Dependency count

2

increased by100%

Number of lines in readme file

40

decreased by-94.83%

Number of low supply chain risk alerts

4

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes