@wavv/ui 2.3.1 → 2.3.3

package/build/components/DropZone.d.ts

@@ -0,0 +1,28 @@
+import { type DropZoneProps, type FileTriggerProps } from 'react-aria-components';
+import type { MarginPadding, WidthHeight } from './types';
+type Props = {
+    /** The label to display inside the drop zone */
+    label?: string;
+    /** Whether to show the file names in the drop zone */
+    showFileNames?: boolean;
+    /** Whether the drop target is disabled. If true, the drop target will not accept any drops. */
+    disabled?: DropZoneProps['isDisabled'];
+    className?: DropZoneProps['className'];
+    style?: DropZoneProps['style'];
+    onDrop?: DropZoneProps['onDrop'];
+    onDropEnter?: DropZoneProps['onDropEnter'];
+    onDropMove?: DropZoneProps['onDropMove'];
+    onDropExit?: DropZoneProps['onDropExit'];
+    onDropActivate?: DropZoneProps['onDropActivate'];
+    getDropOperation?: DropZoneProps['getDropOperation'];
+    onHoverChange?: DropZoneProps['onHoverChange'];
+    onHoverStart?: DropZoneProps['onHoverStart'];
+    onHoverEnd?: DropZoneProps['onHoverEnd'];
+    acceptedFileTypes?: FileTriggerProps['acceptedFileTypes'];
+    allowsMultiple?: FileTriggerProps['allowsMultiple'];
+    defaultCamera?: FileTriggerProps['defaultCamera'];
+    acceptDirectory?: FileTriggerProps['acceptDirectory'];
+    onSelect?: FileTriggerProps['onSelect'];
+} & MarginPadding & WidthHeight & Omit<DropZoneProps, 'isDisabled' | 'children'> & Omit<FileTriggerProps, 'children'>;
+declare const DropZone: ({ label, showFileNames, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DropZone;

package/build/components/DropZone.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { DropZone, Text } from "react-aria-components";
+import matchesFileTypes from "../utils/matchesFileTypes.js";
+import Ellipsis from "./Ellipsis.js";
+import FileTrigger from "./FileTrigger.js";
+import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
+const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest })=>{
+    const [displayFiles, setDisplayFiles] = useState('');
+    const showFileTrigger = !!acceptedFileTypes || !!allowsMultiple || !!defaultCamera || !!acceptDirectory || !!onSelect || showFileNames;
+    const handleFileDrop = (event)=>{
+        let files = event.items.filter((file)=>'file' === file.kind);
+        if (acceptedFileTypes && acceptedFileTypes.length > 0) files = files.filter((file)=>matchesFileTypes(file, acceptedFileTypes));
+        if (!allowsMultiple && files.length > 1) files = files.slice(0, 1);
+        const fileNames = files.map(({ name })=>name).join(', ');
+        setDisplayFiles(fileNames);
+        if (onDrop) onDrop(event);
+    };
+    const handleFileSelect = (selected)=>{
+        if (!selected) return;
+        const files = Array.from(selected);
+        const fileNames = files.map(({ name })=>name).join(', ');
+        setDisplayFiles(fileNames);
+        if (onSelect) onSelect(selected);
+    };
+    return /*#__PURE__*/ jsxs(StyledDropZone, {
+        isDisabled: disabled,
+        onDrop: showFileTrigger ? handleFileDrop : onDrop,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(StyledText, {
+                slot: "label",
+                children: label
+            }),
+            showFileTrigger && /*#__PURE__*/ jsx(SeparatorText, {
+                children: "or"
+            }),
+            showFileTrigger && /*#__PURE__*/ jsx(FileTrigger, {
+                acceptedFileTypes: acceptedFileTypes,
+                allowsMultiple: allowsMultiple,
+                defaultCamera: defaultCamera,
+                acceptDirectory: acceptDirectory,
+                onSelect: handleFileSelect
+            }),
+            displayFiles && showFileNames && /*#__PURE__*/ jsx(FilesContainer, {
+                title: displayFiles,
+                children: /*#__PURE__*/ jsx(Ellipsis, {
+                    children: displayFiles
+                })
+            })
+        ]
+    });
+};
+const StyledDropZone = styled(DropZone)(({ theme })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.size.sm,
+        padding: theme.size.md,
+        border: `1px dashed ${theme.scale4}`,
+        borderRadius: 8,
+        backgroundColor: 'transparent',
+        outline: 'none',
+        color: theme.scale10,
+        transition: 'background-color 0.2s ease, border-color 0.2s ease',
+        '&[data-focus-visible]': {
+            outline: `${theme.accent} solid 2px`,
+            outlineOffset: -1
+        },
+        '&[data-drop-target]': {
+            backgroundColor: theme.scale1,
+            borderColor: theme.color.brand
+        },
+        '&[data-disabled]': {
+            cursor: 'not-allowed',
+            backgroundColor: theme.scale0,
+            borderColor: theme.scale4,
+            opacity: 0.4,
+            userSelect: 'none',
+            '& > *': {
+                pointerEvents: 'none'
+            }
+        }
+    }), widthHeightProps, marginProps, paddingProps);
+const StyledText = styled(Text)(({ theme })=>({
+        fontSize: theme.font.size.md,
+        fontWeight: theme.font.weight.medium,
+        lineHeight: '14px',
+        textAlign: 'center'
+    }));
+const SeparatorText = styled(Text)(({ theme })=>({
+        fontSize: theme.font.size.md,
+        color: theme.scale6,
+        lineHeight: '14px'
+    }));
+const FilesContainer = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: theme.font.size.sm,
+        color: theme.scale6,
+        width: '100%'
+    }));
+const components_DropZone = DropZone_DropZone;
+export { components_DropZone as default };

