@salutejs/plasma-new-hope 0.194.0-dev.0 → 0.195.0-canary.1534.11893340297.0

package/styled-components/cjs/components/Dropzone/Dropzone.template-docs.mdx

@@ -0,0 +1,136 @@
+---
+id: dropzone
+title: Dropzone
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Dropzone
+Компонент для загрузки файлов, без отображения индикации загрузки. 
+Компонент не предполагает наличия валиации, так как является частью Upload. 
+Но валидацию можно задать с помощью callback `validator`.
+<PropsTable name="Dropzone" />
+
+# Типизация
+
+```tsx
+type DropzoneProps = {
+    /**
+     * Массив форматов файлов, которые могут быть прикреплены (см. HTML-атрибут 'accept' для 'input').
+     */
+    acceptedFileFormats?: string[];
+    /**
+     * Позовляет выбирать несколько файлов для загрузки
+     */
+    multiple?: boolean;
+    /**
+     * Слот для Title
+     */
+    title?: string;
+    /**
+     * Слот для описания
+     */
+    description?: ReactNode;
+    /**
+     * Слот для иконки
+     */
+    icon?: ReactNode;
+    /**
+     * Расположение иконки
+     * @default 'left'
+     */
+    iconPlacement?: 'top' | 'left';
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Вид компонента
+     */
+    view?: string;
+    /**
+     * Компонент неактивен
+     */
+    disabled?: boolean;
+    /**
+     * Компонент растягивается на всю доступную ширину
+     */
+    stretch?: boolean;
+    /**
+     * Функция, вызываемая в момент вхождения курсора внутрь границ Dropzone
+     */
+    onDragEnter?: () => void;
+    /**
+     * Функция, вызываемая в момент выхода курсора из Dropzone
+     */
+    onDragLeave?: () => void;
+    /**
+     * Функция, вызываемая при нахождении курсора внутри Dropzone
+     */
+    onDragOver?: () => void;
+    /**
+     * Функция, вызываемая при drop файлов
+     */
+    onDrop?: () => void;
+    /**
+     * Функция, вызываемая для валидации файлов, перед onDropFiles
+     */
+    validator?: (files: File[]) => ValidatorReturnType;
+    /**
+     * Функция, вызываемая при наличии файлов, после onDrop
+     */
+    onDropFiles?: FileProcessHandler;
+    /**
+     * Функция, вызываемая при выборе файлов
+     */
+    onChoseFiles?: FileProcessHandler;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'accept'>;
+```
+
+# Пример
+
+```tsx live
+import React from 'react';
+import { Dropzone } from '@salutejs/{{ package }}';
+
+export function App() {
+    const onDragEnter = () => {
+        console.log("onDragEnter")
+    }
+
+    const onDragLeave = () => {
+        console.log("onDragLeave")
+    }
+
+    const onDrop = () => {
+        console.log("onDrop")
+    }
+
+    const onDropFiles = () => {
+        console.log("onDropFiles")
+    }
+
+    const onChange = () => {
+        console.log("onChange")
+    }
+
+    const onChoseFiles = () => {
+        console.log("onChoseFiles")
+    }
+
+    return (
+        <Dropzone
+            iconPlacement="top"
+            width="240"
+            title="Click to upload"
+            description="or drag and drop files here"
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    );
+}
+```

