@idealyst/files 1.2.96

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@idealyst/files",
+  "version": "1.2.96",
+  "description": "Cross-platform file picker, upload, and local file management for React and React Native",
+  "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/files#readme",
+  "readme": "README.md",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.native.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IdealystIO/idealyst-framework.git",
+    "directory": "packages/files"
+  },
+  "author": "Idealyst <hello@idealyst.io>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "browser": "./src/index.web.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./examples": {
+      "import": "./src/examples/index.ts",
+      "require": "./src/examples/index.ts",
+      "types": "./src/examples/index.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "peerDependencies": {
+    "@idealyst/components": "^1.2.96",
+    "@idealyst/theme": "^1.2.96",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-document-picker": ">=9.0.0",
+    "react-native-image-picker": ">=7.0.0",
+    "react-native-blob-util": ">=0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "@idealyst/components": {
+      "optional": true
+    },
+    "@idealyst/theme": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-document-picker": {
+      "optional": true
+    },
+    "react-native-image-picker": {
+      "optional": true
+    },
+    "react-native-blob-util": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@idealyst/components": "^1.2.96",
+    "@idealyst/theme": "^1.2.96",
+    "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
+    "react": "^19.1.0",
+    "react-native": "^0.80.0",
+    "react-native-unistyles": "^3.0.10",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "file",
+    "upload",
+    "picker",
+    "document",
+    "image",
+    "cross-platform",
+    "chunked-upload",
+    "background-upload"
+  ]
+}

package/src/components/DropZone.native.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import type { DropZoneProps, DropZoneState } from '../types';
+import { dropZoneStyles } from './DropZone.styles';
+import { useFilePicker } from '../hooks';
+
+/**
+ * DropZone - A touch area for file selection (Native).
+ *
+ * Note: Drag and drop is not supported on native. This component acts as a
+ * styled button that opens the file picker when pressed.
+ */
+export const DropZone: React.FC<DropZoneProps> = (props) => {
+  const {
+    onDrop,
+    onReject,
+    config,
+    children,
+    disabled = false,
+    style,
+    testID,
+  } = props;
+
+  const { pick, isPicking } = useFilePicker({ config });
+
+  const state: DropZoneState = {
+    isDragActive: false,
+    isDragReject: false,
+    isProcessing: isPicking,
+  };
+
+  // Handle press to open file picker
+  const handlePress = useCallback(async () => {
+    if (disabled || isPicking) return;
+
+    const result = await pick();
+    if (!result.cancelled && result.files.length > 0) {
+      onDrop?.(result.files);
+    }
+    if (result.rejected.length > 0) {
+      onReject?.(result.rejected);
+    }
+  }, [disabled, isPicking, pick, onDrop, onReject]);
+
+  // Apply variants
+  dropZoneStyles.useVariants({
+    active: false,
+    reject: false,
+    disabled,
+  });
+
+  // Render children
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children(state);
+    }
+
+    if (children) {
+      return children;
+    }
+
+    // Default content
+    return (
+      <View style={dropZoneStyles.content({})}>
+        <Text style={dropZoneStyles.icon({})}>
+          📁
+        </Text>
+        <Text style={dropZoneStyles.text({})}>
+          Tap to select files
+        </Text>
+        <Text style={dropZoneStyles.hint({})}>
+          or use the camera
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={disabled || isPicking}
+      activeOpacity={0.75}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel="Touch to select files"
+      style={[
+        dropZoneStyles.container({ disabled }),
+        style,
+      ]}
+    >
+      {renderChildren()}
+    </TouchableOpacity>
+  );
+};
+
+DropZone.displayName = 'DropZone';

package/src/components/DropZone.styles.tsx

