@salutejs/plasma-new-hope 0.194.1-canary.1569.11908076676.0 → 0.195.0-canary.1534.11911237435.0

package/styled-components/es/components/Dropzone/Dropzone.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;"]);
+export var DropzoneHandlerOverlay = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-0"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;"]);
+export var Content = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-1"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;"]);
+export var TitleWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-2"
+})([""]);
+export var Title = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-3"
+})([""]);
+export var Description = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-4"
+})([""]);
+export var HiddenInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "plasma-new-hope__sc-mq500f-5"
+})(["display:none;"]);

package/styled-components/es/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/es/components/Dropzone/Dropzone.tokens.js

@@ -0,0 +1,38 @@
+export var classes = {
+  stretch: 'dropzone-stretch',
+  active: 'dropzone-active',
+  verticalContentPlacing: 'dropzone-vertical-content-placing',
+  disabled: 'dropzone-disabled'
+};
+export var privateTokens = {
+  width: '--plasma_private-dropzone-width',
+  height: '--plasma_private-dropzone-height'
+};
+export var tokens = {
+  background: '--plasma-dropzone-background',
+  backgroundHover: '--plasma-dropzone-background-hover',
+  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/es/components/Dropzone/Dropzone.types.js

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

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

@@ -0,0 +1,2 @@
+export { dropzoneRoot, dropzoneConfig } from './Dropzone';
+export { classes as dropzoneClasses, tokens as dropzoneTokens } from './Dropzone.tokens';

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

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Dropzone.tokens';
+export var base = /*#__PURE__*/css(["&.", "{opacity:var(", ");cursor:not-allowed;}"], classes.disabled, tokens.disabledOpacity);

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

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

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, privateTokens, tokens } from '../../Dropzone.tokens';
+import { Content, Description, DropzoneHandlerOverlay, Title, TitleWrapper } from '../../Dropzone.styles';
+export var base = /*#__PURE__*/css(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");&.", "{width:100%;}", "{border-radius:var(", ");}", "{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(", ");}"], tokens.padding, tokens.borderRadius, privateTokens.height, privateTokens.width, classes.stretch, DropzoneHandlerOverlay, tokens.borderRadius, Content, tokens.contentGap, TitleWrapper, tokens.titleWrapperGap, classes.verticalContentPlacing, tokens.titleWrapperGapColumn, Title, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, Description, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight);

package/styled-components/es/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/es/components/Dropzone/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Dropzone.tokens';
+import { Description, DropzoneHandlerOverlay, TitleWrapper } from '../../Dropzone.styles';
+export var base = /*#__PURE__*/css(["background:var(", ");border:var(", ");&:not(.", "):hover,&:not(.", "):focus-within{background:var(", ");border-color:var(", ");outline:none;}&.", "{border-color:var(", ");", "{background:var(", ");}}", "{color:var(", ");}", "{color:var(", ");}"], tokens.background, tokens.border, classes.active, classes.active, tokens.backgroundHover, tokens.borderColorHover, classes.active, tokens.borderColorActive, DropzoneHandlerOverlay, tokens.overlayColorActive, TitleWrapper, tokens.titleColor, Description, tokens.descriptionColor);

package/styled-components/es/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/es/components/Switch/Switch.tokens.js

@@ -23,8 +23,7 @@ export var tokens = {
   verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
-  trackBorderWidthOn: '--plasma-switch__track-checked_true-border-width',
-  trackBorderWidthOff: '--plasma-switch__track-checked_false-border-width',
+  trackBorderWidth: '--plasma-switch__track-border',
   trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
   trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
   trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',

package/styled-components/es/components/Switch/_toggleSize/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
-import { StyledInput, StyledTrigger } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", ":checked ~ ", "{border-width:var(", ",var(", "));}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackBorderWidthOff, tokens.trackBorderRadius, tokens.trackWidth, tokens.trackHeight, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledInput, StyledTrigger, tokens.trackBorderWidthOn, tokens.trackBorderWidthOff, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
+import { StyledTrigger } from '../Switch.styles';
+export var base = /*#__PURE__*/css(["", "{box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackBorderWidth, tokens.trackBorderRadius, tokens.trackWidth, tokens.trackHeight, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);

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

@@ -0,0 +1,16 @@
+var _path;
+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); }
+import React from 'react';
+export var ArrowBarDown = function ArrowBarDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.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/es/components/_Icon/Icons/IconArrowBarDown.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ArrowBarDown } from '../Icon.assets/ArrowBarDown';
+import { IconRoot } from '../IconRoot';
+export var 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.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: ArrowBarDown
+  });
+};

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

@@ -24,4 +24,5 @@ export { IconBlankOutline } from './Icons/IconBlankOutline';
 export { IconBlankPdfOutline } from './Icons/IconBlankPdfOutline';
 export { IconBlankTxtOutline } from './Icons/IconBlankTxtOutline';
 export { IconBlankXlsOutline } from './Icons/IconBlankXlsOutline';
