diff --git a/categories/web/blob/react/src/components/FileSelectBox/index.tsx b/categories/web/blob/react/src/components/FileSelectBox/index.tsx
index 9b7a30b..4cc6921 100644
--- a/categories/web/blob/react/src/components/FileSelectBox/index.tsx
+++ b/categories/web/blob/react/src/components/FileSelectBox/index.tsx
@@ -4,6 +4,40 @@ import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-uti
const { tw } = tailwind;
+const digitalUnits = [
+ 'byte',
+ 'kilobyte',
+ 'megabyte',
+ 'gigabyte',
+ 'terabyte',
+ 'petabyte',
+ 'exabyte',
+ 'zettabyte',
+ 'yottabyte',
+ 'brontobyte',
+] as const;
+
+const getCompactDigitalUnitValue = (byteCount: number) => {
+ // kibibytes, mebibytes...
+ // return byteCount / (2 ** (10 * getCompactDigitalUnitTier(byteCount)));
+ return byteCount / (10 ** (3 * getCompactDigitalUnitTier(byteCount)));
+}
+
+const getCompactDigitalUnitTier = (byteCount: string | number | bigint) => {
+ const byteCountBigInt = BigInt(byteCount);
+ for (let i = 0; i < digitalUnits.length - 1; i += 1) {
+ // kibibytes, mebibytes...
+ // if (byteCountBigInt < BigInt(2) ** BigInt(10 * i)) {
+ // return i - 1;
+ // }
+ if (byteCountBigInt < BigInt(10) ** BigInt(3 * i)) {
+ return i - 1;
+ }
+ }
+
+ return digitalUnits.length - 1;
+};
+
const FileSelectBoxDefaultPreviewComponentDerivedElementComponent = 'div' as const;
/**
@@ -62,9 +96,9 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
{!mini && (
<>
- {typeof file?.type === 'string' && (
-
{file?.type}
- )}
+
+ {file?.type || 'application/octet-stream'}
+
{typeof file?.size === 'number' && (
{new Intl.NumberFormat(undefined, {
style: 'unit',
- unit: 'kilobyte',
- unitDisplay: 'long',
- }).format(file.size)}
+ unit: digitalUnits[getCompactDigitalUnitTier(file.size)],
+ unitDisplay: getCompactDigitalUnitTier(file.size) === 0 ? 'long' : 'short',
+ }).format(getCompactDigitalUnitValue(file.size))}
)}
{typeof file?.lastModified === 'number' && (
-
+
@@ -93,10 +127,6 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
));
-const DEFAULT_ENHANCED_HEIGHT_PX = 64 as const;
-
-const DEFAULT_NON_ENHANCED_SIDE_HEIGHT_PX = 256 as const;
-
const FileSelectBoxRootElementComponent = 'div' as const;
type FileSelectBoxRootElement = HTMLElementTagNameMap[typeof FileSelectBoxRootElementComponent];
@@ -463,7 +493,7 @@ export const FileSelectBox = React.forwardRef {
+export const radioTickBoxPlugin: tailwind.PluginCreator = ({ addComponents }) => {
addComponents({
'.radio-tick-box': {
'& + label + label > :first-child > :first-child': {
@@ -59,7 +61,7 @@ export const RadioTickBox = React.forwardRef