@wavv/ui 2.3.13 → 2.3.15

package/build/components/Avatar.d.ts

@@ -12,9 +12,14 @@ type Props = {
     initials?: string;
     /** File upload props - if provided, enables file upload functionality */
     acceptedFileTypes?: FileTriggerProps['acceptedFileTypes'];
+    /** Maximum file size string (e.g., '25MB') */
+    maxFileSize?: string;
     /** Callback when a file is selected */
     onSelect?: FileTriggerProps['onSelect'];
+    /** Callback when the remove button is clicked */
     onRemove?: () => void;
+    /** Callback when file validation fails */
+    onError?: (error: 'type' | 'size') => void;
 } & MarginPadding & Pick<FileTriggerProps, 'acceptedFileTypes' | 'onSelect'>;
-declare const Avatar: ({ size, url, icon, initials, acceptedFileTypes, onSelect, onRemove, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ size, url, icon, initials, acceptedFileTypes, onSelect, onError, maxFileSize, onRemove, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/build/components/Avatar.js

@@ -1,12 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { FileTrigger } from "react-aria-components";
+import matchesFileTypes from "../utils/matchesFileTypes.js";
+import parseFileSize from "../utils/parseFileSize.js";
 import Button from "./Button/index.js";
 import getIcon from "./helpers/getIcon.js";
 import { marginProps, paddingProps } from "./helpers/styledProps.js";
-const Avatar = ({ size = 32, url, icon, initials, acceptedFileTypes, onSelect, onRemove, ...props })=>{
+const Avatar = ({ size = 32, url, icon, initials, acceptedFileTypes, onSelect, onError, maxFileSize, onRemove, ...props })=>{
     const imageSize = size - 4;
     const hasUpload = !!acceptedFileTypes || !!onSelect;
+    const handleFileSelect = (files)=>{
+        if (!files || 0 === files.length) return;
+        const file = files[0];
+        if (acceptedFileTypes && acceptedFileTypes.length > 0) {
+            if (!matchesFileTypes(file, acceptedFileTypes)) return void onError?.('type');
+        }
+        if (maxFileSize) {
+            const maxBytes = parseFileSize(maxFileSize);
+            if (null !== maxBytes && file.size > maxBytes) return void onError?.('size');
+        }
+        onSelect?.(files);
+    };
     const displayMode = url ? 'image' : initials ? 'initials' : icon ? 'icon' : 'placeholder';
     const isInitials = 'initials' === displayMode;
     const isImage = 'image' === displayMode;
@@ -39,7 +53,7 @@ const Avatar = ({ size = 32, url, icon, initials, acceptedFileTypes, onSelect, o
                 children: [
                     /*#__PURE__*/ jsx(FileTrigger, {
                         acceptedFileTypes: acceptedFileTypes,
-                        onSelect: onSelect,
+                        onSelect: handleFileSelect,
                         children: /*#__PURE__*/ jsx(Button, {
                             small: true,
                             outline: true,

package/build/components/DropZone.js

@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { useId, useState } from "react";
 import { DropZone, Text } from "react-aria-components";
 import matchesFileTypes from "../utils/matchesFileTypes.js";
+import parseFileSize from "../utils/parseFileSize.js";
 import Button from "./Button/index.js";
 import FileTrigger from "./FileTrigger.js";
 import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
@@ -17,20 +18,6 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
     const shouldManageFiles = showFileList || hasFileCallbacks;
     const showFileTrigger = !!acceptedFileTypes || !!allowsMultiple || !!defaultCamera || !!acceptDirectory || hasFileCallbacks;
     const generateFileId = (name, index)=>`${instanceId}-${name}-${Date.now()}-${index}`;
-    const parseFileSize = (sizeString)=>{
-        const match = sizeString.trim().match(/^(\d+(?:\.\d+)?)\s*(KB|MB|GB|TB|B)$/i);
-        if (!match) return null;
-        const value = parseFloat(match[1]);
-        const unit = match[2].toUpperCase();
-        const multipliers = {
-            B: 1,
-            KB: 1024,
-            MB: 1048576,
-            GB: 1073741824,
-            TB: 1099511627776
-        };
-        return value * (multipliers[unit] || 1);
-    };
     const validateFileSizes = (fileList)=>{
         if (!maxFileSize) return {
             valid: fileList,

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

@@ -54,7 +54,6 @@ const backgroundStyles = ({ backgroundColor })=>({
 const textOnlyStyles = ({ theme, textOnly, isDisabled })=>({
         padding: textOnly ? 0 : void 0,
         backgroundColor: textOnly ? 'transparent' : void 0,
-        width: textOnly ? 'max-content' : void 0,
         height: textOnly ? 'max-content' : void 0,
         minHeight: textOnly ? 'max-content' : void 0,
         color: textOnly && isDisabled ? theme.scale4 : void 0

package/build/components/ListHelpers/ListRootStyles.js

@@ -5,7 +5,7 @@ const preventProps = {
         ])
 };
 const baseStyles = ({ width, textOnly })=>({
-        width: textOnly ? 'max-content' : width || '100%'
+        width: textOnly && !width ? 'max-content' : width || '100%'
     });
 const rootStyles = [
     baseStyles

package/build/utils/index.d.ts

@@ -1,5 +1,7 @@
 export { default as chunk } from './chunk';
 export { default as copyToClipboard } from './copyToClipboard';
 export { default as formatDate } from './formatDate';
+export { default as matchesFileTypes } from './matchesFileTypes';
 export { default as numberWithCommas } from './numberWithCommas';
+export { default as parseFileSize } from './parseFileSize';
 export { default as range } from './range';

package/build/utils/index.js

@@ -1,6 +1,8 @@
 import chunk from "./chunk.js";
 import copyToClipboard from "./copyToClipboard.js";
 import formatDate from "./formatDate.js";
+import matchesFileTypes from "./matchesFileTypes.js";
 import numberWithCommas from "./numberWithCommas.js";
+import parseFileSize from "./parseFileSize.js";
 import range from "./range.js";
-export { chunk, copyToClipboard, formatDate, numberWithCommas, range };
+export { chunk, copyToClipboard, formatDate, matchesFileTypes, numberWithCommas, parseFileSize, range };

package/build/utils/matchesFileTypes.d.ts

@@ -1,9 +1,10 @@
 import type { FileDropItem } from 'react-aria';
 /**
  * Checks if a file matches any of the accepted file types
- * @param file - The file to check
+ * Works with both File objects and FileDropItem objects
+ * @param file - The file to check (File or FileDropItem)
  * @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;
+declare const matchesFileTypes: (file: File | FileDropItem, acceptedFileTypes?: readonly string[]) => boolean;
 export default matchesFileTypes;

package/build/utils/parseFileSize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Parses a file size string (e.g., '25MB') into bytes
+ * @param sizeString - The file size string to parse (e.g., '25MB', '1.5GB')
+ * @returns The size in bytes, or null if the format is invalid
+ */
+declare const parseFileSize: (sizeString: string) => number | null;
+export default parseFileSize;

package/build/utils/parseFileSize.js

@@ -0,0 +1,16 @@
+const parseFileSize = (sizeString)=>{
+    const match = sizeString.trim().match(/^(\d+(?:\.\d+)?)\s*(KB|MB|GB|TB|B)$/i);
+    if (!match) return null;
+    const value = parseFloat(match[1]);
+    const unit = match[2].toUpperCase();
+    const multipliers = {
+        B: 1,
+        KB: 1024,
+        MB: 1048576,
+        GB: 1073741824,
+        TB: 1099511627776
+    };
+    return value * (multipliers[unit] || 1);
+};
+const utils_parseFileSize = parseFileSize;
+export { utils_parseFileSize as default };

package/package.json

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