@beydesign/storybook 0.0.1 → 0.0.4

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 * as PhosphorIcons from '@phosphor-icons/react';
-import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType } from './types/button';
+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)';
         }
@@ -141,45 +143,57 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             [ButtonSize.xl]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '3.25rem' : '12.75rem',
                 height: '3.25rem',
-                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)',
+                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]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '3rem' : '11.75rem',
                 height: '3rem',
-                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)',
+                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]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.75rem' : '10.75rem',
                 height: '2.75rem',
-                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)',
+                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]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.5rem' : '9.75rem',
                 height: '2.5rem',
-                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)',
+                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]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.25rem' : '8.75rem',
                 height: '2.25rem',
-                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)',
+                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]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2rem' : '7.75rem',
                 height: '2rem',
-                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)',
+                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];
     };
@@ -200,35 +214,60 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             [ButtonSize.md]: 20,
             [ButtonSize.sm]: 18,
             [ButtonSize.xs]: 16,
-            [ButtonSize.xxs]: 14
+            [ButtonSize.xxs]: 14,
         };
         return sizes[size] || sizes[ButtonSize.xl];
     };
     const iconProps = {
         size: getIconSize(),
         color: getTextColor(),
-        weight: "regular"
+        weight: 'regular',
     };
     const sizeStyles = getButtonSize();
     const renderContent = () => {
         if (loading) {
             return (_jsx(CircularProgress, { size: 24, sx: {
-                    color: getTextColor()
+                    color: getTextColor(),
                 } }));
         }
         if (displayIconMode === ButtonDisplayMode.Only && displayIcon) {
             return getIconComponent(displayIcon, iconProps);
         }
-        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 && trailingIcon && getIconComponent(trailingIcon, 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), _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: {
-            textTransform: "none",
+            textTransform: 'none',
             ...sizeStyles,
             borderRadius: getButtonShape(),
             background: getBackgroundColor(),
             color: getTextColor(),
             border: `1px solid ${getBorderColor()}`,
-            boxShadow: state === ButtonState.Default ? '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',
+            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',
             alignItems: 'center',
             justifyContent: 'center',

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MainButton } from './Button';
+declare const meta: Meta<typeof MainButton>;
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const SecondaryColor: Story;
+export declare const SecondaryTransparent: Story;
+export declare const Tetriary: Story;
+export declare const TetriaryColor: 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/Button.stories.js

@@ -0,0 +1,295 @@
+import { MainButton } from './Button';
+import { ButtonShape, ButtonState } from './types/button';
+import { ButtonDisplayMode } from './types/button';
+import { ButtonHierarchy } from './types/button';
+import { ButtonSize } from './types/button';
+const meta = {
+    title: 'Design System/Components/Button',
+    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',
+                'Secondary',
+                'Secondary-color',
+                'Secondary-transparent',
+                'Tetriary',
+                'Tetriary-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 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 Tetriary = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.Tetriary,
+    },
+};
+export const TetriaryColor = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.TetriaryColor,
+    },
+};
+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/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;