@quen-ui/components 0.0.14 → 1.0.1

package/dist/message/MessageContext.es.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo } from "react";
+import { randomId } from "@quen-ui/helpers";
+import { MessageContainerStyled } from "./styles.es.js";
+import Message from "./Message.es.js";
+const MessageContext = createContext(null);
+const MessageProvider = ({
+  children,
+  placement
+}) => {
+  const [messages, setMessages] = useState([]);
+  const markLeaving = 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 = useCallback(
+    (status, content, duration, onClose, config) => {
+      const key = config?.key ?? 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 = useCallback((key) => {
+    if (key) {
+      markLeaving(key);
+    } else {
+      setMessages((prev) => prev.map((m) => ({ ...m, leaving: true })));
+      setTimeout(() => setMessages([]), 300);
+    }
+  }, []);
+  const api = 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__ */ jsxs(MessageContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(MessageContainerStyled, { placement, children: messages.map((msg) => /* @__PURE__ */ jsx(
+      Message,
+      {
+        message: msg,
+        placement,
+        leaving: !!msg.leaving
+      },
+      msg.key
+    )) })
+  ] });
+};
+function useMessage(options) {
+  const [api, setApi] = useState({
+    open: () => "",
+    success: () => "",
+    error: () => "",
+    info: () => "",
+    warning: () => "",
+    loading: () => "",
+    destroy: () => {
+    }
+  });
+  const contextHolder = /* @__PURE__ */ jsx(MessageProvider, { placement: options?.placement, children: /* @__PURE__ */ jsx(MessageContext.Consumer, { children: (value) => {
+    if (value) setApi(value);
+    return null;
+  } }) });
+  return [api, contextHolder];
+}
+export {
+  MessageProvider,
+  useMessage
+};

package/dist/message/index.cjs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MessageContext = require("./MessageContext.cjs.js");
+const message = {
+  useMessage: MessageContext.useMessage,
+  Provider: MessageContext.MessageProvider
+};
+exports.message = message;

package/dist/message/index.d.ts

