@cloud-ru/ds-dropzone 1.0.0

package/dist/esm/components/PrivateDropZone/types.d.ts

@@ -0,0 +1,23 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react';
+import { FileFieldProps, Size } from '../../types.js';
+import { UPLOAD_MODE } from './constants.js';
+export type DragAndDropEventNames = 'onDragLeave' | 'onDragOver' | 'onDrop';
+export type PrivateDropZoneProps = WithSupportProps<{
+    isOver: boolean;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /** Контент dropzone */
+    children?: ReactNode;
+    /** Деактивирован ли компонент */
+    disabled?: boolean;
+    /**
+     * Режим
+     * @default multiple
+     */
+    mode?: (typeof UPLOAD_MODE)[keyof typeof UPLOAD_MODE];
+    /** Размер компонента */
+    size?: Size;
+    /** CSS-класс */
+    className?: string;
+} & FileFieldProps> & Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DragAndDropEventNames>;

package/dist/esm/components/PrivateDropZone/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Dropzone/index.js';
+export * from './FileUpload/index.js';
+export * from './HiddenDropZone/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './Dropzone/index.js';
+export * from './FileUpload/index.js';
+export * from './HiddenDropZone/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const UPLOAD_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TEST_IDS: {
+    readonly dropzone: {
+        readonly nativeInput: "file-input";
+    };
+    readonly fileUpload: {
+        readonly nativeInput: "file-upload__native-input";
+    };
+};

package/dist/esm/constants.js

@@ -0,0 +1,17 @@
+export const UPLOAD_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const TEST_IDS = {
+    dropzone: {
+        nativeInput: 'file-input',
+    },
+    fileUpload: {
+        nativeInput: 'file-upload__native-input',
+    },
+};

package/dist/esm/hooks/useDrag.d.ts

@@ -0,0 +1,7 @@
+import { DragEventHandler } from 'react';
+type UseDragResult = {
+    events: Record<'onDragLeave' | 'onDragOver' | 'onDrop', DragEventHandler<HTMLElement>>;
+    isOver: boolean;
+};
+export declare function useDrag(disabled: boolean): UseDragResult;
+export {};

package/dist/esm/hooks/useDrag.js

