@wavv/ui 2.3.1 → 2.3.2

package/build/components/DropZone.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { type DropZoneProps } from 'react-aria-components';
+import type { MarginPadding, WidthHeight } from './types';
+type Props = {
+    children?: ReactNode;
+    /** The label to display inside the drop zone */
+    label?: string;
+    /** 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'];
+} & MarginPadding & WidthHeight & Omit<DropZoneProps, 'isDisabled' | 'children'>;
+declare const DropZone: ({ children, label, disabled, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DropZone;

package/build/components/DropZone.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { DropZone, Text } from "react-aria-components";
+import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
+const DropZone_DropZone = ({ children, label = 'Drop here', disabled, ...rest })=>/*#__PURE__*/ jsxs(StyledDropZone, {
+        isDisabled: disabled,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(StyledText, {
+                slot: "label",
+                children: label
+            }),
+            children
+        ]
+    });
+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
+    }));
+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';

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,4 @@ 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 };
+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, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/package.json

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