@quen-ui/components 0.0.14

package/dist/RadioButton/styles.es.js

@@ -0,0 +1,84 @@
+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 RadioButtonLabelStyled = styled.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+`;
+const RadioButtonInput = styled.input`
+  width: ${({ size }) => getSizing(size)};
+  height: ${({ size }) => getSizing(size)};
+  border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+  border-radius: 50%;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  -webkit-appearance: none;
+  
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+    cursor: not-allowed;
+  }
+
+  &:disabled:checked {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[3]};
+    cursor: not-allowed;
+  }
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.gray[4]};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[9]};
+  }
+
+  &:hover:not(:disabled) {
+    border: 1px solid ${({ theme }) => theme.colors.violet[5]};
+  }
+  
+  &:hover:checked:not(:disabled) {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[6]};
+`;
+const RadioGroupWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isError"].includes(prop)
+})`
+  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[5]};
+      padding-left: 0.5rem;
+    `};
+`;
+export {
+  RadioButtonInput,
+  RadioButtonLabelStyled,
+  RadioGroupWrapper
+};

package/dist/RadioButton/types.d.ts

@@ -0,0 +1,65 @@
+import { default as React, ChangeEvent } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IRadioButtonProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Form value when selected */
+    value?: string | number;
+    /** 	Change event handler */
+    onChange?: (isChecked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Right-aligned label content */
+    label?: React.ReactNode;
+    /** Group identifier for forms */
+    name?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Visual size */
+    size?: TQuenSize;
+    /** DOM identifier */
+    id?: string;
+    [key: string]: any;
+}
+export interface IRadioGroupDefaultItem {
+    key?: string | number;
+    label: string;
+    disabled?: boolean;
+    value: string | number;
+}
+export type TRadioGroupPropGetItemKey<TItem> = (item: TItem) => string | number | undefined;
+export type TRadioGroupPropGetItemLabel<TItem> = (item: TItem) => React.ReactNode;
+export type TRadioGroupPropGetItemDisabled<TItem> = (item: TItem) => boolean | undefined;
+export type TRadioGroupPropGetItemValue<TItem> = (item: TItem) => string | number;
+export interface IRadioGroupProps<TItem = IRadioGroupDefaultItem> {
+    /** Group label */
+    label?: React.ReactNode;
+    /** Currently selected value */
+    value?: string | number;
+    /** Uniform size for all radios */
+    size?: TQuenSize;
+    /** Disables entire group */
+    disabled?: boolean;
+    /** Data source for radio items */
+    options: TItem[];
+    /** Group identifier for forms */
+    name?: string;
+    /** Layout orientation */
+    direction?: "vertical" | "horizontal";
+    /**	Selection change handler */
+    onChange?: (value: string | number, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Custom CSS class */
+    className?: string;
+    /** Unique key extractor */
+    getItemKey?: TRadioGroupPropGetItemKey<TItem>;
+    /** Label text extractor */
+    getItemLabel?: TRadioGroupPropGetItemLabel<TItem>;
+    /** Disabled state extractor */
+    getItemDisabled?: TRadioGroupPropGetItemDisabled<TItem>;
+    /** Value extractor */
+    getItemValue?: TRadioGroupPropGetItemValue<TItem>;
+    /** Marks group as required */
+    required?: boolean;
+    /** Validation error message */
+    error?: string;
+}

package/dist/Select/Select.cjs.js

@@ -0,0 +1,114 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Select = require("rc-select");
+const Text = require("../typography/Text/Text.cjs.js");
+const styles = require("./styles.cjs.js");
+const useSelect = require("./useSelect.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Tag = require("../Tag/Tag.cjs.js");
+const iconArrowBottom = require("../assets/icon-arrow-bottom.svg.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const SelectComponent = (props) => {
+  const {
+    items,
+    handleChange,
+    currentValue,
+    size,
+    getItemLabel,
+    getItemValue,
+    placeholder,
+    getItemDisabled,
+    getItemIcon,
+    error,
+    zIndex,
+    label,
+    required,
+    id,
+    multi,
+    autoFocus,
+    clearable,
+    loading,
+    leftContent,
+    onClear,
+    rightContent,
+    notFoundContent,
+    showSearch,
+    className,
+    defaultOpen,
+    open,
+    disabled,
+    style
+  } = useSelect.useSelect(
+    helpers.withDefaultGetters(props)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.SelectWrapper,
+    {
+      size,
+      error,
+      className,
+      style,
+      "data-testid": "select",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropDownStyles, { zIndex }),
+        label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, for: id, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-field__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            mode: multi ? "multiple" : void 0,
+            autoFocus,
+            allowClear: clearable && {
+              clearIcon: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { className: "rc-select-clear-icon" })
+            },
+            onClear,
+            menuItemSelectedIcon: null,
+            loading,
+            prefix: leftContent,
+            suffixIcon: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 4, align: "center", children: [
+              rightContent,
+              /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "icon-arrow" })
+            ] }),
+            labelRender: (props2) => /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: props2.label }),
+            open,
+            disabled,
+            showSearch,
+            value: currentValue || null,
+            id,
+            placeholder: /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: placeholder }),
+            notFoundContent,
+            defaultOpen,
+            onChange: handleChange,
+            tagRender: ({ label: label2, disabled: disabledTag, onClose }) => /* @__PURE__ */ jsxRuntime.jsx(
+              Tag,
+              {
+                size,
+                closable: true,
+                onClickClose: () => onClose(),
+                disabled: disabledTag || disabled,
+                children: label2
+              }
+            ),
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              Select.Option,
+              {
+                value: getItemValue == null ? void 0 : getItemValue(item),
+                disabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+                children: [
+                  getItemIcon == null ? void 0 : getItemIcon(item),
+                  /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel == null ? void 0 : getItemLabel(item) })
+                ]
+              },
+              getItemValue == null ? void 0 : getItemValue(item)
+            ))
+          }
+        ),
+        typeof props.error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-field__error-message", size: "xs", children: props.error })
+      ]
+    }
+  );
+};
+module.exports = SelectComponent;

