@beydesign/storybook 0.0.84 → 0.0.86

package/dist/stories/Credits/CreditsCard.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import styled from '@emotion/styled';
 import { CreditsCardSize } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
@@ -9,7 +10,9 @@ const StyledCard = styled.div `
   flex-direction: column;
   gap: ${({ $size }) => ($size === CreditsCardSize.Collapsed ? '8px' : '16px')};
   padding: ${({ $size }) => $size === CreditsCardSize.Collapsed ? '20px 16px' : '24px'};
-  background-color: var(--colors-light-background-bg-card-highlight);
+  background-color: ${({ $warning }) => $warning
+    ? 'var(--primitives-desktop-primary-red-50)'
+    : 'var(--colors-light-background-bg-card-highlight)'};
   border: 1px solid var(--colors-light-border-border-default);
   border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
   padding: ${({ $collapsed }) => $collapsed
@@ -35,13 +38,23 @@ const TextWrapper = styled.span `
   display: inline-block;
   white-space: nowrap;
 `;
-export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', }) => {
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', overUsageEnabled = false, overUsedCredits = 0, }) => {
     const isCollapsed = size === CreditsCardSize.Collapsed;
-    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
+    const creditsLimitReached = usedCredits >= maxCredits;
+    const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
+    const case2 = case1 || !creditsLimitReached; // if case 1 is true or credits limit is not reached
+    const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed &&
                 maxCredits !== undefined &&
-                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
-                                        if (onUpgradeClick) {
-                                            onUpgradeClick();
-                                        }
-                                    } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}` }) }) }) }) }))] }));
+                usedCredits !== undefined && (_jsxs(React.Fragment, { children: [_jsxs(CreditRow, { style: {
+                            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                        }, children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                                    if (onUpgradeClick) {
+                                        onUpgradeClick();
+                                    }
+                                } })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Credits..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                                if (onUpgradeClick) {
+                                    onUpgradeClick();
+                                }
+                            } }) })] }))] }));
 };

package/dist/stories/Credits/CreditsCard.stories.js

@@ -15,6 +15,8 @@ const meta = {
         maxCredits: { control: 'number' },
         usedCredits: { control: 'number' },
         creditInfoText: { control: 'text' },
+        overUsageEnabled: { control: 'boolean' },
+        overUsedCredits: { control: 'number' },
     },
 };
 export default meta;

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

@@ -32,4 +32,12 @@ export interface CreditsCardProps {
      * Text explaining credit usage (e.g., "1 Credit = 1 min video")
      */
     creditInfoText?: string;
+    /**
+     * Whether to enable over usage
+     */
+    overUsageEnabled?: boolean;
+    /**
+     * Over used credits
+     */
+    overUsedCredits?: number;
 }

package/dist/stories/Form/Checkbox.js

@@ -61,5 +61,5 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
                         backgroundColor: 'transparent',
                         transition: 'all 0.2s ease-in-out',
                     },
-                } })) : null, _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label })] }));
+                } })) : null, label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label }))] }));
 };

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

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

