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

package/dist/components/badge/badge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './badge.module.less';
+const isDark = (hexColor) => {
+    const c = hexColor.substring(1); // strip #
+    const rgb = parseInt(c, 16); // convert RRGGBB to decimal
+    /* eslint-disable no-bitwise */
+    const r = (rgb >> 16) & 0xff; // extract red
+    const g = (rgb >> 8) & 0xff; // extract green
+    const b = (rgb >> 0) & 0xff; // extract blue
+    /* eslint-enable no-bitwise */
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+    return luma < 128;
+};
+export const Badge = ({ children, color = '', title = null, dot, margin = null, small = false, }) => {
+    const visible = !(title === null && dot === null);
+    return (_jsxs("div", { className: styles.wrapper, children: [visible && (_jsx("sup", { className: cx(styles.badge, isDark(color) ? styles.dark : styles.light, title !== null ? styles.label : styles.dot, small ? styles.small : '', children ? styles.hasChildren : ''), style: {
+                    background: color || undefined,
+                    margin: margin || undefined,
+                }, children: title })), children] }));
+};

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

@@ -0,0 +1,7 @@
+import { IBadgeProps } from './badge';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IBadgeProps>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IBadgeProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IBadgeProps>;
+export declare const Dot: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IBadgeProps>;
+export declare const Standalone: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IBadgeProps>;

package/dist/components/badge/badge.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from './badge';
+import { Button } from '../button/button';
+export default {
+    title: 'Basic/Badge',
+    component: Badge,
+    args: {
+        title: '3',
+        color: '',
+        small: false,
+        children: _jsx(Button, { name: "example", label: "Button", onClick: () => { } }),
+    },
+};
+const Template = (args) => _jsx(Badge, { ...args });
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const Dot = Template.bind({});
+Dot.args = { dot: true, title: undefined };
+export const Standalone = Template.bind({});
+Standalone.args = { children: undefined };

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,6 @@
+import { ILinkProps } from './link';
+export interface IBreadcrumbProps {
+    links: ILinkProps[];
+    small?: boolean;
+}
+export declare const Breadcrumb: ({ links, small }: IBreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Link } from './link';
+import styles from './breadcrumb.module.less';
+export const Breadcrumb = ({ links, small = false }) => {
+    return (_jsx("div", { className: cx(styles.breadcrumb, small && styles.small), children: links.map((link, i) => {
+            const isFinal = links.length === i + 1;
+            const { type, label, url, onClick, active, disabled, element } = link;
+            return (_jsxs("span", { children: [_jsx(Link, { type: type, label: label, url: url, onClick: onClick, active: active, disabled: disabled, element: element }), !isFinal && _jsx("span", { className: styles.separator, children: "/" })] }, i));
+        }) }));
+};

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

@@ -0,0 +1,5 @@
+import { IBreadcrumbProps } from './breadcrumb';
+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, IBreadcrumbProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IBreadcrumbProps>;

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumb } from './breadcrumb';
+export default {
+    title: 'Navigation/Breadcrumb',
+    component: Breadcrumb,
+    args: {
+        links: [
+            {
+                label: 'Animals',
+                onClick: () => console.log('label clicked'),
+            },
+            {
+                label: 'Mammals',
+                url: 'animals/mammals',
+                disabled: true,
+            },
+            {
+                label: 'Cats',
+                url: 'animals/mammals/cats',
+            },
+            {
+                type: 'custom',
+                element: _jsx("span", { children: "Large" }),
+            },
+            {
+                label: 'Tiger',
+                url: 'animals/mammals/cats/tiger',
+                active: true,
+            },
+        ],
+    },
+};
+const Template = (args) => _jsx(Breadcrumb, { ...args });
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };

package/dist/components/breadcrumb/enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum BreadcrumbLinkType {
+    LABEL = "label",
+    LINK = "link",
+    CUSTOM = "custom"
+}

package/dist/components/breadcrumb/enum.js

@@ -0,0 +1,6 @@
+export var BreadcrumbLinkType;
+(function (BreadcrumbLinkType) {
+    BreadcrumbLinkType["LABEL"] = "label";
+    BreadcrumbLinkType["LINK"] = "link";
+    BreadcrumbLinkType["CUSTOM"] = "custom";
+})(BreadcrumbLinkType || (BreadcrumbLinkType = {}));

