@quen-ui/components 1.1.0 → 1.2.0

package/dist/Banner/Banner.cjs.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const iconsReact = require("@tabler/icons-react");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const DEFAULT_ICONS = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconRosetteDiscountCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, {}),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, {})
+};
+const Banner = ({
+  variant = "info",
+  title,
+  description,
+  action,
+  onClose,
+  dismissible = false,
+  icon,
+  size = "m",
+  as = "div",
+  className,
+  children,
+  storageKey,
+  ...restProps
+}) => {
+  const [isVisible, setIsVisible] = React.useState(true);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const dismissed = window.localStorage.getItem(`banner:${storageKey}`);
+      if (dismissed === "true") {
+        setIsVisible(false);
+      }
+    }
+    setIsMounted(true);
+  }, [storageKey]);
+  const handleClose = React.useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(`banner:${storageKey}`, "true");
+    }
+  }, [onClose, storageKey]);
+  if (!isMounted || !isVisible) return null;
+  const displayIcon = icon ?? DEFAULT_ICONS[variant];
+  const titleId = `banner-title-${title?.toString().slice(0, 8) || Date.now()}`;
+  const descId = `banner-desc-${Date.now()}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.BannerStyled,
+    {
+      as,
+      role: "region",
+      variant,
+      size,
+      visible: isVisible,
+      dismissible,
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": description ? descId : void 0,
+      className,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(styles.BannerContent, { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "s", id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && !title && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { id: descId, children: description })
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerAction, { children: action }),
+        dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "s",
+            view: "icon",
+            onClick: handleClose,
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Banner = Banner;
+exports.default = Banner;

package/dist/Banner/Banner.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IBannerProps } from './types';
+export declare const Banner: React.FC<IBannerProps>;
+export default Banner;

package/dist/Banner/Banner.es.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { IconX, IconInfoCircle, IconAlertTriangle, IconRosetteDiscountCheck } from "@tabler/icons-react";
+import Title from "../typography/Title/Title.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+import { BannerStyled, BannerContent, BannerIcon, BannerAction } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+const DEFAULT_ICONS = {
+  info: /* @__PURE__ */ jsx(IconInfoCircle, {}),
+  success: /* @__PURE__ */ jsx(IconRosetteDiscountCheck, {}),
+  warning: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+  danger: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+  neutral: /* @__PURE__ */ jsx(IconInfoCircle, {})
+};
+const Banner = ({
+  variant = "info",
+  title,
+  description,
+  action,
+  onClose,
+  dismissible = false,
+  icon,
+  size = "m",
+  as = "div",
+  className,
+  children,
+  storageKey,
+  ...restProps
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const dismissed = window.localStorage.getItem(`banner:${storageKey}`);
+      if (dismissed === "true") {
+        setIsVisible(false);
+      }
+    }
+    setIsMounted(true);
+  }, [storageKey]);
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(`banner:${storageKey}`, "true");
+    }
+  }, [onClose, storageKey]);
+  if (!isMounted || !isVisible) return null;
+  const displayIcon = icon ?? DEFAULT_ICONS[variant];
+  const titleId = `banner-title-${title?.toString().slice(0, 8) || Date.now()}`;
+  const descId = `banner-desc-${Date.now()}`;
+  return /* @__PURE__ */ jsxs(
+    BannerStyled,
+    {
+      as,
+      role: "region",
+      variant,
+      size,
+      visible: isVisible,
+      dismissible,
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": description ? descId : void 0,
+      className,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxs(BannerContent, { children: [
+          title && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && /* @__PURE__ */ jsx(BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsx(Title, { size: "s", id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && !title && /* @__PURE__ */ jsx(BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsx(Text, { id: descId, children: description })
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsx(BannerAction, { children: action }),
+        dismissible && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "s",
+            view: "icon",
+            onClick: handleClose,
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsx(IconX, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Banner,
+  Banner as default
+};

package/dist/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Banner } from './Banner';
+export type { IBannerProps, TBannerVariant } from './types';

package/dist/Banner/styles.cjs.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const variantStyles = {
+  info: styled.css`
+    background: ${({ theme }) => theme.components.Banner.info.background};
+    border-color: ${({ theme }) => theme.components.Banner.info.borderColor};
+    color: ${({ theme }) => theme.components.Banner.info.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.info.iconColor};
+  `,
+  success: styled.css`
+    background: ${({ theme }) => theme.components.Banner.success.background};
+    border-color: ${({ theme }) => theme.components.Banner.success.borderColor};
+    color: ${({ theme }) => theme.components.Banner.success.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.success.iconColor};
+  `,
+  warning: styled.css`
+    background: ${({ theme }) => theme.components.Banner.warning.background};
+    border-color: ${({ theme }) => theme.components.Banner.warning.borderColor};
+    color: ${({ theme }) => theme.components.Banner.warning.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.warning.iconColor};
+  `,
+  danger: styled.css`
+    background: ${({ theme }) => theme.components.Banner.danger.background};
+    border-color: ${({ theme }) => theme.components.Banner.danger.borderColor};
+    color: ${({ theme }) => theme.components.Banner.danger.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.danger.iconColor};
+  `,
+  neutral: styled.css`
+    background: ${({ theme }) => theme.components.Banner.neutral.background};
+    border-color: ${({ theme }) => theme.components.Banner.neutral.borderColor};
+    color: ${({ theme }) => theme.components.Banner.neutral.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.neutral.iconColor};
+  `
+};
+const sizeStyles = {
+  xs: styled.css`
+    padding: ${({ theme }) => theme.space.xs};
+    gap: ${({ theme }) => theme.space.xs};
+  `,
+  s: styled.css`
+    padding: ${({ theme }) => theme.space.s};
+    gap: ${({ theme }) => theme.space.s};
+  `,
+  m: styled.css`
+    padding: ${({ theme }) => theme.space.m};
+    gap: ${({ theme }) => theme.space.m};
+  `,
+  l: styled.css`
+    padding: ${({ theme }) => theme.space.l};
+    gap: ${({ theme }) => theme.space.l};
+  `
+};
+const BannerStyled = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: ${({ size }) => size === "s" ? "10px" : size === "m" ? "14px" : "18px"};
+  border-left: 3px solid var(--banner-icon);
+  border-radius: ${({ theme }) => theme.control.radius};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  ${({ visible }) => !visible && styled.css`
+      opacity: 0;
+      transform: translateY(-8px);
+      pointer-events: none;
+      max-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    `}
+
+  ${({ variant }) => variantStyles[variant]};
+  ${({ size }) => sizeStyles[size]};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+`;
+const BannerIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--banner-icon);
+  flex-shrink: 0;
+  width: 1.2em;
+  height: 1.2em;
+`;
+const BannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+const BannerAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  padding-left: 12px;
+
+  button,
+  a {
+    white-space: nowrap;
+  }
+`;
+exports.BannerAction = BannerAction;
+exports.BannerContent = BannerContent;
+exports.BannerIcon = BannerIcon;
+exports.BannerStyled = BannerStyled;