package/dist/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TSelectProps, ISelectDefaultItem } from './types';
+declare const SelectComponent: <ITEM = ISelectDefaultItem>(props: TSelectProps<ITEM>) => React.ReactElement;
+export default SelectComponent;

package/dist/Select/Select.es.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Select, { Option } from "rc-select";
+import Text from "../typography/Text/Text.es.js";
+import { SelectWrapper, SelectDropDownStyles } from "./styles.es.js";
+import { useSelect } from "./useSelect.es.js";
+import { withDefaultGetters } from "./helpers.es.js";
+import Tag from "../Tag/Tag.es.js";
+import SvgIconArrowBottom from "../assets/icon-arrow-bottom.svg.es.js";
+import Flex from "../Flex/Flex.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+const SelectComponent = (props) => {
+  const {
+    items,
+    handleChange,
+    currentValue,
+    size,
+    getItemLabel,
+    getItemValue,
+    placeholder,
+    getItemDisabled,
+    getItemIcon,
+    error,
+    zIndex,
+    label,
+    required,
+    id,
+    multi,
+    autoFocus,
+    clearable,
+    loading,
+    leftContent,
+    onClear,
+    rightContent,
+    notFoundContent,
+    showSearch,
+    className,
+    defaultOpen,
+    open,
+    disabled,
+    style
+  } = useSelect(
+    withDefaultGetters(props)
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectWrapper,
+    {
+      size,
+      error,
+      className,
+      style,
+      "data-testid": "select",
+      children: [
+        /* @__PURE__ */ jsx(SelectDropDownStyles, { zIndex }),
+        label && /* @__PURE__ */ jsxs(Text, { as: "label", size, for: id, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-field__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            mode: multi ? "multiple" : void 0,
+            autoFocus,
+            allowClear: clearable && {
+              clearIcon: /* @__PURE__ */ jsx(SvgIconClose, { className: "rc-select-clear-icon" })
+            },
+            onClear,
+            menuItemSelectedIcon: null,
+            loading,
+            prefix: leftContent,
+            suffixIcon: /* @__PURE__ */ jsxs(Flex, { gap: 4, align: "center", children: [
+              rightContent,
+              /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "icon-arrow" })
+            ] }),
+            labelRender: (props2) => /* @__PURE__ */ jsx(Text, { size, children: props2.label }),
+            open,
+            disabled,
+            showSearch,
+            value: currentValue || null,
+            id,
+            placeholder: /* @__PURE__ */ jsx(Text, { size, children: placeholder }),
+            notFoundContent,
+            defaultOpen,
+            onChange: handleChange,
+            tagRender: ({ label: label2, disabled: disabledTag, onClose }) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size,
+                closable: true,
+                onClickClose: () => onClose(),
+                disabled: disabledTag || disabled,
+                children: label2
+              }
+            ),
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              Option,
+              {
+                value: getItemValue == null ? void 0 : getItemValue(item),
+                disabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+                children: [
+                  getItemIcon == null ? void 0 : getItemIcon(item),
+                  /* @__PURE__ */ jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel == null ? void 0 : getItemLabel(item) })
+                ]
+              },
+              getItemValue == null ? void 0 : getItemValue(item)
+            ))
+          }
+        ),
+        typeof props.error === "string" && /* @__PURE__ */ jsx(Text, { className: "text-field__error-message", size: "xs", children: props.error })
+      ]
+    }
+  );
+};
+export {
+  SelectComponent as default
+};

