@wavv/ui 2.3.0 → 2.3.2

package/build/components/Checkbox.d.ts

@@ -7,6 +7,8 @@ type Props = {
     label?: string;
     /** Sets the label on the left or right of the checkbox */
     labelPosition?: 'left' | 'right';
+    /** Sets the color of the label */
+    labelColor?: string;
     /** Disables the checkbox */
     disabled?: boolean;
     /** Prevents the checkbox from being changed */
@@ -23,7 +25,7 @@ type Props = {
     className?: CheckboxProps['className'];
     style?: CheckboxProps['style'];
 } & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
-declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
     theme?: import("@emotion/react").Theme;
 } & {

package/build/components/Checkbox.js

@@ -8,7 +8,7 @@ import { ControlLabel } from "./FormControl.js";
 import getFlexPosition from "./helpers/getFlexPosition.js";
 import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
-const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props })=>{
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
     return /*#__PURE__*/ jsx(ControlContainer, {
@@ -34,6 +34,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
                 children: [
                     label && /*#__PURE__*/ jsx(ControlLabel, {
                         disabled: disabled,
+                        color: labelColor,
                         children: label
                     }),
                     /*#__PURE__*/ jsx(Icon, {

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/Ellipsis.d.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSObject } from '@emotion/react';
+import type { ReactNode } from 'react';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { MarginPadding, Width } from './types';
 type ElAttributes = Attributes<HTMLDivElement>;
@@ -6,7 +7,7 @@ type Props = {
     children: ReactNode;
     /** Number of lines to clamp */
     clampLines?: number;
-    textAlign?: CSSProperties['textAlign'];
+    textAlign?: CSSObject['textAlign'];
 } & MarginPadding & Width & ElAttributes;
 declare const Ellipsis: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Ellipsis;

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/components/Form.d.ts

@@ -14,19 +14,21 @@ declare const Form: {
     Field({ children, inline, align, disabled, ...props }: FieldProps & {
         children?: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
-    Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
+    Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
+        labelColor?: string;
         disabled?: boolean;
         checked?: boolean;
         className?: string;
         iconColor?: string;
     } & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
-    Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: {
+    Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
+        labelColor?: string;
         disabled?: boolean;
         checked?: boolean;
         gap?: number;
@@ -34,10 +36,11 @@ declare const Form: {
         className?: import("react-aria-components").SwitchProps["className"];
         style?: import("react-aria-components").SwitchProps["style"];
     } & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
-    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: {
+    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
+        labelColor?: string;
         disabled?: boolean;
         readOnly?: boolean;
         checked?: boolean;

package/build/components/FormControl.d.ts

@@ -20,5 +20,6 @@ export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
     as?: React.ElementType;
 } & {
     disabled?: boolean;
+    color?: string;
 } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export type CheckboxAttributes = Attributes<HTMLInputElement>;

package/build/components/FormControl.js

@@ -64,9 +64,9 @@ const ControlInput = styled.input({
             }
         }
     }));
-const ControlLabel = styled.span(({ theme, disabled })=>({
+const ControlLabel = styled.span(({ theme, disabled, color })=>({
         fontSize: theme.font.size.md,
-        color: disabled ? theme.formControl.color.disabled : theme.scale10,
+        color: disabled ? theme.formControl.color.disabled : color || theme.scale10,
         cursor: disabled ? 'not-allowed' : 'pointer'
     }));
 export { ControlContainer, ControlInput, ControlLabel };

package/build/components/Radio.d.ts

@@ -8,6 +8,8 @@ type RadioProps = {
     label?: string;
     /** Sets the label on the left or right of the radio */
     labelPosition?: 'left' | 'right';
+    /** Sets the color of the label */
+    labelColor?: string;
     /** Disables the radio */
     disabled?: boolean;
     /** Controls the checked property of the radio */
@@ -17,5 +19,5 @@ type RadioProps = {
     /** Sets the color of the icon */
     iconColor?: string;
 } & Margin & ElAttributes;
-declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/build/components/Radio.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import RadioButton from "../assets/icons/RadioButton.js";
 import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
 import Icon from "./Icon/index.js";
-const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
+const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const marginProps = {
         margin,
@@ -22,6 +22,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop,
         children: [
             label && /*#__PURE__*/ jsx(ControlLabel, {
                 disabled: disabled,
+                color: labelColor,
                 children: label
             }),
             /*#__PURE__*/ jsx(ControlInput, {

package/build/components/Toggle.d.ts

@@ -7,6 +7,8 @@ type Props = {
     label?: string;
     /** Sets the label on the left or right of the toggle */
     labelPosition?: 'left' | 'right';
+    /** Sets the color of the label */
+    labelColor?: string;
     /** Disables the toggle */
     disabled?: boolean;
     /** Controls the checked property of the toggle */
@@ -18,7 +20,7 @@ type Props = {
     className?: SwitchProps['className'];
     style?: SwitchProps['style'];
 } & Margin & Omit<SwitchProps, 'isDisabled' | 'isSelected'>;
-declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlContainer: import("@emotion/styled").StyledComponent<SwitchProps & import("react").RefAttributes<HTMLLabelElement> & {
     theme?: import("@emotion/react").Theme;
 } & {

package/build/components/Toggle.js

@@ -6,7 +6,7 @@ import ToggleOn from "../assets/icons/ToggleOn.js";
 import { ControlLabel } from "./FormControl.js";
 import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
-const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...props })=>{
+const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
     return /*#__PURE__*/ jsx(ControlContainer, {
@@ -24,6 +24,7 @@ const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...pro
                 children: [
                     label && /*#__PURE__*/ jsx(ControlLabel, {
                         disabled: disabled,
+                        color: labelColor,
                         children: label
                     }),
                     /*#__PURE__*/ jsx(Icon, {

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.0",
+	"version": "2.3.2",
 	"type": "module",
 	"exports": {
 		".": {
@@ -31,22 +31,22 @@
 		"@emotion/styled": "^11.14.1",
 		"@internationalized/date": "3.10.0",
 		"@react-hook/resize-observer": "^2.0.2",
-		"@tiptap/core": "^3.10.7",
-		"@tiptap/extension-character-count": "^3.10.7",
-		"@tiptap/extension-highlight": "^3.10.7",
-		"@tiptap/extension-placeholder": "^3.10.7",
-		"@tiptap/extension-task-item": "^3.10.7",
-		"@tiptap/extension-task-list": "^3.10.7",
-		"@tiptap/markdown": "^3.10.7",
-		"@tiptap/pm": "^3.10.7",
-		"@tiptap/react": "^3.10.7",
-		"@tiptap/starter-kit": "^3.10.7",
+		"@tiptap/core": "^3.11.0",
+		"@tiptap/extension-character-count": "^3.11.0",
+		"@tiptap/extension-highlight": "^3.11.0",
+		"@tiptap/extension-placeholder": "^3.11.0",
+		"@tiptap/extension-task-item": "^3.11.0",
+		"@tiptap/extension-task-list": "^3.11.0",
+		"@tiptap/markdown": "^3.11.0",
+		"@tiptap/pm": "^3.11.0",
+		"@tiptap/react": "^3.11.0",
+		"@tiptap/starter-kit": "^3.11.0",
 		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"draft-js": "^0.11.7",
-		"es-toolkit": "^1.41.0",
-		"libphonenumber-js": "^1.12.26",
-		"lucide-react": "^0.553.0",
+		"es-toolkit": "^1.42.0",
+		"libphonenumber-js": "^1.12.27",
+		"lucide-react": "^0.554.0",
 		"polished": "^4.1.4",
 		"prism-react-renderer": "^2.4.1",
 		"react-aria": "3.44.0",
@@ -61,14 +61,14 @@
 		"@babel/core": "^7.28.5",
 		"@babel/preset-env": "^7.28.5",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.4",
-		"@chromatic-com/storybook": "^4.1.2",
+		"@biomejs/biome": "2.3.6",
+		"@chromatic-com/storybook": "^4.1.3",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@rsbuild/core": "1.6.3",
+		"@rsbuild/core": "1.6.7",
 		"@rsbuild/plugin-react": "^1.4.2",
 		"@rsbuild/plugin-svgr": "^1.2.2",
-		"@rslib/core": "^0.17.1",
+		"@rslib/core": "^0.18.0",
 		"@storybook/addon-docs": "^9.1.16",
 		"@storybook/addon-links": "^9.1.16",
 		"@storybook/addon-themes": "^9.1.16",
@@ -77,21 +77,21 @@
 		"@svgr/plugin-jsx": "^8.1.0",
 		"@svgr/plugin-prettier": "^8.1.0",
 		"@swc/plugin-emotion": "12.0.0",
-		"@types/draft-js": "^0.11.18",
+		"@types/draft-js": "^0.11.20",
 		"@types/jest": "^30.0.0",
 		"@types/ncp": "^2.0.8",
-		"@types/node": "^24.10.0",
+		"@types/node": "^24.10.1",
 		"@types/prompts": "^2.4.9",
 		"@types/randomcolor": "^0.5.9",
-		"@types/react": "^19.2.2",
-		"@types/react-dom": "^19.2.2",
+		"@types/react": "^19.2.6",
+		"@types/react-dom": "^19.2.3",
 		"@types/signale": "^1.4.7",
 		"@types/webfontloader": "^1.6.38",
 		"chalk": "^5.6.2",
 		"change-case": "^5.4.4",
-		"chromatic": "^13.3.3",
+		"chromatic": "^13.3.4",
 		"jest": "^30.2.0",
-		"lefthook": "^2.0.3",
+		"lefthook": "^2.0.4",
 		"ncp": "^2.0.0",
 		"path": "^0.12.7",
 		"phone": "^3.1.67",
@@ -105,7 +105,7 @@
 		"replace": "^1.2.2",
 		"signale": "^1.4.0",
 		"storybook": "^9.1.16",
-		"storybook-react-rsbuild": "^2.1.4",
+		"storybook-react-rsbuild": "^2.1.6",
 		"tsc-files": "^1.1.4",
 		"tslib": "^2.8.1",
 		"tsx": "^4.20.6",