@@ -0,0 +1,27 @@
+import { debounce } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export function useDrag(disabled) {
+    const [isOver, setIsOver] = useState(false);
+    const debouncedSetIsOver = useMemo(() => debounce(setIsOver, 5), []);
+    const handleDragLeave = useCallback(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(false);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    const handleDragOver = useCallback(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(true);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    const handleDrop = useCallback(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(false);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    useEffect(() => () => debouncedSetIsOver.cancel(), [debouncedSetIsOver]);
+    const events = { onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop };
+    return { events, isOver };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils.js';

package/dist/esm/style.css

@@ -0,0 +1,428 @@
+.hiddenInput{
+  display:none;
+}
+.wrapper{
+  position:relative;
+  display:inline-block;
+}
+
+.dropZone{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+
+.hidden *{
+  visibility:hidden;
+  opacity:0;
+}
+
+.children{
+  width:100%;
+  height:100%;
+}
+@charset "UTF-8";
+.hidden{
+  display:none;
+}
+
+.content{
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  height:100%;
+}
+
+.overLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:hidden;
+  background-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+
+.borderLayer{
+  visibility:initial;
+}
+
+.acrylic{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.container{
+  cursor:pointer;
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+  padding:0;
+  border:none;
+  font-family:inherit;
+  text-decoration:none;
+  background:transparent;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  outline:0;
+  outline-offset:0;
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.container[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=transparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.container[data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=decorTransparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.container .content{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.container:focus-visible{
+  outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+.container[data-over] .overLayer{
+  visibility:inherit;
+}
+.container[data-size=s]{
+  border-radius:var(--sn-dropzone-anatomy-size-s-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-width:var(--sn-dropzone-anatomy-size-s-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+  padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.container[data-size=s] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=m]{
+  border-radius:var(--sn-dropzone-anatomy-size-m-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  min-height:var(--sn-dropzone-anatomy-size-m-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  border-width:var(--sn-dropzone-anatomy-size-m-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=m] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=l]{
+  border-radius:var(--sn-dropzone-anatomy-size-l-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  border-width:var(--sn-dropzone-anatomy-size-l-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=l] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container[data-disabled] .content{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.container .borderLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container{
+}
+.container[data-loading] .borderLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container[data-loading] .borderLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container[data-loading] .borderLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container[data-loading] .borderLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container > [data-state-layer][data-state=borderOnBackground]{
+  border-style:dashed !important;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,33 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ChangeEventHandler, Ref } from 'react';
+import { SIZE, UPLOAD_MODE } from './constants.js';
+import { AcceptInput, FileRejection } from './utils.js';
+export type UploadMode = ValueOf<typeof UPLOAD_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+/**
+ * Пропы, превращающие компонент загрузки в полноценное поле формы: нативные
+ * атрибуты скрытого `<input type="file">`, ссылка на него, валидация файлов.
+ * Общий контракт для FileUpload, Dropzone и HiddenDropZone.
+ */
+export type FileFieldProps = {
+    /** Разрешённые типы: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`). Строка или массив. */
+    accept?: AcceptInput;
+    /** Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. */
+    maxSize?: number;
+    /** Колбек с отклонёнными файлами и причиной (`maxSize` / `mime`). */
+    onFilesReject?(rejections: FileRejection[]): void;
+    /** Нативный `name` скрытого input — для отправки формы и интеграции с form-библиотеками. */
+    name?: string;
+    /** Нативный `id` скрытого input — для связи с `<label htmlFor>`. */
+    id?: string;
+    /** Нативный `required` скрытого input. */
+    required?: boolean;
+    /** Нативный `form` скрытого input — привязка к форме по `id`. */
+    form?: string;
+    /** Нативный `capture` скрытого input — источник захвата на мобильных (камера/микрофон). */
+    capture?: boolean | 'user' | 'environment';
+    /** Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием. */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). */
+    innerRef?: Ref<HTMLInputElement>;
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils.d.ts

@@ -0,0 +1,37 @@
+export declare const FILE_REJECTION_REASON: {
+    readonly MaxSize: "maxSize";
+    readonly Mime: "mime";
+};
+export type FileRejectionReason = (typeof FILE_REJECTION_REASON)[keyof typeof FILE_REJECTION_REASON];
+export type FileRejection = {
+    file: File;
+    reason: FileRejectionReason;
+};
+export type AcceptInput = string | string[] | undefined;
+/**
+ * Нормализует значение `accept` в массив отдельных токенов
+ * (MIME-типы вида `image/png`, MIME-шаблоны `image/*`, расширения `.pdf`).
+ * Принимает строку с запятыми (как в нативном HTML-атрибуте), массив или undefined.
+ */
+export declare function normalizeAccept(accept: AcceptInput): string[];
+/**
+ * Преобразует нормализованный `accept` в строку для нативного `<input accept>`
+ * (через запятую). Возвращает undefined, если список пуст — чтобы не задавать
+ * атрибут в DOM и не ограничивать picker.
+ */
+export declare function buildAcceptAttribute(accept: AcceptInput): string | undefined;
+export type PartitionOptions = {
+    maxSize?: number;
+    accept?: AcceptInput;
+};
+export type PartitionResult = {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+/**
+ * Разделяет список файлов на принятые и отклонённые согласно ограничениям
+ * `maxSize` (байты) и `accept` (MIME-типы / шаблоны / расширения).
+ * Размер проверяется раньше MIME: файл, превысивший лимит, отклоняется с
+ * причиной `maxSize`, даже если его MIME не совпадает с `accept`.
+ */
+export declare function partitionFiles(files: File[], options: PartitionOptions): PartitionResult;