@@ -0,0 +1,6 @@
+import { useMessage } from './MessageContext';
+export type { IMessageConfig } from './types';
+export declare const message: {
+    useMessage: typeof useMessage;
+    Provider: ({ children, placement }: import('react').PropsWithChildren<import('./types').IUseMessageOptions>) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/message/index.es.js

@@ -0,0 +1,8 @@
+import { MessageProvider, useMessage } from "./MessageContext.es.js";
+const message = {
+  useMessage,
+  Provider: MessageProvider
+};
+export {
+  message
+};

package/dist/message/styles.cjs.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const fadeInTop = styled.keyframes`
+  from { opacity: 0; transform: translateY(-16px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutTop = styled.keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-16px); }
+`;
+const fadeInBottom = styled.keyframes`
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutBottom = styled.keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(16px); }
+`;
+const MessageContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "placement"
+})`
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  top: ${({ placement }) => placement === "bottom" ? "auto" : "24px"};
+  bottom: ${({ placement }) => placement === "bottom" ? "24px" : "auto"};
+`;
+const MessageStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["leaving", "placement"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  background: ${({ theme }) => theme.components.Message.background};
+  border-radius: ${({ theme }) => theme.components.Message.radius};
+  padding: ${({ theme }) => theme.components.Message.padding};
+  pointer-events: all;
+  animation: ${({ leaving, placement }) => {
+  if (placement === "bottom") {
+    return leaving ? styled.css`
+            ${fadeOutBottom} 0.3s ease forwards
+          ` : styled.css`
+            ${fadeInBottom} 0.3s ease forwards
+          `;
+  }
+  return leaving ? styled.css`
+          ${fadeOutTop} 0.3s ease forwards
+        ` : styled.css`
+          ${fadeInTop} 0.3s ease forwards
+        `;
+}};
+`;
+const getColorIcon = (theme, status) => {
+  switch (status) {
+    case "error":
+      return theme.components.Message.iconErrorColor;
+    case "warning":
+      return theme.components.Message.iconWarningColor;
+    case "success":
+      return theme.components.Message.iconSuccessColor;
+    default:
+      return theme.components.Message.iconInfoColor;
+  }
+};
+const MessageIconWrapper = styled.div`
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  color: ${({ theme, status }) => getColorIcon(theme, status)};
+`;
+exports.MessageContainerStyled = MessageContainerStyled;
+exports.MessageIconWrapper = MessageIconWrapper;
+exports.MessageStyled = MessageStyled;

package/dist/message/styles.d.ts

@@ -0,0 +1,11 @@
+import { TMessagePosition, TMessageStatus } from './types';
+export declare const MessageContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    placement?: TMessagePosition;
+}>> & string;
+export declare const MessageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    leaving?: boolean;
+    placement?: "top" | "bottom";
+}>> & string;
+export declare const MessageIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    status?: TMessageStatus;
+}>> & string;

package/dist/message/styles.es.js

@@ -0,0 +1,79 @@
+import styled, { keyframes, css } from "styled-components";
+const fadeInTop = keyframes`
+  from { opacity: 0; transform: translateY(-16px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutTop = keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-16px); }
+`;
+const fadeInBottom = keyframes`
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutBottom = keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(16px); }
+`;
+const MessageContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "placement"
+})`
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  top: ${({ placement }) => placement === "bottom" ? "auto" : "24px"};
+  bottom: ${({ placement }) => placement === "bottom" ? "24px" : "auto"};
+`;
+const MessageStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["leaving", "placement"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  background: ${({ theme }) => theme.components.Message.background};
+  border-radius: ${({ theme }) => theme.components.Message.radius};
+  padding: ${({ theme }) => theme.components.Message.padding};
+  pointer-events: all;
+  animation: ${({ leaving, placement }) => {
+  if (placement === "bottom") {
+    return leaving ? css`
+            ${fadeOutBottom} 0.3s ease forwards
+          ` : css`
+            ${fadeInBottom} 0.3s ease forwards
+          `;
+  }
+  return leaving ? css`
+          ${fadeOutTop} 0.3s ease forwards
+        ` : css`
+          ${fadeInTop} 0.3s ease forwards
+        `;
+}};
+`;
+const getColorIcon = (theme, status) => {
+  switch (status) {
+    case "error":
+      return theme.components.Message.iconErrorColor;
+    case "warning":
+      return theme.components.Message.iconWarningColor;
+    case "success":
+      return theme.components.Message.iconSuccessColor;
+    default:
+      return theme.components.Message.iconInfoColor;
+  }
+};
+const MessageIconWrapper = styled.div`
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  color: ${({ theme, status }) => getColorIcon(theme, status)};
+`;
+export {
+  MessageContainerStyled,
+  MessageIconWrapper,
+  MessageStyled
+};

package/dist/message/types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, CSSProperties } from 'react';
+export declare const MESSAGE_STATUS: readonly ["success", "warning", "error", "info", "loading"];
+export declare const MESSAGE_POSITIONS: readonly ["top", "bottom"];
+export type TMessageStatus = (typeof MESSAGE_STATUS)[number];
+export type TMessagePosition = (typeof MESSAGE_POSITIONS)[number];
+export interface IMessageConfig {
+    /** Unique identifier for the message */
+    key?: string | number;
+    /** Content/text of the message */
+    content: ReactNode;
+    /** Time in seconds before auto-dismiss. Use 0 to disable */
+    duration?: number;
+    /** Custom icon for the message */
+    icon?: ReactNode;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Called when the message is clicked */
+    onClick?: () => void;
+    /** Called when message closes */
+    onClose?: () => void;
+    /** Type / status of message */
+    status?: TMessageStatus;
+}
+export interface IMessageProps {
+    message: IMessageConfig;
+    placement?: TMessagePosition;
+    leaving: boolean;
+}
+export interface IMessageInstance {
+    open(config: IMessageConfig): string | number;
+    success(content: ReactNode, duration?: number, onClose?: () => void, config?: Partial<IMessageConfig>): string | number;
+    error(content: ReactNode, duration?: number, onClose?: () => void, config?: Partial<IMessageConfig>): string | number;
+    info(content: ReactNode, duration?: number, onClose?: () => void, config?: Partial<IMessageConfig>): string | number;
+    warning(content: ReactNode, duration?: number, onClose?: () => void, config?: Partial<IMessageConfig>): string | number;
+    loading(content: ReactNode, duration?: number, onClose?: () => void, config?: Partial<IMessageConfig>): string | number;
+    destroy(key?: string | number): void;
+}
+export interface IUseMessageOptions {
+    placement?: TMessagePosition;
+}

