@oliasoft-open-source/react-ui-library 3.12.0-beta-19 → 3.12.0-beta-21

package/dist/components/card/card.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from './card';
+import { Heading } from '../heading/heading';
+export default {
+    title: 'Layout/Card',
+    component: Card,
+    args: {
+        raised: false,
+        children: 'Content goes here',
+        padding: true,
+        bordered: true,
+    },
+};
+const Template = (args) => _jsx(Card, { ...args });
+export const Default = Template.bind({});
+export const WithHeading = Template.bind({});
+WithHeading.args = {
+    heading: _jsx(Heading, { children: "Heading" }),
+};
+export const WithHelpHeading = Template.bind({});
+WithHelpHeading.args = {
+    heading: _jsx(Heading, { onClickHelp: () => console.log('help!'), children: "Heading" }),
+};
+export const NoPadding = Template.bind({});
+NoPadding.args = { padding: false };
+export const NoBorder = Template.bind({});
+NoBorder.args = { bordered: false };

package/dist/components/check-box/check-box.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ICheckBoxProps {
+    checked?: boolean;
+    isInTable?: boolean;
+    label?: string;
+    name?: string;
+    noMargin?: boolean;
+    onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    disabled?: boolean;
+    small?: boolean;
+    testId?: string;
+    key?: string;
+    dataix?: number;
+    value?: string;
+    helpText?: string;
+    onClickHelp?: () => void;
+}
+export declare const CheckBox: ({ noMargin, dataix, isInTable, tabIndex, checked, name, key, label, disabled, small, onChange, testId, value, helpText, onClickHelp, }: ICheckBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/check-box/check-box.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import styles from './check-box.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { HelpIcon } from '../help-icon/help-icon';
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+export const CheckBox = ({ noMargin = false, dataix = 0, isInTable = false, tabIndex = 0, checked = false, name, key = '', label = '', disabled = false, small = false, onChange, testId, value, helpText, onClickHelp, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const showHelp = helpText || onClickHelp;
+    return (_jsxs("div", { className: cx(styles.checkbox, noMargin && styles.noMargin, isInTable && styles.isInTable, (disabled || disabledContext) && styles.disabled, small && styles.small, !label && styles.noLabel), "data-ix": dataix, onClick: (evt) => {
+            const target = evt.target;
+            target.name = name;
+            target.value = String(!checked);
+            target.checked = !checked;
+            onChange(evt);
+        }, "data-testid": testId, children: [_jsx("input", { type: "checkbox", tabIndex: tabIndex, checked: checked, name: name, onChange: () => { }, disabled: disabled || disabledContext }, key), _jsxs("label", { htmlFor: name, children: [_jsx("span", { className: styles.checkmark, children: _jsx(Icon, { icon: IconType.CHECK }) }), label] }), showHelp && _jsx(HelpIcon, { text: helpText, onClick: onClickHelp })] }));
+};

package/dist/components/check-box/check-box.stories.d.ts

@@ -0,0 +1,6 @@
+import { ICheckBoxProps } from './check-box';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
+export declare const HelpText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
+export declare const OnClickHelp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;

package/dist/components/check-box/check-box.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import { CheckBox } from './check-box';
+export default {
+    title: 'Forms/CheckBox',
+    component: CheckBox,
+    args: {
+        disabled: false,
+        label: 'Label',
+    },
+};
+const Template = (args) => {
+    const [{ checked }, updateArgs] = useArgs();
+    const handleChange = () => {
+        updateArgs({ checked: !checked });
+    };
+    return (_jsx(CheckBox
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args, onChange: handleChange }));
+};
+export const Default = Template.bind({});
+export const HelpText = Template.bind({});
+HelpText.args = {
+    helpText: 'Help text',
+};
+export const OnClickHelp = Template.bind({});
+OnClickHelp.args = {
+    onClickHelp: () => console.log('Help clicked'),
+};

package/dist/components/color/color.stories-data.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export declare const colorsText: string[];
+export declare const colorsBackground: string[];
+export declare const colorsBorder: string[];
+interface IColorPaletteProps {
+    colors: string[];
+}
+export declare const ColorPalette: ({ colors, }: IColorPaletteProps) => ReactElement;
+export {};

package/dist/components/color/color.stories-data.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { toast } from '../toaster/toaster';
+export const colorsText = [
+    '--color-text',
+    '--color-text-muted',
+    '--color-text-faint',
+    '--color-text-error',
+    '--color-text-warning',
+    '--color-text-success',
+    '--color-text-info',
+    '--color-text-primary',
+    '--color-text-primary-hover',
+    '--color-text-primary-active',
+];
+export const colorsBackground = [
+    '--color-background',
+    '--color-background-raised',
+    '--color-background-primary',
+    '--color-background-info',
+    '--color-background-warning',
+    '--color-background-success',
+    '--color-background-error',
+];
+export const colorsBorder = [
+    '--color-border',
+    '--color-border-error',
+    '--color-border-warning',
+    '--color-border-focus',
+];
+export const ColorPalette = ({ colors, }) => {
+    return (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr auto 1fr',
+            gap: 20,
+            alignItems: 'center',
+        }, children: colors.map((color, index) => {
+            const variable = `var(${color})`;
+            const handleClick = () => {
+                // TODO - consider this error (promise returned from writeText is ignored )
+                navigator.clipboard.writeText(variable);
+                toast({
+                    message: {
+                        type: 'Success',
+                        content: 'Copied to clipboard',
+                    },
+                });
+            };
+            return (_jsxs(Fragment, { children: [_jsx("div", { style: {
+                            padding: '16px 20px',
+                            backgroundColor: variable,
+                            border: '1px solid rgba(0,0,0,0.1)',
+                        }, onClick: handleClick }), _jsx("code", { onClick: handleClick, children: variable })] }, index));
+        }) }));
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface IDialog {
+    heading?: string;
+    content?: ReactNode | string[];
+    contentPadding?: number | string;
+    footer?: ReactNode;
+    width?: number | string;
+    height?: number | string;
+    bordered?: boolean;
+    onClose?: () => void;
+    scroll?: boolean;
+    testId?: string;
+}
+export interface IDialogProps {
+    dialog: IDialog;
+}
+export declare const Dialog: ({ dialog }: IDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/dialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import cx from 'classnames';
+import { isArray } from 'lodash';
+import { Heading } from '../heading/heading';
+import styles from './dialog.module.less';
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+const convertStringToJsx = (children) => {
+    if (isArray(children)) {
+        return children.map((text, index) => (_jsxs(Fragment, { children: [text, " ", _jsx("br", {})] }, index)));
+    }
+    return children;
+};
+export const Dialog = ({ dialog }) => {
+    const { heading, content, contentPadding = 20, footer, scroll, width, height, onClose, testId, } = dialog;
+    return (_jsxs("div", { className: cx(styles.dialog, width ? styles.inline : null, scroll ? styles.scroll : null), style: { width, height }, "data-testid": testId ?? null, children: [_jsxs("div", { className: styles.header, children: [_jsx(Heading, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading }), onClose ? (_jsx("div", { className: styles.dismiss, children: _jsx(Icon, { icon: IconType.CLOSE, onClick: onClose }) })) : null] }), _jsx("div", { "data-testid": testId && `${testId}-content`, className: styles.content, style: { padding: contentPadding }, children: convertStringToJsx(content) }), footer && (_jsx("div", { "data-testid": testId && `${testId}-footer`, className: styles.footer, children: footer }))] }));
+};

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Align } from "../../common-enum";
+export interface IDividerProps {
+    margin?: number | string;
+    color?: string;
+    align?: Align;
+    children?: React.ReactNode;
+}
+export declare const Divider: ({ children, margin, color, align, }: IDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/divider/divider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './divider.module.less';
+import { Text } from '../text/text';
+import { Align } from "../../common-enum";
+const cssAlignClass = (align) => {
+    switch (align) {
+        case Align.LEFT:
+            return styles.alignLeft;
+        case Align.RIGHT:
+            return styles.alignRight;
+        default:
+            return '';
+    }
+};
+export const Divider = ({ children, margin = 20, color = 'var(--color-border)', align = Align.CENTER, }) => (_jsx("div", { className: `${styles.divider} ${cssAlignClass(align)}`, style: {
+        marginTop: margin,
+        marginBottom: margin,
+        '--color': color,
+    }, children: typeof children === 'string' ? _jsx(Text, { muted: true, children: children }) : children }));

package/dist/components/divider/divider.stories.d.ts

@@ -0,0 +1,7 @@
+import { IDividerProps } from "./divider";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;
+export declare const WithText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;
+export declare const Margin: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;
+export declare const CustomColor: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;

package/dist/components/divider/divider.stories.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../text/text";
+import { Divider } from "./divider";
+import { Align } from "../../common-enum";
+export default {
+    title: 'Layout/Divider',
+    component: Divider,
+    argTypes: {
+        align: {
+            control: {
+                type: 'inline-radio',
+            },
+            options: ['left', 'center', 'right'],
+        },
+    },
+    decorators: [(story) => _jsxs(_Fragment, { children: ["content", story(), "more content"] })],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+const Template = (args) => _jsx(Divider, { ...args });
+export const Default = Template.bind({});
+export const WithText = Template.bind({});
+WithText.args = {
+    children: 'Heading',
+    align: Align.LEFT,
+};
+export const Margin = Template.bind({});
+Margin.args = {
+    margin: 0,
+};
+export const CustomColor = Template.bind({});
+CustomColor.args = {
+    color: 'var(--color-text-success)',
+    children: _jsx(Text, { success: true, children: "Colored text" }),
+    align: Align.LEFT,
+};

package/dist/components/drawer/drawer-resize-wrapper.d.ts

@@ -0,0 +1,2 @@
+import { IDrawerResizeWrapperProps } from './drawer.interface';
+export declare const DrawerResizeWrapper: ({ children, width, right, onResize, setOpen, }: IDrawerResizeWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer-resize-wrapper.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { toNumber } from 'lodash';
+import { Resizable } from "react-resizable";
+import styles from './drawer.module.less';
+import { TABS_WIDTH } from './drawer.constants';
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+const ResizeHandle = forwardRef((props, ref) => {
+    const { handleAxis, ...rest } = props;
+    return (_jsx("div", { ref: ref, className: styles.resizeHandle, ...rest, children: _jsx(Icon, { icon: IconType.DRAG_HORIZONTAL }) }));
+});
+export const DrawerResizeWrapper = ({ children = null, width = 400, right = false, onResize, setOpen, }) => {
+    const [isResizing, setIsResizing] = useState(false);
+    const MAXIMUM_OPEN_WIDTH = window.innerWidth / 2;
+    const handleResize = (event, { size }) => {
+        if (onResize)
+            onResize(size.width);
+    };
+    return onResize ? (_jsx(Resizable, { width: toNumber(width), height: 100, minConstraints: [TABS_WIDTH, Infinity], maxConstraints: [MAXIMUM_OPEN_WIDTH, Infinity], onResize: handleResize, handle: _jsx(ResizeHandle, {}), resizeHandles: right ? ['w'] : ['e'], axis: "x", className: isResizing ? styles.isResizing : '', onResizeStart: () => {
+            if (setOpen)
+                setOpen(true);
+            if (onResize)
+                onResize(width);
+            setIsResizing(true);
+        }, onResizeStop: () => {
+            setIsResizing(false);
+            if (typeof width === 'number' && width < TABS_WIDTH + 50) {
+                if (setOpen)
+                    setOpen(false);
+            }
+        }, children: children })) : (_jsx(_Fragment, { children: children }));
+};

package/dist/components/drawer/drawer-tabs.d.ts

@@ -0,0 +1,2 @@
+import { IDrawerTabsProps } from './drawer.interface';
+export declare const DrawerTabs: ({ tabs, activeTab, open, background, handleTabClick, width, testId, }: IDrawerTabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer-tabs.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './drawer.module.less';
+import { Badge } from '../badge/badge';
+const TabBadge = ({ badge, children }) => {
+    if (!badge)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(Badge, { small: true, title: badge.toString(), children: children }));
+};
+export const DrawerTabs = ({ tabs, activeTab, open, background, handleTabClick, width, testId, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.tabs, children: tabs.map((tab, index) => (_jsx("div", { className: cx(styles.tab, activeTab === index && open ? styles.active : ''), style: { background }, onClick: () => handleTabClick(index), "data-testid": testId && `${testId}-icon-${index}`, children: _jsx(TabBadge, { badge: tab.badge, children: tab.icon }) }, index))) }), tabs.map((tab, index) => {
+                const active = activeTab === index;
+                return (_jsx("div", { style: { width: typeof width === 'number' ? `${width}px` : width }, className: styles.tabsContent, "data-testid": testId && `${testId}-content-${index}`, children: active && open && tab.content }, index));
+            })] }));
+};

