@quen-ui/components 0.0.14 → 1.0.1

package/dist/Textarea/styles.es.js

@@ -1,32 +1,17 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import Text from "../typography/Text/Text.es.js";
-const getHeight = (size) => {
-  switch (size) {
-    case "l":
-      return 3;
-    //48px
-    case "s":
-      return 2;
-    //32px
-    case "xs":
-      return 1.5;
-    // 24px
-    case "m":
-    default:
-      return 2.5;
-  }
-};
-const TextareaComponentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  .text-field__required {
-    color: ${({ theme }) => theme.colors.red[9]};
+import InputBase from "../InputBase/InputBase.es.js";
+const TextareaComponentWrapper = styled(InputBase)`
+  .quen-ui__input-base__container {
+    padding-right: 0.75rem;  
   }
   
-  .text-field__error-message {
-    color: ${({ theme }) => theme.colors.red[9]};
+  textarea {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    height: 100%;
+    background: ${({ disabled, theme }) => disabled && theme.components.Input.disabledBackground};
+    color: ${({ disabled, theme }) => disabled && theme.components.Input.disabledColor};
   }
 `;
 const TextareaStyled = styled(Text)`
@@ -37,44 +22,7 @@ const TextareaStyled = styled(Text)`
   width: 100%;
   background: transparent;
 `;
-const TextareaWrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
-})`
-  min-height: ${({ size }) => getHeight(size)}rem;
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.gray[3]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  gap: 0.5rem;
-  color: ${({ theme }) => theme.colors.gray[9]};
-
-  &:hover {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.gray[8]};
-  }
-
-  ${({ focus }) => focus && css`
-      border-bottom: 2px solid
-        ${({ theme }) => theme.colors.violet[9]}!important;
-    `}
-  
-  ${({ error, theme }) => error && css`
-    border-bottom: 2px solid ${theme.colors.red[9]}!important;
-  `};
-
-  ${({ disabled, theme }) => disabled && css`
-    background: ${theme.colors.gray[2]};
-    border-bottom: 1px solid ${theme.colors.gray[4]}!important;
-    textarea {
-      background: ${theme.colors.gray[2]};
-      color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
-    }
-  `};
-`;
 export {
   TextareaComponentWrapper,
-  TextareaStyled,
-  TextareaWrapper
+  TextareaStyled
 };

package/dist/Textarea/types.d.ts

@@ -1,28 +1,10 @@
 import { default as React } from 'react';
-import { TQuenSize } from '../types/size';
-export interface ITextareaProps {
-    /** Visual size */
-    size?: TQuenSize;
-    /** Field label */
-    label?: string;
-    /** Marks as required */
-    required?: boolean;
-    /** Error state/message */
-    error?: string | boolean;
+import { IInputBaseProps } from '../InputBase';
+export interface ITextareaProps extends IInputBaseProps {
     /** Placeholder text */
     placeholder?: string;
-    /** Left adornment */
-    leftContent?: React.ReactNode;
-    /** Right adornment */
-    rightContent?: React.ReactNode;
-    /** Disables interaction */
-    disabled?: boolean;
-    /** DOM ID for textarea  */
-    id?: string;
     /** Form textarea name */
     name?: string;
-    /** Container class */
-    className?: string;
     /** Blur event handler */
     onBlur?: React.FocusEventHandler;
     /** Focus event handler */
@@ -43,5 +25,4 @@ export interface ITextareaProps {
     maxRows?: number;
     /**	Minimum visible rows */
     minRows?: number;
-    [key: string]: any;
 }

package/dist/Tooltip/Tooltip.cjs.js

@@ -13,6 +13,7 @@ const Tooltip = ({
   color = "grayViolet",
   width,
   className,
+  classNameContent,
   ...props
 }) => {
   const [hovered, setHovered] = React.useState(false);
@@ -43,13 +44,14 @@ const Tooltip = ({
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      className,
       ...props,
       children: [
         children,
         show && /* @__PURE__ */ jsxRuntime.jsxs(
           styles.TooltipContent,
           {
-            className,
+            className: classNameContent,
             width,
             state: status,
             zIndex,

package/dist/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ITooltipProps } from './types';
-declare const Tooltip: ({ children, text, position, open: controlledOpen, show, zIndex, color, width, className, ...props }: ITooltipProps) => React.ReactElement;
+declare const Tooltip: ({ children, text, position, open: controlledOpen, show, zIndex, color, width, className, classNameContent, ...props }: ITooltipProps) => React.ReactElement;
 export default Tooltip;

package/dist/Tooltip/Tooltip.es.js

@@ -12,6 +12,7 @@ const Tooltip = ({
   color = "grayViolet",
   width,
   className,
+  classNameContent,
   ...props
 }) => {
   const [hovered, setHovered] = useState(false);
@@ -42,13 +43,14 @@ const Tooltip = ({
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      className,
       ...props,
       children: [
         children,
         show && /* @__PURE__ */ jsxs(
           TooltipContent,
           {
-            className,
+            className: classNameContent,
             width,
             state: status,
             zIndex,

package/dist/Tooltip/types.d.ts

@@ -18,5 +18,8 @@ export interface ITooltipProps {
     width?: number;
     /** Custom CSS class */
     className?: string;
+    /** Custom CSS class for content */
+    classNameContent?: string;
+    style?: React.CSSProperties;
     [key: string]: any;
 }

package/dist/assets/box.svg.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SvgBox = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "304.000000pt", height: "266.000000pt", viewBox: "0 0 304.000000 266.000000", preserveAspectRatio: "xMidYMid meet", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { transform: "translate(0.000000,266.000000) scale(0.100000,-0.100000)", fill: "#000000", stroke: "none" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1190 2584 c-96 -30 -276 -86 -400 -125 -124 -39 -265 -83 -315 -99 -49 -16 -130 -40 -180 -55 -154 -45 -241 -75 -258 -88 -44 -35 -29 -63 170 -340 35 -48 63 -93 63 -98 0 -6 -61 -76 -135 -157 l-135 -147 2 -69 3 -69 120 -56 c66 -31 126 -60 133 -64 9 -6 12 -87 12 -348 0 -278 3 -345 15 -368 14 -28 25 -35 146 -89 35 -16 245 -113 465 -216 232 -107 414 -186 431 -186 40 0 1207 396 1283 435 16 8 38 27 49 41 20 26 21 37 21 379 l0 353 121 43 c121 42 149 62 149 103 0 11 -58 97 -130 191 -71 94 -132 179 -135 187 -7 17 65 80 238 206 84 62 97 76 97 101 0 16 -6 33 -12 39 -7 6 -121 56 -253 112 -528 225 -690 290 -725 290 -31 0 -56 -17 -187 -125 -84 -69 -156 -125 -162 -125 -5 0 -31 39 -57 88 -89 163 -173 300 -189 306 -33 12 -73 4 -245 -50z m266 -116 c131 -221 143 -243 136 -249 -7 -7 -523 -171 -1002 -319 -140 -44 -258 -76 -263 -71 -28 28 -235 337 -229 342 4 4 198 66 432 138 234 72 517 160 630 196 113 35 212 64 220 64 9 1 41 -41 76 -101z m625 -64 c28 -14 113 -49 188 -79 143 -55 592 -244 637 -268 l26 -14 -25 -16 c-14 -9 -83 -62 -153 -118 l-127 -102 -46 20 c-139 61 -793 353 -815 365 -25 13 -24 14 116 126 77 61 143 112 145 112 2 0 27 -12 54 -26z m-461 -599 l0 -334 -156 -50 -156 -50 -201 88 c-368 161 -687 304 -685 306 2 2 197 64 433 138 659 208 749 236 758 237 4 0 7 -151 7 -335z m540 128 c179 -80 335 -151 348 -157 21 -11 13 -15 -90 -48 -62 -19 -239 -76 -393 -125 -154 -50 -290 -94 -302 -97 l-23 -7 0 320 0 320 68 -30 c37 -17 213 -96 392 -176z m-1440 -384 c212 -93 418 -184 458 -201 39 -17 72 -36 72 -42 0 -21 -280 -321 -298 -320 -9 1 -127 52 -262 114 -135 61 -303 138 -375 170 -240 107 -285 129 -285 139 0 14 281 311 294 311 6 0 185 -77 396 -171z m2024 -9 c69 -93 126 -174 126 -179 0 -5 -93 -41 -207 -79 -115 -39 -381 -129 -591 -201 -211 -72 -389 -131 -396 -131 -12 0 -301 337 -301 352 0 9 173 68 670 227 193 62 395 127 450 146 55 18 105 33 111 34 6 0 68 -75 138 -169z m-1464 -875 l0 -564 -39 17 c-21 9 -232 107 -469 216 -408 189 -430 201 -436 229 -10 48 -7 617 3 617 5 0 71 -29 147 -64 461 -212 454 -209 489 -200 14 3 80 69 160 160 75 85 139 154 141 154 2 0 4 -254 4 -565z m368 218 c21 -5 135 30 482 147 250 84 461 155 468 158 9 3 12 -65 12 -319 0 -178 -4 -330 -9 -337 -10 -16 -114 -55 -616 -228 -214 -75 -441 -153 -503 -175 -62 -21 -118 -39 -123 -39 -5 0 -9 220 -9 561 l0 560 135 -160 c93 -111 144 -163 163 -168z" })));
+module.exports = SvgBox;

package/dist/assets/box.svg.es.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgBox = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "304.000000pt", height: "266.000000pt", viewBox: "0 0 304.000000 266.000000", preserveAspectRatio: "xMidYMid meet", ...props }, /* @__PURE__ */ React.createElement("g", { transform: "translate(0.000000,266.000000) scale(0.100000,-0.100000)", fill: "#000000", stroke: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M1190 2584 c-96 -30 -276 -86 -400 -125 -124 -39 -265 -83 -315 -99 -49 -16 -130 -40 -180 -55 -154 -45 -241 -75 -258 -88 -44 -35 -29 -63 170 -340 35 -48 63 -93 63 -98 0 -6 -61 -76 -135 -157 l-135 -147 2 -69 3 -69 120 -56 c66 -31 126 -60 133 -64 9 -6 12 -87 12 -348 0 -278 3 -345 15 -368 14 -28 25 -35 146 -89 35 -16 245 -113 465 -216 232 -107 414 -186 431 -186 40 0 1207 396 1283 435 16 8 38 27 49 41 20 26 21 37 21 379 l0 353 121 43 c121 42 149 62 149 103 0 11 -58 97 -130 191 -71 94 -132 179 -135 187 -7 17 65 80 238 206 84 62 97 76 97 101 0 16 -6 33 -12 39 -7 6 -121 56 -253 112 -528 225 -690 290 -725 290 -31 0 -56 -17 -187 -125 -84 -69 -156 -125 -162 -125 -5 0 -31 39 -57 88 -89 163 -173 300 -189 306 -33 12 -73 4 -245 -50z m266 -116 c131 -221 143 -243 136 -249 -7 -7 -523 -171 -1002 -319 -140 -44 -258 -76 -263 -71 -28 28 -235 337 -229 342 4 4 198 66 432 138 234 72 517 160 630 196 113 35 212 64 220 64 9 1 41 -41 76 -101z m625 -64 c28 -14 113 -49 188 -79 143 -55 592 -244 637 -268 l26 -14 -25 -16 c-14 -9 -83 -62 -153 -118 l-127 -102 -46 20 c-139 61 -793 353 -815 365 -25 13 -24 14 116 126 77 61 143 112 145 112 2 0 27 -12 54 -26z m-461 -599 l0 -334 -156 -50 -156 -50 -201 88 c-368 161 -687 304 -685 306 2 2 197 64 433 138 659 208 749 236 758 237 4 0 7 -151 7 -335z m540 128 c179 -80 335 -151 348 -157 21 -11 13 -15 -90 -48 -62 -19 -239 -76 -393 -125 -154 -50 -290 -94 -302 -97 l-23 -7 0 320 0 320 68 -30 c37 -17 213 -96 392 -176z m-1440 -384 c212 -93 418 -184 458 -201 39 -17 72 -36 72 -42 0 -21 -280 -321 -298 -320 -9 1 -127 52 -262 114 -135 61 -303 138 -375 170 -240 107 -285 129 -285 139 0 14 281 311 294 311 6 0 185 -77 396 -171z m2024 -9 c69 -93 126 -174 126 -179 0 -5 -93 -41 -207 -79 -115 -39 -381 -129 -591 -201 -211 -72 -389 -131 -396 -131 -12 0 -301 337 -301 352 0 9 173 68 670 227 193 62 395 127 450 146 55 18 105 33 111 34 6 0 68 -75 138 -169z m-1464 -875 l0 -564 -39 17 c-21 9 -232 107 -469 216 -408 189 -430 201 -436 229 -10 48 -7 617 3 617 5 0 71 -29 147 -64 461 -212 454 -209 489 -200 14 3 80 69 160 160 75 85 139 154 141 154 2 0 4 -254 4 -565z m368 218 c21 -5 135 30 482 147 250 84 461 155 468 158 9 3 12 -65 12 -319 0 -178 -4 -330 -9 -337 -10 -16 -114 -55 -616 -228 -214 -75 -441 -153 -503 -175 -62 -21 -118 -39 -123 -39 -5 0 -9 220 -9 561 l0 560 135 -160 c93 -111 144 -163 163 -168z" })));
+export {
+  SvgBox as default
+};

package/dist/index.cjs.js

@@ -30,6 +30,21 @@ const Switch = require("./Switch/Switch.cjs.js");
 const Tag = require("./Tag/Tag.cjs.js");
 const Textarea = require("./Textarea/Textarea.cjs.js");
 const Tooltip = require("./Tooltip/Tooltip.cjs.js");
+const Menu = require("./Menu/Menu.cjs.js");
+const EmptyState = require("./EmptyState/EmptyState.cjs.js");
+const Pagination = require("./Pagination/Pagination.cjs.js");
+const index$4 = require("./Accordion/index.cjs.js");
+const index$5 = require("./message/index.cjs.js");
+const index$6 = require("./Form/index.cjs.js");
+const Calendar = require("./Calendar/Calendar.cjs.js");
+const InputDate = require("./InputDate/InputDate.cjs.js");
+const Slider = require("./Slider/Slider.cjs.js");
+const index$7 = require("./Skeleton/index.cjs.js");
+const Spoiler = require("./Spoiler/Spoiler.cjs.js");
+const Highlight = require("./Highlight/Highlight.cjs.js");
+const LoadingOverlay = require("./LoadingOverlay/LoadingOverlay.cjs.js");
+const index$8 = require("./ColorPicker/index.cjs.js");
+const RichTextEditor = require("./RichTextEditor/RichTextEditor.cjs.js");
 exports.Title = Title;
 exports.Text = Text;
 exports.Button = Button;
@@ -61,3 +76,18 @@ exports.Switch = Switch;
 exports.Tag = Tag;
 exports.Textarea = Textarea;
 exports.Tooltip = Tooltip;
+exports.Menu = Menu;
+exports.EmptyState = EmptyState;
+exports.Pagination = Pagination;
+exports.Accordion = index$4.Accordion;
+exports.message = index$5.message;
+exports.Form = index$6.Form;
+exports.Calendar = Calendar;
+exports.InputDate = InputDate;
+exports.Slider = Slider;
+exports.Skeleton = index$7.Skeleton;
+exports.Spoiler = Spoiler;
+exports.Highlight = Highlight;
+exports.LoadingOverlay = LoadingOverlay;
+exports.ColorPicker = index$8.ColorPicker;
+exports.RichTextEditor = RichTextEditor;

package/dist/index.d.ts

@@ -3,13 +3,13 @@ export type { ITitleProps, TTitleType, TTitleSize } from './typography/Title';
 export { Text } from './typography/Text';
 export type { ITextProps, TTextType, TTextSize } from './typography/Text';
 export { Button } from './Button';
-export type { TButtonSize, IButtonProps, TButtonView } from './Button';
+export type { IButtonProps, TButtonView } from './Button';
 export { Card } from './Card';
 export type { ICardProps } from './Card';
 export { Flex } from './Flex';
 export type { IFlexProps } from './Flex';
 export { Layout } from './Layout';
-export type { ILayoutProps, ILayoutSidebarProps, ILayoutHeaderProps, ILayoutMenuItem } from './Layout';
+export type { ILayoutProps, ILayoutSidebarProps, ILayoutHeaderProps } from './Layout';
 export { default as Tabs } from './Tabs';
 export { Alert } from './Alert';
 export type { IAlertProps } from './Alert';
@@ -48,3 +48,18 @@ export { Tag, type ITagProps } from './Tag';
 export { Textarea, type ITextareaProps } from './Textarea';
 export type { TQuenSize } from './types/size';
 export { Tooltip, type ITooltipProps } from './Tooltip';
+export { Menu, type IMenuProps, type TMenuPropGetItemIcon, type IMenuDefaultItem, type TMenuPropGetItemKey, type TMenuPropGetItemDisabled, type TMenuPropGetItemOnClick, type TMenuPropGetItemLabel, type TMenuPropGetItemClassName } from './Menu';
+export { EmptyState, type IEmptyStateProps } from './EmptyState';
+export { Pagination, type IPaginationProps } from './Pagination';
+export { Accordion, type IAccordionDefaultItem, type TAccordionGetItemDisabled, type TAccordionGetItemStyle, type TAccordionGetItemKey, type TAccordionGetItemShowArrow, type TAccordionVariants, type TAccordionGetItemLabel, type TAccordionGetItemClassName, type IAccordionGroupProps, type IAccordionGroupApi, type IAccordionProps, type TAccordionGetItemChildren, type TAccordionGetItemLeftContent, type TAccordionGetItemRightContent } from './Accordion';
+export { message, type IMessageConfig } from './message';
+export { Form, type IFormProps, type IFormFieldProps, type IFormFieldArrayProps, type IUseFormOptions, type IFormValidationRule, type IFormFieldError, type IFormInstance, type TFormFieldValidate, type TFormOnValueChange } from './Form';
+export { Calendar, type ICalendarLocale, type TCalendarProps, type TCalendarRenderDay, type TGetDayProps } from './Calendar';
+export { InputDate, type TInputDateProps } from './InputDate';
+export { Slider, type ISliderProps } from './Slider';
+export { Skeleton, type ISkeletonProps, type ISkeletonLayoutProps, type ISkeletonLayoutSchema, type ISkeletonAvatarProps, type ISkeletonButtonProps, type TSkeletonListProps } from './Skeleton';
+export { Spoiler, type ISpoilerProps } from './Spoiler';
+export { Highlight, type IHighlightProps } from './Highlight';
+export { LoadingOverlay, type ILoadingOverlayProps } from './LoadingOverlay';
+export { ColorPicker, type IColorPickerProps, type TRgbColor, type THslColor, type TColorValue, type TColorFormat } from './ColorPicker';
+export { RichTextEditor, type IRichTextEditorProps, type IRichTextEditorPlugin, type IRichTextEditorHandle, type IRichTextEditorPluginActionParams, type IRichTextEditorPluginContext } from './RichTextEditor';

package/dist/index.es.js

@@ -28,29 +28,58 @@ import { default as default22 } from "./Switch/Switch.es.js";
 import { default as default23 } from "./Tag/Tag.es.js";
 import { default as default24 } from "./Textarea/Textarea.es.js";
 import { default as default25 } from "./Tooltip/Tooltip.es.js";
+import { default as default26 } from "./Menu/Menu.es.js";
+import { default as default27 } from "./EmptyState/EmptyState.es.js";
+import { default as default28 } from "./Pagination/Pagination.es.js";
+import { Accordion } from "./Accordion/index.es.js";
+import { message } from "./message/index.es.js";
+import { Form } from "./Form/index.es.js";
+import { default as default29 } from "./Calendar/Calendar.es.js";
+import { default as default30 } from "./InputDate/InputDate.es.js";
+import { default as default31 } from "./Slider/Slider.es.js";
+import { Skeleton } from "./Skeleton/index.es.js";
+import { default as default32 } from "./Spoiler/Spoiler.es.js";
+import { default as default33 } from "./Highlight/Highlight.es.js";
+import { default as default34 } from "./LoadingOverlay/LoadingOverlay.es.js";
+import { ColorPicker } from "./ColorPicker/index.es.js";
+import { default as default35 } from "./RichTextEditor/RichTextEditor.es.js";
 export {
+  Accordion,
   default8 as Alert,
   default9 as Avatar,
   BADGE_COLOR,
   default10 as Badge,
   default11 as Breadcrumbs,
   default4 as Button,
+  default29 as Calendar,
   default5 as Card,
   Checkbox,
+  ColorPicker,
   default12 as Divider,
   default13 as Drawer,
   default14 as Dropdown,
+  default27 as EmptyState,
   default6 as Flex,
+  Form,
+  default33 as Highlight,
   default16 as Image,
+  default30 as InputDate,
   default18 as InputNumber,
   Layout,
   default17 as Loader,
+  default34 as LoadingOverlay,
+  default26 as Menu,
   default20 as Modal,
   NOTIFICATION_STATUSES,
   NotificationInstance,
+  default28 as Pagination,
   default21 as Progress,
   RadioButton,
+  default35 as RichTextEditor,
   default19 as Select,
+  Skeleton,
+  default31 as Slider,
+  default32 as Spoiler,
   default22 as Switch,
   default7 as Tabs,
   default23 as Tag,
@@ -59,5 +88,6 @@ export {
   default24 as Textarea,
   default2 as Title,
   default25 as Tooltip,
+  message,
   notifications
 };

package/dist/message/Message.cjs.js

@@ -0,0 +1,42 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const iconInfo = require("../assets/icon-info.svg.cjs.js");
+const iconSuccess = require("../assets/icon-success.svg.cjs.js");
+const iconWarning = require("../assets/icon-warning.svg.cjs.js");
+const iconError = require("../assets/icon-error.svg.cjs.js");
+const Loader = require("../Loader/Loader.cjs.js");
+const Message = ({ message, placement, leaving }) => {
+  const icon = React.useMemo(() => {
+    switch (message.status) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconSuccess, {});
+      case "loading":
+        return /* @__PURE__ */ jsxRuntime.jsx(Loader, { view: "oval", size: "s" });
+      case "warning":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconWarning, {});
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconError, {});
+      case "info":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(iconInfo, {});
+    }
+  }, [message.status]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.MessageStyled,
+    {
+      placement,
+      leaving,
+      className: message.className,
+      style: message.style,
+      onClick: message.onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(styles.MessageIconWrapper, { status: message.status, children: message.icon ?? icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "s", children: message.content })
+      ]
+    }
+  );
+};
+module.exports = Message;

package/dist/message/Message.d.ts

@@ -0,0 +1,3 @@
+import { IMessageProps } from './types';
+declare const Message: ({ message, placement, leaving }: IMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default Message;

package/dist/message/Message.es.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { MessageStyled, MessageIconWrapper } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+import SvgIconInfo from "../assets/icon-info.svg.es.js";
+import SvgIconSuccess from "../assets/icon-success.svg.es.js";
+import SvgIconWarning from "../assets/icon-warning.svg.es.js";
+import SvgIconError from "../assets/icon-error.svg.es.js";
+import Loader from "../Loader/Loader.es.js";
+const Message = ({ message, placement, leaving }) => {
+  const icon = useMemo(() => {
+    switch (message.status) {
+      case "success":
+        return /* @__PURE__ */ jsx(SvgIconSuccess, {});
+      case "loading":
+        return /* @__PURE__ */ jsx(Loader, { view: "oval", size: "s" });
+      case "warning":
+        return /* @__PURE__ */ jsx(SvgIconWarning, {});
+      case "error":
+        return /* @__PURE__ */ jsx(SvgIconError, {});
+      case "info":
+      default:
+        return /* @__PURE__ */ jsx(SvgIconInfo, {});
+    }
+  }, [message.status]);
+  return /* @__PURE__ */ jsxs(
+    MessageStyled,
+    {
+      placement,
+      leaving,
+      className: message.className,
+      style: message.style,
+      onClick: message.onClick,
+      children: [
+        /* @__PURE__ */ jsx(MessageIconWrapper, { status: message.status, children: message.icon ?? icon }),
+        /* @__PURE__ */ jsx(Text, { size: "s", children: message.content })
+      ]
+    }
+  );
+};
+export {
+  Message as default
+};

package/dist/message/MessageContext.cjs.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
+const styles = require("./styles.cjs.js");
+const Message = require("./Message.cjs.js");
+const MessageContext = React.createContext(null);
+const MessageProvider = ({
+  children,
+  placement
+}) => {
+  const [messages, setMessages] = React.useState([]);
+  const markLeaving = React.useCallback((key) => {
+    setMessages(
+      (prev) => prev.map((m) => m.key === key ? { ...m, leaving: true } : m)
+    );
+    setTimeout(() => {
+      setMessages((prev) => prev.filter((m) => m.key !== key));
+    }, 300);
+  }, []);
+  const addMessage = React.useCallback(
+    (status, content, duration, onClose, config) => {
+      const key = config?.key ?? helpers.randomId("quen-ui__message");
+      const msg = {
+        key,
+        status,
+        content,
+        duration: duration ?? config?.duration ?? 2,
+        onClose,
+        ...config
+      };
+      setMessages((prev) => [...prev, msg]);
+      if (msg.duration !== 0) {
+        setTimeout(() => {
+          markLeaving(key);
+          msg.onClose?.();
+        }, msg.duration * 1e3);
+      }
+      return key;
+    },
+    [markLeaving]
+  );
+  const destroy = React.useCallback((key) => {
+    if (key) {
+      markLeaving(key);
+    } else {
+      setMessages((prev) => prev.map((m) => ({ ...m, leaving: true })));
+      setTimeout(() => setMessages([]), 300);
+    }
+  }, []);
+  const api = React.useMemo(
+    () => ({
+      open: (config) => addMessage(
+        config.status ?? "info",
+        config.content,
+        config.duration,
+        config.onClose,
+        config
+      ),
+      success: (content, duration, onClose, config) => addMessage("success", content, duration, onClose, config),
+      error: (content, duration, onClose, config) => addMessage("error", content, duration, onClose, config),
+      info: (content, duration, onClose, config) => addMessage("info", content, duration, onClose, config),
+      warning: (content, duration, onClose, config) => addMessage("warning", content, duration, onClose, config),
+      loading: (content, duration, onClose, config) => addMessage("loading", content, duration, onClose, config),
+      destroy
+    }),
+    [addMessage, destroy]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(MessageContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(styles.MessageContainerStyled, { placement, children: messages.map((msg) => /* @__PURE__ */ jsxRuntime.jsx(
+      Message,
+      {
+        message: msg,
+        placement,
+        leaving: !!msg.leaving
+      },
+      msg.key
+    )) })
+  ] });
+};
+function useMessage(options) {
+  const [api, setApi] = React.useState({
+    open: () => "",
+    success: () => "",
+    error: () => "",
+    info: () => "",
+    warning: () => "",
+    loading: () => "",
+    destroy: () => {
+    }
+  });
+  const contextHolder = /* @__PURE__ */ jsxRuntime.jsx(MessageProvider, { placement: options?.placement, children: /* @__PURE__ */ jsxRuntime.jsx(MessageContext.Consumer, { children: (value) => {
+    if (value) setApi(value);
+    return null;
+  } }) });
+  return [api, contextHolder];
+}
+exports.MessageProvider = MessageProvider;
+exports.useMessage = useMessage;

package/dist/message/MessageContext.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { IMessageInstance, IUseMessageOptions } from './types';
+export declare const MessageProvider: ({ children, placement }: PropsWithChildren<IUseMessageOptions>) => import("react/jsx-runtime").JSX.Element;
+export declare function useMessage(options?: IUseMessageOptions): [IMessageInstance, ReactElement];