@quen-ui/components 0.0.13

package/dist/Breadcrumbs/styles.es.js

@@ -0,0 +1,50 @@
+import styled, { css } from "styled-components";
+const BreadcrumbItemStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "lastItem"
+})`
+  cursor: pointer;
+  user-select: none;
+  
+  text-decoration: none;
+  
+  span {
+    display: flex;
+    align-items: center;
+  }
+  
+  ${({ lastItem }) => lastItem && css`
+    color: ${({ theme }) => theme.colors.violet[9]};
+    span {
+      color: ${({ theme }) => theme.colors.violet[9]};
+    }
+  `};
+  
+  &:hover {
+    color: ${({ theme }) => theme.colors.grayViolet[6]};
+    span {
+      color: ${({ theme }) => theme.colors.grayViolet[6]};
+    }
+  }
+
+  .quen-ui__breadcrumb--icon {
+    svg {
+      color: ${({ theme }) => theme.textColor};
+    }
+  }
+  
+  svg {
+    color: currentColor;
+  }
+`;
+const BreadcrumbsStyled = styled.nav`
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+  
+  color: ${({ theme }) => theme.textColor};
+`;
+export {
+  BreadcrumbItemStyled,
+  BreadcrumbsStyled
+};

package/dist/Breadcrumbs/types.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IBreadcrumbItemDefault {
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    className?: string;
+}
+export type TBreadcrumbPropGetItemLabel<ITEM> = (item: ITEM) => string;
+export type TBreadcrumbPropGetItemHref<ITEM> = (item: ITEM) => string | undefined;
+export type TBreadcrumbPropGetItemIcon<ITEM> = (item: ITEM) => React.ReactNode;
+export type TBreadcrumbPropGetItemOnClick<ITEM> = (item: ITEM) => React.MouseEventHandler | undefined;
+export type TBreadcrumbsPropOnItemClick<ITEM = IBreadcrumbItemDefault> = (item: ITEM, e: React.MouseEvent) => void;
+export type TBreadcrumbsPropGetItemClassname<ITEM> = (item: ITEM) => string | undefined;
+export interface IBreadcrumbsProps<ITEM = IBreadcrumbItemDefault> {
+    /** Array of elements to display */
+    items: ITEM[];
+    /** Function to get element text */
+    getItemLabel?: TBreadcrumbPropGetItemLabel<ITEM>;
+    /** Function to get element link */
+    getItemHref?: TBreadcrumbPropGetItemHref<ITEM>;
+    /** Function for getting element icon*/
+    getItemIcon?: TBreadcrumbPropGetItemIcon<ITEM>;
+    /** Function to get click handler */
+    getItemOnClick?: TBreadcrumbPropGetItemOnClick<ITEM>;
+    /** Text and separator size */
+    size?: TQuenSize;
+    /** Global click handler for all elements */
+    onItemClick?: TBreadcrumbsPropOnItemClick<ITEM>;
+    /** Container class */
+    className?: string;
+    /** Class for all elements */
+    classNameItem?: string;
+    /** Function to get class for element */
+    getItemClassName?: TBreadcrumbsPropGetItemClassname<ITEM>;
+    /** Separator between elements (default is "/") */
+    separator?: React.ReactNode;
+    /** Show only icon for first item */
+    onlyIconRoot?: boolean;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+export interface IBreadcrumbItemProps<ITEM> {
+    size?: TQuenSize;
+    item: ITEM;
+    getItemLabel?: TBreadcrumbPropGetItemLabel<ITEM>;
+    getItemHref?: TBreadcrumbPropGetItemHref<ITEM>;
+    getItemIcon?: TBreadcrumbPropGetItemIcon<ITEM>;
+    onItemClick?: TBreadcrumbsPropOnItemClick<ITEM>;
+    onlyIcon?: boolean;
+    getItemClassName?: TBreadcrumbsPropGetItemClassname<ITEM>;
+    className?: string;
+    lastItem: boolean;
+}

package/dist/Button/Button.cjs.js

@@ -0,0 +1,66 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const Loader = require("../Loader/Loader.cjs.js");
+const Button = ({
+  size = "m",
+  children,
+  disabled,
+  view,
+  fullWidth,
+  leftContent,
+  rightContent,
+  loading,
+  loaderProps,
+  onClick,
+  onKeyPress,
+  onKeyUp,
+  style,
+  ...props
+}, ref) => {
+  const handleClick = (event) => {
+    if (!loading && !disabled) {
+      onClick == null ? void 0 : onClick(event);
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (!disabled && !loading) {
+      onKeyPress == null ? void 0 : onKeyPress(event);
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (loading) {
+      event.preventDefault();
+    } else {
+      onKeyUp == null ? void 0 : onKeyUp(event);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.ButtonStyled,
+    {
+      ref,
+      "aria-busy": loading,
+      "aria-disabled": disabled,
+      isDisabled: disabled,
+      fullWidth,
+      viewButton: view,
+      size,
+      forwardedAs: "button",
+      disabled,
+      onClick: handleClick,
+      onKeyPress: handleKeyPress,
+      onKeyUp: handleKeyUp,
+      style,
+      ...props,
+      children: [
+        leftContent,
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Loader, { view: "oval", ...loaderProps }),
+        children,
+        rightContent
+      ]
+    }
+  );
+};
+const Button$1 = React.forwardRef(Button);
+module.exports = Button$1;

package/dist/Button/Button.d.ts

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

package/dist/Button/Button.es.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ButtonStyled } from "./styles.es.js";
+import Loader from "../Loader/Loader.es.js";
+const Button = ({
+  size = "m",
+  children,
+  disabled,
+  view,
+  fullWidth,
+  leftContent,
+  rightContent,
+  loading,
+  loaderProps,
+  onClick,
+  onKeyPress,
+  onKeyUp,
+  style,
+  ...props
+}, ref) => {
+  const handleClick = (event) => {
+    if (!loading && !disabled) {
+      onClick == null ? void 0 : onClick(event);
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (!disabled && !loading) {
+      onKeyPress == null ? void 0 : onKeyPress(event);
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (loading) {
+      event.preventDefault();
+    } else {
+      onKeyUp == null ? void 0 : onKeyUp(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    ButtonStyled,
+    {
+      ref,
+      "aria-busy": loading,
+      "aria-disabled": disabled,
+      isDisabled: disabled,
+      fullWidth,
+      viewButton: view,
+      size,
+      forwardedAs: "button",
+      disabled,
+      onClick: handleClick,
+      onKeyPress: handleKeyPress,
+      onKeyUp: handleKeyUp,
+      style,
+      ...props,
+      children: [
+        leftContent,
+        loading && /* @__PURE__ */ jsx(Loader, { view: "oval", ...loaderProps }),
+        children,
+        rightContent
+      ]
+    }
+  );
+};
+const Button$1 = forwardRef(Button);
+export {
+  Button$1 as default
+};

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export type { IButtonProps, TButtonSize, TButtonView } from './types';

package/dist/Button/styles.cjs.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const getSizing = (view, size) => {
+  switch (size) {
+    case "l":
+      return styled.css`
+        height: 3rem; // 48px
+        ${view === "icon" && "width: 3rem"};
+      `;
+    case "s":
+      return styled.css`
+        height: 2rem; // 32px
+        ${view === "icon" && "width: 2rem"};
+      `;
+    case "xs":
+      return styled.css`
+        height: 1.5rem; // 24px
+        ${view === "icon" && "width: 1.5rem"};
+      `;
+    case "m":
+    default:
+      return styled.css`
+        height: 2.5rem; // 40px
+        ${view === "icon" && "width: 2.5rem"};
+      `;
+  }
+};
+const getBackground = (theme, view = "primary", isDisabled) => {
+  switch (view) {
+    case "secondary":
+      return styled.css`
+        background: ${theme.colors.gray["5"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.gray["4"]};
+        }
+
+        &:active {
+          background: ${theme.colors.gray["6"]};
+        }
+      `;
+    case "danger":
+      return styled.css`
+        background: ${theme.colors.red["7"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.red["6"]};
+        }
+
+        &:active {
+          background: ${theme.colors.red["8"]};
+        }
+      `;
+    case "ghost":
+      return styled.css`
+        background: transparent;
+        color: ${theme.textColor};
+
+        &:hover {
+          color: ${theme.colors.gray["7"]};
+        }
+
+        &:active {
+          color: ${theme.colors.gray["9"]};
+        }
+      `;
+    case "success":
+      return styled.css`
+        background: ${theme.colors.green["7"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.green["6"]};
+        }
+
+        &:active {
+          background: ${theme.colors.green["8"]};
+        }
+      `;
+    case "warning":
+      return styled.css`
+        background: ${theme.colors.orange[7]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.orange[6]};
+        }
+
+        &:active {
+          background: ${theme.colors.orange[8]};
+        }
+      `;
+    case "link":
+      return styled.css`
+        background: transparent;
+        color: ${theme.colors.violet[8]};
+
+        .quen-ui__text {
+          color: unset;
+        }
+
+        &:hover {
+          color: ${theme.colors.violet[6]};
+        }
+
+        &:active {
+          color: ${theme.colors.violet[9]};
+        }
+
+        &:disabled {
+          color: ${theme.colors.violet[1]};
+        }
+      `;
+    case "icon":
+      return styled.css`
+        background: transparent;
+        color: ${theme.colors.gray["9"]};
+
+        &:hover {
+          color: ${!isDisabled && polished.desaturate(0.2, theme.colors[theme.primaryColor][9])};
+          fill: ${!isDisabled && polished.desaturate(0.2, theme.colors[theme.primaryColor][9])};
+        }
+
+        &:active {
+          color: ${!isDisabled && polished.desaturate(0.2, theme.colors[theme.primaryColor][9])};
+          fill: ${!isDisabled && polished.darken(0.2, theme.colors[theme.primaryColor][9])};
+        }
+      `;
+    case "primary":
+    default:
+      return styled.css`
+        background: ${theme.colors[theme.primaryColor][9]};
+        color: white;
+        .quen-ui__text {
+          color: white;
+        }
+
+        &:hover {
+          background: ${polished.desaturate(0.2, theme.colors[theme.primaryColor][9])};
+        }
+
+        &:active {
+          background: ${polished.darken(0.2, theme.colors[theme.primaryColor][9])};
+        }
+      `;
+  }
+};
+const ButtonStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["viewButton", "isDisabled", "fullWidth"].includes(prop)
+})`
+  border: none;
+  background: none;
+  outline: none;
+  ${({ size, viewButton }) => getSizing(viewButton || "primary", size)}
+  cursor: pointer;
+  padding-left: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
+  padding-right: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 0.5rem;
+  text-decoration: none;
+  width: ${({ fullWidth }) => fullWidth ? "100%" : "max-content"};
+  ${({ theme, viewButton, isDisabled }) => getBackground(theme, viewButton, isDisabled)};
+
+  &:disabled {
+    background: ${({ theme }) => theme.colors.gray["2"]};
+    color: ${({ theme }) => theme.colors.gray["4"]};
+    cursor: not-allowed;
+  }
+`;
+exports.ButtonStyled = ButtonStyled;

package/dist/Button/styles.d.ts

@@ -0,0 +1,7 @@
+import { IButtonProps, TButtonView } from './types';
+type TButtonStyledProps = Omit<IButtonProps, "view"> & {
+    viewButton?: TButtonView;
+    isDisabled?: boolean;
+};
+export declare const ButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TButtonStyledProps>> & string;
+export {};

package/dist/Button/styles.es.js

@@ -0,0 +1,177 @@
+import styled, { css } from "styled-components";
+import { desaturate, darken } from "polished";
+const getSizing = (view, size) => {
+  switch (size) {
+    case "l":
+      return css`
+        height: 3rem; // 48px
+        ${view === "icon" && "width: 3rem"};
+      `;
+    case "s":
+      return css`
+        height: 2rem; // 32px
+        ${view === "icon" && "width: 2rem"};
+      `;
+    case "xs":
+      return css`
+        height: 1.5rem; // 24px
+        ${view === "icon" && "width: 1.5rem"};
+      `;
+    case "m":
+    default:
+      return css`
+        height: 2.5rem; // 40px
+        ${view === "icon" && "width: 2.5rem"};
+      `;
+  }
+};
+const getBackground = (theme, view = "primary", isDisabled) => {
+  switch (view) {
+    case "secondary":
+      return css`
+        background: ${theme.colors.gray["5"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.gray["4"]};
+        }
+
+        &:active {
+          background: ${theme.colors.gray["6"]};
+        }
+      `;
+    case "danger":
+      return css`
+        background: ${theme.colors.red["7"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.red["6"]};
+        }
+
+        &:active {
+          background: ${theme.colors.red["8"]};
+        }
+      `;
+    case "ghost":
+      return css`
+        background: transparent;
+        color: ${theme.textColor};
+
+        &:hover {
+          color: ${theme.colors.gray["7"]};
+        }
+
+        &:active {
+          color: ${theme.colors.gray["9"]};
+        }
+      `;
+    case "success":
+      return css`
+        background: ${theme.colors.green["7"]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.green["6"]};
+        }
+
+        &:active {
+          background: ${theme.colors.green["8"]};
+        }
+      `;
+    case "warning":
+      return css`
+        background: ${theme.colors.orange[7]};
+        color: white;
+
+        &:hover {
+          background: ${theme.colors.orange[6]};
+        }
+
+        &:active {
+          background: ${theme.colors.orange[8]};
+        }
+      `;
+    case "link":
+      return css`
+        background: transparent;
+        color: ${theme.colors.violet[8]};
+
+        .quen-ui__text {
+          color: unset;
+        }
+
+        &:hover {
+          color: ${theme.colors.violet[6]};
+        }
+
+        &:active {
+          color: ${theme.colors.violet[9]};
+        }
+
+        &:disabled {
+          color: ${theme.colors.violet[1]};
+        }
+      `;
+    case "icon":
+      return css`
+        background: transparent;
+        color: ${theme.colors.gray["9"]};
+
+        &:hover {
+          color: ${!isDisabled && desaturate(0.2, theme.colors[theme.primaryColor][9])};
+          fill: ${!isDisabled && desaturate(0.2, theme.colors[theme.primaryColor][9])};
+        }
+
+        &:active {
+          color: ${!isDisabled && desaturate(0.2, theme.colors[theme.primaryColor][9])};
+          fill: ${!isDisabled && darken(0.2, theme.colors[theme.primaryColor][9])};
+        }
+      `;
+    case "primary":
+    default:
+      return css`
+        background: ${theme.colors[theme.primaryColor][9]};
+        color: white;
+        .quen-ui__text {
+          color: white;
+        }
+
+        &:hover {
+          background: ${desaturate(0.2, theme.colors[theme.primaryColor][9])};
+        }
+
+        &:active {
+          background: ${darken(0.2, theme.colors[theme.primaryColor][9])};
+        }
+      `;
+  }
+};
+const ButtonStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["viewButton", "isDisabled", "fullWidth"].includes(prop)
+})`
+  border: none;
+  background: none;
+  outline: none;
+  ${({ size, viewButton }) => getSizing(viewButton || "primary", size)}
+  cursor: pointer;
+  padding-left: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
+  padding-right: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 0.5rem;
+  text-decoration: none;
+  width: ${({ fullWidth }) => fullWidth ? "100%" : "max-content"};
+  ${({ theme, viewButton, isDisabled }) => getBackground(theme, viewButton, isDisabled)};
+
+  &:disabled {
+    background: ${({ theme }) => theme.colors.gray["2"]};
+    color: ${({ theme }) => theme.colors.gray["4"]};
+    cursor: not-allowed;
+  }
+`;
+export {
+  ButtonStyled
+};

package/dist/Button/types.d.ts

@@ -0,0 +1,38 @@
+import { default as React, MouseEventHandler, KeyboardEventHandler, JSX, Ref } from 'react';
+import { ILoaderProps } from '../Loader';
+export declare const BUTTON_SIZE: readonly ["l", "m", "s", "xs"];
+export declare const BUTTON_VIEW: readonly ["primary", "secondary", "ghost", "link", "icon", "danger", "warning", "success"];
+export type TButtonSize = (typeof BUTTON_SIZE)[number];
+export type TButtonView = (typeof BUTTON_VIEW)[number];
+export interface IButtonProps {
+    /** Controls button dimensions */
+    size?: TButtonSize;
+    /** Visual style variant */
+    view?: TButtonView;
+    /** Disables interactions and applies visual styling */
+    disabled?: boolean;
+    /** Shows loading spinner and blocks interactions */
+    loading?: boolean;
+    /** Forces 100% container width */
+    fullWidth?: boolean;
+    /** Left-aligned icon/content */
+    leftContent?: React.ReactNode;
+    /** Right-aligned icon/content */
+    rightContent?: React.ReactNode;
+    /** Customizes loading spinner */
+    loaderProps?: ILoaderProps;
+    /** Click event handler */
+    onClick?: MouseEventHandler;
+    /** Keyboard press handler */
+    onKeyPress?: KeyboardEventHandler;
+    /** Key release handler */
+    onKeyUp?: KeyboardEventHandler;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Renders as custom element (e.g., "a" for links) */
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    ref?: Ref<HTMLElement>;
+    [key: string]: any;
+}

package/dist/Card/Card.cjs.js

@@ -0,0 +1,38 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Title = require("../typography/Title/Title.cjs.js");
+const styles = require("./styles.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const Divider = require("../Divider/Divider.cjs.js");
+const Card = ({
+  title,
+  children,
+  size = "m",
+  extra,
+  className,
+  classNameHeader,
+  classNameContent,
+  classNameAction,
+  actionContent,
+  cover,
+  leftContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, children: [
+    cover,
+    title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, children: [
+        leftContent,
+        /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
+        extra && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", size: "s", children: extra })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(styles.CardContentStyled, { size, className: classNameContent, children }),
+    actionContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(styles.CardActionsStyled, { size, className: classNameAction, children: actionContent })
+    ] })
+  ] });
+};
+module.exports = Card;

package/dist/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import { ICardProps } from './types';
+declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;