package/styled-components/cjs/components/Dropzone/Dropzone.tokens.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.privateTokens = exports.classes = void 0;
+var classes = exports.classes = {
+  stretch: 'dropzone-stretch',
+  active: 'dropzone-active',
+  verticalContentPlacing: 'dropzone-vertical-content-placing',
+  disabled: 'dropzone-disabled'
+};
+var privateTokens = exports.privateTokens = {
+  width: '--plasma_private-dropzone-width',
+  height: '--plasma_private-dropzone-height'
+};
+var tokens = exports.tokens = {
+  background: '--plasma-dropzone-background',
+  overlayColorActive: '--plasma-dropzone-overlay-color-active',
+  border: '--plasma-dropzone-border-color',
+  borderColorHover: '--plasma-dropzone-border-color-hover',
+  borderColorActive: '--plasma-dropzone-border-color-active',
+  titleColor: '--plasma-dropzone-title-color',
+  descriptionColor: '--plasma-dropzone-description-color',
+  padding: '--plasma-dropzone-padding',
+  borderRadius: '--plasma-dropzone-border-radius',
+  contentGap: '--plasma-dropzone-content-gap',
+  titleWrapperGap: '--plasma-dropzone-title-wrapper-gap',
+  titleWrapperGapColumn: '--plasma-dropzone-title-wrapper-column-gap',
+  titleFontFamily: '--plasma-dropzone-title-font-family',
+  titleFontSize: '--plasma-dropzone-title-font-size',
+  titleFontStyle: '--plasma-dropzone-title-font-style',
+  titleFontWeight: '--plasma-dropzone-title-font-weight',
+  titleLetterSpacing: '--plasma-dropzone-title-letter-spacing',
+  titleLineHeight: '--plasma-dropzone-title-line-height',
+  descriptionFontFamily: '--plasma-dropzone-description-font-family',
+  descriptionFontSize: '--plasma-dropzone-description-font-size',
+  descriptionFontStyle: '--plasma-dropzone-description-font-style',
+  descriptionFontWeight: '--plasma-dropzone-description-font-weight',
+  descriptionLetterSpacing: '--plasma-dropzone-description-letter-spacing',
+  descriptionLineHeight: '--plasma-dropzone-description-line-height',
+  disabledOpacity: '--plasma-dropzone-disabled-opacity'
+};

package/styled-components/cjs/components/Dropzone/Dropzone.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/components/Dropzone/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "dropzoneClasses", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone2.classes;
+  }
+});
+Object.defineProperty(exports, "dropzoneConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone.dropzoneConfig;
+  }
+});
+Object.defineProperty(exports, "dropzoneRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone.dropzoneRoot;
+  }
+});
+Object.defineProperty(exports, "dropzoneTokens", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone2.tokens;
+  }
+});
+var _Dropzone = /*#__PURE__*/require("./Dropzone");
+var _Dropzone2 = /*#__PURE__*/require("./Dropzone.tokens");

package/styled-components/cjs/components/Dropzone/variations/_disabled/base.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropzone = /*#__PURE__*/require("../../Dropzone.tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{opacity:var(", ");cursor:not-allowed;}"], _Dropzone.classes.disabled, _Dropzone.tokens.disabledOpacity);

package/styled-components/cjs/components/Dropzone/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-dropzone-disabled-opacity"]
+}

package/styled-components/cjs/components/Dropzone/variations/_size/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropzone = /*#__PURE__*/require("../../Dropzone.tokens");
+var _Dropzone2 = /*#__PURE__*/require("../../Dropzone.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");&.", "{width:100%;}", "{gap:var(", ");}", "{display:flex;align-items:center;justify-content:center;gap:var(", ");&.", "{flex-direction:column;gap:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], _Dropzone.tokens.padding, _Dropzone.tokens.borderRadius, _Dropzone.privateTokens.height, _Dropzone.privateTokens.width, _Dropzone.classes.stretch, _Dropzone2.Content, _Dropzone.tokens.contentGap, _Dropzone2.TitleWrapper, _Dropzone.tokens.titleWrapperGap, _Dropzone.classes.verticalContentPlacing, _Dropzone.tokens.titleWrapperGapColumn, _Dropzone2.Title, _Dropzone.tokens.titleFontFamily, _Dropzone.tokens.titleFontSize, _Dropzone.tokens.titleFontStyle, _Dropzone.tokens.titleFontWeight, _Dropzone.tokens.titleLetterSpacing, _Dropzone.tokens.titleLineHeight, _Dropzone2.Description, _Dropzone.tokens.descriptionFontFamily, _Dropzone.tokens.descriptionFontSize, _Dropzone.tokens.descriptionFontStyle, _Dropzone.tokens.descriptionFontWeight, _Dropzone.tokens.descriptionLetterSpacing, _Dropzone.tokens.descriptionLineHeight);

