@jordan-mace/chaser-design-system 1.2.8 → 1.2.9

package/dist/components/Drawer/Drawer.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
-type DrawerPropsBase = React.HTMLAttributes<HTMLDivElement> & {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    position?: DrawerPosition;
-    size?: DrawerSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-    closeOnOverlayClick?: boolean;
-};
-export type DrawerProps = DrawerPropsBase & Sprinkles;
-declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
-export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useEffect } from 'react';
-import { drawer, drawerPositionVariants, drawerOverlay, drawerHeader, drawerTitle, drawerCloseButton, drawerBody, drawerFooter, } from './styles.css';
-import Box from '../Box';
-const sizeMap = {
-    left: {
-        small: '250px',
-        medium: '350px',
-        large: '450px',
-        full: '100vw',
-    },
-    right: {
-        small: '250px',
-        medium: '350px',
-        large: '450px',
-        full: '100vw',
-    },
-    top: {
-        small: '200px',
-        medium: '300px',
-        large: '400px',
-        full: '100vh',
-    },
-    bottom: {
-        small: '200px',
-        medium: '300px',
-        large: '400px',
-        full: '100vh',
-    },
-};
-const Drawer = ({ isOpen, onClose, title, position = 'right', size = 'medium', children, footer, showCloseButton = true, closeOnOverlayClick = true, className, ...props }) => {
-    useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = '';
-        }
-        return () => {
-            document.body.style.overflow = '';
-        };
-    }, [isOpen]);
-    useEffect(() => {
-        const handleEscape = (e) => {
-            if (e.key === 'Escape' && isOpen) {
-                onClose();
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, onClose]);
-    if (!isOpen)
-        return null;
-    const dimensionStyle = {
-        ['--drawer-width']: ['left', 'right'].includes(position)
-            ? sizeMap[position][size]
-            : undefined,
-        ['--drawer-height']: ['top', 'bottom'].includes(position)
-            ? sizeMap[position][size]
-            : undefined,
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { className: drawerOverlay, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), _jsxs(Box, { as: "div", role: "dialog", "aria-modal": "true", className: clsx(drawer, drawerPositionVariants[position], className), style: dimensionStyle, ...props, children: [title && (_jsxs(Box, { as: "div", className: drawerHeader, children: [_jsx(Box, { as: "h2", className: drawerTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: drawerCloseButton, onClick: onClose, "aria-label": "Close drawer", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: drawerBody, children: children }), footer && (_jsx(Box, { as: "div", className: drawerFooter, children: footer }))] })] }));
-};
-export default Drawer;

package/dist/components/Drawer/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Drawer } from './Drawer';
-export type { DrawerProps, DrawerPosition, DrawerSize } from './Drawer';

package/dist/components/Drawer/index.js

@@ -1 +0,0 @@
-export { default as Drawer } from './Drawer';

package/dist/components/Drawer/styles.css.d.ts

@@ -1,8 +0,0 @@
-export declare const drawerPositionVariants: Record<"bottom" | "left" | "right" | "top", string>;
-export declare const drawerOverlay: string;
-export declare const drawer: string;
-export declare const drawerHeader: string;
-export declare const drawerTitle: string;
-export declare const drawerCloseButton: string;
-export declare const drawerBody: string;
-export declare const drawerFooter: string;

package/dist/components/Drawer/styles.css.js

@@ -1,125 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-const slideInFromLeft = keyframes({
-    from: { transform: 'translateX(-100%)' },
-    to: { transform: 'translateX(0)' },
-});
-const slideInFromRight = keyframes({
-    from: { transform: 'translateX(100%)' },
-    to: { transform: 'translateX(0)' },
-});
-const slideInFromTop = keyframes({
-    from: { transform: 'translateY(-100%)' },
-    to: { transform: 'translateY(0)' },
-});
-const slideInFromBottom = keyframes({
-    from: { transform: 'translateY(100%)' },
-    to: { transform: 'translateY(0)' },
-});
-const fadeIn = keyframes({
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-});
-export const drawerPositionVariants = styleVariants({
-    left: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: 'var(--drawer-width, 300px)',
-        maxWidth: '100vw',
-        animation: `${slideInFromLeft} 0.3s ease-out`,
-    },
-    right: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: 'var(--drawer-width, 300px)',
-        maxWidth: '100vw',
-        animation: `${slideInFromRight} 0.3s ease-out`,
-    },
-    top: {
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 'var(--drawer-height, 300px)',
-        maxHeight: '100vh',
-        animation: `${slideInFromTop} 0.3s ease-out`,
-    },
-    bottom: {
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 'var(--drawer-height, 300px)',
-        maxHeight: '100vh',
-        animation: `${slideInFromBottom} 0.3s ease-out`,
-    },
-});
-export const drawerOverlay = styleWithLayer({
-    position: 'fixed',
-    inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    animation: `${fadeIn} 0.2s ease-out`,
-    zIndex: 40,
-});
-export const drawer = styleWithLayer({
-    position: 'fixed',
-    background: vars.colors.backgroundDefault,
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    zIndex: 50,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-});
-export const drawerHeader = styleWithLayer({
-    padding: '1.25rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem',
-});
-export const drawerTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1.25rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0,
-});
-export const drawerCloseButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.5rem',
-    cursor: 'pointer',
-    borderRadius: '0.375rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '1.5rem',
-    lineHeight: '1',
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.borderMuted,
-            color: vars.colors.textPrimary,
-        },
-        '&:focus-visible': {
-            outline: '2px solid var(--drawer-focus-ring, currentColor)',
-            outlineOffset: '2px',
-        },
-    },
-});
-export const drawerBody = styleWithLayer({
-    padding: '1.25rem',
-    overflowY: 'auto',
-    flex: 1,
-});
-export const drawerFooter = styleWithLayer({
-    padding: '1.25rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    gap: '0.75rem',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-});

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
-export interface DropdownMenuItemProps {
-    label: string;
-    onClick?: () => void;
-    variant?: DropdownMenuItemVariant;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-}
-export interface DropdownMenuGroupProps {
-    label?: string;
-    items: DropdownMenuItemProps[];
-}
-export type DropdownMenuProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    trigger: React.ReactNode;
-    items?: DropdownMenuItemProps[];
-    groups?: DropdownMenuGroupProps[];
-    position?: DropdownMenuPosition;
-    closeOnItemClick?: boolean;
-};
-declare const DropdownMenu: ({ trigger, items, groups, position, closeOnItemClick, className, ...props }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
-export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import React, { useState, useRef, useEffect } from 'react';
-import { dropdownMenuContainer, dropdownMenuTrigger, dropdownMenuContent, dropdownMenuPositionVariants, dropdownMenuItem, dropdownMenuItemVariants, dropdownMenuSeparator, dropdownMenuGroup, dropdownMenuLabel, } from './styles.css';
-import Box from '../Box';
-const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft', closeOnItemClick = true, className, ...props }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    useEffect(() => {
-        const handleEscape = (e) => {
-            if (e.key === 'Escape' && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen]);
-    const handleItemClick = (item) => {
-        if (item.disabled || item.variant === 'disabled')
-            return;
-        item.onClick?.();
-        if (closeOnItemClick) {
-            setIsOpen(false);
-        }
-    };
-    const renderItem = (item, index) => (_jsxs(Box, { as: "button", className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === 'disabled'
-            ? 'disabled'
-            : item.variant || 'default']), onClick: () => handleItemClick(item), disabled: item.disabled || item.variant === 'disabled', role: "menuitem", type: "button", children: [item.icon && _jsx("span", { children: item.icon }), item.label] }, index));
-    const renderGroup = (group, index) => (_jsxs(Box, { className: dropdownMenuGroup, role: "group", children: [group.label && (_jsx(Box, { as: "div", className: dropdownMenuLabel, role: "presentation", children: group.label })), group.items.map((item, itemIndex) => renderItem(item, itemIndex))] }, index));
-    return (_jsxs(Box, { ref: containerRef, className: clsx(dropdownMenuContainer, className), ...props, children: [_jsx(Box, { className: dropdownMenuTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: trigger }), isOpen && (_jsxs(Box, { className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]), role: "menu", "aria-orientation": "vertical", children: [items.length > 0 && (_jsx(Box, { className: dropdownMenuGroup, children: items.map((item, index) => renderItem(item, index)) })), groups.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx(Box, { as: "div", className: dropdownMenuSeparator, role: "separator" })), renderGroup(group, index)] }, index)))] }))] }));
-};
-export default DropdownMenu;