package/dist/components/breadcrumb/link.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BreadcrumbLinkType } from "./enum";
+export interface ILinkProps {
+    type?: BreadcrumbLinkType;
+    label?: string | number;
+    url?: string;
+    onClick?: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    element?: ReactNode;
+}
+export declare const Link: ({ type, label, url, onClick, active, disabled, element, }: ILinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumb/link.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement, useContext } from 'react';
+import cx from 'classnames';
+import styles from './breadcrumb.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { BreadcrumbLinkType } from "./enum";
+export const Link = ({ type = BreadcrumbLinkType.LABEL, label, url, onClick, active, disabled, element, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const isLink = type === BreadcrumbLinkType.LINK && url !== undefined;
+    const isCustom = type === BreadcrumbLinkType.CUSTOM && isValidElement(element);
+    return (_jsx("span", { onClick: onClick, className: cx(styles.labelContainer, active && styles.active, (disabled || disabledContext) && styles.disabled), children: isLink ? _jsx("a", { href: url, children: label }) : isCustom ? element : label }));
+};

package/dist/components/button/button.d.ts

@@ -0,0 +1,31 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ButtonType } from './enum';
+export interface IButtonTooltipWrapperProps {
+    children: ReactNode;
+    tooltip?: ReactNode | string;
+}
+export interface IButtonProps {
+    active?: boolean;
+    basic?: boolean;
+    colored?: boolean | string;
+    disabled?: boolean;
+    groupOrder?: string | null;
+    icon?: ReactNode | string;
+    label?: ReactNode | string;
+    loading?: boolean;
+    name?: string;
+    onClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
+    pill?: boolean;
+    round?: boolean;
+    small?: boolean;
+    styles?: string;
+    width?: string | number;
+    title?: string;
+    type?: ButtonType;
+    error?: string;
+    warning?: string;
+    testId?: string;
+    tooltip?: ReactNode | string;
+    inverted?: boolean;
+}
+export declare const Button: ({ active, basic, colored, disabled, groupOrder, icon, label, loading, name, pill, round, small, styles, width, title, type, onClick, error, warning, testId, tooltip, inverted, }: IButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button/button.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import buttonStyles from './button.module.less';
+import { Spinner } from '../spinner/spinner';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { Icon } from '../icon/icon';
+import { Tooltip } from '../tooltip/tooltip';
+import { Color, GroupOrder } from '../../common-enum';
+import { ButtonType } from './enum';
+const ButtonTooltipWrapper = ({ children, tooltip = null, }) => {
+    if (!tooltip) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(Tooltip, { text: tooltip, display: "inline-flex", children: children }));
+};
+export const Button = ({ active = false, basic = false, colored = false, disabled = false, groupOrder = null, icon = null, label = '', loading = false, name, pill = false, // *Deprecated*
+round = false, small = false, styles = '', width = '', title = '', type = ButtonType.BUTTON, onClick = () => { }, error, warning, testId, tooltip, inverted = false, // *Deprecated*
+ }) => {
+    const disabledContext = useContext(DisabledContext);
+    const color = (() => {
+        if (colored) {
+            switch (colored) {
+                case Color.DANGER:
+                case Color.RED:
+                    return buttonStyles.red;
+                case Color.SUCCESS:
+                case Color.GREEN:
+                    return buttonStyles.green;
+                case Color.MUTED:
+                    return buttonStyles.muted;
+                default:
+                    return buttonStyles.orange;
+            }
+        }
+        return '';
+    })();
+    const order = (() => {
+        if (groupOrder) {
+            switch (groupOrder) {
+                case GroupOrder.FIRST:
+                    return buttonStyles.groupOrderFirst;
+                case GroupOrder.LAST:
+                    return buttonStyles.groupOrderLast;
+                default:
+                    return buttonStyles.groupOrderMiddle;
+            }
+        }
+        return '';
+    })();
+    return (_jsx(ButtonTooltipWrapper, { tooltip: tooltip, children: _jsxs("button", { type: type === ButtonType.SUBMIT ? ButtonType.SUBMIT : ButtonType.BUTTON, className: cx(buttonStyles.button, active ? buttonStyles.active : '', basic ? buttonStyles.basic : '', color, disabled || disabledContext ? buttonStyles.disabled : '', (icon || loading) && !label ? buttonStyles.iconOnly : '', inverted ? buttonStyles.inverted : '', order, pill ? buttonStyles.pill : '', round ? buttonStyles.round : '', small ? buttonStyles.small : '', error ? buttonStyles.error : warning ? buttonStyles.warning : '', styles), disabled: disabled || disabledContext, name: name, onClick: onClick, ...(title ? { title } : {}), style: { width }, "data-testid": testId, children: [icon && (_jsx("span", { className: buttonStyles.icon, children: _jsx(Icon, { icon: icon }) })), loading && (_jsx("span", { className: buttonStyles.icon, children: _jsx(Spinner, { small: !small /*regular button use small spinner*/, tiny: small /*small button use tiny spinner*/, dark: !colored && !basic, colored: basic }) })), label] }) }));
+};

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

