@quen-ui/components 0.0.14 → 1.0.1

package/dist/Pagination/Pagination.es.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { usePagination } from "@quen-ui/hooks";
+import Flex from "../Flex/Flex.es.js";
+import { PaginationControlStyled } from "./styles.es.js";
+import SvgIconArrowBottom from "../assets/icon-arrow-bottom.svg.es.js";
+const Pagination = ({
+  className,
+  style,
+  onPreviousPage,
+  prevIcon,
+  size = "m",
+  onNextPage,
+  defaultValue = 1,
+  total,
+  nextIcon,
+  pageSize,
+  onChange,
+  withPages = true,
+  withControls = true,
+  boundaries,
+  siblings,
+  disabled,
+  itemRender,
+  align = "center",
+  ...props
+}) => {
+  const { previousPage, setPage, currentPage, nextPage, range, allPages } = usePagination({
+    initialPage: defaultValue,
+    onChange,
+    total,
+    pageSize,
+    boundaries,
+    siblings
+  });
+  const handlePreviousPage = () => {
+    previousPage();
+    onPreviousPage?.();
+  };
+  const handleNextPage = () => {
+    onNextPage?.();
+    nextPage();
+  };
+  if (total <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className,
+      style,
+      align: "center",
+      justify: align,
+      gap: size,
+      ...props,
+      children: [
+        withControls && (itemRender ? cloneElement(/* @__PURE__ */ jsx("span", { children: itemRender(currentPage - 1, "prev") }), {
+          onClick: handlePreviousPage,
+          disabled: currentPage === 1 || disabled
+        }) : /* @__PURE__ */ jsx(
+          PaginationControlStyled,
+          {
+            "aria-label": "Prev",
+            "data-testid": "pagination-prev-page",
+            size,
+            onClick: handlePreviousPage,
+            disabled: currentPage === 1 || disabled,
+            children: prevIcon || /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "quen-ui__pagination-prev-icon" })
+          }
+        )),
+        withPages && range.map(
+          (item, index) => itemRender ? cloneElement(
+            /* @__PURE__ */ jsx("span", { children: itemRender(
+              item !== "dots" ? item : 0,
+              item !== "dots" ? "page" : "dots"
+            ) }),
+            {
+              onClick: () => item !== "dots" && setPage(item),
+              disabled,
+              key: `${item}` + index
+            }
+          ) : /* @__PURE__ */ jsx(
+            PaginationControlStyled,
+            {
+              dotsView: item === "dots",
+              onClick: () => item !== "dots" && setPage(item),
+              size,
+              disabled,
+              active: item === currentPage,
+              children: item === "dots" ? "..." : item
+            },
+            `${item}` + index
+          )
+        ),
+        withControls && (itemRender ? cloneElement(/* @__PURE__ */ jsx("span", { children: itemRender(currentPage - 1, "next") }), {
+          onClick: handleNextPage,
+          disabled: allPages === currentPage || disabled
+        }) : /* @__PURE__ */ jsx(
+          PaginationControlStyled,
+          {
+            "aria-label": "Next",
+            "data-testid": "pagination-next-page",
+            size,
+            onClick: handleNextPage,
+            disabled: allPages === currentPage || disabled,
+            children: nextIcon || /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "quen-ui__pagination-next-icon" })
+          }
+        ))
+      ]
+    }
+  );
+};
+export {
+  Pagination as default
+};

package/dist/Pagination/index.d.ts

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

package/dist/Pagination/styles.cjs.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const PaginationControlStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["active", "dotsView"].includes(prop)
+})`
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.components.Pagination.borderColor};
+  border-radius: ${({ theme }) => theme.components.Pagination.radius};
+  background: ${({ theme, active }) => active ? theme.components.Pagination.activeBackground : theme.components.Pagination.background};
+  height: ${({ theme, size = "m" }) => theme.control.height[size]};
+  width: ${({ theme, size = "m" }) => theme.control.height[size]};
+  color: ${({ theme }) => theme.components.Pagination.color};
+
+  .quen-ui__pagination-prev-icon {
+    transform: rotateZ(90deg);
+  }
+
+  .quen-ui__pagination-next-icon {
+    transform: rotateZ(270deg);
+  }
+
+  svg {
+    width: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} / 1.5`)};
+    height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} / 1.5`)};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.components.Pagination.hoverBackground};
+  }
+
+  ${({ dotsView }) => dotsView && styled.css`
+      background: transparent;
+      border: none;
+      cursor: auto;
+      font-size: ${({ theme }) => theme.fonts.text.size.xl};
+      letter-spacing: 2px;
+
+      &:hover {
+        background: transparent;
+      }
+    `};
+`;
+exports.PaginationControlStyled = PaginationControlStyled;