package/dist/Select/helpers.cjs.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemValue = (item) => (item == null ? void 0 : item.value) || null;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemIcon = (item) => item.icon;
+function withDefaultGetters(props) {
+  return {
+    ...props,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemValue: props.getItemValue || defaultGetItemValue,
+    getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+    getItemIcon: props.getItemIcon || defaultGetItemIcon
+  };
+}
+exports.withDefaultGetters = withDefaultGetters;

package/dist/Select/helpers.d.ts

@@ -0,0 +1,138 @@
+import { TSelectProps, TSelectGetItemLabel, ISelectDefaultItem, TSelectGetItemValue, TSelectGetItemDisabled, TSelectGetItemIcon } from './types';
+export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
+    getItemLabel: TSelectGetItemLabel<ISelectDefaultItem> | TSelectGetItemLabel<ITEM>;
+    getItemValue: TSelectGetItemValue<ISelectDefaultItem> | TSelectGetItemValue<ITEM>;
+    getItemDisabled: TSelectGetItemDisabled<ISelectDefaultItem> | TSelectGetItemDisabled<ITEM>;
+    getItemIcon: TSelectGetItemIcon<ISelectDefaultItem> | TSelectGetItemIcon<ITEM>;
+    onChange?: import('./types').TSingleSelectValueOnChange;
+    onChangeReturnValue?: "value";
+    value?: import('./types').TSelectSingleValue | null;
+    multi?: undefined | false;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    items: ITEM[];
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    getItemLabel: TSelectGetItemLabel<ISelectDefaultItem> | TSelectGetItemLabel<ITEM>;
+    getItemValue: TSelectGetItemValue<ISelectDefaultItem> | TSelectGetItemValue<ITEM>;
+    getItemDisabled: TSelectGetItemDisabled<ISelectDefaultItem> | TSelectGetItemDisabled<ITEM>;
+    getItemIcon: TSelectGetItemIcon<ISelectDefaultItem> | TSelectGetItemIcon<ITEM>;
+    onChange?: import('./types').TMultiSelectValueOnChange;
+    onChangeReturnValue?: "value";
+    value?: import('./types').TSelectSingleValue[];
+    multi: true;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    items: ITEM[];
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    getItemLabel: TSelectGetItemLabel<ISelectDefaultItem> | TSelectGetItemLabel<ITEM>;
+    getItemValue: TSelectGetItemValue<ISelectDefaultItem> | TSelectGetItemValue<ITEM>;
+    getItemDisabled: TSelectGetItemDisabled<ISelectDefaultItem> | TSelectGetItemDisabled<ITEM>;
+    getItemIcon: TSelectGetItemIcon<ISelectDefaultItem> | TSelectGetItemIcon<ITEM>;
+    onChange?: import('./types').TSingleSelectItemOnChange<ITEM> | undefined;
+    onChangeReturnValue: "item";
+    value?: ITEM | null | undefined;
+    multi?: undefined | false;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    items: ITEM[];
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    getItemLabel: TSelectGetItemLabel<ISelectDefaultItem> | TSelectGetItemLabel<ITEM>;
+    getItemValue: TSelectGetItemValue<ISelectDefaultItem> | TSelectGetItemValue<ITEM>;
+    getItemDisabled: TSelectGetItemDisabled<ISelectDefaultItem> | TSelectGetItemDisabled<ITEM>;
+    getItemIcon: TSelectGetItemIcon<ISelectDefaultItem> | TSelectGetItemIcon<ITEM>;
+    onChange?: import('./types').TMultiSelectItemOnChange<ITEM> | undefined;
+    onChangeReturnValue?: "item";
+    value?: ITEM[] | undefined;
+    multi: true;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    items: ITEM[];
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+};

package/dist/Select/helpers.es.js

@@ -0,0 +1,16 @@
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemValue = (item) => (item == null ? void 0 : item.value) || null;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemIcon = (item) => item.icon;
+function withDefaultGetters(props) {
+  return {
+    ...props,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemValue: props.getItemValue || defaultGetItemValue,
+    getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+    getItemIcon: props.getItemIcon || defaultGetItemIcon
+  };
+}
+export {
+  withDefaultGetters
+};

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export type { ISelectDefaultItem, TSelectGetItemValue, TSelectGetItemDisabled, TSingleSelectProps, TSingleSelectValueOnChange, TMultiSelectItemOnChange, TMultiSelectValueOnChange, TSelectProps, TSelectGetItemLabel, TMultiSelectProps, TSelectSingleValue, TSingleSelectItemOnChange } from './types';