package/build/components/FileTrigger.d.ts

@@ -0,0 +1,11 @@
+import { type FileTriggerProps } from 'react-aria-components';
+import type { Margin } from './types';
+type Props = {
+    acceptedFileTypes?: FileTriggerProps['acceptedFileTypes'];
+    allowsMultiple?: FileTriggerProps['allowsMultiple'];
+    defaultCamera?: FileTriggerProps['defaultCamera'];
+    acceptDirectory?: FileTriggerProps['acceptDirectory'];
+    onSelect?: FileTriggerProps['onSelect'];
+} & Margin & Omit<FileTriggerProps, 'children'>;
+declare const FileTrigger: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default FileTrigger;

package/build/components/FileTrigger.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { FileTrigger } from "react-aria-components";
+import Button from "./Button/index.js";
+const FileTrigger_FileTrigger = (props)=>/*#__PURE__*/ jsx(FileTrigger, {
+        ...props,
+        children: /*#__PURE__*/ jsx(Button, {
+            small: true,
+            children: "Select files"
+        })
+    });
+const components_FileTrigger = FileTrigger_FileTrigger;
+export { components_FileTrigger as default };

package/build/index.d.ts

@@ -10,11 +10,13 @@ export { default as CommandMenu } from './components/CommandMenu';
 export { default as DocTable } from './components/DocTable';
 export { default as Dot } from './components/Dot';
 export { default as DraftEditor } from './components/DraftEditor';
+export { default as DropZone } from './components/DropZone';
 export { default as Editor } from './components/Editor';
 export { default as DropdownMenu } from './components/DropdownMenu';
 export { default as DropdownSelect } from './components/DropdownSelect';
 export { default as Dropdown } from './components/Dropdown';
 export { default as Ellipsis } from './components/Ellipsis';
+export { default as FileTrigger } from './components/FileTrigger';
 export { default as Form } from './components/Form';
 export { default as Grid } from './components/Grid';
 export { default as Icon } from './components/Icon';
@@ -88,3 +90,4 @@ export { default as formatDate } from './utils/formatDate';
 export { default as formatNumber } from './utils/formatNumber';
 export { default as numberWithCommas } from './utils/numberWithCommas';
 export { createEditorContent, editorContentToText } from './components/Editor';
+export { default as matchesFileTypes } from './utils/matchesFileTypes';

package/build/index.js

@@ -10,11 +10,13 @@ import CommandMenu from "./components/CommandMenu/index.js";
 import DocTable from "./components/DocTable.js";
 import Dot from "./components/Dot.js";
 import DraftEditor from "./components/DraftEditor.js";
+import DropZone from "./components/DropZone.js";
 import Editor, { createEditorContent, editorContentToText } from "./components/Editor/index.js";
 import DropdownMenu from "./components/DropdownMenu.js";
 import DropdownSelect from "./components/DropdownSelect.js";
 import Dropdown from "./components/Dropdown.js";
 import Ellipsis from "./components/Ellipsis.js";
+import FileTrigger from "./components/FileTrigger.js";
 import Form from "./components/Form.js";
 import Grid from "./components/Grid.js";
 import Icon from "./components/Icon/index.js";
@@ -77,4 +79,5 @@ import copyToClipboard from "./utils/copyToClipboard.js";
 import formatDate from "./utils/formatDate.js";
 import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
-export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+import matchesFileTypes from "./utils/matchesFileTypes.js";
+export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/build/utils/matchesFileTypes.d.ts

@@ -0,0 +1,9 @@
+import type { FileDropItem } from 'react-aria';
+/**
+ * Checks if a file matches any of the accepted file types
+ * @param file - The file to check
+ * @param acceptedFileTypes - The accepted file types
+ * @returns True if the file matches any of the accepted file types, false otherwise
+ */
+declare const matchesFileTypes: (file: FileDropItem, acceptedFileTypes?: readonly string[]) => boolean;
+export default matchesFileTypes;

package/build/utils/matchesFileTypes.js

@@ -0,0 +1,16 @@
+const matchesFileTypes = (file, acceptedFileTypes)=>{
+    if (!acceptedFileTypes || 0 === acceptedFileTypes.length) return true;
+    const fileType = file.type || '';
+    const fileName = file.name || '';
+    return acceptedFileTypes.some((acceptedType)=>{
+        if (acceptedType === fileType) return true;
+        if (acceptedType.endsWith('/*')) {
+            const baseType = acceptedType.slice(0, -2);
+            return fileType.startsWith(`${baseType}/`);
+        }
+        if (acceptedType.startsWith('.')) return fileName.toLowerCase().endsWith(acceptedType.toLowerCase());
+        return false;
+    });
+};
+const utils_matchesFileTypes = matchesFileTypes;
+export { utils_matchesFileTypes as default };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.3.1",
+	"version": "2.3.3",
 	"type": "module",
 	"exports": {
 		".": {