@beydesign/storybook 0.0.1 → 0.0.2

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

@@ -0,0 +1,51 @@
+import { FileUpload } from './FileUpload';
+const meta = {
+    title: 'Design System/Components/Form/FileUpload/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,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { FileUploadingStatus, FileUploadingProgressMode, } from '../types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
+import { Player } from '@lottiefiles/react-lottie-player';
+import loadingAnimation from '../../../assets/animations/loading-animation.json';
+import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
+export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode = FileUploadingProgressMode.Animation, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+    const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
+    const isSuccess = uploadingStatus === FileUploadingStatus.Success;
+    const isError = uploadingStatus === FileUploadingStatus.Error;
+    const isPercentageProgress = progressMode === FileUploadingProgressMode.Percentage;
+    const isAnimationProgress = progressMode === FileUploadingProgressMode.Animation;
+    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(--color-border-border-error)' : 'var(--color-border-border-component)'}`, bgcolor: 'var(--color-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(--color-text-text-error)'
+                                    : 'var(--color-foreground-fg-primary)',
+                            }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
+                                    ? 'var(--color-text-text-error)'
+                                    : 'var(--color-text-text-title)', children: fileName })] }), _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(--color-text-text-title)',
+                                    onClick: onCancel,
+                                    style: { cursor: 'pointer' },
+                                }), isSuccess &&
+                                getIconComponent('Check', {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--color-foreground-fg-success)',
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-error)', children: "Try again" }) }))] }))] })] }));
+};

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

@@ -0,0 +1,10 @@
+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 PercentageProgress: Story;
+export declare const AnimationProgress: Story;
+export declare const Success: Story;
+export declare const Error: Story;

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

@@ -0,0 +1,108 @@
+import { FileUploading } from './FileUploading';
+import { FileUploadingStatus, FileUploadingProgressMode } from '../types';
+const meta = {
+    title: 'Design System/Components/Form/FileUpload/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' } },
+        },
+        progressMode: {
+            control: 'select',
+            options: Object.values(FileUploadingProgressMode),
+            description: 'The mode of the file upload progress',
+            table: { type: { summary: 'ProgressMode' } },
+        },
+        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,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const PercentageProgress = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        showCancel: true,
+        showRetry: true,
+        progressMode: FileUploadingProgressMode.Percentage,
+        uploadProgress: 50,
+    },
+};
+export const AnimationProgress = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        showCancel: true,
+        showRetry: true,
+        progressMode: FileUploadingProgressMode.Animation,
+    },
+};
+export const Success = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Success,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const Error = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Error,
+        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(--color-background-bg-card-highlight)'
+            : 'var(--color-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(--color-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--color-foreground-fg-primary)', children: fileName })] }), _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/FileUpload/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/TextArea.d.ts

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

package/dist/stories/Form/TextArea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { HintBubble, HintBubbleSize } from '../UI';
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: `1px solid ${errorText
+                        ? 'var(--color-border-border-error)'
+                        : focused
+                            ? 'var(--color-border-border-component-active)'
+                            : 'var(--color-border-border-component)'}`, overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', children: _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, rows: numberOfRows, style: {
+                            border: 'none',
+                            outline: 'none',
+                            width: '100%',
+                            height: '100%',
+                            color: disabled
+                                ? 'var(--color-text-text-disabled)'
+                                : 'var(--color-text-text-title)',
+                            backgroundColor: 'transparent',
+                            resize: 'none',
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
+};

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

@@ -0,0 +1,161 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./types").TextAreaProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        maxLength: {
+            control: "number";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        showMaxLengthIndicator: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        numberOfRows: {
+            control: "number";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleProps: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        style: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        allowMaxLength: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithMaxLength: Story;

package/dist/stories/Form/TextArea.stories.js

@@ -0,0 +1,142 @@
+import { TextArea } from './TextArea';
+const meta = {
+    title: 'Design System/Components/Form/TextArea',
+    component: TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        maxLength: {
+            control: 'number',
+            description: 'The max length of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        showMaxLengthIndicator: {
+            control: 'boolean',
+            description: 'Whether to show the max length indicator',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        numberOfRows: {
+            control: 'number',
+            description: 'The number of rows of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        hintBubbleText: {
+            control: 'text',
+            description: 'The text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintBubbleProps: {
+            control: 'object',
+            description: 'The props of the hint bubble',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the text area is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the text area',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        allowMaxLength: {
+            control: 'boolean',
+            description: 'Whether to apply max length restriction',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: (_value) => { },
+    },
+};
+export const WithMaxLength = {
+    args: {
+        label: 'Limited Text Area',
+        value: '',
+        onChange: (_value) => { },
+        allowMaxLength: true,
+        maxLength: 100,
+        showMaxLengthIndicator: true,
+        placeholder: 'Enter text (max 100 characters)',
+    },
+};