package/dist/Banner/styles.d.ts

@@ -0,0 +1,12 @@
+import { TBannerVariant } from './types';
+import { TQuenSize } from '../types/size';
+interface IBannerStyledProps {
+    variant: TBannerVariant;
+    size: TQuenSize;
+    visible: boolean;
+}
+export declare const BannerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IBannerStyledProps>> & string;
+export declare const BannerIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerAction: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/Banner/styles.es.js

@@ -0,0 +1,113 @@
+import styled, { css } from "styled-components";
+const variantStyles = {
+  info: css`
+    background: ${({ theme }) => theme.components.Banner.info.background};
+    border-color: ${({ theme }) => theme.components.Banner.info.borderColor};
+    color: ${({ theme }) => theme.components.Banner.info.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.info.iconColor};
+  `,
+  success: css`
+    background: ${({ theme }) => theme.components.Banner.success.background};
+    border-color: ${({ theme }) => theme.components.Banner.success.borderColor};
+    color: ${({ theme }) => theme.components.Banner.success.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.success.iconColor};
+  `,
+  warning: css`
+    background: ${({ theme }) => theme.components.Banner.warning.background};
+    border-color: ${({ theme }) => theme.components.Banner.warning.borderColor};
+    color: ${({ theme }) => theme.components.Banner.warning.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.warning.iconColor};
+  `,
+  danger: css`
+    background: ${({ theme }) => theme.components.Banner.danger.background};
+    border-color: ${({ theme }) => theme.components.Banner.danger.borderColor};
+    color: ${({ theme }) => theme.components.Banner.danger.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.danger.iconColor};
+  `,
+  neutral: css`
+    background: ${({ theme }) => theme.components.Banner.neutral.background};
+    border-color: ${({ theme }) => theme.components.Banner.neutral.borderColor};
+    color: ${({ theme }) => theme.components.Banner.neutral.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.neutral.iconColor};
+  `
+};
+const sizeStyles = {
+  xs: css`
+    padding: ${({ theme }) => theme.space.xs};
+    gap: ${({ theme }) => theme.space.xs};
+  `,
+  s: css`
+    padding: ${({ theme }) => theme.space.s};
+    gap: ${({ theme }) => theme.space.s};
+  `,
+  m: css`
+    padding: ${({ theme }) => theme.space.m};
+    gap: ${({ theme }) => theme.space.m};
+  `,
+  l: css`
+    padding: ${({ theme }) => theme.space.l};
+    gap: ${({ theme }) => theme.space.l};
+  `
+};
+const BannerStyled = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: ${({ size }) => size === "s" ? "10px" : size === "m" ? "14px" : "18px"};
+  border-left: 3px solid var(--banner-icon);
+  border-radius: ${({ theme }) => theme.control.radius};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  ${({ visible }) => !visible && css`
+      opacity: 0;
+      transform: translateY(-8px);
+      pointer-events: none;
+      max-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    `}
+
+  ${({ variant }) => variantStyles[variant]};
+  ${({ size }) => sizeStyles[size]};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+`;
+const BannerIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--banner-icon);
+  flex-shrink: 0;
+  width: 1.2em;
+  height: 1.2em;
+`;
+const BannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+const BannerAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  padding-left: 12px;
+
+  button,
+  a {
+    white-space: nowrap;
+  }
+`;
+export {
+  BannerAction,
+  BannerContent,
+  BannerIcon,
+  BannerStyled
+};

package/dist/Banner/types.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, ElementType, HTMLAttributes } from 'react';
+import { TQuenSize } from '../types/size';
+export type TBannerVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface IBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Unique key for storing the closure state in localStorage.
+     * If transferred, the banner will not appear again after closing.
+     */
+    storageKey?: string;
+    /**
+     * Visual style of the banner
+     * @default 'info'
+     */
+    variant?: TBannerVariant;
+    /** Banner title */
+    title?: ReactNode;
+    /** Description/banner content */
+    description?: ReactNode;
+    /** Action element (button, link) */
+    action?: ReactNode;
+    /** Callback when closing a banner */
+    onClose?: () => void;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    dismissible?: boolean;
+    /** Custom icon (overrides the icon by variant) */
+    icon?: ReactNode;
+    /**
+     * Banner size
+     * @default 'm'
+     */
+    size?: TQuenSize;
+    /**
+     * Custom rendering element
+     * @default 'div'
+     */
+    as?: ElementType;
+}

package/dist/Dropdown/Dropdown.cjs.js

@@ -14,68 +14,72 @@ const Dropdown = ({
   width,
   anchorRef,
   onClickClose,
+  onClickOutside,
+  notCloseOutside,
   ...props
 }) => {
-  const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isControlled = typeof open !== "undefined";
+  const openState = isControlled ? open : isOpen;
   const dropdownRef = React.useRef(null);
   const [containerDropdown, setContainerDropdown] = React.useState(null);
+  const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const lastInternalMousedownRef = React.useRef(0);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
-    initialEntered: open
+    initialEntered: openState
   });
+  React.useEffect(() => {
+    if (isControlled) toggle(open);
+  }, [open, isControlled, toggle]);
+  const calculateAnchorRect = React.useCallback(() => {
+    if (anchorRef.current) {
+      setAnchorRect(helpers.calculateRectElement(anchorRef.current));
+    }
+  }, [anchorRef]);
+  const handleInternalMouseDown = React.useCallback(
+    (e) => {
+      lastInternalMousedownRef.current = e.timeStamp || Date.now();
+    },
+    []
+  );
   hooks.useOnClickOutside(
-    anchorRef,
-    () => {
-      if (typeof open === "undefined") {
-        toggle(false);
-        onClickClose?.();
-      }
+    [anchorRef, dropdownRef],
+    (e) => {
+      if (e.timeStamp - lastInternalMousedownRef.current < 2100) return;
+      onClickOutside?.();
+      onClickClose?.();
+      if (!isControlled) setIsOpen(false);
     },
-    {
-      excludeRef: dropdownRef
-    }
+    { isActive: !notCloseOutside && openState }
   );
-  const calculateAnchorRect = () => {
-    if (anchorRef && anchorRef.current) {
-      setAnchorRect(helpers.calculateRectElement(anchorRef.current));
-    }
-  };
-  const handleClickAnchorRef = () => {
-    toggle();
-  };
+  React.useEffect(() => {
+    if (isControlled || !anchorRef.current) return;
+    const el = anchorRef.current;
+    const handleClick = () => {
+      toggle();
+      setIsOpen((prev) => !prev);
+    };
+    el.addEventListener("click", handleClick);
+    return () => el.removeEventListener("click", handleClick);
+  }, [anchorRef, toggle, isControlled]);
+  React.useLayoutEffect(() => {
+    calculateAnchorRect();
+  }, [state, calculateAnchorRect]);
   React.useEffect(() => {
     window.addEventListener("resize", calculateAnchorRect);
     window.addEventListener("scroll", calculateAnchorRect, true);
     return () => {
       window.removeEventListener("resize", calculateAnchorRect);
-      window.addEventListener("scroll", calculateAnchorRect, true);
-    };
-  }, [anchorRect]);
-  React.useEffect(() => {
-    if (typeof open === "undefined") {
-      anchorRef.current?.addEventListener("click", handleClickAnchorRef);
-    }
-    return () => {
-      anchorRef.current?.removeEventListener("click", handleClickAnchorRef);
+      window.removeEventListener("scroll", calculateAnchorRect, true);
     };
-  }, [anchorRef]);
-  React.useEffect(() => {
-    if (typeof open !== "undefined") {
-      toggle(open);
-    }
-  }, [open]);
-  React.useLayoutEffect(() => {
-    calculateAnchorRect();
-  }, [state]);
+  }, [calculateAnchorRect]);
   React.useEffect(() => {
-    const container = document.getElementsByTagName("body").item(0);
-    setContainerDropdown(container);
+    if (typeof document !== "undefined") setContainerDropdown(document.body);
   }, []);
-  if (disabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && reactDom.createPortal(
+  if (disabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { onMouseDown: handleInternalMouseDown, children: state.isEnter && containerDropdown && reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownPortal,
       {

package/dist/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import { ReactNode } from 'react';
 import { IDropdownProps } from './types';
-declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, onClickClose, ...props }: IDropdownProps<ITEM>) => ReactNode;
+declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, onClickClose, onClickOutside, notCloseOutside, ...props }: IDropdownProps<ITEM>) => ReactNode;
 export default Dropdown;