@quen-ui/components 0.0.14

package/dist/Progress/styles.cjs.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const Text = require("../typography/Text/Text.cjs.js");
+const getBackgroundBar = (theme, color) => {
+  if (color && color in theme.colors) {
+    switch (color) {
+      case "grayViolet":
+        return theme.colors.grayViolet[7];
+      case "green":
+        return theme.colors.green[7];
+      case "orange":
+        return theme.colors.orange[7];
+      case "yellow":
+        return theme.colors.yellow[7];
+      case "red":
+        return theme.colors.red[7];
+      case "violet":
+        return theme.colors.violet[7];
+    }
+  }
+  return theme.colors.violet[7];
+};
+const getBackgroundWrapper = (theme, color) => {
+  if (color && color in theme.colors) {
+    switch (color) {
+      case "grayViolet":
+        return theme.colors.grayViolet[9];
+      case "green":
+        return theme.colors.green[9];
+      case "orange":
+        return theme.colors.orange[9];
+      case "yellow":
+        return theme.colors.yellow[9];
+      case "red":
+        return theme.colors.red[9];
+      case "violet":
+        return theme.colors.violet[9];
+    }
+  }
+  return theme.colors.violet[9];
+};
+const ProgressWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.xs};
+  width: 100%;
+`;
+const getHeight = (size, theme) => {
+  switch (size) {
+    case "xs":
+      return theme.control.height.xs;
+    case "s":
+      return theme.control.height.s;
+    case "l":
+      return theme.control.height.l;
+    case "m":
+    default:
+      return theme.control.height.m;
+  }
+};
+const ProgressStyled = styled.div`
+  display: flex;
+  border-radius: ${({ theme }) => theme.control.radius};
+  overflow: hidden;
+  width: 100%;
+  height: ${({ theme, size }) => getHeight(size, theme)};
+  background: ${({ theme, color }) => polished.rgba(getBackgroundWrapper(theme, color), 0.3)};
+`;
+const ProgressBarStyled = styled.div`
+  height: 100%;
+  background: ${({ theme, color }) => getBackgroundBar(theme, color)};
+  border-radius: ${({ theme }) => theme.control.radius};
+`;
+const ProgressLabelStyled = styled(Text)`
+  color: ${({ theme, color }) => getBackgroundBar(theme, color)};
+`;
+exports.ProgressBarStyled = ProgressBarStyled;
+exports.ProgressLabelStyled = ProgressLabelStyled;
+exports.ProgressStyled = ProgressStyled;
+exports.ProgressWrapper = ProgressWrapper;

package/dist/Progress/styles.d.ts

@@ -0,0 +1,13 @@
+import { TQuenSize } from '../types/size';
+import { IProgressProps } from './types';
+export declare const ProgressWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+    color: Required<IProgressProps>["color"];
+}>> & string;
+export declare const ProgressBarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: Required<IProgressProps>["color"];
+}>> & string;
+export declare const ProgressLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITextProps, {
+    color: Required<IProgressProps>["color"];
+}>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;

package/dist/Progress/styles.es.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { rgba } from "polished";
+import Text from "../typography/Text/Text.es.js";
+const getBackgroundBar = (theme, color) => {
+  if (color && color in theme.colors) {
+    switch (color) {
+      case "grayViolet":
+        return theme.colors.grayViolet[7];
+      case "green":
+        return theme.colors.green[7];
+      case "orange":
+        return theme.colors.orange[7];
+      case "yellow":
+        return theme.colors.yellow[7];
+      case "red":
+        return theme.colors.red[7];
+      case "violet":
+        return theme.colors.violet[7];
+    }
+  }
+  return theme.colors.violet[7];
+};
+const getBackgroundWrapper = (theme, color) => {
+  if (color && color in theme.colors) {
+    switch (color) {
+      case "grayViolet":
+        return theme.colors.grayViolet[9];
+      case "green":
+        return theme.colors.green[9];
+      case "orange":
+        return theme.colors.orange[9];
+      case "yellow":
+        return theme.colors.yellow[9];
+      case "red":
+        return theme.colors.red[9];
+      case "violet":
+        return theme.colors.violet[9];
+    }
+  }
+  return theme.colors.violet[9];
+};
+const ProgressWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.xs};
+  width: 100%;
+`;
+const getHeight = (size, theme) => {
+  switch (size) {
+    case "xs":
+      return theme.control.height.xs;
+    case "s":
+      return theme.control.height.s;
+    case "l":
+      return theme.control.height.l;
+    case "m":
+    default:
+      return theme.control.height.m;
+  }
+};
+const ProgressStyled = styled.div`
+  display: flex;
+  border-radius: ${({ theme }) => theme.control.radius};
+  overflow: hidden;
+  width: 100%;
+  height: ${({ theme, size }) => getHeight(size, theme)};
+  background: ${({ theme, color }) => rgba(getBackgroundWrapper(theme, color), 0.3)};
+`;
+const ProgressBarStyled = styled.div`
+  height: 100%;
+  background: ${({ theme, color }) => getBackgroundBar(theme, color)};
+  border-radius: ${({ theme }) => theme.control.radius};
+`;
+const ProgressLabelStyled = styled(Text)`
+  color: ${({ theme, color }) => getBackgroundBar(theme, color)};
+`;
+export {
+  ProgressBarStyled,
+  ProgressLabelStyled,
+  ProgressStyled,
+  ProgressWrapper
+};