@@ -0,0 +1,99 @@
+/**
+ * DropZone styles using defineStyle.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type DropZoneVariants = {
+  active: boolean;
+  reject: boolean;
+  disabled: boolean;
+};
+
+export type DropZoneDynamicProps = {
+  active?: boolean;
+  reject?: boolean;
+  disabled?: boolean;
+  intent?: Intent;
+};
+
+export const dropZoneStyles = defineStyle('DropZone', (theme: Theme) => ({
+  container: ({ active = false, reject = false, disabled = false }: DropZoneDynamicProps) => ({
+    borderWidth: 2,
+    borderStyle: 'dashed' as const,
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: active
+      ? theme.intents.primary.light
+      : reject
+        ? theme.intents.danger.light
+        : theme.colors.surface.secondary,
+    borderColor: active
+      ? theme.intents.primary.primary
+      : reject
+        ? theme.intents.danger.primary
+        : theme.colors.border.secondary,
+    opacity: disabled ? 0.6 : 1,
+    _web: {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      transition: 'all 0.2s ease',
+    },
+    variants: {
+      active: {
+        true: {
+          backgroundColor: theme.intents.primary.light,
+          borderColor: theme.intents.primary.primary,
+        },
+        false: {},
+      },
+      reject: {
+        true: {
+          backgroundColor: theme.intents.danger.light,
+          borderColor: theme.intents.danger.primary,
+        },
+        false: {},
+      },
+      disabled: {
+        true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
+    },
+  }),
+  content: (_props: DropZoneDynamicProps) => ({
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+  }),
+  icon: ({ active = false, reject = false }: DropZoneDynamicProps) => ({
+    fontSize: 48,
+    color: active
+      ? theme.intents.primary.primary
+      : reject
+        ? theme.intents.danger.primary
+        : theme.colors.text.secondary,
+  }),
+  text: ({ active = false, reject = false }: DropZoneDynamicProps) => ({
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center',
+    color: active
+      ? theme.intents.primary.primary
+      : reject
+        ? theme.intents.danger.primary
+        : theme.colors.text.primary,
+  }),
+  hint: (_props: DropZoneDynamicProps) => ({
+    fontSize: 14,
+    color: theme.colors.text.secondary,
+    textAlign: 'center',
+  }),
+}));

package/src/components/DropZone.web.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import type { DropZoneProps, DropZoneState, PickedFile, RejectedFile } from '../types';
+import { dropZoneStyles } from './DropZone.styles';
+import { useFilePicker } from '../hooks';
+
+/**
+ * DropZone - A drag-and-drop area for file selection (Web).
+ */
+export const DropZone: React.FC<DropZoneProps> = (props) => {
+  const {
+    onDrop,
+    onReject,
+    config,
+    children,
+    disabled = false,
+    style,
+    activeStyle,
+    rejectStyle,
+    testID,
+  } = props;
+
+  const { validateFiles, pick, isPicking } = useFilePicker({ config });
+  const dropRef = useRef<HTMLDivElement>(null);
+  const dragCounter = useRef(0);
+
+  const [state, setState] = useState<DropZoneState>({
+    isDragActive: false,
+    isDragReject: false,
+    isProcessing: false,
+  });
+
+  // Handle drag enter
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (disabled) return;
+
+    dragCounter.current++;
+
+    if (e.dataTransfer?.items?.length) {
+      setState(s => ({ ...s, isDragActive: true }));
+    }
+  }, [disabled]);
+
+  // Handle drag over
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  // Handle drag leave
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragCounter.current--;
+
+    if (dragCounter.current === 0) {
+      setState(s => ({ ...s, isDragActive: false, isDragReject: false }));
+    }
+  }, []);
+
+  // Handle drop
+  const handleDrop = useCallback(async (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragCounter.current = 0;
+
+    if (disabled) {
+      setState(s => ({ ...s, isDragActive: false, isDragReject: false }));
+      return;
+    }
+
+    setState(s => ({ ...s, isDragActive: false, isProcessing: true }));
+
+    const files = Array.from(e.dataTransfer?.files || []);
+    const { accepted, rejected } = validateFiles(files);
+
+    if (rejected.length > 0) {
+      onReject?.(rejected);
+    }
+
+    if (accepted.length > 0) {
+      onDrop?.(accepted);
+    }
+
+    setState(s => ({ ...s, isProcessing: false }));
+  }, [disabled, validateFiles, onDrop, onReject]);
+
+  // Handle click to open file picker
+  const handleClick = useCallback(async () => {
+    if (disabled || isPicking) return;
+
+    const result = await pick();
+    if (!result.cancelled && result.files.length > 0) {
+      onDrop?.(result.files);
+    }
+    if (result.rejected.length > 0) {
+      onReject?.(result.rejected);
+    }
+  }, [disabled, isPicking, pick, onDrop, onReject]);
+
+  // Set up drag event listeners
+  useEffect(() => {
+    const element = dropRef.current;
+    if (!element) return;
+
+    element.addEventListener('dragenter', handleDragEnter);
+    element.addEventListener('dragover', handleDragOver);
+    element.addEventListener('dragleave', handleDragLeave);
+    element.addEventListener('drop', handleDrop);
+
+    return () => {
+      element.removeEventListener('dragenter', handleDragEnter);
+      element.removeEventListener('dragover', handleDragOver);
+      element.removeEventListener('dragleave', handleDragLeave);
+      element.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);
+
+  // Apply variants
+  dropZoneStyles.useVariants({
+    active: state.isDragActive,
+    reject: state.isDragReject,
+    disabled,
+  });
+
+  // Render children
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children(state);
+    }
+
+    if (children) {
+      return children;
+    }
+
+    // Default content
+    return (
+      <View style={dropZoneStyles.content({})}>
+        <Text style={dropZoneStyles.icon({ active: state.isDragActive, reject: state.isDragReject })}>
+          {state.isDragActive ? '📂' : '📁'}
+        </Text>
+        <Text style={dropZoneStyles.text({ active: state.isDragActive, reject: state.isDragReject })}>
+          {state.isDragActive ? 'Drop files here' : 'Drag & drop files here'}
+        </Text>
+        <Text style={dropZoneStyles.hint({})}>
+          or click to browse
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={handleClick}
+      disabled={disabled}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel="Drop zone for file upload"
+      style={[
+        dropZoneStyles.container({ active: state.isDragActive, reject: state.isDragReject, disabled }),
+        style,
+        state.isDragActive && activeStyle,
+        state.isDragReject && rejectStyle,
+      ]}
+    >
+      <View ref={dropRef as any}>
+        {renderChildren()}
+      </View>
+    </Pressable>
+  );
+};
+
+DropZone.displayName = 'DropZone';