package/dist/Pagination/styles.d.ts

@@ -0,0 +1,2 @@
+import { IPaginationControlProps } from './types';
+export declare const PaginationControlStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IPaginationControlProps>> & string;

package/dist/Pagination/styles.es.js

@@ -0,0 +1,54 @@
+import styled, { css } from "styled-components";
+import { math } from "polished";
+const PaginationControlStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["active", "dotsView"].includes(prop)
+})`
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.components.Pagination.borderColor};
+  border-radius: ${({ theme }) => theme.components.Pagination.radius};
+  background: ${({ theme, active }) => active ? theme.components.Pagination.activeBackground : theme.components.Pagination.background};
+  height: ${({ theme, size = "m" }) => theme.control.height[size]};
+  width: ${({ theme, size = "m" }) => theme.control.height[size]};
+  color: ${({ theme }) => theme.components.Pagination.color};
+
+  .quen-ui__pagination-prev-icon {
+    transform: rotateZ(90deg);
+  }
+
+  .quen-ui__pagination-next-icon {
+    transform: rotateZ(270deg);
+  }
+
+  svg {
+    width: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} / 1.5`)};
+    height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} / 1.5`)};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.components.Pagination.hoverBackground};
+  }
+
+  ${({ dotsView }) => dotsView && css`
+      background: transparent;
+      border: none;
+      cursor: auto;
+      font-size: ${({ theme }) => theme.fonts.text.size.xl};
+      letter-spacing: 2px;
+
+      &:hover {
+        background: transparent;
+      }
+    `};
+`;
+export {
+  PaginationControlStyled
+};

package/dist/Pagination/types.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IPaginationControlProps {
+    active?: boolean;
+    disabled?: boolean;
+    size?: TQuenSize;
+    dotsView?: boolean;
+}
+export interface IPaginationProps {
+    /** Controls alignment inside the container */
+    align?: "start" | "center" | "end";
+    /** Disables all pagination interaction */
+    disabled?: boolean;
+    /** Number of always-visible boundary pages. */
+    boundaries?: number;
+    /** Initial page */
+    defaultValue?: number;
+    /** Number of sibling pages around the current page. */
+    siblings?: number;
+    /** Controls size */
+    size?: TQuenSize;
+    /** Controlled page */
+    value?: number;
+    /** Show previous/next controls */
+    withControls?: boolean;
+    /** Show page numbers */
+    withPages?: boolean;
+    /** Custom icon for previous control */
+    prevIcon?: ReactNode;
+    /** Custom icon for next control */
+    nextIcon?: ReactNode;
+    /** Callback when page changes */
+    onChange?: (value: number) => void;
+    /** Called when clicking "next" */
+    onNextPage?: () => void;
+    /** Called when clicking "previous" */
+    onPreviousPage?: () => void;
+    /** Custom rendering function for pagination items */
+    itemRender?: (page: number, type: "page" | "prev" | "next" | "dots") => ReactNode;
+    /** Number of items per page */
+    pageSize?: number;
+    /** Total number of items */
+    total: number;
+    /** Inline styles for the root */
+    style?: CSSProperties;
+    /** Custom CSS class for the root */
+    className?: string;
+    [key: string]: any;
+}

package/dist/Progress/Progress.cjs.js