package/dist/Progress/types.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export declare const COLOR_PROGRESS: readonly ["violet", "grayViolet", "red", "yellow", "green", "orange"];
+export type TProgressColor = typeof COLOR_PROGRESS[number];
+export interface IProgressProps {
+    /** Controls track height. Default size 'm' */
+    size?: TQuenSize;
+    /** Shows numeric value inside bar */
+    showInfo?: boolean;
+    label?: React.ReactNode;
+    /** Completion percentage (0-100) */
+    value: number;
+    /** Progress bar color */
+    color?: TProgressColor;
+    /** Container class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    [key: string]: any;
+}

package/dist/RadioButton/RadioButton.cjs.js

@@ -0,0 +1,45 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Text = require("../typography/Text/Text.cjs.js");
+const styles = require("./styles.cjs.js");
+const RadioButton = ({
+  disabled,
+  label,
+  size = "m",
+  name,
+  id,
+  onChange,
+  checked,
+  value,
+  className,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.checked, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.RadioButtonLabelStyled,
+    {
+      id,
+      disabled,
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.RadioButtonInput,
+          {
+            checked,
+            type: "radio",
+            name,
+            onChange: handleChange,
+            size,
+            disabled,
+            value
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: label })
+      ]
+    }
+  );
+};
+module.exports = RadioButton;

package/dist/RadioButton/RadioButton.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IRadioButtonProps } from './types';
+declare const RadioButton: ({ disabled, label, size, name, id, onChange, checked, value, className, ...props }: IRadioButtonProps) => React.ReactElement;
+export default RadioButton;

package/dist/RadioButton/RadioButton.es.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Text from "../typography/Text/Text.es.js";
+import { RadioButtonLabelStyled, RadioButtonInput } from "./styles.es.js";
+const RadioButton = ({
+  disabled,
+  label,
+  size = "m",
+  name,
+  id,
+  onChange,
+  checked,
+  value,
+  className,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.checked, event);
+  };
+  return /* @__PURE__ */ jsxs(
+    RadioButtonLabelStyled,
+    {
+      id,
+      disabled,
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          RadioButtonInput,
+          {
+            checked,
+            type: "radio",
+            name,
+            onChange: handleChange,
+            size,
+            disabled,
+            value
+          }
+        ),
+        label && /* @__PURE__ */ jsx(Text, { size, children: label })
+      ]
+    }
+  );
+};
+export {
+  RadioButton as default
+};

package/dist/RadioButton/RadioButtonGroup.cjs.js

@@ -0,0 +1,68 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const RadioButton = require("./RadioButton.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const RadioGroup = ({
+  ...props
+}) => {
+  const {
+    name,
+    className,
+    size = "m",
+    getItemKey,
+    getItemLabel,
+    direction,
+    options,
+    disabled,
+    getItemDisabled,
+    getItemValue,
+    value = [],
+    onChange,
+    label,
+    required,
+    error
+  } = helpers.withDefaultGetters(props);
+  const getIsChecked = (item) => value === getItemValue(item);
+  const handleChange = (params, event) => {
+    onChange == null ? void 0 : onChange(params.value, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.RadioGroupWrapper,
+    {
+      direction,
+      className,
+      isError: Boolean(error),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-group__required", children: "*" })
+        ] }),
+        options.map((option) => {
+          var _a;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            RadioButton,
+            {
+              size,
+              label: getItemLabel(option),
+              name,
+              checked: getIsChecked(option),
+              disabled: disabled ?? getItemDisabled(option),
+              value: getItemValue(option),
+              onChange: (isChecked, event) => handleChange(
+                {
+                  value: getItemValue(option)
+                },
+                event
+              )
+            },
+            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
+          );
+        }),
+        typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
+      ]
+    }
+  );
+};
+module.exports = RadioGroup;

package/dist/RadioButton/RadioButtonGroup.d.ts

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

