@quen-ui/components 0.0.14 → 1.0.1

package/dist/Button/styles.es.js

@@ -1,116 +1,106 @@
 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"};
-      `;
-  }
-};
+import { desaturate, darken, rgba } from "polished";
 const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return css`
-        background: ${theme.colors.gray["5"]};
-        color: white;
+        background: ${theme.components.Button.secondaryBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.gray["4"]};
+          background: ${darken(
+        0.1,
+        theme.components.Button.secondaryBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.gray["6"]};
+          background: ${darken(
+        0.2,
+        theme.components.Button.secondaryBackground
+      )};
         }
       `;
     case "danger":
       return css`
-        background: ${theme.colors.red["7"]};
-        color: white;
+        background: ${theme.components.Button.dangerBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.red["6"]};
+          background: ${desaturate(
+        0.2,
+        theme.components.Button.dangerBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.red["8"]};
+          background: ${darken(0.2, theme.components.Button.dangerBackground)};
         }
       `;
     case "ghost":
       return css`
         background: transparent;
-        color: ${theme.textColor};
+        color: ${theme.components.Button.ghostColor};
 
         &:hover {
-          color: ${theme.colors.gray["7"]};
+          color: ${rgba(theme.components.Button.ghostColor, 0.5)};
         }
 
         &:active {
-          color: ${theme.colors.gray["9"]};
+          color: ${rgba(theme.components.Button.ghostColor, 0.5)};
         }
       `;
     case "success":
       return css`
-        background: ${theme.colors.green["7"]};
-        color: white;
+        background: ${theme.components.Button.successBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.green["6"]};
+          background: ${desaturate(
+        0.2,
+        theme.components.Button.successBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.green["8"]};
+          background: ${darken(0.2, theme.components.Button.successBackground)};
         }
       `;
     case "warning":
       return css`
-        background: ${theme.colors.orange[7]};
-        color: white;
+        background: ${theme.components.Button.warningBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.orange[6]};
+          background: ${desaturate(
+        0.2,
+        theme.components.Button.warningBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.orange[8]};
+          background: ${darken(0.2, theme.components.Button.warningBackground)};
         }
       `;
     case "link":
       return css`
         background: transparent;
-        color: ${theme.colors.violet[8]};
+        color: ${theme.colors[theme.primaryColor][8]};
 
         .quen-ui__text {
           color: unset;
         }
 
         &:hover {
-          color: ${theme.colors.violet[6]};
+          color: ${darken(0.1, theme.colors[theme.primaryColor][8])};
         }
 
         &:active {
-          color: ${theme.colors.violet[9]};
+          color: ${darken(0.2, theme.colors[theme.primaryColor][8])};
         }
 
         &:disabled {
-          color: ${theme.colors.violet[1]};
+          color: ${theme.components.Button.disabledColor};
         }
       `;
     case "icon":
@@ -132,9 +122,10 @@ const getBackground = (theme, view = "primary", isDisabled) => {
     default:
       return css`
         background: ${theme.colors[theme.primaryColor][9]};