@@ -16,6 +16,7 @@ const Progress = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.ProgressWrapper,
     {
+      "aria-label": "progress-bar",
       className,
       style,
       role: "progressbar",
@@ -28,7 +29,6 @@ const Progress = ({
           /* @__PURE__ */ jsxRuntime.jsx(styles.ProgressStyled, { size, color, children: /* @__PURE__ */ jsxRuntime.jsx(
             styles.ProgressBarStyled,
             {
-              role: "progressbar",
               color,
               style: { width: `${value}%` }
             }

package/dist/Progress/Progress.es.js

@@ -15,6 +15,7 @@ const Progress = ({
   return /* @__PURE__ */ jsxs(
     ProgressWrapper,
     {
+      "aria-label": "progress-bar",
       className,
       style,
       role: "progressbar",
@@ -27,7 +28,6 @@ const Progress = ({
           /* @__PURE__ */ jsx(ProgressStyled, { size, color, children: /* @__PURE__ */ jsx(
             ProgressBarStyled,
             {
-              role: "progressbar",
               color,
               style: { width: `${value}%` }
             }

package/dist/Progress/styles.cjs.js

@@ -5,73 +5,28 @@ 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[color][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};
+  border-radius: ${({ theme }) => theme.components.Progress.radius};
   overflow: hidden;
   width: 100%;
-  height: ${({ theme, size }) => getHeight(size, theme)};
-  background: ${({ theme, color }) => polished.rgba(getBackgroundWrapper(theme, color), 0.3)};
+  height: ${({ theme, size }) => theme.control.height[size]};
+  background: ${({ theme, color }) => polished.rgba(getBackgroundBar(theme, color), 0.2)};
 `;
 const ProgressBarStyled = styled.div`
   height: 100%;
   background: ${({ theme, color }) => getBackgroundBar(theme, color)};
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Progress.radius};
 `;
 const ProgressLabelStyled = styled(Text)`
   color: ${({ theme, color }) => getBackgroundBar(theme, color)};

package/dist/Progress/styles.es.js

@@ -3,73 +3,28 @@ 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[color][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};
+  border-radius: ${({ theme }) => theme.components.Progress.radius};
   overflow: hidden;
   width: 100%;
-  height: ${({ theme, size }) => getHeight(size, theme)};
-  background: ${({ theme, color }) => rgba(getBackgroundWrapper(theme, color), 0.3)};
+  height: ${({ theme, size }) => theme.control.height[size]};
+  background: ${({ theme, color }) => rgba(getBackgroundBar(theme, color), 0.2)};
 `;
 const ProgressBarStyled = styled.div`
   height: 100%;
   background: ${({ theme, color }) => getBackgroundBar(theme, color)};
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Progress.radius};
 `;
 const ProgressLabelStyled = styled(Text)`
   color: ${({ theme, color }) => getBackgroundBar(theme, color)};

package/dist/Progress/types.d.ts

@@ -7,6 +7,7 @@ export interface IProgressProps {
     size?: TQuenSize;
     /** Shows numeric value inside bar */
     showInfo?: boolean;
+    /** Custom label component/text* */
     label?: React.ReactNode;
     /** Completion percentage (0-100) */
     value: number;

package/dist/RadioButton/RadioButton.cjs.js

@@ -15,7 +15,7 @@ const RadioButton = ({
   ...props
 }) => {
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked, event);
+    onChange?.(event.target.checked, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.RadioButtonLabelStyled,

package/dist/RadioButton/RadioButton.es.js

@@ -14,7 +14,7 @@ const RadioButton = ({
   ...props
 }) => {
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked, event);
+    onChange?.(event.target.checked, event);
   };
   return /* @__PURE__ */ jsxs(
     RadioButtonLabelStyled,

package/dist/RadioButton/RadioButtonGroup.cjs.js

@@ -26,7 +26,7 @@ const RadioGroup = ({
   } = helpers.withDefaultGetters(props);
   const getIsChecked = (item) => value === getItemValue(item);
   const handleChange = (params, event) => {
-    onChange == null ? void 0 : onChange(params.value, event);
+    onChange?.(params.value, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.RadioGroupWrapper,
@@ -39,27 +39,24 @@ const RadioGroup = ({
           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())
-          );
-        }),
+        options.map((option) => /* @__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) ?? getItemLabel(option)?.toString()
+        )),
         typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
       ]
     }

package/dist/RadioButton/RadioButtonGroup.es.js

@@ -25,7 +25,7 @@ const RadioGroup = ({
   } = withDefaultGetters(props);
   const getIsChecked = (item) => value === getItemValue(item);
   const handleChange = (params, event) => {
-    onChange == null ? void 0 : onChange(params.value, event);
+    onChange?.(params.value, event);
   };
   return /* @__PURE__ */ jsxs(
     RadioGroupWrapper,
@@ -38,27 +38,24 @@ const RadioGroup = ({
           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())
-          );
-        }),
+        options.map((option) => /* @__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) ?? getItemLabel(option)?.toString()
+        )),
         typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
       ]
     }