@quen-ui/components 0.0.14

package/dist/Checkbox/styles.d.ts

@@ -0,0 +1,13 @@
+import { TQuenSize } from '../types/size';
+import { ICheckboxGroupProps } from './types';
+export declare const CheckboxLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    disabled?: boolean;
+}>> & string;
+export declare const CheckboxInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    size: TQuenSize;
+    intermediate?: boolean;
+}>> & string;
+export declare const CheckboxGroupWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    direction: ICheckboxGroupProps["direction"];
+    isError?: boolean;
+}>> & string;

package/dist/Checkbox/styles.es.js

@@ -0,0 +1,147 @@
+import styled, { css } from "styled-components";
+const getSizing = (size) => {
+  switch (size) {
+    case "l":
+      return "1.5rem";
+    case "s":
+      return "1rem";
+    case "xs":
+      return "0.875rem";
+    case "m":
+    default:
+      return "1.25rem";
+  }
+};
+const CheckboxLabelStyled = styled.label.withConfig({
+  shouldForwardProp: (props) => !["disabled"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+`;
+const CheckboxInputStyled = styled.input.withConfig({
+  shouldForwardProp: (props) => !["size", "intermediate"].includes(props)
+})`
+  width: ${({ size }) => getSizing(size)};
+  height: ${({ size }) => getSizing(size)};
+  border: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  -webkit-appearance: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(calc(${({ size }) => getSizing(size)} - 1px) / 2);
+    left: calc(calc(${({ size }) => getSizing(size)} - 6px) / 5);
+    box-sizing: border-box;
+    width: calc(${({ size }) => getSizing(size)} * 0.6);
+    height: calc(${({ size }) => getSizing(size)} * 0.35);
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-left: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    opacity: 0;
+    transition:
+      opacity 0.15s,
+      transform 0.15s,
+      background-color 0.08s;
+    transform: rotate(-50deg) scale(0, 1);
+    transform-origin: 0 0;
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    cursor: not-allowed;
+  }
+
+  &:disabled:checked {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${({ theme }) => theme.colors.gray[2]};
+      border-left: 1px solid ${({ theme }) => theme.colors.gray[4]};
+      border-bottom: 1px solid ${({ theme }) => theme.colors.gray[4]};
+    }
+  }
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-color: ${({ theme }) => theme.colors.violet[5]};
+
+    &::before {
+      opacity: 1;
+      transform: rotate(-50deg) scale(1, 1);
+    }
+  }
+
+  &:hover:not(:disabled) {
+    border: 1px solid ${({ theme }) => theme.colors.violet[9]};
+  }
+
+  &:hover:checked:not(:disabled) {
+    border-color: ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+
+    &:before {
+      background-color: ${({ theme }) => theme.colors.violet[9]};
+    }
+  }
+
+  ${({ intermediate, size, theme }) => intermediate && css`
+      &,
+      &:hover,
+      &:checked {
+        background-color: ${({ theme: theme2 }) => theme2.colors.violet[9]};
+        border-color: ${({ theme: theme2 }) => theme2.colors.grayViolet[9]};
+        &::before {
+          top: calc(calc(${getSizing(size)} - 0.125rem) / 2);
+          left: 0.125rem;
+          width: calc(${getSizing(size)} - 0.125rem * 2 - 0.125rem);
+          height: 0.125rem;
+          background-color: ${theme.colors.grayViolet[7]};
+          border: none;
+          opacity: 1;
+          transition:
+            opacity 0.15s,
+            transform 0.15s,
+            background-color 0.08s 0.04s;
+          transform: rotate(0) translate(0, -50%);
+        }
+      }
+    `};
+`;
+const CheckboxGroupWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["direction", "isError"].includes(props)
+})`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
+
+  .checkbox-group__required {
+    color: ${({ theme }) => theme.colors.red[7]};
+  }
+
+  .checkbox-group__error-message {
+    color: ${({ theme }) => theme.colors.red[7]};
+  }
+
+  ${({ isError, theme }) => isError && css`
+      border-left: 2px solid ${theme.colors.red[9]};
+      padding-left: 0.5rem;
+    `};
+`;
+export {
+  CheckboxGroupWrapper,
+  CheckboxInputStyled,
+  CheckboxLabelStyled
+};

package/dist/Checkbox/types.d.ts

@@ -0,0 +1,67 @@
+import { default as React, ChangeEvent } from 'react';
+import { TQuenSize } from '../types/size';
+export interface ICheckboxProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Form submission value */
+    value?: string | number;
+    /** Change event handler */
+    onChange?: (isChecked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Custom label content (supports JSX */
+    label?: React.ReactNode;
+    /** Form input name */
+    name?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Controls checkbox dimensions */
+    size?: TQuenSize;
+    /** DOM ID for label association */
+    id?: string;
+    /** Shows "indeterminate" state (─) */
+    intermediate?: boolean;
+    [key: string]: any;
+}
+export interface ICheckboxGroupDefaultItem {
+    key?: string | number;
+    label: string;
+    disabled?: boolean;
+    value: string | number;
+}
+export type TCheckboxGroupPropGetItemKey<TItem> = (item: TItem) => string | number | undefined;
+export type TCheckboxGroupPropGetItemLabel<TItem> = (item: TItem) => React.ReactNode;
+export type TCheckboxGroupPropGetItemDisabled<TItem> = (item: TItem) => boolean | undefined;
+export type TCheckboxGroupPropGetItemValue<TItem, VALUE extends (string | number) = string | number> = (item: TItem) => VALUE;
+export interface ICheckboxGroupProps<ITEM = ICheckboxGroupDefaultItem, VALUE extends (string | number) = string | number> {
+    /** Group heading label */
+    label?: React.ReactNode;
+    /** Currently selected values */
+    value?: VALUE[];
+    /** Controls checkbox sizes */
+    size?: TQuenSize;
+    /** Disables entire group */
+    disabled?: boolean;
+    /** Array of checkbox items */
+    options: ITEM[];
+    /** Group name for form submission */
+    name?: string;
+    /** Layout orientation */
+    direction?: "vertical" | "horizontal";
+    /** Selection change handler */
+    onChange?: (value: VALUE[], event: ChangeEvent<HTMLInputElement>) => void;
+    /** Custom CSS class */
+    className?: string;
+    /** 	Unique key generator */
+    getItemKey?: TCheckboxGroupPropGetItemKey<ITEM>;
+    /** Label renderer */
+    getItemLabel?: TCheckboxGroupPropGetItemLabel<ITEM>;
+    /** Disable state checker */
+    getItemDisabled?: TCheckboxGroupPropGetItemDisabled<ITEM>;
+    /** Value extractor */
+    getItemValue?: TCheckboxGroupPropGetItemValue<ITEM, VALUE>;
+    /** Marks as required field */
+    required?: boolean;
+    /** Validation error message */
+    error?: string;
+}

package/dist/Divider/Divider.cjs.js

@@ -0,0 +1,27 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Divider = ({
+  height,
+  width,
+  children,
+  align = "center",
+  view = "primary",
+  direction,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  styles.DividerStyled,
+  {
+    ...props,
+    role: "separator",
+    height,
+    width,
+    align,
+    view,
+    direction,
+    className,
+    children
+  }
+);
+module.exports = Divider;

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { IDividerProps } from './types';
+declare const Divider: ({ height, width, children, align, view, direction, className, ...props }: PropsWithChildren<IDividerProps>) => ReactElement;
+export default Divider;

package/dist/Divider/Divider.es.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { DividerStyled } from "./styles.es.js";
+const Divider = ({
+  height,
+  width,
+  children,
+  align = "center",
+  view = "primary",
+  direction,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DividerStyled,
+  {
+    ...props,
+    role: "separator",
+    height,
+    width,
+    align,
+    view,
+    direction,
+    className,
+    children
+  }
+);
+export {
+  Divider as default
+};

package/dist/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider';
+export type { IDividerProps } from './types';

package/dist/Divider/styles.cjs.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getDirectionStyles = ({
+  direction,
+  height,
+  width
+}) => {
+  if (direction === "horizontal") {
+    return styled.css`
+      width: ${width ? width : "100%"};
+      flex-direction: row;
+
+      &:before,
+      &:after {
+        height: 1px;
+      }
+
+      &::after {
+        border-radius: 0 0.25rem 0.25rem 0;
+      }
+
+      &::before {
+        border-radius: 0.25rem 0 0 0.25rem;
+      }
+    `;
+  }
+  return styled.css`
+    height: ${height ? height : "100%"};
+    flex-direction: column;
+
+    &:before,
+    &:after {
+      width: 1px;
+    }
+
+    &::after {
+      border-radius: 0 0 0.25rem 0.25rem;
+    }
+    &::before {
+      border-radius: 0.25rem 0.25rem 0 0;
+    }
+  `;
+};
+const getAlignStyles = ({ align, direction }) => {
+  if (align === "left") {
+    return styled.css`
+      &::before {
+        ${direction === "horizontal" ? "width: 0.5rem" : "height: 0.5rem"};
+      }
+
+      &::after {
+        flex-grow: 1;
+      }
+    `;
+  } else if (align === "right") {
+    return styled.css`
+      &::before {
+        flex-grow: 1;
+      }
+
+      &::after {
+        ${direction === "horizontal" ? "width: 0.5rem" : "height: 0.5rem"};
+      }
+    `;
+  }
+  return styled.css`
+    &::before,
+    &::after {
+      flex-grow: 1;
+    }
+  `;
+};
+const getBackground = ({
+  view
+}) => {
+  return styled.css`
+    &::before,
+    &::after {
+      content: "";
+      ${({ theme }) => {
+    switch (view) {
+      case "disabled":
+        return styled.css`
+              background-color: ${theme.colors.gray[9]};
+            `;
+      case "danger":
+        return styled.css`
+              background-color: ${theme.colors.red[9]};
+            `;
+      case "success":
+        return styled.css`
+              background-color: ${theme.colors.green[9]};
+            `;
+      case "warning":
+        return styled.css`
+              background-color: ${theme.colors.orange[9]};
+            `;
+      case "primary":
+      default:
+        return styled.css`
+              background-color: ${theme.colors.grayViolet[9]};
+            `;
+    }
+  }};
+    }
+  `;
+};
+const DividerStyled = styled.div`
+  display: flex;
+  align-items: center;
+  ${({ children }) => Boolean(children) && "gap: 0.5rem"};
+  ${getDirectionStyles};
+  ${getBackground};
+  ${getAlignStyles};
+  & > * {
+    width: max-content;
+    color: ${({ theme }) => theme.textColor};
+  }
+`;
+exports.DividerStyled = DividerStyled;

package/dist/Divider/styles.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { IDividerProps } from './types';
+export declare const DividerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PropsWithChildren<IDividerProps>>> & string;

package/dist/Divider/styles.es.js

@@ -0,0 +1,121 @@
+import styled, { css } from "styled-components";
+const getDirectionStyles = ({
+  direction,
+  height,
+  width
+}) => {
+  if (direction === "horizontal") {
+    return css`
+      width: ${width ? width : "100%"};
+      flex-direction: row;
+
+      &:before,
+      &:after {
+        height: 1px;
+      }
+
+      &::after {
+        border-radius: 0 0.25rem 0.25rem 0;
+      }
+
+      &::before {
+        border-radius: 0.25rem 0 0 0.25rem;
+      }
+    `;
+  }
+  return css`
+    height: ${height ? height : "100%"};
+    flex-direction: column;
+
+    &:before,
+    &:after {
+      width: 1px;
+    }
+
+    &::after {
+      border-radius: 0 0 0.25rem 0.25rem;
+    }
+    &::before {
+      border-radius: 0.25rem 0.25rem 0 0;
+    }
+  `;
+};
+const getAlignStyles = ({ align, direction }) => {
+  if (align === "left") {
+    return css`
+      &::before {
+        ${direction === "horizontal" ? "width: 0.5rem" : "height: 0.5rem"};
+      }
+
+      &::after {
+        flex-grow: 1;
+      }
+    `;
+  } else if (align === "right") {
+    return css`
+      &::before {
+        flex-grow: 1;
+      }
+
+      &::after {
+        ${direction === "horizontal" ? "width: 0.5rem" : "height: 0.5rem"};
+      }
+    `;
+  }
+  return css`
+    &::before,
+    &::after {
+      flex-grow: 1;
+    }
+  `;
+};
+const getBackground = ({
+  view
+}) => {
+  return css`
+    &::before,
+    &::after {
+      content: "";
+      ${({ theme }) => {
+    switch (view) {
+      case "disabled":
+        return css`
+              background-color: ${theme.colors.gray[9]};
+            `;
+      case "danger":
+        return css`
+              background-color: ${theme.colors.red[9]};
+            `;
+      case "success":
+        return css`
+              background-color: ${theme.colors.green[9]};
+            `;
+      case "warning":
+        return css`
+              background-color: ${theme.colors.orange[9]};
+            `;
+      case "primary":
+      default:
+        return css`
+              background-color: ${theme.colors.grayViolet[9]};
+            `;
+    }
+  }};
+    }
+  `;
+};
+const DividerStyled = styled.div`
+  display: flex;
+  align-items: center;
+  ${({ children }) => Boolean(children) && "gap: 0.5rem"};
+  ${getDirectionStyles};
+  ${getBackground};
+  ${getAlignStyles};
+  & > * {
+    width: max-content;
+    color: ${({ theme }) => theme.textColor};
+  }
+`;
+export {
+  DividerStyled
+};

package/dist/Divider/types.d.ts

@@ -0,0 +1,17 @@
+export declare const DIVIDER_VIEW: readonly ["primary", "disabled", "danger", "warning", "success"];
+export type TDividerView = typeof DIVIDER_VIEW[number];
+export interface IDividerProps {
+    /** Additional CSS class */
+    className?: string;
+    /** Visual style variant */
+    view?: TDividerView;
+    /** Orientation of divider */
+    direction: "horizontal" | "vertical";
+    /** Horizontal alignment (ignored in vertical mode  */
+    align?: "left" | "center" | "right";
+    /** Custom width (horizontal dividers) */
+    width?: string;
+    /** Custom height (vertical dividers) */
+    height?: string;
+    [key: string]: any;
+}

package/dist/Drawer/Drawer.cjs.js

@@ -0,0 +1,67 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const reactTransitionState = require("react-transition-state");
+const hooks = require("@quen-ui/hooks");
+const styles = require("./styles.cjs.js");
+const Divider = require("../Divider/Divider.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Drawer = ({
+  open,
+  children,
+  position = "left",
+  size = "m",
+  zIndex,
+  noCloseOnClickOutside = false,
+  onClose,
+  title,
+  className,
+  closeIcon
+}) => {
+  const [container, setContainer] = React.useState(null);
+  const [state, toggle] = reactTransitionState.useTransitionState({
+    timeout: 500,
+    unmountOnExit: true,
+    initialEntered: open
+  });
+  const refWrapper = React.useRef(null);
+  hooks.useOnClickOutside(refWrapper, () => !noCloseOnClickOutside && (onClose == null ? void 0 : onClose()));
+  React.useEffect(() => {
+    toggle(open);
+  }, [open]);
+  React.useEffect(() => {
+    const container2 = document.getElementsByTagName("body").item(0);
+    setContainer(container2);
+  }, []);
+  if (state.isEnter && container) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(styles.DrawerWrapper, { zIndex, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        styles.DrawerStyled,
+        {
+          role: "dialog",
+          size,
+          position,
+          ref: refWrapper,
+          status: state.status,
+          className,
+          children: [
+            title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(styles.DrawerTitleWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "s", children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "xs", onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "quen-ui-drawer--content", children })
+          ]
+        }
+      ) }),
+      container
+    );
+  }
+  return null;
+};
+module.exports = Drawer;

package/dist/Drawer/Drawer.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IDrawerProps } from './types';
+declare const Drawer: ({ open, children, position, size, zIndex, noCloseOnClickOutside, onClose, title, className, closeIcon }: IDrawerProps) => React.ReactNode;
+export default Drawer;