-        color: white;
+        color: ${theme.components.Button.color};
+
         .quen-ui__text {
-          color: white;
+          color: ${theme.components.Button.color};
         }
 
         &:hover {
@@ -153,11 +144,15 @@ const ButtonStyled = styled.button.withConfig({
   border: none;
   background: none;
   outline: none;
-  ${({ size, viewButton }) => getSizing(viewButton || "primary", size)}
+  ${({ theme, size = "m", viewButton }) => css`
+    height: ${theme.control.height[size]};
+    ${viewButton === "icon" && `width: ${theme.control.height[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;
+  border-radius: ${({ theme }) => theme.components.Button.radius};
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -167,8 +162,8 @@ const ButtonStyled = styled.button.withConfig({
   ${({ theme, viewButton, isDisabled }) => getBackground(theme, viewButton, isDisabled)};
 
   &:disabled {
-    background: ${({ theme }) => theme.colors.gray["2"]};
-    color: ${({ theme }) => theme.colors.gray["4"]};
+    background: ${({ theme }) => theme.components.Button.disabledBackground};
+    color: ${({ theme }) => theme.components.Button.disabledColor};
     cursor: not-allowed;
   }
 `;

package/dist/Button/types.d.ts

@@ -1,12 +1,11 @@
 import { default as React, MouseEventHandler, KeyboardEventHandler, JSX, Ref } from 'react';
+import { TQuenSize } from '../types/size';
 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;
+    size?: TQuenSize;
     /** Visual style variant */
     view?: TButtonView;
     /** Disables interactions and applies visual styling */

package/dist/Calendar/Calendar.cjs.js

@@ -0,0 +1,200 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("./helpers.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const styles = require("./styles.cjs.js");
+const DaysLevel = require("./DaysLevel.cjs.js");
+const MonthLevel = require("./MonthLevel.cjs.js");
+const YearsLevel = require("./YearsLevel.cjs.js");
+const iconArrowBottom = require("../assets/icon-arrow-bottom.svg.cjs.js");
+const Calendar = ({
+  value,
+  onChange,
+  showButtonToday,
+  range,
+  defaultValue,
+  locale = helpers.defaultLocale,
+  level,
+  defaultLevel = "days",
+  renderDay,
+  getDayProps,
+  maxDate,
+  minDate,
+  className,
+  style
+}, ref) => {
+  const [internalStartDate, setInternalStartDate] = React.useState(
+    () => {
+      return range && defaultValue?.startDate ? new Date(defaultValue.startDate) : null;
+    }
+  );
+  const [internalEndDate, setInternalEndDate] = React.useState(() => {
+    return range && defaultValue?.endDate ? new Date(defaultValue.endDate) : null;
+  });
+  const [internalSingleDate, setInternalSingleDate] = React.useState(
+    () => !range && defaultValue ? new Date(defaultValue) : null
+  );
+  const startDate = range && value?.startDate ? new Date(value.startDate) : internalStartDate;
+  const endDate = range && value?.endDate ? new Date(value.endDate) : internalEndDate;
+  const selectedDate = !range && typeof value === "string" ? new Date(value) : internalSingleDate;
+  const [levelMode, setLevelMode] = React.useState(
+    level ? level : defaultLevel
+  );
+  React.useEffect(() => {
+    if (level) {
+      setLevelMode(level);
+    }
+  }, [level]);
+  React.useEffect(() => {
+    setInternalSingleDate(null);
+    setInternalEndDate(null);
+    setInternalStartDate(null);
+  }, [range]);
+  const [currentMonth, setCurrentMonth] = React.useState(/* @__PURE__ */ new Date());
+  const levelTitle = React.useMemo(() => {
+    if (levelMode == "days") {
+      return `${locale.months[currentMonth.getMonth()]} ${currentMonth.getFullYear()}`;
+    }
+    if (levelMode == "months") {
+      return currentMonth.getFullYear();
+    }
+    return `${Math.floor(currentMonth.getFullYear() / 10) * 10} – ${Math.floor(currentMonth.getFullYear() / 10) * 10 + 9}`;
+  }, [levelMode, currentMonth, locale]);
+  const handleDateSelect = (date, isCurrentMonth) => {
+    if (!isCurrentMonth) return;
+    if (range) {
+      if (!startDate || startDate && endDate) {
+        setInternalStartDate(date);
+        setInternalEndDate(null);
+        onChange?.({ startDate: helpers.getDate(date), endDate: "" });
+      } else if (startDate && !endDate) {
+        if (date < startDate) {
+          setInternalStartDate(date);
+          setInternalEndDate(startDate);
+          onChange?.({
+            startDate: helpers.getDate(date),
+            endDate: helpers.getDate(startDate)
+          });
+        } else {
+          setInternalEndDate(date);
+          onChange?.({
+            startDate: helpers.getDate(startDate),
+            endDate: helpers.getDate(date)
+          });
+        }
+      }
+    } else {
+      setInternalSingleDate(date);
+      onChange?.(helpers.getDate(date));
+    }
+  };
+  const handleTodaySelect = () => {
+    const today2 = /* @__PURE__ */ new Date();
+    if (range) {
+      setInternalStartDate(today2);
+      setInternalEndDate(null);
+      onChange?.({
+        startDate: helpers.getDate(today2),
+        endDate: ""
+      });
+    } else {
+      setInternalSingleDate(today2);
+      onChange?.(helpers.getDate(today2));
+    }
+    setCurrentMonth(today2);
+  };
+  const handlePrev = () => {
+    if (levelMode === "days") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1)
+      );
+    } else if (levelMode === "months") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth())
+      );
+    } else if (levelMode === "years") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() - 10, currentMonth.getMonth())
+      );
+    }
+  };
+  const handleNext = () => {
+    if (levelMode === "days") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)
+      );
+    } else if (levelMode === "months") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth())
+      );
+    } else if (levelMode === "years") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth())
+      );
+    }
+  };
+  const days = helpers.generateCalendarDays(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth()
+  );
+  const today = /* @__PURE__ */ new Date();
+  const handleClickLevel = () => {
+    if (levelMode === "days") {
+      setLevelMode("months");
+    } else if (levelMode === "months") {
+      setLevelMode("years");
+    } else {
+      setLevelMode("days");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CalendarStyled, { ref, className, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "s", onClick: handlePrev, "aria-label": "Prev", children: /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "quen-ui__calendar__icon--left" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "s", onClick: handleClickLevel, children: levelTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "s", onClick: handleNext, "aria-label": "Next", children: /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "quen-ui__calendar__icon--right" }) })
+      ] }),
+      showButtonToday && /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, size: "xs", onClick: handleTodaySelect, children: "Today" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(styles.CalendarGridWrapper, { children: [
+      levelMode === "days" && /* @__PURE__ */ jsxRuntime.jsx(
+        DaysLevel,
+        {
+          locale,
+          days,
+          today,
+          onDateSelect: handleDateSelect,
+          range,
+          startDate,
+          endDate,
+          selectedDate,
+          renderDay,
+          getDayProps,
+          maxDate,
+          minDate
+        }
+      ),
+      levelMode === "months" && /* @__PURE__ */ jsxRuntime.jsx(
+        MonthLevel,
+        {
+          locale,
+          currentMonth,
+          setLevelMode,
+          setCurrentMonth
+        }
+      ),
+      levelMode === "years" && /* @__PURE__ */ jsxRuntime.jsx(
+        YearsLevel,
+        {
+          currentMonth,
+          setLevelMode,
+          setCurrentMonth
+        }
+      )
+    ] })
+  ] });
+};
+const Calendar$1 = React.forwardRef(Calendar);
+module.exports = Calendar$1;

package/dist/Calendar/Calendar.d.ts

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

package/dist/Calendar/Calendar.es.js

@@ -0,0 +1,201 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo } from "react";
+import { defaultLocale, generateCalendarDays, getDate } from "./helpers.es.js";
+import Button from "../Button/Button.es.js";
+import Flex from "../Flex/Flex.es.js";
+import { CalendarStyled, CalendarGridWrapper } from "./styles.es.js";
+import DaysLevel from "./DaysLevel.es.js";
+import MonthLevel from "./MonthLevel.es.js";
+import YearsLevel from "./YearsLevel.es.js";
+import SvgIconArrowBottom from "../assets/icon-arrow-bottom.svg.es.js";
+const Calendar$1 = ({
+  value,
+  onChange,
+  showButtonToday,
+  range,
+  defaultValue,
+  locale = defaultLocale,
+  level,
+  defaultLevel = "days",
+  renderDay,
+  getDayProps,
+  maxDate,
+  minDate,
+  className,
+  style
+}, ref) => {
+  const [internalStartDate, setInternalStartDate] = useState(
+    () => {
+      return range && defaultValue?.startDate ? new Date(defaultValue.startDate) : null;
+    }
+  );
+  const [internalEndDate, setInternalEndDate] = useState(() => {
+    return range && defaultValue?.endDate ? new Date(defaultValue.endDate) : null;
+  });
+  const [internalSingleDate, setInternalSingleDate] = useState(
+    () => !range && defaultValue ? new Date(defaultValue) : null
+  );
+  const startDate = range && value?.startDate ? new Date(value.startDate) : internalStartDate;
+  const endDate = range && value?.endDate ? new Date(value.endDate) : internalEndDate;
+  const selectedDate = !range && typeof value === "string" ? new Date(value) : internalSingleDate;
+  const [levelMode, setLevelMode] = useState(
+    level ? level : defaultLevel
+  );
+  useEffect(() => {
+    if (level) {
+      setLevelMode(level);
+    }
+  }, [level]);
+  useEffect(() => {
+    setInternalSingleDate(null);
+    setInternalEndDate(null);
+    setInternalStartDate(null);
+  }, [range]);
+  const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
+  const levelTitle = useMemo(() => {
+    if (levelMode == "days") {
+      return `${locale.months[currentMonth.getMonth()]} ${currentMonth.getFullYear()}`;
+    }
+    if (levelMode == "months") {
+      return currentMonth.getFullYear();
+    }
+    return `${Math.floor(currentMonth.getFullYear() / 10) * 10} – ${Math.floor(currentMonth.getFullYear() / 10) * 10 + 9}`;
+  }, [levelMode, currentMonth, locale]);
+  const handleDateSelect = (date, isCurrentMonth) => {
+    if (!isCurrentMonth) return;
+    if (range) {
+      if (!startDate || startDate && endDate) {
+        setInternalStartDate(date);
+        setInternalEndDate(null);
+        onChange?.({ startDate: getDate(date), endDate: "" });
+      } else if (startDate && !endDate) {
+        if (date < startDate) {
+          setInternalStartDate(date);
+          setInternalEndDate(startDate);
+          onChange?.({
+            startDate: getDate(date),
+            endDate: getDate(startDate)
+          });
+        } else {
+          setInternalEndDate(date);
+          onChange?.({
+            startDate: getDate(startDate),
+            endDate: getDate(date)
+          });
+        }
+      }
+    } else {
+      setInternalSingleDate(date);
+      onChange?.(getDate(date));
+    }
+  };
+  const handleTodaySelect = () => {
+    const today2 = /* @__PURE__ */ new Date();
+    if (range) {
+      setInternalStartDate(today2);
+      setInternalEndDate(null);
+      onChange?.({
+        startDate: getDate(today2),
+        endDate: ""
+      });
+    } else {
+      setInternalSingleDate(today2);
+      onChange?.(getDate(today2));
+    }
+    setCurrentMonth(today2);
+  };
+  const handlePrev = () => {
+    if (levelMode === "days") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1)
+      );
+    } else if (levelMode === "months") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth())
+      );
+    } else if (levelMode === "years") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() - 10, currentMonth.getMonth())
+      );
+    }
+  };
+  const handleNext = () => {
+    if (levelMode === "days") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)
+      );
+    } else if (levelMode === "months") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth())
+      );
+    } else if (levelMode === "years") {
+      setCurrentMonth(
+        new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth())
+      );
+    }
+  };
+  const days = generateCalendarDays(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth()
+  );
+  const today = /* @__PURE__ */ new Date();
+  const handleClickLevel = () => {
+    if (levelMode === "days") {
+      setLevelMode("months");
+    } else if (levelMode === "months") {
+      setLevelMode("years");
+    } else {
+      setLevelMode("days");
+    }
+  };
+  return /* @__PURE__ */ jsxs(CalendarStyled, { ref, className, style, children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Button, { view: "icon", size: "s", onClick: handlePrev, "aria-label": "Prev", children: /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "quen-ui__calendar__icon--left" }) }),
+        /* @__PURE__ */ jsx(Button, { view: "icon", size: "s", onClick: handleClickLevel, children: levelTitle }),
+        /* @__PURE__ */ jsx(Button, { view: "icon", size: "s", onClick: handleNext, "aria-label": "Next", children: /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "quen-ui__calendar__icon--right" }) })
+      ] }),
+      showButtonToday && /* @__PURE__ */ jsx(Button, { fullWidth: true, size: "xs", onClick: handleTodaySelect, children: "Today" })
+    ] }),
+    /* @__PURE__ */ jsxs(CalendarGridWrapper, { children: [
+      levelMode === "days" && /* @__PURE__ */ jsx(
+        DaysLevel,
+        {
+          locale,
+          days,
+          today,
+          onDateSelect: handleDateSelect,
+          range,
+          startDate,
+          endDate,
+          selectedDate,
+          renderDay,
+          getDayProps,
+          maxDate,
+          minDate
+        }
+      ),
+      levelMode === "months" && /* @__PURE__ */ jsx(
+        MonthLevel,
+        {
+          locale,
+          currentMonth,
+          setLevelMode,
+          setCurrentMonth
+        }
+      ),
+      levelMode === "years" && /* @__PURE__ */ jsx(
+        YearsLevel,
+        {
+          currentMonth,
+          setLevelMode,
+          setCurrentMonth
+        }
+      )
+    ] })
+  ] });
+};
+const Calendar = forwardRef(Calendar$1);
+export {
+  Calendar as default
+};