package/src/components/FilePickerButton.native.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef, useCallback } from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
+import type { FilePickerButtonProps, FilePickerResult, FilePickerError } from '../types';
+import { filePickerButtonStyles } from './FilePickerButton.styles';
+import { useFilePicker } from '../hooks';
+
+/**
+ * FilePickerButton - A styled button that opens the file picker (Native).
+ */
+export const FilePickerButton = forwardRef<View, FilePickerButtonProps>((props, ref) => {
+  const {
+    children = 'Select File',
+    pickerConfig,
+    onPick,
+    onError,
+    disabled = false,
+    loading = false,
+    variant = 'solid',
+    size = 'md',
+    intent = 'primary',
+    leftIcon = 'file-upload',
+    style,
+    testID,
+  } = props;
+
+  const { pick, isPicking } = useFilePicker({ config: pickerConfig });
+
+  const isDisabled = disabled || loading || isPicking;
+  const isLoading = loading || isPicking;
+
+  const handlePress = useCallback(async () => {
+    if (isDisabled) return;
+
+    try {
+      const result: FilePickerResult = await pick();
+      if (!result.cancelled) {
+        onPick?.(result);
+      }
+    } catch (err) {
+      onError?.(err as FilePickerError);
+    }
+  }, [isDisabled, pick, onPick, onError]);
+
+  // Apply variants
+  filePickerButtonStyles.useVariants({
+    size,
+    intent,
+    variant,
+    disabled: isDisabled,
+  });
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      onPress={handlePress}
+      disabled={isDisabled}
+      activeOpacity={0.75}
+      style={[filePickerButtonStyles.button({ intent, variant }), style]}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled }}
+      accessibilityLabel={typeof children === 'string' ? children : 'Select file'}
+    >
+      {isLoading ? (
+        <ActivityIndicator
+          size="small"
+          color={filePickerButtonStyles.spinner({ intent, variant }).color as string}
+        />
+      ) : leftIcon ? (
+        <Text style={filePickerButtonStyles.icon({ intent, variant })}>
+          {/* Icon placeholder - in a real implementation, use MDI icon */}
+          📁
+        </Text>
+      ) : null}
+      <Text style={filePickerButtonStyles.text({ intent, variant })}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+});
+
+FilePickerButton.displayName = 'FilePickerButton';