package/dist/stories/Form/Dropdown.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { DropdownType } from './types';
+import { Box, ClickAwayListener, Popper } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+import { Checkbox } from './Checkbox';
+export const Dropdown = ({ disabled = false, placeholder = 'Select an option', label = 'Select', showLeadingIcon = false, leadingIcon = 'List', showClear = true, options, required = false, showCheckboxes = false, showTicks = true, ...props }) => {
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const anchorRef = useRef(null);
+    const optionsContainerRef = useRef(null);
+    const value = useMemo(() => {
+        if (props.type === DropdownType.SingleSelect) {
+            return props.value;
+        }
+        return Array.isArray(props.value) ? props.value.join(', ') : '';
+    }, [props.type, props.value]);
+    const handleOptionSelect = useCallback((option) => {
+        if (props.type === DropdownType.SingleSelect) {
+            props.onChange(option);
+            setOpen(false);
+        }
+        else if (Array.isArray(props.value)) {
+            const newValue = props.value.includes(option)
+                ? props.value.filter((item) => item !== option)
+                : [...props.value, option];
+            props.onChange(newValue);
+        }
+    }, [props]);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (props.type === DropdownType.SingleSelect) {
+            props.onChange('');
+        }
+        else {
+            props.onChange([]);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                if (open) {
+                    handleOptionSelect(options[highlightedIndex]);
+                }
+                break;
+            case ' ':
+                e.preventDefault();
+                setOpen((prev) => !prev);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setOpen(false);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+                }
+                break;
+            case 'Tab':
+                if (open) {
+                    setOpen(false);
+                }
+                break;
+        }
+    };
+    // Select highlighted option on Enter
+    useEffect(() => {
+        const handleKeyPress = (e) => {
+            if (open &&
+                e.key === 'Enter' &&
+                highlightedIndex >= 0 &&
+                highlightedIndex < options.length &&
+                !disabled) {
+                handleOptionSelect(options[highlightedIndex]);
+            }
+        };
+        window.addEventListener('keydown', handleKeyPress);
+        return () => {
+            window.removeEventListener('keydown', handleKeyPress);
+        };
+    }, [open, highlightedIndex, options, handleOptionSelect, disabled]);
+    // Scroll to highlighted option
+    useEffect(() => {
+        if (open && highlightedIndex >= 0 && optionsContainerRef.current) {
+            const highlightedElement = optionsContainerRef.current.children[highlightedIndex];
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex, open]);
+    const isOptionSelected = (option) => {
+        if (props.type === DropdownType.SingleSelect) {
+            return props.value === option;
+        }
+        return Array.isArray(props.value) && props.value.includes(option);
+    };
+    return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label }), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${open
+                        ? 'var(--colors-light-border-border-component-active)'
+                        : 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                        ? 'var(--primitives-desktop-primary-gray-25)'
+                        : 'var(--primitives-desktop-primary-white-100)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [showLeadingIcon &&
+                            getIconComponent(leadingIcon, {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                'aria-hidden': 'true',
+                            }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { flexGrow: 1, textAlign: 'left' }, color: value
+                                ? 'var(--colors-light-text-text-title)'
+                                : 'var(--colors-light-text-text-placeholder)', children: value || placeholder }), !disabled &&
+                            showClear &&
+                            value &&
+                            getIconComponent('X', {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                onClick: handleClear,
+                                'aria-label': 'Clear selection',
+                                role: 'button',
+                                tabIndex: 0,
+                                onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleClear(e);
+                                    }
+                                },
+                            }), !disabled &&
+                            getIconComponent(open ? 'CaretUp' : 'CaretDown', {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                'aria-hidden': 'true',
+                            })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
+                            border: '1px solid var(--colors-light-border-border-component)',
+                        }, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
+                                cursor: 'pointer',
+                                backgroundColor: highlightedIndex === index
+                                    ? 'var(--primitives-desktop-primary-gray-25)'
+                                    : isOptionSelected(option)
+                                        ? 'var(--primitives-desktop-primary-gray-10)'
+                                        : 'transparent',
+                                '&:hover': {
+                                    backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+                                },
+                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [showCheckboxes && (_jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", children: option })] }), showTicks &&
+                                    isOptionSelected(option) &&
+                                    getIconComponent('Check', {
+                                        width: '16px',
+                                        height: '16px',
+                                        color: 'var(--colors-light-foreground-fg-brand-primary)',
+                                    })] }, option)))) }) })] }) }));
+};

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

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

package/dist/stories/Form/Dropdown.stories.js

