@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Buttons/MainButton.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress } from '@mui/material';
+import styled from '@emotion/styled';
+import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+const StyledButton = styled.button `
+  text-transform: none;
+  padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : props.$sizeStyles.padding};
+  font-size: ${(props) => props.$sizeStyles.fontSize};
+  border-radius: ${(props) => props.$shape === ButtonShape.Square
+    ? 'var(--spacing-tokens-size-in-px-radius-radius-xs)'
+    : 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)'};
+  background: ${(props) => {
+    if (props.$destructive) {
+        if (props.$state === ButtonState.Disabled || props.$disabled)
+            return 'var(--color-background-bg-error-solid)';
+        return 'var(--color-background-bg-error)';
+    }
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-button-disabled)';
+            return 'var(--color-background-bg-brand-primary)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-element)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
+        case ButtonHierarchy.Secondary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-component-disabled)';
+            return 'var(--color-background-bg-component)';
+        case ButtonHierarchy.SecondaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-element)';
+            return 'var(--color-background-bg-component)';
+        case ButtonHierarchy.SecondaryTransparent:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-overlay-1)';
+            return 'var(--primitives-desktop-primary-transparent-violet-50)';
+        case ButtonHierarchy.Tertiary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--primitives-desktop-primary-white-0)';
+            return 'var(--primitives-desktop-primary-white-0)';
+        case ButtonHierarchy.TertiaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--primitives-desktop-primary-white-0)';
+            return 'var(--primitives-desktop-primary-white-0)';
+        default:
+            return 'var(--color-background-bg-brand-primary)';
+    }
+}};
+  color: ${(props) => {
+    if (props.$destructive) {
+        if (props.$state === ButtonState.Disabled || props.$disabled)
+            return 'var(--color-text-text-white)';
+        return 'var(--color-text-text-white)';
+    }
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-white)';
+            return 'var(--color-text-text-white)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-subtle)';
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.Secondary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-disabled)';
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.SecondaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-disabled)';
+            return 'var(--color-text-text-accent)';
+        case ButtonHierarchy.SecondaryTransparent:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-white)';
+            return 'var(--color-text-text-white)';
+        case ButtonHierarchy.Tertiary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-disabled)';
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.TertiaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-disabled)';
+            return 'var(--color-text-text-accent)';
+        default:
+            return 'var(--color-text-text-white)';
+    }
+}};
+  border: 1px solid
+    ${(props) => {
+    if (props.$destructive) {
+        if (props.$state === ButtonState.Disabled || props.$disabled)
+            return 'var(--color-border-border-disabled)';
+        return 'var(--color-background-bg-error)';
+    }
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-border-border-component)';
+            return 'var(--color-background-bg-brand-primary)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-border-border-component)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
+        case ButtonHierarchy.Secondary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-border-border-component)';
+            return 'var(--color-border-border-component)';
+        case ButtonHierarchy.SecondaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-border-border-component)';
+            return 'var(--color-border-border-brand)';
+        case ButtonHierarchy.SecondaryTransparent:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-border-border-disabled)';
+            return 'var(--color-border-border-white)';
+        case ButtonHierarchy.Tertiary:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--primitives-desktop-primary-white-0)';
+            return 'var(--primitives-desktop-primary-white-0)';
+        case ButtonHierarchy.TertiaryColor:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--primitives-desktop-primary-white-0)';
+            return 'var(--primitives-desktop-primary-white-0)';
+        default:
+            return 'var(--color-background-bg-brand-primary)';
+    }
+}};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: unset;
+  cursor: ${(props) => props.$state === ButtonState.Disabled || props.$disabled
+    ? 'not-allowed'
+    : 'pointer'};
+  pointer-events: ${(props) => props.$state === ButtonState.Disabled || props.$disabled ? 'none' : 'auto'};
+  transition: all 0.2s ease-in-out;
+
+  & > div {
+    gap: ${(props) => props.$sizeStyles.gap};
+  }
+
+  &:hover {
+    background: ${(props) => {
+    if (props.$destructive) {
+        return 'var(--primitives-desktop-primary-red-700)';
+    }
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            return 'var(--color-background-bg-brand-primary-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
+        case ButtonHierarchy.Secondary:
+            return 'var(--color-background-bg-card-highlight-hover)';
+        case ButtonHierarchy.SecondaryColor:
+            return 'var(--color-background-bg-card-highlight-hover)';
+        case ButtonHierarchy.SecondaryTransparent:
+            return 'var(--color-background-bg-brand-primary-hover)';
+        case ButtonHierarchy.Tertiary:
+            return 'var(--primitives-desktop-primary-white-40)';
+        case ButtonHierarchy.TertiaryColor:
+            return 'var(--color-background-bg-card-highlight-hover)';
+        default:
+            return 'var(--color-background-bg-brand-primary-hover)';
+    }
+}};
+    border-color: ${(props) => {
+    if (props.$destructive) {
+        return 'var(--primitives-desktop-primary-red-700)';
+    }
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            return 'var(--color-background-bg-brand-primary-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
+        case ButtonHierarchy.Secondary:
+            return 'var(--color-background-bg-card-highlight-hover)';
+        case ButtonHierarchy.SecondaryColor:
+            return 'var(--color-background-bg-brand-primary-hover)';
+        case ButtonHierarchy.SecondaryTransparent:
+            return 'var(--primitives-desktop-primary-white-100)';
+        case ButtonHierarchy.Tertiary:
+            return 'var(--primitives-desktop-primary-white-0)';
+        case ButtonHierarchy.TertiaryColor:
+            return 'var(--primitives-desktop-primary-white-0)';
+        default:
+            return 'var(--color-background-bg-brand-primary-hover)';
+    }
+}};
+    box-shadow: var(--global-shadows-shadow-xs-offset-x)
+      var(--global-shadows-shadow-xs-offset-y)
+      var(--global-shadows-shadow-xs-blur)
+      var(--global-shadows-shadow-xs-spread)
+      var(--global-shadows-shadow-xs-color);
+  }
+`;
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
+    const getIconSize = () => {
+        const sizes = {
+            [ButtonSize.xl]: 24,
+            [ButtonSize.lg]: 22,
+            [ButtonSize.md]: 20,
+            [ButtonSize.sm]: 18,
+            [ButtonSize.xs]: 16,
+            [ButtonSize.xxs]: 14,
+        };
+        return sizes[size] || sizes[ButtonSize.xl];
+    };
+    const getButtonSize = () => {
+        const sizes = {
+            [ButtonSize.xl]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                fontSize: 'var(--global-font-size-3)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            },
+            [ButtonSize.lg]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
+                fontSize: 'var(--global-font-size-3)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            },
+            [ButtonSize.md]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                fontSize: 'var(--global-font-size-2)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            },
+            [ButtonSize.sm]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                fontSize: 'var(--global-font-size-1)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+            },
+            [ButtonSize.xs]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                fontSize: 'var(--global-font-size-1)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+            },
+            [ButtonSize.xxs]: {
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                fontSize: 'var(--global-font-size-0)',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+            },
+        };
+        return sizes[size] || sizes[ButtonSize.xl];
+    };
+    const iconProps = {
+        size: getIconSize(),
+        color: disabled ? 'var(--color-text-text-disabled)' : 'currentColor',
+        weight: 'regular',
+    };
+    const sizeStyles = getButtonSize();
+    const renderContent = () => {
+        if (loading) {
+            return (_jsx(CircularProgress, { size: 24, sx: {
+                    color: 'currentColor',
+                } }));
+        }
+        if (displayIconMode === ButtonDisplayMode.Only && displayIcon) {
+            return getIconComponent(displayIcon, iconProps);
+        }
+        const getTextSize = () => {
+            if (size === ButtonSize.xl)
+                return TypographySize.TextL;
+            if (size === ButtonSize.lg)
+                return TypographySize.TextM;
+            if (size === ButtonSize.md)
+                return TypographySize.TextS;
+            if (size === ButtonSize.sm)
+                return TypographySize.TextXS;
+            if (size === ButtonSize.xs)
+                return TypographySize.Text2XS;
+            if (size === ButtonSize.xxs)
+                return TypographySize.Text2XS;
+            return TypographySize.TextM;
+        };
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            }, children: [showLeadingIcon &&
+                    leadingIcon &&
+                    getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { size: getTextSize(), weight: TypographyWeight.SemiBold, children: text })), showTrailingIcon &&
+                    trailingIcon &&
+                    getIconComponent(trailingIcon, iconProps)] }));
+    };
+    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, "data-testid": testId, children: renderContent() }));
+};

