@beydesign/storybook 0.0.41 → 0.0.43

package/dist/stories/Agent/AgentCard.js

@@ -6,12 +6,12 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Toggle, TogglePosition } from '../Form';
 import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
-import { ArrowsCounterClockwise } from '@phosphor-icons/react';
-export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', }) => {
+import { ArrowsCounterClockwise, Warning } from '@phosphor-icons/react';
+export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', showStatusBadge = false, statusBadgeText = '', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
     const [isLoading, setIsLoading] = useState(!!agentImage);
-    // const isError = agentState === AgentState.error;
+    const isError = agentState === AgentState.error;
     const isDraft = agentState === AgentState.pending;
     const isProcessing = agentState === AgentState.processing;
     const isReady = agentState === AgentState.ready;
@@ -59,17 +59,24 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
         }
         return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
     };
-    return (_jsxs(Box, { width: '300px', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: isDraft
-            ? 'var(--colors-light-background-bg-element)'
-            : 'var(--colors-light-background-bg-component)', boxShadow: `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)`, children: [_jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', width: '100%', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
+    return (_jsxs(Box, { width: '300px', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: isError
+            ? 'var(--colors-light-background-bg-error-subtle)'
+            : isDraft
+                ? 'var(--colors-light-background-bg-element)'
+                : 'var(--colors-light-background-bg-component)', boxShadow: `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)`, children: [_jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
                             position: 'absolute',
                             right: '8px',
                             bottom: '8px',
                             zIndex: 2,
-                        }, color: BadgeColor.Violet })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
+                        }, color: BadgeColor.Violet })), showStatusBadge && statusBadgeText && (_jsx(Badge, { text: statusBadgeText, size: BadgeSize.md, fill: true, style: {
+                            position: 'absolute',
+                            left: '8px',
+                            top: '8px',
+                            zIndex: 2,
+                        }, color: BadgeColor.Blue })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
                             zIndex: 2,
                             position: 'absolute',
                             right: '8px',
                             top: '8px',
-                        } })), isReady && hovered && onPreview && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
+                        } })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Something went wrong", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
 };

package/dist/stories/Agent/AgentCard.stories.d.ts

@@ -7,3 +7,5 @@ export declare const Placeholder: Story;
 export declare const CustomPreviewText: Story;
 export declare const LoadingPreview: Story;
 export declare const NoImage: Story;
+export declare const WithStatusBadge: Story;
+export declare const NoStatusBadge: Story;

package/dist/stories/Agent/AgentCard.stories.js

@@ -124,6 +124,20 @@ const meta = {
                 defaultValue: { summary: 'Preview' },
             },
         },
+        showStatusBadge: {
+            control: 'boolean',
+            description: 'Whether to show the status badge',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        statusBadgeText: {
+            control: 'text',
+            description: 'Text to display in the status badge',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
 };
 export default meta;
@@ -149,6 +163,8 @@ export const Placeholder = {
         ],
         showMenu: true,
         agentState: AgentState.ready,
+        showStatusBadge: true,
+        statusBadgeText: 'Active',
     },
 };
 export const CustomPreviewText = {
@@ -164,6 +180,7 @@ export const LoadingPreview = {
         title: 'Loading Preview Example',
         // Using a non-existent image to force loading state
         agentImage: 'https://example.com/non-existent-image.jpg',
+        active: false,
     },
     parameters: {
         docs: {
@@ -187,3 +204,34 @@ export const NoImage = {
         },
     },
 };
+export const WithStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'Status Badge Example',
+        showStatusBadge: true,
+        statusBadgeText: 'Draft',
+        agentState: AgentState.pending,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card with a status badge in the top-left corner.',
+            },
+        },
+    },
+};
+export const NoStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'No Status Badge Example',
+        showStatusBadge: false,
+        statusBadgeText: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card without a status badge.',
+            },
+        },
+    },
+};

package/dist/stories/Agent/types.d.ts

