@wavv/ui 2.3.4 → 2.3.6

package/build/components/DropZone.d.ts

@@ -7,6 +7,10 @@ type Props = {
     showFileNames?: boolean;
     /** Whether the drop target is disabled. If true, the drop target will not accept any drops. */
     disabled?: DropZoneProps['isDisabled'];
+    /** Whether the drop zone is in an invalid state */
+    invalid?: boolean;
+    /** Error message to display below the file names */
+    errorMessage?: string;
     className?: DropZoneProps['className'];
     style?: DropZoneProps['style'];
     onDrop?: DropZoneProps['onDrop'];
@@ -24,5 +28,5 @@ type Props = {
     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;
+declare const DropZone: ({ label, showFileNames, disabled, invalid, errorMessage, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default DropZone;

package/build/components/DropZone.js

@@ -6,7 +6,7 @@ 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 DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled, invalid, errorMessage, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest })=>{
     const [displayFiles, setDisplayFiles] = useState('');
     const showFileTrigger = !!acceptedFileTypes || !!allowsMultiple || !!defaultCamera || !!acceptDirectory || !!onSelect;
     const handleFileDrop = (event)=>{
@@ -26,6 +26,7 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled
     };
     return /*#__PURE__*/ jsxs(StyledDropZone, {
         isDisabled: disabled,
+        invalid: invalid,
         onDrop: showFileTrigger ? handleFileDrop : onDrop,
         ...rest,
         children: [
@@ -48,18 +49,21 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled
                 children: /*#__PURE__*/ jsx(Ellipsis, {
                     children: displayFiles
                 })
+            }),
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessageText, {
+                children: errorMessage
             })
         ]
     });
 };
-const StyledDropZone = styled(DropZone)(({ theme })=>({
+const StyledDropZone = styled(DropZone)(({ theme, invalid })=>({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         gap: theme.size.sm,
         padding: theme.size.md,
-        border: `1px dashed ${theme.scale4}`,
+        border: `1px dashed ${invalid ? theme.color.error : theme.scale4}`,
         borderRadius: 8,
         backgroundColor: 'transparent',
         outline: 'none',
@@ -103,5 +107,8 @@ const FilesContainer = styled.div(({ theme })=>({
         color: theme.scale6,
         width: '100%'
     }));
+const ErrorMessageText = styled(StyledText)(({ theme })=>({
+        color: theme.color.error
+    }));
 const components_DropZone = DropZone_DropZone;
 export { components_DropZone as default };

package/build/components/Inputs/helpers/Label.js

@@ -12,6 +12,7 @@ const LabelWrapper = ({ children, label, required, ...props })=>/*#__PURE__*/ js
                         children: label
                     }),
                     required && /*#__PURE__*/ jsx(Required, {
+                        disabled: props.disabled,
                         children: "*"
                     })
                 ]
@@ -51,8 +52,8 @@ const Label_Label = styled(Label, preventProps)(({ theme: { font, input }, fille
     }), ({ theme: { input }, disabled })=>({
         color: disabled ? input.labelColor.disabled : void 0
     }));
-const Required = styled.span(({ theme })=>({
-        color: theme.color.error
+const Required = styled.span(({ theme, disabled })=>({
+        color: disabled ? theme.input.labelColor.disabled : theme.color.error
     }));
 const helpers_Label = LabelWrapper;
 export { helpers_Label as default };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.3.4",
+	"version": "2.3.6",
 	"type": "module",
 	"exports": {
 		".": {
@@ -61,7 +61,7 @@
 		"@babel/core": "^7.28.5",
 		"@babel/preset-env": "^7.28.5",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.6",
+		"@biomejs/biome": "2.3.8",
 		"@chromatic-com/storybook": "^4.1.3",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
@@ -69,10 +69,10 @@
 		"@rsbuild/plugin-react": "^1.4.2",
 		"@rsbuild/plugin-svgr": "^1.2.2",
 		"@rslib/core": "^0.18.2",
-		"@storybook/addon-docs": "^9.1.16",
-		"@storybook/addon-links": "^9.1.16",
-		"@storybook/addon-themes": "^9.1.16",
-		"@storybook/test-runner": "^0.23.0",
+		"@storybook/addon-docs": "^10.1.2",
+		"@storybook/addon-links": "^10.1.2",
+		"@storybook/addon-themes": "^10.1.2",
+		"@storybook/test-runner": "^0.24.2",
 		"@svgr/core": "^8.1.0",
 		"@svgr/plugin-jsx": "^8.1.0",
 		"@svgr/plugin-prettier": "^8.1.0",
@@ -104,8 +104,8 @@
 		"react-dom": "^19.2.0",
 		"replace": "^1.2.2",
 		"signale": "^1.4.0",
-		"storybook": "^9.1.16",
-		"storybook-react-rsbuild": "^2.1.6",
+		"storybook": "^10.1.2",
+		"storybook-react-rsbuild": "^3.0.0",
 		"tsc-files": "^1.1.4",
 		"tslib": "^2.8.1",
 		"tsx": "^4.21.0",