@@ -0,0 +1,13 @@
+import { IButtonProps } from './button';
+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, IButtonProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const Active: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const WithIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const Round: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const RoundMuted: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const FullWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const Submit: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;
+export declare const Tooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonProps>;

package/dist/components/button/button.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from '../layout/flex/flex';
+import { Button } from './button';
+import { ButtonType } from "./enum";
+export default {
+    title: 'Forms/Button',
+    component: Button,
+    parameters: {
+        canvas: {
+            page: null,
+        },
+    },
+    argTypes: {
+        colored: {
+            control: {
+                type: 'inline-radio',
+            },
+            options: {
+                off: false,
+                primary: 'primary',
+                success: 'success',
+                danger: 'danger',
+                muted: 'muted',
+            },
+        },
+        icon: {
+            control: { type: 'inline-radio' },
+            options: {
+                off: undefined,
+                on: 'delete',
+            },
+        },
+    },
+    args: {
+        label: 'Label',
+    },
+};
+const Template = (args) => (_jsxs(Flex, { gap: "var(--spacing)", children: [_jsx(Button, { ...args }), _jsx(Button, { colored: true, ...args }), _jsx(Button, { colored: "success", ...args }), _jsx(Button, { colored: "danger", ...args })] }));
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const Basic = Template.bind({});
+Basic.args = { basic: true };
+export const Active = Template.bind({});
+Active.args = { active: true };
+export const WithIcon = Template.bind({});
+WithIcon.args = { icon: 'delete' };
+export const Round = Template.bind({});
+Round.args = { round: true, icon: 'delete', label: undefined };
+export const RoundMuted = Template.bind({});
+RoundMuted.args = {
+    round: true,
+    icon: 'delete',
+    label: undefined,
+    colored: 'muted',
+    basic: true,
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = { width: '100%' };
+export const Submit = Template.bind({});
+Submit.args = { type: ButtonType.SUBMIT };
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: 'Tooltip goes here' };

package/dist/components/button/enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum ButtonType {
+    SUBMIT = "submit",
+    BUTTON = "button",
+    RESET = "reset"
+}

package/dist/components/button/enum.js

