@quen-ui/components 0.0.14 → 1.0.1

package/dist/Calendar/styles.es.js

@@ -0,0 +1,116 @@
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+import Button from "../Button/Button.es.js";
+const CalendarStyled = styled.div`
+  width: max-content;
+  padding: 16px;
+  background: ${({ theme }) => theme.components.Calendar.background};
+  border: 1px solid ${({ theme }) => theme.components.Calendar.borderColor};
+  border-radius: ${({ theme }) => theme.components.Calendar.radius};
+  z-index: 100;
+  color: ${({ theme }) => theme.textColor};
+  overflow: hidden;
+
+  .quen-ui__calendar__icon--right {
+    transform: rotateZ(270deg);
+  }
+
+  .quen-ui__calendar__icon--left {
+    transform: rotateZ(90deg);
+  }
+`;
+const CalendarGridWrapper = styled.div`
+  margin-top: 8px;
+  display: flex;
+  width: 100%;
+`;
+const CalendarGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px;
+  min-width: 50%;
+  position: relative;
+`;
+const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
+  shouldForwardProp: (prop) => ![
+    "isSelected",
+    "isCurrentMonth",
+    "isToday",
+    "isRangeStart",
+    "isRangeEnd",
+    "isInRange",
+    "isHoverRange",
+    "isDisabled"
+  ].includes(prop)
+})`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+
+  cursor: ${({ isCurrentMonth, isDisabled }) => isCurrentMonth && !isDisabled ? "pointer" : "default"};
+  font-weight: ${({ isToday, isSelected }) => isToday && !isSelected ? "bold" : "normal"};
+  opacity: ${({ isDisabled }) => isDisabled ? 0.3 : 1};
+
+  ${({ theme, isSelected, isCurrentMonth }) => {
+  const { secondaryColor } = theme.components.Calendar;
+  console.log(secondaryColor);
+  return css`
+      color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
+    `;
+}}
+  
+
+  ${({ theme, isToday, isSelected }) => isToday && !isSelected && css`
+      border: 1px solid ${theme.components.Calendar.activeBackground};
+      border-radius: ${theme.components.Calendar.radius};
+    `}
+
+  ${({ theme, isInRange, isHoverRange }) => {
+  if (isHoverRange || isInRange) {
+    return css`
+        background: ${rgba(theme.components.Calendar.activeBackground, 0.5)};
+        color: white;
+      `;
+  }
+}}
+
+  ${({ theme, isRangeStart, isRangeEnd, isSelected }) => {
+  const { activeBackground, radius } = theme.components.Calendar;
+  if (isSelected) {
+    return css`
+        background: ${activeBackground};
+        border-radius: ${radius};
+      `;
+  }
+  if (isRangeStart) {
+    return css`
+        background: ${activeBackground};
+        border-radius: ${radius} 0 0 ${radius};
+      `;
+  }
+  if (isRangeEnd) {
+    return css`
+        background: ${activeBackground};
+        border-radius: 0 ${radius} ${radius} 0;
+      `;
+  }
+}}
+`;
+const MonthStyled = styled(Button).attrs({ view: "icon" }).withConfig({
+  shouldForwardProp: (prop) => !["isSelected"].includes(prop)
+})`
+  background: ${({ theme, isSelected }) => isSelected && theme.components.Calendar.activeBackground};
+  color: ${({ theme, isSelected }) => isSelected ? "#fff" : theme.textColor};
+  width: 5rem;
+`;
+export {
+  CalendarGrid,
+  CalendarGridWrapper,
+  CalendarStyled,
+  DayStyled,
+  MonthStyled
+};

package/dist/Calendar/types.d.ts

@@ -0,0 +1,115 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ICalendarLocale {
+    /** Names of weekdays (7 elements) */
+    weekdays: string[];
+    /** Names of months (12 elements) */
+    months: string[];
+}
+export type TCalendarLevel = "days" | "months" | "years";
+export type TCalendarRangeProps = {
+    /** Controlled selected value */
+    value?: {
+        startDate: string;
+        endDate: string;
+    } | null;
+    /** Callback triggered when selection changes */
+    onChange?: (range: {
+        startDate: string;
+        endDate: string;
+    } | null) => void;
+    /** Determines if the calendar allows range selection */
+    range: true;
+    /** Default value for uncontrolled mode */
+    defaultValue?: {
+        startDate: string;
+        endDate: string;
+    };
+};
+export type TCalendarBaseProps = {
+    /** Displays a “Today” button for quick navigation */
+    showButtonToday?: boolean;
+    /** Localized month and weekday names */
+    locale?: ICalendarLocale;
+    /** Sets the initial view level */
+    defaultLevel?: TCalendarLevel;
+    /** Controlled view level */
+    level?: TCalendarLevel;
+    /** Custom day renderer */
+    renderDay?: TCalendarRenderDay;
+    /** Function to customize day behavior and appearance */
+    getDayProps?: TGetDayProps;
+    /** Minimum selectable date */
+    minDate?: string | Date;
+    /** Maximum selectable date */
+    maxDate?: string | Date;
+    /** Additional className */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    [key: string]: any;
+};
+export type TCalendarSingleProps = {
+    /** Controlled selected value */
+    value?: string;
+    /** Callback triggered when selection changes */
+    onChange?: (date: string | null) => void;
+    /** Determines if the calendar allows range selection */
+    range?: false;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+};
+export type TCalendarProps = TCalendarBaseProps & (TCalendarRangeProps | TCalendarSingleProps);
+export type TCalendarRenderDay = (date: Date, params: {
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isInRange: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isToday: boolean;
+    isHoverRange: boolean;
+    isDisabled: boolean;
+    onClick: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}) => ReactNode;
+export type TGetDayProps = (date: Date) => {
+    isCurrentMonth?: boolean;
+    isSelected?: boolean;
+    isInRange?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+    isToday?: boolean;
+    isDisabled?: boolean;
+    onClick?: () => void;
+    isHoverRange?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+export interface ICalendarDaysLevelProps {
+    locale: ICalendarLocale;
+    days: {
+        date: Date;
+        isCurrentMonth: boolean;
+    }[];
+    startDate: Date | null;
+    endDate: Date | null;
+    range?: boolean;
+    today: Date;
+    selectedDate: Date | null;
+    onDateSelect: (date: Date, isCurrentMonth: boolean) => void;
+    renderDay?: TCalendarRenderDay;
+    getDayProps?: TGetDayProps;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+}
+export interface ICalendarMonthLevelProps {
+    locale: ICalendarLocale;
+    currentMonth: Date;
+    setLevelMode: (level: TCalendarLevel) => void;
+    setCurrentMonth: (value: Date) => void;
+}
+export interface ICalendarYearsLevelProps {
+    currentMonth: Date;
+    setLevelMode: (level: TCalendarLevel) => void;
+    setCurrentMonth: (value: Date) => void;
+}

package/dist/Card/Card.cjs.js

@@ -16,15 +16,17 @@ const Card = ({
   actionContent,
   cover,
   leftContent,
+  style,
+  onClickExtra,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, style, children: [
     cover,
     title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, children: [
         leftContent,
         /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
-        extra && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", size: "s", children: extra })
+        extra && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })
     ] }),

package/dist/Card/Card.d.ts

@@ -1,3 +1,3 @@
 import { ICardProps } from './types';
-declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, style, onClickExtra, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/Card/Card.es.js

@@ -15,15 +15,17 @@ const Card = ({
   actionContent,
   cover,
   leftContent,
+  style,
+  onClickExtra,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, children: [
+  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, style, children: [
     cover,
     title && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, children: [
         leftContent,
         /* @__PURE__ */ jsx(Title, { size, children: title }),
-        extra && /* @__PURE__ */ jsx(Button, { view: "link", size: "s", children: extra })
+        extra && /* @__PURE__ */ jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
     ] }),

package/dist/Card/styles.cjs.js

@@ -27,8 +27,8 @@ const getSizing = (size) => {
   }
 };
 const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet["5"]};
+  border-radius: ${({ theme }) => theme.components.Card.radius};
+  border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
   max-width: 350px;
 `;
 const CardHeaderStyled = styled.div`

package/dist/Card/styles.es.js

@@ -25,8 +25,8 @@ const getSizing = (size) => {
   }
 };
 const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet["5"]};
+  border-radius: ${({ theme }) => theme.components.Card.radius};
+  border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
   max-width: 350px;
 `;
 const CardHeaderStyled = styled.div`

package/dist/Card/types.d.ts

@@ -22,5 +22,7 @@ export interface ICardProps {
     /** Main card content */
     children?: React.ReactNode;
     leftContent?: React.ReactNode;
+    style?: React.CSSProperties;
+    onClickExtra?: () => void;
     [key: string]: any;
 }

package/dist/Checkbox/Checkbox.cjs.js

@@ -16,7 +16,7 @@ const Checkbox = ({
   ...props
 }) => {
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked, event);
+    onChange?.(event.target.checked, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(styles.CheckboxLabelStyled, { disabled, className, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(

package/dist/Checkbox/Checkbox.es.js

@@ -15,7 +15,7 @@ const Checkbox = ({
   ...props
 }) => {
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked, event);
+    onChange?.(event.target.checked, event);
   };
   return /* @__PURE__ */ jsxs(CheckboxLabelStyled, { disabled, className, ...props, children: [
     /* @__PURE__ */ jsx(

package/dist/Checkbox/CheckboxGroup.cjs.js

@@ -36,7 +36,7 @@ const CheckboxGroup = ({
     } else {
       newValue = value.filter((v) => v !== params.value);
     }
-    onChange == null ? void 0 : onChange(newValue, event);
+    onChange?.(newValue, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.CheckboxGroupWrapper,
@@ -50,30 +50,27 @@ const CheckboxGroup = ({
           label,
           required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-group__required", children: "*" })
         ] }),
-        options.map((option) => {
-          var _a;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              size,
-              label: getItemLabel(option),
-              name,
-              checked: getIsChecked(option),
-              disabled: disabled ?? getItemDisabled(option),
-              value: getItemValue(option),
-              onChange: (isChecked, event) => handleChange(
-                {
-                  isChecked,
-                  value: getItemValue(
-                    option
-                  )
-                },
-                event
-              )
-            },
-            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
-          );
-        }),
+        options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            size,
+            label: getItemLabel(option),
+            name,
+            checked: getIsChecked(option),
+            disabled: disabled ?? getItemDisabled(option),
+            value: getItemValue(option),
+            onChange: (isChecked, event) => handleChange(
+              {
+                isChecked,
+                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/Checkbox/CheckboxGroup.es.js

@@ -35,7 +35,7 @@ const CheckboxGroup = ({
     } else {
       newValue = value.filter((v) => v !== params.value);
     }
-    onChange == null ? void 0 : onChange(newValue, event);
+    onChange?.(newValue, event);
   };
   return /* @__PURE__ */ jsxs(
     CheckboxGroupWrapper,
@@ -49,30 +49,27 @@ const CheckboxGroup = ({
           label,
           required && /* @__PURE__ */ jsx("span", { className: "checkbox-group__required", children: "*" })
         ] }),
-        options.map((option) => {
-          var _a;
-          return /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              size,
-              label: getItemLabel(option),
-              name,
-              checked: getIsChecked(option),
-              disabled: disabled ?? getItemDisabled(option),
-              value: getItemValue(option),
-              onChange: (isChecked, event) => handleChange(
-                {
-                  isChecked,
-                  value: getItemValue(
-                    option
-                  )
-                },
-                event
-              )
-            },
-            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
-          );
-        }),
+        options.map((option) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size,
+            label: getItemLabel(option),
+            name,
+            checked: getIsChecked(option),
+            disabled: disabled ?? getItemDisabled(option),
+            value: getItemValue(option),
+            onChange: (isChecked, event) => handleChange(
+              {
+                isChecked,
+                value: getItemValue(
+                  option
+                )
+              },
+              event
+            )
+          },
+          getItemKey(option) ?? getItemLabel(option)?.toString()
+        )),
         typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
       ]
     }

package/dist/Checkbox/styles.cjs.js

@@ -29,7 +29,7 @@ const CheckboxInputStyled = styled.input.withConfig({
 })`
   width: ${({ size }) => getSizing(size)};
   height: ${({ size }) => getSizing(size)};
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+  border: 1px solid ${({ theme }) => theme.components.Checkbox.borderColor};
   transition:
     border-color 0.15s,
     background-color 0.15s;