package/src/components/FilePickerButton.styles.tsx

@@ -0,0 +1,112 @@
+/**
+ * FilePickerButton styles using defineStyle.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type ButtonType = 'solid' | 'outline' | 'ghost';
+
+export type FilePickerButtonVariants = {
+  size: Size;
+  intent: Intent;
+  variant: ButtonType;
+  disabled: boolean;
+};
+
+export type FilePickerButtonDynamicProps = {
+  intent?: Intent;
+  variant?: ButtonType;
+  size?: Size;
+  disabled?: boolean;
+};
+
+export const filePickerButtonStyles = defineStyle('FilePickerButton', (theme: Theme) => ({
+  button: ({ intent = 'primary', variant = 'solid' }: FilePickerButtonDynamicProps) => ({
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+    fontWeight: '600',
+    textAlign: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    backgroundColor: variant === 'solid'
+      ? theme.intents[intent].primary
+      : variant === 'outline'
+        ? theme.colors.surface.primary
+        : 'transparent',
+    borderColor: variant === 'outline'
+      ? theme.intents[intent].primary
+      : 'transparent',
+    borderWidth: variant === 'outline' ? 1 : 0,
+    borderStyle: variant === 'outline' ? 'solid' as const : undefined,
+    _web: {
+      display: 'flex',
+      transition: 'all 0.1s ease',
+      cursor: 'pointer',
+    },
+    variants: {
+      size: {
+        paddingVertical: theme.sizes.$button.paddingVertical,
+        paddingHorizontal: theme.sizes.$button.paddingHorizontal,
+        minHeight: theme.sizes.$button.minHeight,
+      },
+      disabled: {
+        true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
+      },
+    },
+  }),
+  text: ({ intent = 'primary', variant = 'solid' }: FilePickerButtonDynamicProps) => ({
+    fontWeight: '600',
+    textAlign: 'center',
+    color: variant === 'solid'
+      ? theme.intents[intent].contrast
+      : theme.intents[intent].primary,
+    variants: {
+      size: {
+        fontSize: theme.sizes.$button.fontSize,
+        lineHeight: theme.sizes.$button.fontSize,
+      },
+      disabled: {
+        true: { opacity: 0.6 },
+        false: { opacity: 1 },
+      },
+    },
+  }),
+  icon: ({ intent = 'primary', variant = 'solid' }: FilePickerButtonDynamicProps) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: variant === 'solid'
+      ? theme.intents[intent].contrast
+      : theme.intents[intent].primary,
+    variants: {
+      size: {
+        width: theme.sizes.$button.iconSize,
+        height: theme.sizes.$button.iconSize,
+      },
+    },
+  }),
+  spinner: ({ intent = 'primary', variant = 'solid' }: FilePickerButtonDynamicProps) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: variant === 'solid'
+      ? theme.intents[intent].contrast
+      : theme.intents[intent].primary,
+    variants: {
+      size: {
+        width: theme.sizes.$button.iconSize,
+        height: theme.sizes.$button.iconSize,
+      },
+    },
+  }),
+}));