package/styled-components/cjs/components/Dropzone/variations/_size/tokens.json

@@ -0,0 +1,19 @@
+[
+    "--plasma-dropzone-padding",
+    "--plasma-dropzone-border-radius",
+    "--plasma-dropzone-content-gap",
+    "--plasma-dropzone-title-wrapper-gap",
+    "--plasma-dropzone-title-wrapper-gap",
+    "--plasma-dropzone-title-font-family",
+    "--plasma-dropzone-title-font-size",
+    "--plasma-dropzone-title-font-style",
+    "--plasma-dropzone-title-font-weight",
+    "--plasma-dropzone-title-letter-spacing",
+    "--plasma-dropzone-title-line-height",
+    "--plasma-dropzone-description-font-family",
+    "--plasma-dropzone-description-font-size",
+    "--plasma-dropzone-description-font-style",
+    "--plasma-dropzone-description-font-weight",
+    "--plasma-dropzone-description-letter-spacing",
+    "--plasma-dropzone-description-line-height"
+]

package/styled-components/cjs/components/Dropzone/variations/_view/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropzone = /*#__PURE__*/require("../../Dropzone.tokens");
+var _Dropzone2 = /*#__PURE__*/require("../../Dropzone.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background:var(", ");border:var(", ");&:not(.", "):hover,&:not(.", "):focus-within{border-color:var(", ");outline:none;}&.", "{border-color:var(", ");&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(", ");}}", "{color:var(", ");}", "{color:var(", ");}"], _Dropzone.tokens.background, _Dropzone.tokens.border, _Dropzone.classes.active, _Dropzone.classes.active, _Dropzone.tokens.borderColorHover, _Dropzone.classes.active, _Dropzone.tokens.borderColorActive, _Dropzone.tokens.overlayColorActive, _Dropzone2.TitleWrapper, _Dropzone.tokens.titleColor, _Dropzone2.Description, _Dropzone.tokens.descriptionColor);

package/styled-components/cjs/components/Dropzone/variations/_view/tokens.json

@@ -0,0 +1,9 @@
+[
+    "--plasma-dropzone-background",
+    "--plasma-dropzone-overlay-color-active",
+    "--plasma-dropzone-border-color",
+    "--plasma-dropzone-border-color-hover",
+    "--plasma-dropzone-border-color-active",
+    "--plasma-dropzone-title-color",
+    "--plasma-dropzone-description-color"
+]