@@ -38,6 +38,7 @@ const CheckboxInputStyled = styled.input.withConfig({
   cursor: pointer;
   position: relative;
   -webkit-appearance: none;
+  border-radius: ${({ theme }) => theme.components.Checkbox.radius};
 
   &::before {
     content: "";
@@ -47,9 +48,9 @@ const CheckboxInputStyled = styled.input.withConfig({
     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]};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    border-left: 1px solid ${({ theme }) => theme.components.Checkbox.checkColor};
+    border-bottom: 1px solid ${({ theme }) => theme.components.Checkbox.checkColor};
     opacity: 0;
     transition:
       opacity 0.15s,
@@ -60,25 +61,25 @@ const CheckboxInputStyled = styled.input.withConfig({
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.borderDisabledColor};
     cursor: not-allowed;
   }
 
   &:disabled:checked {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.borderDisabledColor};
     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]};
+      background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+      border-left: 1px solid ${({ theme }) => theme.components.Checkbox.disabledCheckColor};
+      border-bottom: 1px solid ${({ theme }) => theme.components.Checkbox.disabledCheckColor};
     }
   }
   &:checked {
-    background-color: ${({ theme }) => theme.colors.violet[9]};
-    border-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    border-color: ${({ theme }) => theme.components.Checkbox.borderColor};
 
     &::before {
       opacity: 1;
@@ -87,15 +88,15 @@ const CheckboxInputStyled = styled.input.withConfig({
   }
 
   &:hover:not(:disabled) {
-    border: 1px solid ${({ theme }) => theme.colors.violet[9]};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.backgroundFilled};
   }
 
   &:hover:checked:not(:disabled) {
-    border-color: ${({ theme }) => theme.colors.violet[9]};
-    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
 
     &:before {
-      background-color: ${({ theme }) => theme.colors.violet[9]};
+      background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
     }
   }
 
@@ -103,14 +104,14 @@ const CheckboxInputStyled = styled.input.withConfig({
       &,
       &:hover,
       &:checked {
-        background-color: ${({ theme: theme2 }) => theme2.colors.violet[9]};
-        border-color: ${({ theme: theme2 }) => theme2.colors.grayViolet[9]};
+        background-color: ${({ theme: theme2 }) => theme2.components.Checkbox.backgroundFilled};
+        border-color: ${({ theme: theme2 }) => theme2.components.Checkbox.borderColor};
         &::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]};
+          background-color: ${theme.components.Checkbox.checkColor};
           border: none;
           opacity: 1;
           transition:
@@ -130,15 +131,15 @@ const CheckboxGroupWrapper = styled.div.withConfig({
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
 
   .checkbox-group__required {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.Checkbox.errorColor};
   }
 
   .checkbox-group__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.Checkbox.errorColor};
   }
 
   ${({ isError, theme }) => isError && styled.css`
-      border-left: 2px solid ${theme.colors.red[9]};
+      border-left: 2px solid ${theme.components.Checkbox.borderErrorColor};
       padding-left: 0.5rem;
     `};
 `;