package/dist/components/DropdownMenu/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DropdownMenu } from './DropdownMenu';
-export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuPosition, DropdownMenuItemVariant } from './DropdownMenu';

package/dist/components/DropdownMenu/index.js

@@ -1 +0,0 @@
-export { default as DropdownMenu } from './DropdownMenu';

package/dist/components/DropdownMenu/styles.css.d.ts

@@ -1,9 +0,0 @@
-export declare const dropdownMenuContainer: string;
-export declare const dropdownMenuTrigger: string;
-export declare const dropdownMenuContent: string;
-export declare const dropdownMenuPositionVariants: Record<"topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
-export declare const dropdownMenuItem: string;
-export declare const dropdownMenuItemVariants: Record<"default" | "disabled" | "destructive", string>;
-export declare const dropdownMenuSeparator: string;
-export declare const dropdownMenuGroup: string;
-export declare const dropdownMenuLabel: string;

package/dist/components/DropdownMenu/styles.css.js

@@ -1,93 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const dropdownMenuContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-block',
-});
-export const dropdownMenuTrigger = styleWithLayer({
-    cursor: 'pointer',
-    userSelect: 'none',
-});
-export const dropdownMenuContent = styleWithLayer({
-    position: 'absolute',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '0.5rem',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    minWidth: '160px',
-    zIndex: 50,
-    overflow: 'hidden',
-    marginTop: '0.25rem',
-});
-export const dropdownMenuPositionVariants = styleVariants({
-    bottomLeft: {
-        top: '100%',
-        left: 0,
-    },
-    bottomRight: {
-        top: '100%',
-        right: 0,
-    },
-    topLeft: {
-        bottom: '100%',
-        left: 0,
-        marginTop: 0,
-        marginBottom: '0.25rem',
-    },
-    topRight: {
-        bottom: '100%',
-        right: 0,
-        marginTop: 0,
-        marginBottom: '0.25rem',
-    },
-});
-export const dropdownMenuItem = styleWithLayer({
-    padding: '0.75rem 1rem',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    transition: 'background-color 0.15s ease',
-    ':hover': {
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-    ':focus-visible': {
-        outline: 'none',
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-});
-export const dropdownMenuItemVariants = styleVariants({
-    default: {},
-    destructive: {
-        color: vars.colors.alertErrorText,
-        ':hover': {
-            backgroundColor: vars.colors.alertErrorBackground,
-        },
-    },
-    disabled: {
-        opacity: 0.5,
-        cursor: 'not-allowed',
-        ':hover': {
-            backgroundColor: 'transparent',
-        },
-    },
-});
-export const dropdownMenuSeparator = styleWithLayer({
-    height: '1px',
-    backgroundColor: vars.colors.borderMuted,
-    margin: '0.5rem 0',
-});
-export const dropdownMenuGroup = styleWithLayer({
-    padding: '0.5rem 0',
-});
-export const dropdownMenuLabel = styleWithLayer({
-    padding: '0.5rem 1rem',
-    fontSize: '12px',
-    fontWeight: '600',
-    color: vars.colors.textSecondary,
-    textTransform: 'uppercase',
-    letterSpacing: '0.05em',
-});

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: string;
-    action?: React.ReactNode;
-};
-declare const EmptyState: ({ icon, title, description, action, className, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
-export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { emptyState, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, } from './styles.css';
-import Box from '../Box';
-const EmptyState = ({ icon, title, description, action, className, }) => {
-    return (_jsxs(Box, { className: clsx(emptyState, className), role: "status", children: [icon && (_jsx(Box, { className: emptyStateIcon, "aria-hidden": "true", children: icon })), title && (_jsx(Box, { as: "h3", className: emptyStateTitle, children: title })), description && (_jsx(Box, { as: "p", className: emptyStateDescription, children: description })), action && _jsx(Box, { className: emptyStateAction, children: action })] }));
-};
-export default EmptyState;

package/dist/components/EmptyState/index.d.ts

@@ -1,2 +0,0 @@
-export { default as EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -1 +0,0 @@
-export { default as EmptyState } from './EmptyState';

package/dist/components/EmptyState/styles.css.d.ts

@@ -1,5 +0,0 @@
-export declare const emptyState: string;
-export declare const emptyStateIcon: string;
-export declare const emptyStateTitle: string;
-export declare const emptyStateDescription: string;
-export declare const emptyStateAction: string;

package/dist/components/EmptyState/styles.css.js

@@ -1,30 +0,0 @@
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const emptyState = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '2rem',
-    textAlign: 'center',
-});
-export const emptyStateIcon = styleWithLayer({
-    fontSize: '48px',
-    marginBottom: '1rem',
-    color: vars.colors.textSecondary,
-});
-export const emptyStateTitle = styleWithLayer({
-    fontSize: '18px',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: '0 0 0.5rem 0',
-});
-export const emptyStateDescription = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    margin: '0 0 1rem 0',
-    maxWidth: '400px',
-});
-export const emptyStateAction = styleWithLayer({
-    marginTop: '0.5rem',
-});

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface FileUploadFile {
-    id: string;
-    file: File;
-    name: string;
-    size: number;
-    progress: number;
-    status: 'uploading' | 'success' | 'error';
-    errorMessage?: string;
-}
-export type FileUploadProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    label?: string;
-    files?: FileUploadFile[];
-    onFilesChange?: (files: FileUploadFile[]) => void;
-    onFileAdd?: (files: File[]) => void;
-    onFileRemove?: (fileId: string) => void;
-    accept?: string;
-    multiple?: boolean;
-    maxFileSize?: number;
-    maxFiles?: number;
-    disabled?: boolean;
-    dropzoneText?: string;
-    hint?: string;
-    showProgress?: boolean;
-};
-declare const FileUpload: ({ label, files, onFilesChange, onFileAdd, onFileRemove, accept, multiple, maxFileSize, maxFiles, disabled, dropzoneText, hint, showProgress, className, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
-export default FileUpload;

package/dist/components/FileUpload/FileUpload.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useCallback } from 'react';
-import { fileUploadContainer, fileUploadDropzone, fileUploadDropzoneVariants, fileUploadLabel, fileUploadText, fileUploadHint, fileUploadInput, fileUploadList, fileUploadItem, fileUploadItemInfo, fileUploadItemName, fileUploadItemSize, fileUploadRemoveButton, fileUploadError, fileUploadIcon, fileUploadProgressBar, fileUploadProgressFill, fileUploadProgressFillVariants, } from './styles.css';
-import Box from '../Box';
-const formatFileSize = (bytes) => {
-    if (bytes === 0)
-        return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove, accept, multiple = false, maxFileSize, maxFiles, disabled = false, dropzoneText = 'Drag and drop files here, or click to browse', hint, showProgress = true, className, ...props }) => {
-    const [isDragOver, setIsDragOver] = useState(false);
-    const [error, setError] = useState(null);
-    const inputRef = useRef(null);
-    const validateFile = (file) => {
-        if (maxFileSize && file.size > maxFileSize) {
-            return `File size exceeds ${formatFileSize(maxFileSize)}`;
-        }
-        if (accept) {
-            const acceptedTypes = accept.split(',').map((type) => type.trim());
-            const isAccepted = acceptedTypes.some((type) => {
-                if (type.includes('*')) {
-                    return file.type.startsWith(type.replace('/*', ''));
-                }
-                return file.type === type || file.name.endsWith(type);
-            });
-            if (!isAccepted) {
-                return `File type not accepted. Allowed: ${accept}`;
-            }
-        }
-        return null;
-    };
-    const handleFiles = useCallback((fileList) => {
-        if (!fileList || disabled)
-            return;
-        const newFiles = [];
-        const errors = [];
-        Array.from(fileList).forEach((file) => {
-            const validationError = validateFile(file);
-            if (validationError) {
-                errors.push(`${file.name}: ${validationError}`);
-            }
-            else {
-                newFiles.push(file);
-            }
-        });
-        if (maxFiles && files.length + newFiles.length > maxFiles) {
-            errors.push(`Maximum ${maxFiles} files allowed`);
-            newFiles.splice(maxFiles - files.length);
-        }
-        if (errors.length > 0) {
-            setError(errors.join(', '));
-        }
-        else {
-            setError(null);
-        }
-        if (newFiles.length > 0) {
-            onFileAdd?.(newFiles);
-        }
-    }, [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd]);
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        if (!disabled) {
-            setIsDragOver(true);
-        }
-    };
-    const handleDragLeave = (e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-    };
-    const handleDrop = (e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-        handleFiles(e.dataTransfer.files);
-    };
-    const handleClick = () => {
-        if (!disabled) {
-            inputRef.current?.click();
-        }
-    };
-    const handleInputChange = (e) => {
-        handleFiles(e.target.files);
-        e.target.value = '';
-    };
-    const handleRemove = (fileId) => {
-        onFileRemove?.(fileId);
-    };
-    const getVariant = () => {
-        if (disabled)
-            return 'disabled';
-        if (error)
-            return 'error';
-        if (isDragOver)
-            return 'dragOver';
-        return 'default';
-    };
-    return (_jsxs(Box, { className: clsx(fileUploadContainer, className), ...props, children: [label && (_jsx(Box, { as: "label", className: fileUploadLabel, children: label })), _jsxs(Box, { as: "div", className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: [_jsx(Box, { className: fileUploadIcon, "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17,8 12,3 7,8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }) }), _jsx(Box, { as: "p", className: fileUploadText, children: dropzoneText }), hint && (_jsx(Box, { as: "p", className: fileUploadHint, children: hint })), _jsx(Box, { as: "input", ref: inputRef, type: "file", className: fileUploadInput, onChange: handleInputChange, accept: accept, multiple: multiple, disabled: disabled, "aria-label": "File upload input" })] }), error && (_jsx(Box, { as: "p", className: fileUploadError, role: "alert", children: error })), files.length > 0 && (_jsx(Box, { as: "ul", className: fileUploadList, "aria-label": "Uploaded files", children: files.map((file) => (_jsxs(Box, { as: "li", className: fileUploadItem, children: [_jsxs(Box, { className: fileUploadItemInfo, children: [_jsx(Box, { as: "p", className: fileUploadItemName, title: file.name, children: file.name }), _jsxs(Box, { as: "p", className: fileUploadItemSize, children: [formatFileSize(file.size), file.status === 'uploading' &&
-                                            showProgress &&
-                                            ' • Uploading...', file.status === 'success' && ' • Complete', file.status === 'error' &&
-                                            file.errorMessage &&
-                                            ` • ${file.errorMessage}`] }), showProgress && file.status === 'uploading' && (_jsx(Box, { className: fileUploadProgressBar, children: _jsx(Box, { className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]), style: { width: `${file.progress}%` } }) }))] }), _jsx(Box, { as: "button", className: fileUploadRemoveButton, onClick: () => handleRemove(file.id), type: "button", "aria-label": `Remove ${file.name}`, children: "\u00D7" })] }, file.id))) }))] }));
-};
-export default FileUpload;