@@ -47,6 +47,10 @@ export type AgentCardProps = {
     agentState?: AgentState;
     /** Preview button text */
     previewButtonText?: string;
+    /** Show status badge */
+    showStatusBadge?: boolean;
+    /** Status badge text */
+    statusBadgeText?: string;
 };
 export interface AgentCardSkeletonProps {
     /**

package/dist/stories/Form/FileUpload/FileUpload.d.ts

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

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { FileDoc, FilePdf, FileTxt, UploadSimple } from '@phosphor-icons/react';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+    const handleFileSelect = (files) => {
+        if (!files || disabled)
+            return;
+        const file = files[0];
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            alert(`File size exceeds the maximum limit of ${maxFileSizeMB}MB`);
+            return;
+        }
+        if (onFileSelect)
+            onFileSelect(file);
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        else if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        if (!disabled) {
+            setIsDragging(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (!disabled) {
+            handleFileSelect(e.dataTransfer.files);
+        }
+    };
+    const handleInputChange = (e) => {
+        handleFileSelect(e.target.files);
+    };
+    const iconProps = {
+        height: '20px',
+        width: '20px',
+        color: disabled
+            ? 'var(--colors-light-text-text-subtle)'
+            : 'var(--colors-light-text-text-paragraph)',
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--colors-light-background-bg-brand-hover)' : 'var(--colors-light-background-bg-brand)'}`, bgcolor: disabled
+            ? 'var(--colors-light-background-bg-component-contrast-subtle)'
+            : isDragging
+                ? 'var(--colors-light-background-bg-element-hover)'
+                : 'var(--colors-light-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
+                    ? 'var(--colors-light-border-border-component)'
+                    : isDragging
+                        ? 'var(--colors-light-background-bg-brand-hover)'
+                        : 'var(--colors-light-background-bg-brand)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--primitives-desktop-primary-white-100)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
+                        ? 'var(--colors-light-foreground-fg-disabled)'
+                        : 'var(--colors-light-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { text: 'Click to upload', size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                            ? 'var(--colors-light-text-text-disabled)'
+                            : 'var(--colors-light-text-text-accent)', style: { cursor: disabled ? 'not-allowed' : 'pointer' } }), _jsx(Typography, { text: 'or drag and drop', size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
+                            ? 'var(--colors-light-text-text-subtle)'
+                            : 'var(--colors-light-text-text-paragraph)' }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(FilePdf, { ...iconProps }), _jsx(FileDoc, { ...iconProps }), _jsx(FileTxt, { ...iconProps })] })] })] }));
+};

package/dist/stories/Form/FileUpload/FileUpload.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileUpload } from './FileUpload';
+declare const meta: Meta<typeof FileUpload>;
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+export declare const Default: Story;
+export declare const Disabled: Story;

package/dist/stories/Form/FileUpload/FileUpload.stories.js

@@ -0,0 +1,51 @@
+import { FileUpload } from './FileUpload';
+const meta = {
+    title: 'Design System/Components/Form/FileUpload',
+    component: FileUpload,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the file upload is disabled',
+            table: { type: { summary: 'boolean' } },
+        },
+        acceptedFileTypes: {
+            control: 'text',
+            description: 'Accepted file types',
+            table: { type: { summary: 'string' } },
+        },
+        maxFileSizeMB: {
+            control: 'number',
+            description: 'Max file size in MB',
+            table: { type: { summary: 'number' } },
+        },
+        onFileSelect: {
+            description: 'Callback function when a file is selected',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the file upload',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        disabled: false,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};

package/dist/stories/Form/FileUpload/FileUploading.d.ts

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

package/dist/stories/Form/FileUpload/FileUploading.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { FileUploadingStatus } from '../types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
+import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
+export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+    const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
+    const isSuccess = uploadingStatus === FileUploadingStatus.Success;
+    const isError = uploadingStatus === FileUploadingStatus.Error;
+    const fileExtension = fileName.split('.').pop();
+    const getFileIcon = () => {
+        if (fileExtension?.toLowerCase() === 'pdf')
+            return 'FilePdf';
+        if (fileExtension?.toLowerCase().includes('doc'))
+            return 'FileDoc';
+        if (fileExtension?.toLowerCase() === 'txt')
+            return 'FileTxt';
+        return 'File';
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--colors-light-border-border-error)' : 'var(--colors-light-border-border-component)'}`, bgcolor: 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
+                                width: '24px',
+                                height: '24px',
+                                color: isError
+                                    ? 'var(--colors-light-text-text-error)'
+                                    : 'var(--colors-light-foreground-fg-primary)',
+                            }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
+                                    ? 'var(--colors-light-text-text-error)'
+                                    : 'var(--primitives-desktop-primary-gray-950)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
+                                onCancel &&
+                                isUploading &&
+                                getIconComponent('X', {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--colors-light-text-text-title)',
+                                    onClick: onCancel,
+                                    style: { cursor: 'pointer' },
+                                }), isSuccess &&
+                                getIconComponent('Check', {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--colors-light-foreground-fg-success)',
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [!isError && uploadProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { text: 'Upload failed, please try again.', size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { text: 'Try again', size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }) }))] }))] })] }));
+};

package/dist/stories/Form/FileUpload/FileUploading.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileUploading } from './FileUploading';
+declare const meta: Meta<typeof FileUploading>;
+export default meta;
+type Story = StoryObj<typeof FileUploading>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Error: Story;

package/dist/stories/Form/FileUpload/FileUploading.stories.js

@@ -0,0 +1,86 @@
+import { FileUploading } from './FileUploading';
+import { FileUploadingStatus } from '../types';
+const meta = {
+    title: 'Design System/Components/Form/FileUploading',
+    component: FileUploading,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        fileName: {
+            control: 'text',
+            description: 'The name of the file',
+            table: { type: { summary: 'string' } },
+        },
+        uploadingStatus: {
+            control: 'select',
+            options: Object.values(FileUploadingStatus),
+            defaultValue: FileUploadingStatus.Uploading,
+            description: 'The status of the file upload',
+            table: { type: { summary: 'FileUploadingStatus' } },
+        },
+        uploadProgress: {
+            control: 'number',
+            description: 'The progress of the file upload',
+            table: { type: { summary: 'number' } },
+        },
+        showCancel: {
+            control: 'boolean',
+            description: 'Whether to show the cancel button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onCancel: {
+            action: 'clicked',
+            description: 'Callback function when the cancel button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        showRetry: {
+            control: 'boolean',
+            description: 'Whether to show the retry button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onRetry: {
+            action: 'clicked',
+            description: 'Callback function when the retry button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the file upload',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        uploadProgress: 50,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const Success = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Success,
+        uploadProgress: 100,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const Error = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Error,
+        uploadProgress: 100,
+        showCancel: true,
+        showRetry: true,
+    },
+};

package/dist/stories/Form/FileUpload/UploadedFile.d.ts

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

package/dist/stories/Form/FileUpload/UploadedFile.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileType } from '../types';
+import { Box } from '@mui/material';
+import { File } from '@phosphor-icons/react';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { ButtonDisplayMode, ButtonHierarchy, ButtonSize, MainButton, } from '../../Buttons';
+export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDelete, showDownload = true, onDownload, fileName, sx, }) => {
+    const isSampleFile = type === FileType.Sample;
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
+            ? 'var(--colors-light-background-bg-card-highlight)'
+            : 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--colors-light-foreground-fg-primary)' }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-foreground-fg-primary)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
+};

package/dist/stories/Form/FileUpload/UploadedFile.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UploadedFile } from './UploadedFile';
+declare const meta: Meta<typeof UploadedFile>;
+export default meta;
+type Story = StoryObj<typeof UploadedFile>;
+export declare const Default: Story;
+export declare const Sample: Story;

package/dist/stories/Form/FileUpload/UploadedFile.stories.js

@@ -0,0 +1,73 @@
+import { UploadedFile } from './UploadedFile';
+import { FileType } from '../types';
+const meta = {
+    title: 'Design System/Components/Form/UploadedFile',
+    component: UploadedFile,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        fileName: {
+            control: 'text',
+            description: 'The name of the file',
+            table: { type: { summary: 'string' } },
+        },
+        type: {
+            control: 'select',
+            options: Object.values(FileType),
+            description: 'The type of the file',
+            table: { type: { summary: 'string' } },
+        },
+        showDelete: {
+            control: 'boolean',
+            description: 'Whether to show the delete button',
+            table: { type: { summary: 'boolean' } },
+        },
+        showDownload: {
+            control: 'boolean',
+            description: 'Whether to show the download button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onDelete: {
+            action: 'onDelete',
+            description: 'Callback function when the delete button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        onDownload: {
+            action: 'onDownload',
+            description: 'Callback function when the download button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the uploaded file',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        fileName: 'example.pdf',
+        type: FileType.Default,
+        showDelete: true,
+        showDownload: true,
+        onDelete: () => { },
+        onDownload: () => { },
+    },
+};
+export const Sample = {
+    args: {
+        fileName: 'sample.txt',
+        type: FileType.Sample,
+        showDelete: false,
+        showDownload: false,
+        onDelete: () => { },
+        onDownload: () => { },
+    },
+};

package/dist/stories/Form/FileUpload/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FileUpload';
+export * from './FileUploading';
+export * from './UploadedFile';

package/dist/stories/Form/FileUpload/index.js

@@ -0,0 +1,3 @@
+export * from './FileUpload';
+export * from './FileUploading';
+export * from './UploadedFile';

package/dist/stories/Form/Toggle.js

@@ -48,7 +48,6 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
             duration: 500,
         }),
         '&:hover': {
-            border: '1px solid red',
             backgroundColor: 'var(--primitives-desktop-primary-gray-200)',
         },
     },

package/dist/stories/Form/index.d.ts

@@ -2,4 +2,5 @@ export * from './Checkbox';
 export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
+export * from './FileUpload';
 export * from './types';

package/dist/stories/Form/index.js

@@ -2,4 +2,5 @@ export * from './Checkbox';
 export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
+export * from './FileUpload';
 export * from './types';

package/dist/stories/Form/types.d.ts

@@ -92,3 +92,67 @@ export type CheckboxProps = {
     /** Event handler for the checkbox */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
+export interface FileUploadProps {
+    /** Whether the file upload is disabled */
+    disabled?: boolean;
+    /** Accepted file types */
+    acceptedFileTypes?: string;
+    /** Max file size in MB */
+    maxFileSizeMB?: number;
+    /** Callback function when a file is selected */
+    onFileSelect?: (file: File) => void;
+    /** Style of the file upload */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File type variants
+ */
+export declare enum FileType {
+    Sample = "Sample",
+    Default = "Default"
+}
+export interface UploadedFileProps {
+    /** Type of the uploaded file */
+    type: FileType;
+    /** File name */
+    fileName: string;
+    /** Whether to show the delete button */
+    showDelete?: boolean;
+    /** Callback function when the delete button is clicked */
+    onDelete?: () => void;
+    /** Whether to show the download button */
+    showDownload?: boolean;
+    /** Callback function when the download button is clicked */
+    onDownload?: () => void;
+    /** Style of the uploaded file */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File uploading status variants
+ */
+export declare enum FileUploadingStatus {
+    Uploading = "Uploading",
+    Success = "Success",
+    Error = "Error"
+}
+/**
+ * File uploading component props
+ */
+export interface FileUploadingProps {
+    /** Status of the file uploading */
+    uploadingStatus: FileUploadingStatus;
+    /** Progress of the file uploading */
+    uploadProgress: number | null;
+    /** Style of the file uploading */
+    sx?: SxProps<Theme>;
+    /** Whether to show the cancel button */
+    showCancel?: boolean;
+    /** Callback function when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Whether to show the retry button */
+    showRetry?: boolean;
+    /** Callback function when the retry button is clicked */
+    onRetry?: () => void;
+    /** File name */
+    fileName: string;
+}

package/dist/stories/Form/types.js

@@ -11,3 +11,20 @@ export var CheckboxType;
     CheckboxType["Radio"] = "Radio";
     CheckboxType["Checkbox"] = "Checkbox";
 })(CheckboxType || (CheckboxType = {}));
+/**
+ * File type variants
+ */
+export var FileType;
+(function (FileType) {
+    FileType["Sample"] = "Sample";
+    FileType["Default"] = "Default";
+})(FileType || (FileType = {}));
+/**
+ * File uploading status variants
+ */
+export var FileUploadingStatus;
+(function (FileUploadingStatus) {
+    FileUploadingStatus["Uploading"] = "Uploading";
+    FileUploadingStatus["Success"] = "Success";
+    FileUploadingStatus["Error"] = "Error";
+})(FileUploadingStatus || (FileUploadingStatus = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",