-export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';
+export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';
+export { IconArrowBarDown } from './Icons/IconArrowBarDown';

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

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { dropzoneTokens } from '../../../../components/Dropzone';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":var(--surface-solid-card-hover);", ":var(--overlay-soft);", ":0.063rem dashed var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--text-primary);", ":var(--text-secondary);"], dropzoneTokens.background, dropzoneTokens.backgroundHover, dropzoneTokens.overlayColorActive, dropzoneTokens.border, dropzoneTokens.borderColorHover, dropzoneTokens.borderColorActive, dropzoneTokens.titleColor, dropzoneTokens.descriptionColor)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":1.5rem;", ":1.25rem;", ":0.75rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-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);"], dropzoneTokens.padding, dropzoneTokens.borderRadius, dropzoneTokens.contentGap, dropzoneTokens.titleWrapperGap, dropzoneTokens.titleWrapperGapColumn, dropzoneTokens.titleFontFamily, dropzoneTokens.titleFontSize, dropzoneTokens.titleFontStyle, dropzoneTokens.titleFontWeight, dropzoneTokens.titleLetterSpacing, dropzoneTokens.titleLineHeight, dropzoneTokens.descriptionFontFamily, dropzoneTokens.descriptionFontSize, dropzoneTokens.descriptionFontStyle, dropzoneTokens.descriptionFontWeight, dropzoneTokens.descriptionLetterSpacing, dropzoneTokens.descriptionLineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], dropzoneTokens.disabledOpacity)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { dropzoneConfig } from '../../../../components/Dropzone';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Dropzone.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropzoneConfig, config);
+export var Dropzone = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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/es/examples/plasma_b2c/components/Switch/Switch.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0;", ":0;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidthOn, switchTokens.trackBorderWidthOff, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBorderWidthOn, switchTokens.trackBorderWidthOff, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

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

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { dropzoneTokens } from '../../../../components/Dropzone';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":var(--surface-solid-card-hover);", ":var(--overlay-soft);", ":0.063rem dashed var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--text-primary);", ":var(--text-secondary);"], dropzoneTokens.background, dropzoneTokens.backgroundHover, dropzoneTokens.overlayColorActive, dropzoneTokens.border, dropzoneTokens.borderColorHover, dropzoneTokens.borderColorActive, dropzoneTokens.titleColor, dropzoneTokens.descriptionColor)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":1.5rem;", ":1.25rem;", ":0.75rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-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);"], dropzoneTokens.padding, dropzoneTokens.borderRadius, dropzoneTokens.contentGap, dropzoneTokens.titleWrapperGap, dropzoneTokens.titleWrapperGapColumn, dropzoneTokens.titleFontFamily, dropzoneTokens.titleFontSize, dropzoneTokens.titleFontStyle, dropzoneTokens.titleFontWeight, dropzoneTokens.titleLetterSpacing, dropzoneTokens.titleLineHeight, dropzoneTokens.descriptionFontFamily, dropzoneTokens.descriptionFontSize, dropzoneTokens.descriptionFontStyle, dropzoneTokens.descriptionFontWeight, dropzoneTokens.descriptionLetterSpacing, dropzoneTokens.descriptionLineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], dropzoneTokens.disabledOpacity)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { dropzoneConfig } from '../../../../components/Dropzone';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Dropzone.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropzoneConfig, config);
+export var Dropzone = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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/es/examples/plasma_web/components/Switch/Switch.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0;", ":0;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidthOn, switchTokens.trackBorderWidthOff, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/examples/plasma_web/components/Switch/Switch.outline.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBorderWidthOn, switchTokens.trackBorderWidthOff, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/index.js

@@ -63,4 +63,5 @@ export * from './components/Editable';
 export * from './components/Mask';
 export * from './components/Attach';
 export * from './components/ViewContainer';
-export * from './components/NumberInput';
+export * from './components/NumberInput';
+export * from './components/Dropzone';

package/types/components/Dropzone/Dropzone.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { RootProps } from '../../engines';
+import type { DropzoneRootProps, FileProcessHandler } from './Dropzone.types';
+export declare const dropzoneRoot: (Root: RootProps<HTMLDivElement, DropzoneRootProps>) => React.ForwardRefExoticComponent<{
+    multiple?: boolean | undefined;
+    title?: string | undefined;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconPlacement?: "left" | "top" | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+    disabled?: boolean | undefined;
+    stretch?: boolean | undefined;
+    onDragEnter?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragLeave?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragOver?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    validator?: ((files: File[]) => import("./Dropzone.types").ValidatorReturnType) | undefined;
+    onDrop?: FileProcessHandler | undefined;
+    onChoseFiles?: FileProcessHandler | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export declare const dropzoneConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, DropzoneRootProps>) => React.ForwardRefExoticComponent<{
+        multiple?: boolean | undefined;
+        title?: string | undefined;
+        description?: React.ReactNode;
+        icon?: React.ReactNode;
+        iconPlacement?: "left" | "top" | undefined;
+        size?: string | undefined;
+        view?: string | undefined;
+        disabled?: boolean | undefined;
+        stretch?: boolean | undefined;
+        onDragEnter?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragLeave?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragOver?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+        validator?: ((files: File[]) => import("./Dropzone.types").ValidatorReturnType) | undefined;
+        onDrop?: FileProcessHandler | undefined;
+        onChoseFiles?: FileProcessHandler | undefined;
+    } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Dropzone.d.ts.map

package/types/components/Dropzone/Dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAiB,iBAAiB,EAAY,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAevG,eAAO,MAAM,YAAY,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;wFAyM1E,CAAC;AAEN,eAAO,MAAM,cAAc;;;mBA3MQ,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgO9E,CAAC"}