package/dist/RadioButton/RadioButtonGroup.es.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { RadioGroupWrapper } from "./styles.es.js";
+import RadioButton from "./RadioButton.es.js";
+import { withDefaultGetters } from "./helpers.es.js";
+import Text from "../typography/Text/Text.es.js";
+const RadioGroup = ({
+  ...props
+}) => {
+  const {
+    name,
+    className,
+    size = "m",
+    getItemKey,
+    getItemLabel,
+    direction,
+    options,
+    disabled,
+    getItemDisabled,
+    getItemValue,
+    value = [],
+    onChange,
+    label,
+    required,
+    error
+  } = withDefaultGetters(props);
+  const getIsChecked = (item) => value === getItemValue(item);
+  const handleChange = (params, event) => {
+    onChange == null ? void 0 : onChange(params.value, event);
+  };
+  return /* @__PURE__ */ jsxs(
+    RadioGroupWrapper,
+    {
+      direction,
+      className,
+      isError: Boolean(error),
+      children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "label", size, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "checkbox-group__required", children: "*" })
+        ] }),
+        options.map((option) => {
+          var _a;
+          return /* @__PURE__ */ jsx(
+            RadioButton,
+            {
+              size,
+              label: getItemLabel(option),
+              name,
+              checked: getIsChecked(option),
+              disabled: disabled ?? getItemDisabled(option),
+              value: getItemValue(option),
+              onChange: (isChecked, event) => handleChange(
+                {
+                  value: getItemValue(option)
+                },
+                event
+              )
+            },
+            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
+          );
+        }),
+        typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
+      ]
+    }
+  );
+};
+export {
+  RadioGroup as default
+};

package/dist/RadioButton/helpers.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemValue = (item) => item.value;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemValue: props.getItemValue || defaultGetItemValue
+});
+exports.withDefaultGetters = withDefaultGetters;

package/dist/RadioButton/helpers.d.ts

@@ -0,0 +1,18 @@
+import { IRadioGroupDefaultItem, TRadioGroupPropGetItemDisabled, TRadioGroupPropGetItemLabel, TRadioGroupPropGetItemValue, TRadioGroupPropGetItemKey, IRadioGroupProps } from './types';
+export declare const withDefaultGetters: <TItem>(props: IRadioGroupProps<TItem>) => {
+    getItemKey: TRadioGroupPropGetItemKey<IRadioGroupDefaultItem> | TRadioGroupPropGetItemKey<TItem>;
+    getItemLabel: TRadioGroupPropGetItemLabel<IRadioGroupDefaultItem> | TRadioGroupPropGetItemLabel<TItem>;
+    getItemDisabled: TRadioGroupPropGetItemDisabled<IRadioGroupDefaultItem> | TRadioGroupPropGetItemDisabled<TItem>;
+    getItemValue: TRadioGroupPropGetItemValue<IRadioGroupDefaultItem> | TRadioGroupPropGetItemValue<TItem>;
+    label?: React.ReactNode;
+    value?: string | number;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    options: TItem[];
+    name?: string;
+    direction?: "vertical" | "horizontal";
+    onChange?: (value: string | number, event: import('react').ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    required?: boolean;
+    error?: string;
+};

package/dist/RadioButton/helpers.es.js

@@ -0,0 +1,14 @@
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemValue = (item) => item.value;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemValue: props.getItemValue || defaultGetItemValue
+});
+export {
+  withDefaultGetters
+};

package/dist/RadioButton/index.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const RadioButton$1 = require("./RadioButton.cjs.js");
+const RadioButtonGroup = require("./RadioButtonGroup.cjs.js");
+const RadioButton = RadioButton$1;
+RadioButton.Group = RadioButtonGroup;
+exports.RadioButton = RadioButton;

package/dist/RadioButton/index.d.ts

@@ -0,0 +1,8 @@
+import { default as RadioButtonComponent } from './RadioButton';
+import { default as RadioButtonGroupComponent } from './RadioButtonGroup';
+export type { IRadioButtonProps, IRadioGroupProps, IRadioGroupDefaultItem, TRadioGroupPropGetItemValue, TRadioGroupPropGetItemKey, TRadioGroupPropGetItemDisabled, TRadioGroupPropGetItemLabel } from './types';
+type TRadioButton = typeof RadioButtonComponent & {
+    Group: typeof RadioButtonGroupComponent;
+};
+declare const RadioButton: TRadioButton;
+export { RadioButton };

package/dist/RadioButton/index.es.js

@@ -0,0 +1,7 @@
+import RadioButton$1 from "./RadioButton.es.js";
+import RadioGroup from "./RadioButtonGroup.es.js";
+const RadioButton = RadioButton$1;
+RadioButton.Group = RadioGroup;
+export {
+  RadioButton
+};

package/dist/RadioButton/styles.cjs.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("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 && styled.css`
+      border-left: 2px solid ${theme.colors.red[5]};
+      padding-left: 0.5rem;
+    `};
+`;
+exports.RadioButtonInput = RadioButtonInput;
+exports.RadioButtonLabelStyled = RadioButtonLabelStyled;
+exports.RadioGroupWrapper = RadioGroupWrapper;

package/dist/RadioButton/styles.d.ts

@@ -0,0 +1,12 @@
+import { TQuenSize } from '../types/size';
+import { IRadioGroupProps } from './types';
+export declare const RadioButtonLabelStyled: 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 RadioButtonInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const RadioGroupWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    direction: IRadioGroupProps["direction"];
+    isError?: boolean;
+}>> & string;