@@ -0,0 +1,6 @@
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType["SUBMIT"] = "submit";
+    ButtonType["BUTTON"] = "button";
+    ButtonType["RESET"] = "reset";
+})(ButtonType || (ButtonType = {}));

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface IBtnGroupItemProps {
+    label: string;
+    value: string;
+    key?: string | number;
+    hidden?: boolean;
+    icon?: any;
+    error?: any;
+    maxTooltipWidth?: any;
+    testId?: string;
+    tooltip?: any;
+    warning?: any;
+    disabled?: boolean;
+}
+export interface IButtonGroupProps {
+    disabled?: boolean;
+    basic?: boolean;
+    items?: (string[] | IBtnGroupItemProps)[];
+    header?: string;
+    onSelected?: (key: string | number, value: string, label: string) => void;
+    small?: boolean;
+    value?: string | number;
+    testId?: string;
+}
+export interface IButtonGroupItem {
+    label: ReactNode;
+    value: string | number;
+    key: string | number;
+    hidden: boolean;
+    icon: any;
+    error: any;
+    maxTooltipWidth: any;
+    testId: string;
+    tooltip: any;
+    warning: any;
+    disabled: boolean;
+}
+export declare const ButtonGroup: (props: IButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button-group/button-group.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Button } from "../button/button";
+import { Tooltip } from "../tooltip/tooltip";
+import styles from "./button-group.module.less";
+import { getType, isStringNumberOrNode } from "../../helpers/types";
+import { DisabledContext } from "../../helpers/disabled-context";
+import { GroupOrder } from "../../common-enum";
+export const ButtonGroup = (props) => {
+    const { basic = false, items = [], header = '', onSelected = () => { }, small = false, value: inputValue = '', testId = undefined, disabled, } = props;
+    const disabledContextValue = useContext(DisabledContext);
+    const onClick = (evt, key, value, label, disabledButton) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (disabled || disabledButton || disabledContextValue)
+            return;
+        onSelected(key, value, label);
+    };
+    const getLabelFromButtonType = (button, type) => {
+        if (type === 'string')
+            return button;
+        if (type === 'object')
+            return button.label;
+        if (type === 'array')
+            return button[1];
+        return null;
+    };
+    const getValueFromButtonType = (button, type) => {
+        if (type === 'string')
+            return button;
+        if (type === 'object')
+            return button.value ?? '';
+        if (type === 'array')
+            return button[0] ?? '';
+        return '';
+    };
+    const getKeyFromButtonType = (button, type, fallbackValue) => {
+        if (type === 'object' && 'key' in button) {
+            return button.key;
+        }
+        return fallbackValue;
+    };
+    const getHiddenFromButtonType = (button, type) => {
+        return type === 'object' ? button.hidden : false;
+    };
+    const getIconFromButtonType = (button, type) => {
+        return type === 'object' ? button.icon : undefined;
+    };
+    const isActive = (type, key, val) => {
+        if (type === 'object')
+            return String(key) === String(inputValue);
+        return val === inputValue;
+    };
+    const renderHeader = () => {
+        if (header) {
+            return _jsx("label", { className: styles.label, children: header });
+        }
+    };
+    const renderButtons = () => {
+        return items.map((button, i) => {
+            const type = getType(button);
+            const groupOrder = i === 0 ? GroupOrder.FIRST : i === items.length - 1 ? GroupOrder.LAST : GroupOrder.MIDDLE;
+            const label = getLabelFromButtonType(button, type);
+            const value = getValueFromButtonType(button, type);
+            const key = getKeyFromButtonType(button, type, value);
+            const hidden = getHiddenFromButtonType(button, type);
+            const icon = getIconFromButtonType(button, type);
+            const active = isActive(type, key, value);
+            const { error, maxTooltipWidth, testId, tooltip, warning } = button;
+            if (!hidden) {
+                return (_jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, maxWidth: maxTooltipWidth, display: "block", enabled: (tooltip && isStringNumberOrNode(tooltip)) ||
+                        (error && isStringNumberOrNode(error)) ||
+                        (warning && isStringNumberOrNode(warning)) ||
+                        false, placement: "bottom-center", children: _jsx(Button, { active: active, basic: basic, disabled: disabled || button.disabled, groupOrder: groupOrder, icon: icon, label: label, onClick: (evt) => {
+                            const stringLabel = typeof label === 'string' ? label : '';
+                            onClick(evt, key, value, stringLabel, button.disabled || false);
+                        }, small: small, testId: testId }) }, i));
+            }
+            return null; // Added to handle cases where 'hidden' is true
+        });
+    };
+    return (_jsx("div", { children: _jsxs("div", { children: [renderHeader(), _jsx("div", { className: styles.buttonGroup, "data-testid": testId, children: renderButtons() })] }) }));
+};

package/dist/components/button-group/button-group.stories-data.d.ts

@@ -0,0 +1,6 @@
+import { IBtnGroupItemProps } from './button-group';
+export declare const buttonsArrayOfObjects: IBtnGroupItemProps[];
+export declare const buttonsWithIcons: IBtnGroupItemProps[];
+export declare const buttonsArrayOfStrings: string[];
+export declare const buttonsArrayOfArrays: (string[] | IBtnGroupItemProps)[];
+export declare const buttonsWithTooltips: IBtnGroupItemProps[];