@@ -0,0 +1,122 @@
+import { Dropdown } from './Dropdown';
+import { DropdownType } from './types';
+const meta = {
+    title: 'Design System/Components/Form/Dropdown',
+    component: Dropdown,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4501-25356&t=XsmO3ZzXQ9rb1lu5-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'select',
+            description: 'The options to display in the dropdown',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the selected option',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange handler for the selected option',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the autocomplete is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the autocomplete',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            description: 'The type of the dropdown',
+            options: Object.values(DropdownType),
+            table: {
+                defaultValue: { summary: DropdownType.SingleSelect },
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'The label of the dropdown',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        leadingIcon: {
+            control: 'select',
+            description: 'The leading icon of the dropdown',
+            options: ['Cactus', 'MagnifyingGlass', 'User', 'Check', 'X'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the dropdown is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showClear: {
+            control: 'boolean',
+            description: 'Whether to show the clear button',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showLeadingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the leading icon',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: [
+            'Option 1',
+            'Option 2',
+            'Option 3',
+            'Option 4',
+            'Option 5',
+            'Option 6',
+            'Option 7',
+            'Option 8',
+            'Option 9',
+            'Option 10',
+        ],
+        value: 'Option 1',
+        onChange: () => { },
+        type: DropdownType.SingleSelect,
+        placeholder: 'Select an option',
+        label: 'Select',
+        leadingIcon: 'List',
+        disabled: false,
+        showClear: true,
+        showLeadingIcon: true,
+        required: false,
+    },
+};

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

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { FileUploadingStatus } from '../types';
+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';
-export const FileUploading = ({ uploadingStatus, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+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')
@@ -42,5 +45,5 @@ export const FileUploading = ({ uploadingStatus, sx, onCancel, onRetry, fileName
                                     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 && uploadingStatus === FileUploadingStatus.Uploading && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-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(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
+                                })] })] }), _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(--colors-light-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(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
 };

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

@@ -4,5 +4,7 @@ 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

@@ -1,5 +1,5 @@
 import { FileUploading } from './FileUploading';
-import { FileUploadingStatus } from '../types';
+import { FileUploadingStatus, FileUploadingProgressMode } from '../types';
 const meta = {
     title: 'Design System/Components/Form/FileUpload/FileUploading',
     component: FileUploading,
@@ -24,6 +24,17 @@ const meta = {
             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',
@@ -60,6 +71,25 @@ export const Default = {
         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',

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

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

package/dist/stories/Form/index.js

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

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

@@ -110,7 +110,7 @@ export type CheckboxProps = {
     /** Type variant of the checkbox */
     type?: CheckboxType;
     /** Label of the checkbox */
-    label: string;
+    label?: string;
     /** Whether the checkbox is checked */
     checked?: boolean;
     /** Whether the checkbox is disabled */
@@ -165,12 +165,23 @@ export declare enum FileUploadingStatus {
     Success = "Success",
     Error = "Error"
 }
+/**
+ * Progress mode variants
+ */
+export declare enum FileUploadingProgressMode {
+    Percentage = "Percentage",
+    Animation = "Animation"
+}
 /**
  * File uploading component props
  */
 export interface FileUploadingProps {
     /** Status of the file uploading */
     uploadingStatus: FileUploadingStatus;
+    /** Progress mode of the file uploading */
+    progressMode?: FileUploadingProgressMode;
+    /** Progress of the file uploading */
+    uploadProgress?: number;
     /** Style of the file uploading */
     sx?: SxProps<Theme>;
     /** Whether to show the cancel button */
@@ -202,3 +213,50 @@ export interface AutoCompleteProps {
     /** The onFocus handler for the autocomplete */
     onFocus?: () => void;
 }
+/**
+ * Dropdown type variants
+ */
+export declare enum DropdownType {
+    SingleSelect = "SingleSelect",
+    MultiSelect = "MultiSelect"
+}
+type SingleSelectDropdownProps = {
+    /** The value of the selected option */
+    value: string;
+    /** The onChange handler for the selected option */
+    onChange: (value: string) => void;
+    /** The type of the dropdown */
+    type: DropdownType.SingleSelect;
+};
+type MultiSelectDropdownProps = {
+    /** The value of the selected options */
+    value: string[];
+    /** The onChange handler for the selected options */
+    onChange: (value: string[]) => void;
+    /** The type of the dropdown */
+    type: DropdownType.MultiSelect;
+};
+type DropdownBaseProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
+export type DropdownProps = DropdownBaseProps & {
+    /** The label of the dropdown */
+    label?: string;
+    /** The options to display in the dropdown */
+    options: string[];
+    /** The placeholder of the dropdown */
+    placeholder?: string;
+    /** Whether the dropdown is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is required */
+    required?: boolean;
+    /** Whether to show the leading icon */
+    showLeadingIcon?: boolean;
+    /** The leading icon of the dropdown */
+    leadingIcon?: IconName;
+    /** Whether to show the clear button */
+    showClear?: boolean;
+    /** Whether to show the checkboxes */
+    showCheckboxes?: boolean;
+    /** Whether to show the ticks */
+    showTicks?: boolean;
+};
+export {};

package/dist/stories/Form/types.js

@@ -28,3 +28,19 @@ export var FileUploadingStatus;
     FileUploadingStatus["Success"] = "Success";
     FileUploadingStatus["Error"] = "Error";
 })(FileUploadingStatus || (FileUploadingStatus = {}));
+/**
+ * Progress mode variants
+ */
+export var FileUploadingProgressMode;
+(function (FileUploadingProgressMode) {
+    FileUploadingProgressMode["Percentage"] = "Percentage";
+    FileUploadingProgressMode["Animation"] = "Animation";
+})(FileUploadingProgressMode || (FileUploadingProgressMode = {}));
+/**
+ * Dropdown type variants
+ */
+export var DropdownType;
+(function (DropdownType) {
+    DropdownType["SingleSelect"] = "SingleSelect";
+    DropdownType["MultiSelect"] = "MultiSelect";
+})(DropdownType || (DropdownType = {}));

package/dist/stories/Typography/Typography.stories.js

@@ -72,6 +72,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        title: {
+            control: 'text',
+            description: 'Title of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
 };
 export default meta;

package/package.json

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