@onereach/ui-components 8.20.3 → 8.20.4-beta.4030.0

package/src/components/or-drop-area-v3/styles.ts

@@ -0,0 +1,133 @@
+import { DropAreaSize } from './props';
+
+export const DropArea: string[] = [
+  // Position
+  'relative',
+
+  // Layout
+  'layout-column',
+
+  // Shape
+  'rounded-md',
+
+  // Spacing
+  'gap-sm',
+
+  // Theme
+  'theme-background-primary-translucent-1',
+  'dark:theme-background-primary-translucent-1-dark',
+
+  'theme-border-1-primary',
+  'dark:theme-border-1-primary-dark',
+
+  '!border-dashed',
+
+  // Theme (hover)
+  'hover:theme-background-primary-translucent-2',
+  'dark:hover:theme-background-primary-translucent-2-dark',
+
+  // Theme (invalid)
+  'invalid:theme-background-error-translucent-1',
+  'dark:invalid:theme-background-error-translucent-1-dark',
+
+  'invalid:theme-border-1-error',
+  'dark:invalid:theme-border-1-error-dark',
+
+  'invalid:!border-dashed',
+
+  // Theme (invalid/hover)
+  'hover:invalid:theme-background-error-translucent-2',
+  'dark:hover:invalid:theme-background-error-translucent-2-dark',
+];
+
+export const DropAreaSizes: Record<DropAreaSize, string[]> = {
+  [DropAreaSize.M]: [
+    // Spacing
+    'pt-xl',
+    'px-xl',
+    'pb-3xl',
+  ],
+
+  [DropAreaSize.S]: [
+    // Spacing
+    'pt-md',
+    'px-xl',
+    'pb-xl',
+  ],
+};
+
+export const DropAreaControl: string[] = [
+  // Position
+  'absolute inset-0',
+
+  // Visibility
+  'opacity-0',
+
+  // Interactivity
+  'interactivity-click',
+];
+
+export const DropAreaIcon: string[] = [
+  // Layout
+  'layout-column',
+
+  // Typography
+  'leading-none',
+
+  // Theme
+  'theme-foreground-primary-translucent-2',
+  'dark:theme-foreground-primary-translucent-2-dark',
+
+  // Theme (invalid)
+  'invalid:theme-foreground-error-translucent-2',
+  'dark:invalid:theme-foreground-error-translucent-2-dark',
+];
+
+export const DropAreaIconSizes: Record<DropAreaSize, string[]> = {
+  [DropAreaSize.M]: [
+    // Typography
+    'text-[94px]',
+  ],
+
+  [DropAreaSize.S]: [
+    // Typography
+    'text-[48px]',
+  ],
+};
+
+export const DropAreaText: string[] = [
+  // Layout
+  'layout-column',
+
+  // Typography
+  'typography-body-2-regular text-center',
+
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
+];
+
+export const DropAreaTextEmphasis: string[] = [
+  // Typography
+  'typography-body-2-bold',
+
+  // Theme
+  'theme-foreground-primary',
+  'dark:theme-foreground-primary-dark',
+
+  // Theme (invalid)
+  'invalid:theme-foreground-error',
+  'dark:invalid:theme-foreground-error-dark',
+];
+
+export const DropAreaConstraints: string[] = [
+  // Layout
+  'layout-column',
+
+  // Typography
+  'typography-body-2-regular text-center',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];

package/src/components/or-drop-area-v3/utils/approximateFileSize.ts

@@ -0,0 +1,15 @@
+export function approximateFileSize(value: number): string {
+  const units = [
+    'B',
+    'kB',
+    'MB',
+    'GB',
+  ];
+
+  const exponent = Math.min(
+    Math.floor(Math.log(value) / Math.log(1024)),
+    units.length - 1
+  );
+
+  return exponent === 0 ? `${value} B` : `${value / 1024 ** exponent} ${units[exponent]}`;
+}

package/src/components/or-drop-area-v3/utils/index.ts

@@ -0,0 +1 @@
+export * from './approximateFileSize';