package/dist/stories/Buttons/MainButton.stories.d.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MainButton } from './MainButton';
+declare const meta: Meta<typeof MainButton>;
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+export declare const Primary: Story;
+export declare const PrimaryLemon: Story;
+export declare const Secondary: Story;
+export declare const SecondaryColor: Story;
+export declare const SecondaryTransparent: Story;
+export declare const Tertiary: Story;
+export declare const TertiaryColor: Story;
+export declare const PrimaryHover: Story;
+export declare const PrimaryDisabled: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyHover: Story;
+export declare const IconOnlyDisabled: Story;
+export declare const Destructive: Story;
+export declare const DestructiveHover: Story;
+export declare const DestructiveDisabled: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const ExtraSmall: Story;
+export declare const ExtraExtraSmall: Story;
+export declare const CircularButton: Story;
+export declare const CircularButtonHover: Story;
+export declare const CircularButtonDisabled: Story;

package/dist/stories/Buttons/MainButton.stories.js

@@ -0,0 +1,299 @@
+import { MainButton } from './MainButton';
+import { ButtonHierarchy, ButtonSize, ButtonState, ButtonDisplayMode, ButtonShape, } from './types';
+const meta = {
+    title: 'Design System/Components/Buttons/MainButton',
+    component: MainButton,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4339-3441&t=21PpejYhkGTLCVlu-4',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Button text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'],
+            description: 'Size of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'xl' },
+            },
+        },
+        hierarchy: {
+            control: 'select',
+            options: [
+                'Primary',
+                'Primary-lemon',
+                'Secondary',
+                'Secondary-color',
+                'Secondary-transparent',
+                'Tertiary',
+                'Tertiary-color',
+            ],
+            description: 'Visual hierarchy of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Primary' },
+            },
+        },
+        displayIcon: {
+            control: 'text',
+            description: 'Name of the display Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        displayIconMode: {
+            control: 'select',
+            options: ['Default', 'Only'],
+            description: 'Icon display mode - Default shows text with icons, Only shows a single icon without text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Default' },
+            },
+        },
+        state: {
+            control: 'select',
+            options: ['Default', 'Hover', 'Disabled'],
+            description: 'Current state of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Default' },
+            },
+        },
+        shape: {
+            control: 'select',
+            options: ['Square', 'Circle'],
+            description: 'Shape of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Square' },
+            },
+        },
+        destructive: {
+            control: 'boolean',
+            description: 'Whether the button is destructive',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the button is in loading state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showLeadingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the leading icon',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        showTrailingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the trailing icon',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        leadingIcon: {
+            control: 'text',
+            description: 'Name of the leading Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Circle' },
+            },
+        },
+        trailingIcon: {
+            control: 'text',
+            description: 'Name of the trailing Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Circle' },
+            },
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        text: 'Button',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        displayIconMode: ButtonDisplayMode.Default,
+        state: ButtonState.Default,
+        shape: ButtonShape.Square,
+        destructive: false,
+        showLeadingIcon: true,
+        showTrailingIcon: true,
+        leadingIcon: 'Circle',
+        trailingIcon: 'Circle',
+    },
+};
+export const PrimaryLemon = {
+    args: {
+        ...Primary.args,
+        hierarchy: ButtonHierarchy.PrimaryLemon,
+    },
+};
+export const Secondary = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.Secondary,
+    },
+};
+export const SecondaryColor = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.SecondaryColor,
+    },
+};
+export const SecondaryTransparent = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.SecondaryTransparent,
+    },
+};
+export const Tertiary = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.Tertiary,
+    },
+};
+export const TertiaryColor = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.TertiaryColor,
+    },
+};
+export const PrimaryHover = {
+    args: {
+        ...Primary.args,
+        state: ButtonState.Hover,
+    },
+};
+export const PrimaryDisabled = {
+    args: {
+        ...Primary.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const IconOnly = {
+    args: {
+        displayIconMode: ButtonDisplayMode.Only,
+        displayIcon: 'AndroidLogo',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        state: ButtonState.Default,
+        shape: ButtonShape.Square,
+    },
+};
+export const IconOnlyHover = {
+    args: {
+        ...IconOnly.args,
+        state: ButtonState.Hover,
+    },
+};
+export const IconOnlyDisabled = {
+    args: {
+        ...IconOnly.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const Destructive = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        destructive: true,
+    },
+};
+export const DestructiveHover = {
+    args: {
+        ...Destructive.args,
+        state: ButtonState.Hover,
+    },
+};
+export const DestructiveDisabled = {
+    args: {
+        ...Destructive.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const Large = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.lg,
+        text: 'Button',
+    },
+};
+export const Medium = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.md,
+        text: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.sm,
+        text: 'Button',
+    },
+};
+export const ExtraSmall = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.xs,
+        text: 'Button',
+    },
+};
+export const ExtraExtraSmall = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.xxs,
+        text: 'Button',
+    },
+};
+export const CircularButton = {
+    args: {
+        text: 'Button',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        displayIconMode: ButtonDisplayMode.Only,
+        displayIcon: 'Circle',
+        shape: ButtonShape.Circle,
+        state: ButtonState.Default,
+    },
+};
+export const CircularButtonHover = {
+    args: {
+        ...CircularButton.args,
+        state: ButtonState.Hover,
+    },
+};
+export const CircularButtonDisabled = {
+    args: {
+        ...CircularButton.args,
+        state: ButtonState.Disabled,
+    },
+};

