@beydesign/storybook 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,2 +1,11 @@
 export { MainButton } from './stories/Button';
+export { Avatar } from './stories/Avatar';
+export { Typography } from './stories/Typography';
+export { Badge } from './stories/Bagde';
+export { Colors } from './stories/Colors';
+export { Checkbox } from './stories/Checkbox';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
+export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
+export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
+export { TypographySize, TypographyWeight, type TypographyProps, } from './stories/types/typography';
+export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';

package/dist/index.js

@@ -1,4 +1,13 @@
 // Components
 export { MainButton } from './stories/Button';
+export { Avatar } from './stories/Avatar';
+export { Typography } from './stories/Typography';
+export { Badge } from './stories/Bagde';
+export { Colors } from './stories/Colors';
+export { Checkbox } from './stories/Checkbox';
 // Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
+export { BadgeColor, BadgeSize } from './stories/types/badge';
+export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
+export { TypographySize, TypographyWeight, } from './stories/types/typography';
+export { CheckboxType } from './stories/types/checkbox';

package/dist/stories/Avatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps, ComponentsProps } from './types/avatar';
+export declare const Avatar: React.FC<AvatarProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Avatar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarImage, AvatarSize, AvatarStyle, getInitials, } from './types/avatar';
+import { Avatar as MuiAvatar, } from '@mui/material';
+import { User } from '@phosphor-icons/react';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
+    const getDimensions = (avatarSize) => {
+        switch (avatarSize) {
+            case AvatarSize.xs:
+                return 24;
+            case AvatarSize.sm:
+                return 32;
+            case AvatarSize.md:
+                return 40;
+            case AvatarSize.lg:
+                return 48;
+            case AvatarSize.xl:
+                return 56;
+            case AvatarSize.xxl:
+                return 64;
+            default:
+                return 40;
+        }
+    };
+    const getColor = (avatarStyle) => {
+        switch (avatarStyle) {
+            case AvatarStyle.Letters:
+                return 'var(--colors-light-foreground-fg-primary)';
+            case AvatarStyle.Placeholder:
+                return 'var(--colors-light-foreground-fg-tertiary)';
+            case AvatarStyle.Picture:
+                return 'var(--colors-light-foreground-fg-secondary)';
+            default:
+                return 'var(--colors-light-foreground-fg-tertiary)';
+        }
+    };
+    const getTextSize = () => {
+        if (size === AvatarSize.xxl)
+            return TypographySize.TextL;
+        else if ([AvatarSize.xl, AvatarSize.lg].includes(size))
+            return TypographySize.TextM;
+        else if (size === AvatarSize.md)
+            return TypographySize.TextS;
+        else if (size === AvatarSize.sm)
+            return TypographySize.TextXS;
+        else if (size === AvatarSize.xs)
+            return TypographySize.Text2XS;
+        else
+            return TypographySize.TextS;
+    };
+    const dimensions = getDimensions(size);
+    const props = {
+        sx: {
+            width: dimensions,
+            height: dimensions,
+            border: border
+                ? '1px solid var(--colors-light-border-border-component)'
+                : 'none',
+            backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+            color: getColor(avatarStyle),
+            fontSize: getTextSize(),
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',
+            ...customStyle,
+        },
+    };
+    if (avatarStyle === AvatarStyle.Letters) {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { text: getInitials(text), size: getTextSize(), weight: TypographyWeight.Medium }) }));
+    }
+    else if (avatarStyle === AvatarStyle.Picture) {
+        return _jsx(MuiAvatar, { ...props, src: image });
+    }
+    else {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(User, { size: dimensions / 2, weight: "bold" }) }));
+    }
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Letters" }), _jsx(Avatar, { text: "Scarlett Johansson", size: AvatarSize.sm, avatarStyle: AvatarStyle.Letters })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Picture" }), _jsx(Avatar, { image: AvatarImage, size: AvatarSize.sm, avatarStyle: AvatarStyle.Picture })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Placeholder" }), _jsx(Avatar, { size: AvatarSize.sm, avatarStyle: AvatarStyle.Placeholder })] })] })] }));
+};

package/dist/stories/Avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Placeholder: Story;
+export declare const Picture: Story;
+export declare const Letters: Story;

package/dist/stories/Avatar.stories.js

@@ -0,0 +1,76 @@
+import { Avatar } from './Avatar';
+import { AvatarImage, AvatarSize, AvatarStyle } from './types/avatar';
+const meta = {
+    title: 'Design System/Components/Avatar',
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4694-9405&t=HGXFzkH7TV5e4UsD-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Avatar text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        image: {
+            control: 'text',
+            description: 'Image URL for the avatar',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        border: {
+            control: 'boolean',
+            description: 'Whether to show a border around the avatar',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],
+            description: 'Size of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarSize.xxl },
+            },
+        },
+        avatarStyle: {
+            control: 'select',
+            options: ['Placeholder', 'Letters', 'Picture'],
+            description: 'Style of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarStyle.Placeholder },
+            },
+        },
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        size: AvatarSize.xxl,
+        avatarStyle: AvatarStyle.Placeholder,
+    },
+};
+export const Picture = {
+    args: {
+        size: AvatarSize.xxl,
+        image: AvatarImage,
+        avatarStyle: AvatarStyle.Picture,
+    },
+};
+export const Letters = {
+    args: {
+        size: AvatarSize.xxl,
+        text: 'Scarlett Johansson',
+        avatarStyle: AvatarStyle.Letters,
+    },
+};

