@quen-ui/components 0.0.14 → 1.0.0

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/_virtual/client.cjs.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const client = require("../node_modules/react-dom/client.cjs.js");
+var clientExports = client.__require();
+exports.clientExports = clientExports;

package/dist/_virtual/client.cjs2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var client = { exports: {} };
+exports.__module = client;

package/dist/_virtual/client.es.js

@@ -0,0 +1,5 @@
+import { __require as requireClient } from "../node_modules/react-dom/client.es.js";
+var clientExports = requireClient();
+export {
+  clientExports as c
+};

package/dist/_virtual/client.es2.js

@@ -0,0 +1,4 @@
+var client = { exports: {} };
+export {
+  client as __module
+};

package/dist/_virtual/index.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler = { exports: {} };
+exports.__module = scheduler;

package/dist/_virtual/index.es.js

@@ -0,0 +1,4 @@
+var scheduler = { exports: {} };
+export {
+  scheduler as __module
+};

package/dist/_virtual/react-dom-client.development.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomClient_development = {};
+exports.__exports = reactDomClient_development;

package/dist/_virtual/react-dom-client.development.es.js

@@ -0,0 +1,4 @@
+var reactDomClient_development = {};
+export {
+  reactDomClient_development as __exports
+};

package/dist/_virtual/react-dom-client.production.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomClient_production = {};
+exports.__exports = reactDomClient_production;

package/dist/_virtual/react-dom-client.production.es.js

@@ -0,0 +1,4 @@
+var reactDomClient_production = {};
+export {
+  reactDomClient_production as __exports
+};

package/dist/_virtual/scheduler.development.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler_development = {};
+exports.__exports = scheduler_development;

package/dist/_virtual/scheduler.development.es.js

@@ -0,0 +1,4 @@
+var scheduler_development = {};
+export {
+  scheduler_development as __exports
+};

package/dist/_virtual/scheduler.production.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler_production = {};
+exports.__exports = scheduler_production;

package/dist/_virtual/scheduler.production.es.js

@@ -0,0 +1,4 @@
+var scheduler_production = {};
+export {
+  scheduler_production as __exports
+};

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.d.ts

@@ -1,50 +1 @@
-export { Title } from './typography/Title';
-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 { 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 { default as Tabs } from './Tabs';
-export { Alert } from './Alert';
-export type { IAlertProps } from './Alert';
-export { Avatar } from './Avatar';
-export type { IAvatarProps } from './Avatar';
-export { Badge, BADGE_COLOR } from './Badge';
-export type { TBadgeColor, IBadgeProps } from './Badge';
-export { Breadcrumbs } from './Breadcrumbs';
-export type { IBreadcrumbItemProps, IBreadcrumbItemDefault, IBreadcrumbsProps, TBreadcrumbPropGetItemIcon, TBreadcrumbPropGetItemOnClick, TBreadcrumbsPropOnItemClick, TBreadcrumbPropGetItemHref, TBreadcrumbPropGetItemLabel, TBreadcrumbsPropGetItemClassname } from './Breadcrumbs';
-export { Checkbox } from './Checkbox';
-export type { ICheckboxGroupProps, ICheckboxProps, TCheckboxGroupPropGetItemKey, TCheckboxGroupPropGetItemValue, TCheckboxGroupPropGetItemLabel, ICheckboxGroupDefaultItem, TCheckboxGroupPropGetItemDisabled } from './Checkbox';
-export { Divider } from './Divider';
-export type { IDividerProps } from './Divider';
-export { Drawer } from './Drawer';
-export type { IDrawerProps } from './Drawer';
-export { Dropdown } from './Dropdown';
-export type { IDropdownMappersItem, IDropdownProps, TDropdownListProps, TDropdownGetItemKey, TDropdownGetItemDisabled, IDropdownDefaultItem, TDropdownDirection, TDropdownOnClick, TDropdownPortalProps, TDropdownSortGroup, TDropdownItemProps, TDropdownGetItemLeftContent, TDropdownGetItemGroupId, TDropdownGetItemLabel, TDropdownGetItemOnClick } from './Dropdown';
-export { TextField, type ITextFieldProps } from './TextField';
-export { Image } from './Image';
-export type { IImageProps } from './Image';
-export { Loader } from './Loader';
-export type { ILoaderProps } from './Loader';
-export { InputNumber } from './InputNumber';
-export type { IInputNumberProps } from './InputNumber';
-export { Select } from './Select';
-export type { ISelectDefaultItem, TSelectGetItemValue, TSelectSingleValue, TSelectGetItemLabel, TMultiSelectItemOnChange, TMultiSelectProps, TSelectGetItemDisabled, TSingleSelectProps, TSelectProps, TMultiSelectValueOnChange, TSingleSelectValueOnChange, TSingleSelectItemOnChange } from './Select';
-export { Modal } from './Modal';
-export type { IModalProps } from './Modal';
-export { NotificationInstance, notifications, NOTIFICATION_STATUSES, type INotificationParams, type INotificationsContext } from './Notification';
-export { Progress } from './Progress';
-export type { IProgressProps } from './Progress';
-export { RadioButton, type IRadioGroupDefaultItem, type TRadioGroupPropGetItemValue, type IRadioButtonProps, type TRadioGroupPropGetItemDisabled, type TRadioGroupPropGetItemLabel, type TRadioGroupPropGetItemKey, type IRadioGroupProps } from './RadioButton';
-export { Switch } from './Switch';
-export type { ISwitchProps } from './Switch';
-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 {}

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];