package/styled-components/cjs/components/_Icon/Icon.assets/ArrowBarDown.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArrowBarDown = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var ArrowBarDown = exports.ArrowBarDown = function ArrowBarDown(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.95833 1.875C8.23448 1.875 8.45833 2.09886 8.45833 2.375V10.4043L11.2686 7.54868C11.4623 7.35186 11.7789 7.34933 11.9757 7.54302C12.1725 7.73672 12.1751 8.05329 11.9814 8.25011L8.3147 11.9759C8.21782 12.0744 8.08453 12.1283 7.94645 12.1251C7.80837 12.1218 7.67779 12.0615 7.5857 11.9586L4.25237 8.23278C4.06824 8.02698 4.08582 7.71088 4.29162 7.52676C4.49742 7.34264 4.81351 7.36021 4.99763 7.56601L7.45833 10.3164V2.375C7.45833 2.09886 7.68219 1.875 7.95833 1.875ZM2.5 14.0001C2.5 13.724 2.72386 13.5001 3 13.5001H13C13.2761 13.5001 13.5 13.724 13.5 14.0001C13.5 14.2763 13.2761 14.5001 13 14.5001H3C2.72386 14.5001 2.5 14.2763 2.5 14.0001Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icons/IconArrowBarDown.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconArrowBarDown = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _ArrowBarDown = /*#__PURE__*/require("../Icon.assets/ArrowBarDown");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconArrowBarDown = exports.IconArrowBarDown = function IconArrowBarDown(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _ArrowBarDown.ArrowBarDown
+  });
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "IconArrowBarDown", {
+  enumerable: true,
+  get: function get() {
+    return _IconArrowBarDown.IconArrowBarDown;
+  }
+});
 Object.defineProperty(exports, "IconBlankCsvOutline", {
   enumerable: true,
   get: function get() {
@@ -191,4 +197,5 @@ var _IconBlankOutline = /*#__PURE__*/require("./Icons/IconBlankOutline");
 var _IconBlankPdfOutline = /*#__PURE__*/require("./Icons/IconBlankPdfOutline");
 var _IconBlankTxtOutline = /*#__PURE__*/require("./Icons/IconBlankTxtOutline");
 var _IconBlankXlsOutline = /*#__PURE__*/require("./Icons/IconBlankXlsOutline");
-var _IconInfoCircleOutline = /*#__PURE__*/require("./Icons/IconInfoCircleOutline");
+var _IconInfoCircleOutline = /*#__PURE__*/require("./Icons/IconInfoCircleOutline");
+var _IconArrowBarDown = /*#__PURE__*/require("./Icons/IconArrowBarDown");

package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropzone = /*#__PURE__*/require("../../../../components/Dropzone");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--overlay-soft);", ":0.063rem dashed var(--outline-secondary);", ":var(--outline-secondary);", ":var(--outline-accent);", ":var(--text-primary);", ":var(--text-secondary);"], _Dropzone.dropzoneTokens.background, _Dropzone.dropzoneTokens.overlayColorActive, _Dropzone.dropzoneTokens.border, _Dropzone.dropzoneTokens.borderColorHover, _Dropzone.dropzoneTokens.borderColorActive, _Dropzone.dropzoneTokens.titleColor, _Dropzone.dropzoneTokens.descriptionColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":1.25rem;", ":0.75rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-h4-font-family);", ":var(--plasma-typo-body-h4-font-size);", ":var(--plasma-typo-body-h4-font-style);", ":var(--plasma-typo-body-h4-bold-font-weight);", ":var(--plasma-typo-body-h4-letter-spacing);", ":var(--plasma-typo-body-h4-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Dropzone.dropzoneTokens.padding, _Dropzone.dropzoneTokens.borderRadius, _Dropzone.dropzoneTokens.contentGap, _Dropzone.dropzoneTokens.titleWrapperGap, _Dropzone.dropzoneTokens.titleWrapperGapColumn, _Dropzone.dropzoneTokens.titleFontFamily, _Dropzone.dropzoneTokens.titleFontSize, _Dropzone.dropzoneTokens.titleFontStyle, _Dropzone.dropzoneTokens.titleFontWeight, _Dropzone.dropzoneTokens.titleLetterSpacing, _Dropzone.dropzoneTokens.titleLineHeight, _Dropzone.dropzoneTokens.descriptionFontFamily, _Dropzone.dropzoneTokens.descriptionFontSize, _Dropzone.dropzoneTokens.descriptionFontStyle, _Dropzone.dropzoneTokens.descriptionFontWeight, _Dropzone.dropzoneTokens.descriptionLetterSpacing, _Dropzone.dropzoneTokens.descriptionLineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Dropzone.dropzoneTokens.disabledOpacity)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropzone = void 0;
+var _Dropzone = /*#__PURE__*/require("../../../../components/Dropzone");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Dropzone2 = /*#__PURE__*/require("./Dropzone.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropzone.dropzoneConfig, _Dropzone2.config);
+var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx

@@ -0,0 +1,57 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Dropzone } from './Dropzone';
+
+const onDragEnter = action('onDragEnter');
+const onDragLeave = action('onDragLeave');
+const onDrop = action('onDrop');
+const onChange = action('onChange');
+const onChoseFiles = action('onChoseFiles');
+
+const iconPlacements = ['top', 'left'];
+
+const meta: Meta<typeof Dropzone> = {
+    title: 'plasma_b2c/Dropzone',
+    component: Dropzone,
+    decorators: [WithTheme],
+    argTypes: {
+        iconPlacement: {
+            options: iconPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+            defaultValue: 'top',
+        },
+        ...disableProps(['view', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Dropzone>;
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        iconPlacement: 'top',
+        width: 400,
+        height: 280,
+        disabled: false,
+        title: 'Click to upload',
+        description: 'or drag and drop files here',
+    },
+    render: (args) => (
+        <Dropzone
+            {...args}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    ),
+};

package/styled-components/cjs/examples/plasma_web/components/Dropzone/Dropzone.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropzone = /*#__PURE__*/require("../../../../components/Dropzone");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--overlay-soft);", ":0.063rem dashed var(--outline-secondary);", ":var(--outline-secondary);", ":var(--outline-accent);", ":var(--text-primary);", ":var(--text-secondary);"], _Dropzone.dropzoneTokens.background, _Dropzone.dropzoneTokens.overlayColorActive, _Dropzone.dropzoneTokens.border, _Dropzone.dropzoneTokens.borderColorHover, _Dropzone.dropzoneTokens.borderColorActive, _Dropzone.dropzoneTokens.titleColor, _Dropzone.dropzoneTokens.descriptionColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":1.25rem;", ":0.75rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-h4-font-family);", ":var(--plasma-typo-body-h4-font-size);", ":var(--plasma-typo-body-h4-font-style);", ":var(--plasma-typo-body-h4-bold-font-weight);", ":var(--plasma-typo-body-h4-letter-spacing);", ":var(--plasma-typo-body-h4-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Dropzone.dropzoneTokens.padding, _Dropzone.dropzoneTokens.borderRadius, _Dropzone.dropzoneTokens.contentGap, _Dropzone.dropzoneTokens.titleWrapperGap, _Dropzone.dropzoneTokens.titleWrapperGapColumn, _Dropzone.dropzoneTokens.titleFontFamily, _Dropzone.dropzoneTokens.titleFontSize, _Dropzone.dropzoneTokens.titleFontStyle, _Dropzone.dropzoneTokens.titleFontWeight, _Dropzone.dropzoneTokens.titleLetterSpacing, _Dropzone.dropzoneTokens.titleLineHeight, _Dropzone.dropzoneTokens.descriptionFontFamily, _Dropzone.dropzoneTokens.descriptionFontSize, _Dropzone.dropzoneTokens.descriptionFontStyle, _Dropzone.dropzoneTokens.descriptionFontWeight, _Dropzone.dropzoneTokens.descriptionLetterSpacing, _Dropzone.dropzoneTokens.descriptionLineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Dropzone.dropzoneTokens.disabledOpacity)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Dropzone/Dropzone.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropzone = void 0;
+var _Dropzone = /*#__PURE__*/require("../../../../components/Dropzone");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Dropzone2 = /*#__PURE__*/require("./Dropzone.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropzone.dropzoneConfig, _Dropzone2.config);
+var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/Dropzone/Dropzone.stories.tsx

@@ -0,0 +1,57 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Dropzone } from './Dropzone';
+
+const onDragEnter = action('onDragEnter');
+const onDragLeave = action('onDragLeave');
+const onDrop = action('onDrop');
+const onChange = action('onChange');
+const onChoseFiles = action('onChoseFiles');
+
+const iconPlacements = ['top', 'left'];
+
+const meta: Meta<typeof Dropzone> = {
+    title: 'plasma_web/Dropzone',
+    component: Dropzone,
+    decorators: [WithTheme],
+    argTypes: {
+        iconPlacement: {
+            options: iconPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+            defaultValue: 'top',
+        },
+        ...disableProps(['view', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Dropzone>;
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        iconPlacement: 'top',
+        width: 400,
+        height: 280,
+        disabled: false,
+        title: 'Click to upload',
+        description: 'or drag and drop files here',
+    },
+    render: (args) => (
+        <Dropzone
+            {...args}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    ),
+};

package/styled-components/cjs/index.js

@@ -706,4 +706,15 @@ Object.keys(_NumberInput).forEach(function (key) {
       return _NumberInput[key];
     }
   });
+});
+var _Dropzone = /*#__PURE__*/require("./components/Dropzone");
+Object.keys(_Dropzone).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropzone[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropzone[key];
+    }
+  });
 });