package/dist/stories/Badge.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Bagde';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Violet: Story;
+export declare const Lemon: Story;
+export declare const Green: Story;
+export declare const Red: Story;
+export declare const Yellow: Story;

package/dist/stories/Badge.stories.js

@@ -0,0 +1,98 @@
+import { Badge } from './Bagde';
+import { BadgeColor, BadgeSize } from './types/badge';
+const meta = {
+    title: 'Design System/Components/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4575-13743&t=cm6NmhzfUGa6aUnh-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Badge text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        color: {
+            control: 'select',
+            description: 'Badge color variant',
+            options: Object.values(BadgeColor),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            description: 'Badge size variant',
+            options: Object.values(BadgeSize),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        icon: {
+            control: 'text',
+            description: 'Name of the display Phosphor icon (e.g., "Circle")',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        fill: {
+            control: 'boolean',
+            description: 'Fill the badge with color',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the badge',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Default,
+        size: BadgeSize.md,
+    },
+};
+export const Violet = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Violet,
+    },
+};
+export const Lemon = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Lemon,
+    },
+};
+export const Green = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Green,
+    },
+};
+export const Red = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Red,
+    },
+};
+export const Yellow = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Yellow,
+    },
+};

package/dist/stories/Bagde.d.ts

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

package/dist/stories/Bagde.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BadgeColor, BadgeSize } from './types/badge';
+import * as PhosphorIcons from '@phosphor-icons/react';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+const getIconComponent = (iconName, props) => {
+    const Icon = PhosphorIcons[iconName];
+    return Icon ? _jsx(Icon, { ...props }) : null;
+};
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', fill = true, }) => {
+    const getBackgroundColor = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--primitives-desktop-primary-gray-50)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-100)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-200)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-100)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-100)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-100)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-100)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-50)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-50)';
+            case BadgeColor.DarkTransparent:
+                return `var(--primitives-desktop-primary-transparent-black-60)`;
+        }
+    };
+    const getTextColor = () => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--colors-light-text-text-title)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-800)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-900)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-800)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-800)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-800)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-800)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-800)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-800)';
+            case BadgeColor.DarkTransparent:
+                return 'var(--colors-light-text-text-white)';
+        }
+    };
+    const getBorder = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return '1px solid var(--primitives-desktop-primary-gray-100)';
+            case BadgeColor.Violet:
+                return '1px solid var(--primitives-desktop-primary-brand-violet-300)';
+            case BadgeColor.Lemon:
+                return '1px solid var(--primitives-desktop-primary-brand-lemon-300)';
+            case BadgeColor.Green:
+                return '1px solid var(--primitives-desktop-primary-success-300)';
+            case BadgeColor.Red:
+                return '1px solid var(--primitives-desktop-primary-red-300)';
+            case BadgeColor.Yellow:
+                return '1px solid var(--primitives-desktop-primary-yellow-300)';
+            case BadgeColor.Blue:
+                return '1px solid var(--primitives-desktop-secondary-blue-300)';
+            case BadgeColor.Cyan:
+                return '1px solid var(--primitives-desktop-secondary-cyan-300)';
+            case BadgeColor.Pink:
+                return '1px solid var(--primitives-desktop-secondary-pink-300)';
+            case BadgeColor.DarkTransparent:
+                return '1px solid rgba(var(--colors-light-background-bg-component-dark), 0.9)';
+        }
+    };
+    const getPadding = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+            case BadgeSize.md:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+            case BadgeSize.xs:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+        }
+    };
+    const getIconSize = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return '20px';
+            case BadgeSize.md:
+                return '16px';
+            case BadgeSize.xs:
+                return '12px';
+        }
+    };
+    const backgroundColor = getBackgroundColor(color);
+    const border = getBorder(color);
+    const padding = getPadding(size);
+    const iconProps = {
+        size: getIconSize(size),
+        color: getTextColor(),
+        weight: 'regular',
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, gap: "4px", sx: customStyle, children: [icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: getTextColor() }))] }));
+};

package/dist/stories/Button.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CircularProgress } from '@mui/material';
+import { CircularProgress } from '@mui/material';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
 const getIconComponent = (iconName, props) => {
     const Icon = PhosphorIcons[iconName];
     return Icon ? _jsx(Icon, { ...props }) : null;
 };