package/dist/components/drawer/drawer.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const TABS_WIDTH: number;
+export declare const MIN_OPEN_WIDTH: number;

package/dist/components/drawer/drawer.constants.js

@@ -0,0 +1,2 @@
+export const TABS_WIDTH = 37;
+export const MIN_OPEN_WIDTH = 240;

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,2 @@
+import { IDrawerProps } from './drawer.interface';
+export declare const Drawer: ({ background, fixed, open: openProp, setOpen: setOpenProp, right, width, closedWidth, shadow, top, button, buttonAnimate, buttonPosition, border, children, tabs, defaultTabIndex, activeTab: activeTabProp, setActiveTab: setActiveTabProp, testId, onResize, getActiveTab, onClose, onOpen, }: IDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.interface.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { ButtonPosition } from "../../common-enum";
+export interface ITabBadgeProps {
+    badge?: string | number;
+    children: ReactNode;
+}
+export interface IDrawerTab {
+    icon?: ReactNode | React.JSX.Element;
+    content?: ReactNode;
+    badge?: string | number;
+}
+export interface IDrawerTabsProps {
+    tabs: IDrawerTab[];
+    activeTab: number;
+    open: boolean;
+    background: string;
+    handleTabClick: (index: number) => void;
+    width: number | string;
+    testId?: string;
+}
+export interface IDrawerResizeHandleProps {
+    handleAxis?: string;
+}
+export interface IDrawerResizeWrapperProps {
+    children?: ReactNode;
+    width: number | string;
+    right?: boolean;
+    onResize?: (width: number | string) => void;
+    setOpen?: ((isOpen: boolean) => void) | null;
+}
+export interface IDrawerProps {
+    background?: string;
+    children?: ReactNode;
+    fixed?: boolean;
+    open?: boolean;
+    setOpen?: (openState: boolean) => void;
+    right?: boolean;
+    shadow?: boolean;
+    top?: string | number;
+    width?: string | number | Array<string | number>;
+    closedWidth?: string | number;
+    button?: boolean | ReactNode;
+    buttonAnimate?: boolean;
+    buttonPosition?: ButtonPosition;
+    border?: boolean | string;
+    tabs?: IDrawerTab[];
+    defaultTabIndex?: number;
+    activeTab?: number;
+    setActiveTab?: (index: number) => void;
+    testId?: string;
+    onResize?: (width: number | string | (number | string)[]) => void;
+    getActiveTab?: (tab: IDrawerTab) => void;
+    onClose?: (tab?: IDrawerTab) => any;
+    onOpen?: (tab?: IDrawerTab) => any;
+}

package/dist/components/drawer/drawer.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/drawer/drawer.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useState } from 'react';
+import cx from 'classnames';
+import { DrawerTabs } from './drawer-tabs';
+import styles from './drawer.module.less';
+import { DrawerResizeWrapper } from './drawer-resize-wrapper';
+import { MIN_OPEN_WIDTH, TABS_WIDTH } from './drawer.constants';
+import { Button } from '../button/button';
+import { ButtonPosition, IconType } from "../../common-enum";
+export const Drawer = ({ background = 'var(--color-background-raised)', fixed = false, open: openProp = false, setOpen: setOpenProp, right = false, width = 400, closedWidth = 0, shadow = false, top = 0, button = null, buttonAnimate = true, buttonPosition = ButtonPosition.BOTTOM, border = false, children = null, tabs, defaultTabIndex = 0, activeTab: activeTabProp, setActiveTab: setActiveTabProp, testId, onResize, getActiveTab, onClose, onOpen, }) => {
+    const isStandardButton = button === true;
+    const isCustomButton = !isStandardButton && isValidElement(button);
+    const [localOpen, setLocalOpen] = setOpenProp
+        ? [openProp, setOpenProp]
+        : isStandardButton || tabs
+            ? useState(openProp)
+            : [openProp, () => { }];
+    const [localActiveTab, setLocalActiveTab] = useState(defaultTabIndex);
+    const openState = setOpenProp ? openProp : localOpen;
+    const setOpenState = setOpenProp || setLocalOpen;
+    const activeTabState = setActiveTabProp !== undefined ? activeTabProp : localActiveTab;
+    const setActiveTabState = setActiveTabProp || setLocalActiveTab;
+    const openWidth = Array.isArray(width) ? width[activeTabState || 0] : width;
+    const currentWidth = openState ? openWidth : tabs ? TABS_WIDTH : closedWidth;
+    const handleTabClick = (index) => {
+        const tabAction = (callback) => {
+            if (tabs && callback) {
+                callback(tabs[index]);
+            }
+        };
+        if (activeTabState === index && openState && setOpenState) {
+            tabAction(onClose);
+            setOpenState(false);
+        }
+        else if (!openState && setOpenState) {
+            tabAction(onOpen);
+            setOpenState(true);
+            if (onResize) {
+                // TODO: Revisit this function for optimization or refactoring in the future
+                const checkAndResize = (w) => {
+                    let targetWidth;
+                    // Check if 'w' is an array
+                    if (Array.isArray(w)) {
+                        // Use the width based on the active tab index or default to the first width value
+                        targetWidth = w[activeTabState || 0];
+                    }
+                    else {
+                        targetWidth = w;
+                    }
+                    if (typeof targetWidth === 'number' && targetWidth < MIN_OPEN_WIDTH) {
+                        onResize(MIN_OPEN_WIDTH);
+                    }
+                    else if (typeof targetWidth === 'string') {
+                        const numWidth = parseInt(targetWidth, 10);
+                        if (!isNaN(numWidth) && numWidth < MIN_OPEN_WIDTH) {
+                            onResize(MIN_OPEN_WIDTH);
+                        }
+                    }
+                };
+                checkAndResize(width);
+            }
+        }
+        setActiveTabState(index);
+        tabAction(getActiveTab);
+    };
+    return (_jsx(DrawerResizeWrapper, { width: currentWidth, onResize: onResize, setOpen: setOpenState, right: right, children: _jsxs("div", { className: cx(styles.drawer, shadow ? styles.shadow : '', fixed ? styles.fixed : styles.inline, right ? styles.right : styles.left), style: { top }, children: [_jsx("div", { className: cx(styles.drawerContent, border && styles.border), style: {
+                        background,
+                        borderColor: typeof border === 'string' ? border : undefined,
+                        width: currentWidth,
+                    }, children: tabs ? (_jsx(DrawerTabs, { width: openWidth,
+                        testId,
+                        tabs,
+                        open: openState,
+                        activeTab: activeTabState || 0,
+                        background,
+                        handleTabClick })) : (_jsx("div", { style: { width: openWidth }, children: children })) }), button && (_jsx("span", { className: cx(styles.toggleButton, localOpen &&
+                        (isStandardButton || (isCustomButton && buttonAnimate))
+                        ? styles.toggleButtonOpen
+                        : '', buttonPosition === 'top' ? styles.top : styles.bottom), children: isCustomButton ? (button) : (_jsx(Button, { onClick: setOpenState ? () => setOpenState(!openState) : undefined, round: true, icon: right ? IconType.CHEVRON_RIGHT : IconType.CHEVRON_LEFT })) }))] }) }));
+};

package/dist/components/drawer/drawer.stories.d.ts

@@ -0,0 +1,40 @@
+import { IDrawerProps } from './drawer.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
+export declare const Right: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
+export declare const Fixed: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
+export declare const CustomButton: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
+export declare const WithList: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Tabs: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
+export declare const ControlledOpenClose: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ControlledTabs: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const MultipleTabbedDrawers: () => import("react/jsx-runtime").JSX.Element;
+export declare const Resizable: () => import("react/jsx-runtime").JSX.Element;