package/dist/components/button-group/button-group.stories-data.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const buttonsArrayOfObjects = [
+    { key: '0', label: 'Aardvarks', value: 'termites' },
+    { key: '1', label: 'Kangaroos', value: 'grass' },
+    { key: '2', label: 'Monkeys', value: 'bananas' },
+    { key: '3', label: 'Possums', value: 'slugs', hidden: true },
+    { key: '4', label: 'Pandas', value: 'bamboo', disabled: true },
+];
+export const buttonsWithIcons = [
+    {
+        key: '0',
+        label: 'Upload',
+        value: 'upload',
+        icon: 'upload',
+    },
+    {
+        key: '1',
+        label: 'Delete',
+        value: 'delete',
+        icon: 'delete',
+    },
+    {
+        key: '2',
+        label: 'Help',
+        value: 'help',
+        icon: 'help',
+    },
+];
+export const buttonsArrayOfStrings = ['One', 'Two', 'Three'];
+export const buttonsArrayOfArrays = [
+    ['first_item', 'One'],
+    ['second_item', 'Two'],
+    ['third_item', 'Three'],
+];
+export const buttonsWithTooltips = [
+    {
+        key: '0',
+        label: 'Aardvarks',
+        value: 'termites',
+        tooltip: 'Eats 50k termites / night',
+    },
+    {
+        key: '1',
+        label: 'Kangaroos',
+        value: 'grass',
+        tooltip: _jsx("span", { children: "Babies are called joeys" }),
+    },
+    {
+        key: '2',
+        label: 'Monkeys',
+        value: 'bananas',
+        warning: 'A bit cheeky',
+    },
+    {
+        key: '3',
+        label: 'Pandas',
+        value: 'bamboo',
+        disabled: true,
+        tooltip: 'Extinct',
+    },
+];

package/dist/components/button-group/button-group.stories.d.ts

@@ -0,0 +1,9 @@
+import { IButtonGroupProps } from './button-group';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export declare const Icons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export declare const Tooltips: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export declare const ArrayOfStrings: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;
+export declare const ArrayOfArrays: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IButtonGroupProps>;

package/dist/components/button-group/button-group.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import * as storyData from './button-group.stories-data';
+import { ButtonGroup } from './button-group';
+export default {
+    title: 'Forms/ButtonGroup',
+    component: ButtonGroup,
+    args: {
+        disabled: false,
+        items: storyData.buttonsArrayOfObjects,
+        value: '0',
+        small: false,
+        testId: undefined,
+        onSelected: () => { },
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ value: evt });
+    };
+    return (_jsx(ButtonGroup
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args, onSelected: handleChange }));
+};
+export const Default = Template.bind({});
+export const Icons = Template.bind({});
+Icons.args = { items: storyData.buttonsWithIcons };
+export const Tooltips = Template.bind({});
+Tooltips.args = { items: storyData.buttonsWithTooltips };
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+export const ArrayOfStrings = Template.bind({});
+// @ts-ignore: data mismatch
+ArrayOfStrings.args = { items: storyData.buttonsArrayOfStrings };
+ArrayOfStrings.parameters = {
+    docs: {
+        description: {
+            story: 'For simple cases when button key, label and value are the same.',
+        },
+    },
+};
+export const ArrayOfArrays = Template.bind({});
+ArrayOfArrays.args = { items: storyData.buttonsArrayOfArrays };
+ArrayOfArrays.parameters = {
+    docs: {
+        description: {
+            story: 'Avoid this deprecated legacy usage (still supported, but may be removed in future).',
+        },
+    },
+};

package/dist/components/card/card.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface ICardProps {
+    bordered?: boolean;
+    heading?: ReactNode;
+    margin?: string;
+    padding?: boolean;
+    raised?: boolean;
+    children?: ReactNode;
+}
+export declare const Card: ({ bordered, heading, children, margin, padding, raised, }: ICardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/card/card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './card.module.less';
+export const Card = ({ bordered = true, heading = null, children, margin = '0', padding = true, raised = false, }) => {
+    return (_jsxs("div", { className: cx(styles.card, bordered ? styles.bordered : '', raised ? styles.raised : ''), style: { margin }, children: [heading ? _jsx("div", { className: cx(styles.cardHeader), children: heading }) : null, _jsx("div", { className: cx(styles.cardContent, heading ? styles.cardContentBorderTop : '', padding ? styles.padding : ''), children: children })] }));
+};

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

@@ -0,0 +1,8 @@
+import { ICardProps } from './card';
+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, ICardProps>;
+export declare const WithHeading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
+export declare const WithHelpHeading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
+export declare const NoPadding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
+export declare const NoBorder: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;