-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 = true, showTrailingIcon = true, leadingIcon = 'Circle', trailingIcon = 'Circle', }) => {
+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', }) => {
     const getBackgroundColor = (isHover = false) => {
         if (destructive) {
             if (state === ButtonState.Disabled || disabled)
@@ -42,16 +44,16 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 return 'var(--primitives-desktop-primary-transparent-violet-50)';
             case ButtonHierarchy.Tetriary:
                 if (state === ButtonState.Disabled || disabled)
-                    return 'var(--colors-light-background-bg-element)';
+                    return 'var(--primitives-desktop-primary-white-0)';
                 if (state === ButtonState.Hover || isHover)
                     return 'var(--primitives-desktop-primary-white-40)';
-                return 'var(--colors-light-background-bg-white)';
+                return 'var(--primitives-desktop-primary-white-0)';
             case ButtonHierarchy.TetriaryColor:
                 if (state === ButtonState.Disabled || disabled)
-                    return 'var(--colors-light-background-bg-element)';
+                    return 'var(--primitives-desktop-primary-white-0)';
                 if (state === ButtonState.Hover || isHover)
                     return 'var(--colors-light-background-bg-card-highlight-hover)';
-                return 'transparent';
+                return 'var(--primitives-desktop-primary-white-0)';
             default:
                 return 'var(--colors-light-background-bg-brand)';
         }
@@ -126,12 +128,12 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 return 'var(--colors-light-background-bg-white)';
             case ButtonHierarchy.Tetriary:
                 if (state === ButtonState.Disabled || disabled)
-                    return 'var(--colors-light-border-border-component)';
-                return 'var(--colors-light-border-bg-white)';
+                    return 'var(--primitives-desktop-primary-white-0)';
+                return 'var(--primitives-desktop-primary-white-0)';
             case ButtonHierarchy.TetriaryColor:
                 if (state === ButtonState.Disabled || disabled)
-                    return 'var(--colors-light-border-border-component)';
-                return 'var(--colors-light-border-bg-white)';
+                    return 'var(--primitives-desktop-primary-white-0)';
+                return 'var(--primitives-desktop-primary-white-0)';
             default:
                 return 'var(--colors-light-background-bg-brand)';
         }
@@ -231,24 +233,39 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
         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, showTrailingIcon &&
+                    getIconComponent(leadingIcon, iconProps), _jsx(Typography, { text: text, size: getTextSize(), weight: TypographyWeight.SemiBold }), showTrailingIcon &&
                     trailingIcon &&
                     getIconComponent(trailingIcon, iconProps)] }));
     };
-    return (_jsx(Button, { onClick: onClick ? onClick : () => { }, type: type, disabled: state === ButtonState.Disabled || disabled, sx: {
+    return (_jsx("button", { onClick: onClick ? onClick : () => { }, type: type, disabled: state === ButtonState.Disabled || disabled, style: {
             textTransform: 'none',
             ...sizeStyles,
             borderRadius: getButtonShape(),
             background: getBackgroundColor(),
             color: getTextColor(),
             border: `1px solid ${getBorderColor()}`,
-            boxShadow: state === ButtonState.Default
+            boxShadow: state === ButtonState.Hover
                 ? '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)'
                 : 'none',
             display: 'flex',

package/dist/stories/Checkbox.d.ts

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

package/dist/stories/Checkbox.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Checkbox as MuiCheckbox } from '@mui/material';
+import { CheckboxType } from './types/checkbox';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, }) => {
+    const props = {
+        checked,
+        disabled,
+        required,
+        onChange,
+        disableRipple: true,
+    };
+    const handleRadioClick = () => {
+        if (!disabled && onChange) {
+            const event = {
+                target: { checked: !checked },
+            };
+            onChange(event);
+        }
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [type === CheckboxType.Checkbox ? (_jsx(MuiCheckbox, { ...props, sx: {
+                    padding: 0,
+                    '&.Mui-checked': {
+                        color: disabled
+                            ? 'var(--colors-light-background-bg-button-disabled)'
+                            : 'var(--colors-light-background-bg-brand)',
+                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                        '&:hover': {
+                            color: 'var(--colors-light-background-bg-brand-hover)',
+                        },
+                    },
+                } })) : type === CheckboxType.Radio ? (_jsx(Box, { onClick: handleRadioClick, sx: {
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)',
+                    border: checked ? '6px solid' : '1px solid',
+                    borderColor: disabled
+                        ? 'var(--colors-light-background-bg-button-disabled)'
+                        : checked
+                            ? 'var(--colors-light-background-bg-brand)'
+                            : 'var(--colors-light-background-bg-button-disabled)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                    position: 'relative',
+                    backgroundColor: 'transparent',
+                    boxSizing: 'border-box',
+                    transition: 'all 0.2s ease-in-out',
+                    '&:hover': !disabled
+                        ? {
+                            borderColor: 'var(--colors-light-background-bg-brand-hover)',
+                        }
+                        : undefined,
+                    '&::after': {
+                        content: '""',
+                        position: 'absolute',
+                        width: '10px',
+                        height: '10px',
+                        borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)',
+                        backgroundColor: 'transparent',
+                        transition: 'all 0.2s ease-in-out',
+                    },
+                } })) : null, _jsx(Typography, { text: label, size: TypographySize.TextS, weight: TypographyWeight.Medium })] }));
+};

package/dist/stories/Checkbox.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const DisabledUnchecked: Story;
+export declare const DisabledChecked: Story;
+export declare const Radio: Story;
+export declare const RadioChecked: Story;
+export declare const RadioDisabledUnchecked: Story;
+export declare const RadioDisabledChecked: Story;