@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Form/Checkbox.js

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

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

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

package/dist/stories/Form/Checkbox.stories.js

@@ -0,0 +1,121 @@
+import { Checkbox } from './Checkbox';
+import { CheckboxType } from './types';
+const meta = {
+    title: 'Design System/Components/Form/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4646-6014&t=WuGtJ4j0CjG68xIe-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Checkbox label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            description: 'Checkbox type variant',
+            options: Object.values(CheckboxType),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Checkbox checked state',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Checkbox disabled state',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Checkbox required state',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Select Me',
+        type: CheckboxType.Checkbox,
+        required: true,
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        label: 'Select Me',
+        type: CheckboxType.Checkbox,
+        required: true,
+        checked: true,
+    },
+};
+export const DisabledUnchecked = {
+    args: {
+        label: 'Select Me',
+        type: CheckboxType.Checkbox,
+        required: true,
+        checked: false,
+        disabled: true,
+    },
+};
+export const DisabledChecked = {
+    args: {
+        label: 'Select Me',
+        type: CheckboxType.Checkbox,
+        required: true,
+        checked: true,
+        disabled: true,
+    },
+};
+export const Radio = {
+    args: {
+        label: 'Radio',
+        type: CheckboxType.Radio,
+        required: true,
+        checked: false,
+    },
+};
+export const RadioChecked = {
+    args: {
+        label: 'Radio',
+        type: CheckboxType.Radio,
+        required: true,
+        checked: true,
+    },
+};
+export const RadioDisabledUnchecked = {
+    args: {
+        label: 'Radio',
+        type: CheckboxType.Radio,
+        required: true,
+        checked: false,
+        disabled: true,
+    },
+};
+export const RadioDisabledChecked = {
+    args: {
+        label: 'Radio',
+        type: CheckboxType.Radio,
+        required: true,
+        checked: true,
+        disabled: true,
+    },
+};

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,183 @@
+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: [label && (_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: 'space-between', border: `1px solid ${open
+                        ? 'var(--color-border-border-component-active)'
+                        : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                        ? 'var(--color-background-bg-component-disabled)'
+                        : 'var(--color-background-bg-component)', 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: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
+                                getIconComponent(leadingIcon, {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--color-foreground-fg-secondary)',
+                                    'aria-hidden': 'true',
+                                }) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
+                                flexGrow: 1,
+                                minWidth: 0,
+                                textAlign: 'left',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                maxWidth: '100%',
+                            }, color: value
+                                ? 'var(--color-text-text-title)'
+                                : 'var(--color-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
+                                    showClear &&
+                                    value &&
+                                    getIconComponent('X', {
+                                        width: '24px',
+                                        height: '24px',
+                                        color: 'var(--color-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(--color-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(--color-background-bg-component)', 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(--color-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(--color-background-bg-page)'
+                                    : isOptionSelected(option)
+                                        ? 'var(--color-background-bg-element)'
+                                        : 'transparent',
+                                '&:hover': {
+                                    backgroundColor: 'var(--color-background-bg-card-highlight)',
+                                },
+                                width: '100%',
+                                boxSizing: 'border-box',
+                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                width: '100%',
+                                            }, children: option })] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
+                                        isOptionSelected(option) &&
+                                        getIconComponent('Check', {
+                                            width: '16px',
+                                            height: '16px',
+                                            color: 'var(--color-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/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,128 @@
+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, FileXls, FilePpt, FileJs, FileCss, FileHtml, FileImage, FileAudio, FileVideo, FileZip, FileCode, UploadSimple, FileCsv, } from '@phosphor-icons/react';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+// Map file extensions to their corresponding icons
+const fileIconMap = {
+    // Document/Text Files
+    '.doc': FileDoc,
+    '.docx': FileDoc,
+    '.txt': FileTxt,
+    '.rtf': FileDoc,
+    // Spreadsheet Files
+    '.csv': FileCsv,
+    '.xls': FileXls,
+    '.xlsx': FileXls,
+    // Presentation Files
+    '.ppt': FilePpt,
+    '.pptx': FilePpt,
+    // Code/Markup Files
+    '.js': FileJs,
+    '.ts': FileCode,
+    '.css': FileCss,
+    '.html': FileHtml,
+    '.json': FileJs,
+    '.xml': FileXls,
+    // Media Files
+    '.jpg': FileImage,
+    '.jpeg': FileImage,
+    '.png': FileImage,
+    '.gif': FileImage,
+    '.svg': FileImage,
+    '.mp3': FileAudio,
+    '.wav': FileAudio,
+    '.mp4': FileVideo,
+    '.mov': FileVideo,
+    // Archive Files
+    '.zip': FileZip,
+    '.rar': FileZip,
+    '.tar': FileZip,
+    '.gz': FileZip,
+    // PDF Files
+    '.pdf': FilePdf,
+};
+// Default icon for unknown file types
+const defaultIcon = FileCode;
+export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+    // Function to get the icons to display based on acceptedFileTypes
+    const getFileTypeIcons = () => {
+        // Parse the acceptedFileTypes string into an array of extensions
+        const extensions = acceptedFileTypes
+            .toLowerCase()
+            .split(',')
+            .map((ext) => ext.trim())
+            .filter((ext) => ext.startsWith('.'));
+        // Get unique icons for the accepted file types
+        const uniqueIcons = new Map();
+        extensions.forEach((ext) => {
+            const IconComponent = fileIconMap[ext] || defaultIcon;
+            // Use the component name as key to avoid duplicates
+            uniqueIcons.set(IconComponent.name, IconComponent);
+        });
+        return Array.from(uniqueIcons.values());
+    };
+    const fileIcons = getFileTypeIcons();
+    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(--color-text-text-subtle)'
+            : 'var(--color-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(--color-background-bg-brand-primary-hover)' : 'var(--color-background-bg-brand-primary)'}`, bgcolor: disabled
+            ? 'var(--color-background-bg-component-contrast-subtle)'
+            : isDragging
+                ? 'var(--color-background-bg-component-hover)'
+                : 'var(--color-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(--color-border-border-component)'
+                    : isDragging
+                        ? 'var(--color-background-bg-brand-primary-hover)'
+                        : 'var(--color-background-bg-brand-primary)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
+                        ? 'var(--color-foreground-fg-disabled)'
+                        : 'var(--color-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, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                            ? 'var(--color-text-text-disabled)'
+                            : 'var(--color-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
+                            ? 'var(--color-text-text-subtle)'
+                            : 'var(--color-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...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;