package/dist/typography/Text/Text.es.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { TextStyled } from "./styles.es.js";
-const Text = ({
+const Text$1 = ({
   children,
   size = "m",
   color,
@@ -26,7 +26,7 @@ const Text = ({
     children
   }
 );
-const Text$1 = forwardRef(Text);
+const Text = forwardRef(Text$1);
 export {
-  Text$1 as default
+  Text as default
 };

package/dist/typography/Title/Title.cjs.js

@@ -9,6 +9,7 @@ const Title = ({
   type,
   className,
   id,
+  align,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   styles.TitleStyled,
@@ -19,6 +20,7 @@ const Title = ({
     onClick,
     type,
     className,
+    align,
     ...props,
     children
   }

package/dist/typography/Title/Title.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { ITitleProps } from './types';
-declare const Title: ({ children, size, color, onClick, type, className, id, ...props }: PropsWithChildren<ITitleProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Title: ({ children, size, color, onClick, type, className, id, align, ...props }: PropsWithChildren<ITitleProps>) => import("react/jsx-runtime").JSX.Element;
 export default Title;

package/dist/typography/Title/Title.es.js

@@ -8,6 +8,7 @@ const Title = ({
   type,
   className,
   id,
+  align,
   ...props
 }) => /* @__PURE__ */ jsx(
   TitleStyled,
@@ -18,6 +19,7 @@ const Title = ({
     onClick,
     type,
     className,
+    align,
     ...props,
     children
   }

package/dist/typography/Title/styles.cjs.js

@@ -67,9 +67,12 @@ const getColor = ({
 };
 const TitleStyled = styled.span.attrs({
   className: "quen-ui__title"
+}).withConfig({
+  shouldForwardProp: (prop) => !["align", "type"].includes(prop)
 })`
   margin: 0;
   ${({ theme, size }) => getFonts(size, theme)};
   color: ${({ color, type, theme }) => getColor({ color, theme, type })};
+  text-align: ${({ align = "start" }) => align};
 `;
 exports.TitleStyled = TitleStyled;

package/dist/typography/Title/styles.es.js

@@ -65,10 +65,13 @@ const getColor = ({
 };
 const TitleStyled = styled.span.attrs({
   className: "quen-ui__title"
+}).withConfig({
+  shouldForwardProp: (prop) => !["align", "type"].includes(prop)
 })`
   margin: 0;
   ${({ theme, size }) => getFonts(size, theme)};
   color: ${({ color, type, theme }) => getColor({ color, theme, type })};
+  text-align: ${({ align = "start" }) => align};
 `;
 export {
   TitleStyled

package/dist/typography/Title/types.d.ts

@@ -18,5 +18,6 @@ export interface ITitleProps {
     id?: string;
     /** Defines rendered HTML tag */
     as?: keyof JSX.IntrinsicElements | React.ElementType;
+    align?: "start" | "center" | "end";
     [key: string]: any;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quen-ui/components",
   "private": false,
-  "version": "0.0.14",
+  "version": "1.0.1",
   "type": "module",
   "homepage": "https://quen-ui.github.io/quen-ui/",
   "repository": {
@@ -25,37 +25,41 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b tsconfig.build.json && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "@quen-ui/helpers": "*",
     "@quen-ui/hooks": "*",
+    "chroma-js": "^3.2.0",
+    "dompurify": "^3.3.0",
     "polished": "^4.3.1",
     "rc-input-number": "^9.5.0",
     "rc-select": "^14.16.6",
     "react-textarea-autosize": "^8.5.9",
     "react-transition-group": "^4.4.5",
     "react-transition-state": "^2.3.1",
-    "styled-components": "^6.1.15"
+    "styled-components": "^6.1.19",
+    "@tabler/icons-react": "^3.36.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@types/chroma-js": "^3.1.2",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@types/react-transition-group": "^4.4.12",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^15.15.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0"
   },
   "peerDependencies": {
+    "@quen-ui/theme": "*",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "@quen-ui/theme": "*"
+    "react-dom": ">=18.0.0"
   },
   "keywords": [
     "components",