package/dist/components/FileUpload/index.d.ts

@@ -1,2 +0,0 @@
-export { default as FileUpload } from './FileUpload';
-export type { FileUploadProps, FileUploadFile } from './FileUpload';

package/dist/components/FileUpload/index.js

@@ -1 +0,0 @@
-export { default as FileUpload } from './FileUpload';

package/dist/components/FileUpload/styles.css.d.ts

@@ -1,19 +0,0 @@
-export declare const fileUploadContainer: string;
-export declare const fileUploadDropzone: string;
-export declare const fileUploadDropzoneVariants: Record<"default" | "disabled" | "error" | "dragOver", string>;
-export declare const fileUploadLabel: string;
-export declare const fileUploadText: string;
-export declare const fileUploadHint: string;
-export declare const fileUploadInput: string;
-export declare const fileUploadList: string;
-export declare const fileUploadItem: string;
-export declare const fileUploadItemInfo: string;
-export declare const fileUploadItemName: string;
-export declare const fileUploadItemSize: string;
-export declare const fileUploadItemProgress: string;
-export declare const fileUploadRemoveButton: string;
-export declare const fileUploadError: string;
-export declare const fileUploadIcon: string;
-export declare const fileUploadProgressBar: string;
-export declare const fileUploadProgressFill: string;
-export declare const fileUploadProgressFillVariants: Record<"success" | "error" | "uploading", string>;