package/dist/stories/Buttons/ToggleButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToggleButtonGroupProps } from './types';
+export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;

package/dist/stories/Buttons/ToggleButtonGroup.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleButtonGroupSize, ButtonHierarchy, ButtonSize, ButtonType, } from './types';
+import { Box } from '@mui/material';
+import { MainButton } from './MainButton';
+export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, style, }) => {
+    const selectedOptionStyle = {
+        backgroundColor: 'var(--color-background-bg-card-highlight-hover)',
+        color: 'var(--color-text-text-accent)',
+    };
+    const unselectedOptionStyle = {
+        backgroundColor: 'transparent',
+    };
+    const getButtonSize = () => {
+        switch (size) {
+            case ToggleButtonGroupSize.sm:
+                return ButtonSize.sm;
+            case ToggleButtonGroupSize.md:
+                return ButtonSize.md;
+            case ToggleButtonGroupSize.lg:
+                return ButtonSize.lg;
+            default:
+                return ButtonSize.md;
+        }
+    };
+    return (_jsx(Box, { display: "flex", flexDirection: "row", sx: {
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+            overflow: 'hidden',
+            backgroundColor: 'var(--color-background-bg-component)',
+            ...style,
+        }, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--color-border-border-component)`, width: 'fit-content', children: options.map((option) => {
+            const isSelected = option === selectedOption;
+            return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tertiary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
+        }) }));
+};

package/dist/stories/Buttons/ToggleButtonGroup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+declare const meta: Meta<typeof ToggleButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof ToggleButtonGroup>;
+export declare const Default: Story;
+export declare const Size_SM: Story;
+export declare const Size_MD: Story;
+export declare const Size_LG: Story;