@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.1-alpha.3

package/Badge/BadgeOutlined.js

@@ -57,14 +57,14 @@ const BadgeOutlined = (props, ref) => {
             case typeof color === 'undefined':
             case color === 'default':
                 return {
-                    $color: new Color_1.default(theme.color.textPrimary),
+                    $color: Color_1.default.fromString(theme.color.textPrimary.toString()),
                     $background: theme.color.textPrimary.lighten(100),
                 };
             case typeof color === 'string': {
                 let c = theme.color.textPrimary;
                 try {
                     if (color) {
-                        c = new Color_1.default(color);
+                        c = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Badge/BadgeStandard.js

@@ -73,7 +73,7 @@ const BadgeStandard = (props, ref) => {
                 let $background = theme.color.surface;
                 try {
                     if (color) {
-                        $background = new Color_1.default(color);
+                        $background = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Button/ButtonOutlined.js

@@ -70,7 +70,7 @@ const ButtonOutlined = (props, ref) => {
                 let c = theme.color.textPrimary;
                 try {
                     if (color) {
-                        c = new Color_1.default(color);
+                        c = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Button/ButtonPlain.js

@@ -71,7 +71,7 @@ const ButtonPlain = (props, ref) => {
                 let $color = theme.color.textPrimary;
                 try {
                     if (color) {
-                        $color = new Color_1.default(color);
+                        $color = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Button/ButtonStandard.js

@@ -31,19 +31,12 @@ const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
   background-color: ${({ $background, disabled }) => {
     switch (true) {
         case disabled:
-            return $background.darken(10).toString();
-        default:
-            return $background.toString();
-    }
-}};
-  ${({ $background }) => {
-    switch (true) {
-        case $background.getLuminance() > 0.49:
-            return $background.darken(40).alpha(0.8).toString();
+            return $background.darken(40).toString();
         default:
-            return $background.darken(20).alpha(0.5).toString();
+            return $background.darken(10).toString();
     }
 }};
+
   ${({ disabled, $background, theme }) => !disabled &&
     (0, react_2.css) `
       &:hover {
@@ -86,7 +79,7 @@ const ButtonStandard = (props, ref) => {
                 let $background = theme.color.surface;
                 try {
                     if (color) {
-                        $background = new Color_1.default(color);
+                        $background = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Calendar/CalendarCell.js

@@ -25,17 +25,21 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.8em;
   width: 3em;
   height: 3em;
+  padding: 1em;
   margin: 0;
   min-width: 0;
   outline: none;
   position: relative;
+  color: ${({ theme, $isSelected }) => $isSelected
+    ? theme.color.accentPrimaryContrast.toString()
+    : theme.color.textPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   ${({ $fill, theme, $isSelected }) => $fill &&
     !$isSelected &&
     (0, react_2.css) `
-      background-color: none;
+      background-color: transparent;
       position: relative;
-
+      color: ${theme.color.accentPrimaryContrast.toString()};
       &:before {
         position: absolute;
         border-radius: ${theme.shape.radiusFactor * 0.8}em;

package/Calendar/CalendarComponent.d.ts

@@ -0,0 +1,226 @@
+import React from 'react';
+import { CalendarBodyProps } from './CalendarBody';
+import { CalendarCellProps } from './CalendarCell';
+import { CalendarWeekCellProps } from './CalendarWeekDayCell';
+import { CalendarEmptyCellProps } from './CalendarEmptyCell';
+import { CalendarWeekRowButtonProps } from './CalendarWeekRowButton';
+import { CalendarWeekDayWeekNumberProps } from './CalendarWeekDayWeekNumber';
+import { CalendarPaperProps } from './CalendarPaper';
+import { CalendarHeaderProps } from './CalendarHeader';
+import { CalendarWeekRowProps } from './CalendarWeekRow';
+import { CalendarDateContainerProps } from './CalendarDateContainer';
+import { CalendarToolbarProps } from './CalendarToolbar';
+import { CalendarYearsSelectorProps } from './CalendarYearsSelector';
+import { CalendarMonthsSelectorProps } from './CalendarMonthsSelector';
+import { CalendarMonthCellProps } from './CalendarMonthCell';
+import { CalendarDayBadgeProps } from './CalendarDayBadge';
+import { CalendarFooterProps } from './CalendarFooter';
+import { CalendarControlButtonProps } from './CalendarControlButton';
+import { CalendarHeadingProps } from './CalendarHeading';
+import { CalendarSubheadingProps } from './CalendarSubheading';
+import { CalendarIconPrevProps } from './CalendarIconPrev';
+import { CalendarIconNextProps } from './CalendarIconNext';
+import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from './CalendarWeekDaysBar';
+import { CalendarValue, WeekDayName } from './use-calendar';
+export * from './use-calendar';
+export * from './CalendarWeekDaysBar';
+export type CalendarView = 'days' | 'months' | 'years' | 'weeks';
+export type CalendarOnChange<IsRangeValue extends boolean | undefined = undefined> = (dates: CalendarValue<IsRangeValue>) => void;
+export type CalendarProps<IsRangeValue extends boolean | undefined = undefined> = {
+    readonly range?: IsRangeValue;
+    /**
+     * Selected date
+     */
+    readonly value?: CalendarValue<IsRangeValue>;
+    /**
+     * selected value if your component should not be controlled
+     */
+    readonly defaultValue?: CalendarValue<IsRangeValue>;
+    /**
+     * It will be called at the moment of selecting the given
+     */
+    readonly onChange: CalendarOnChange<IsRangeValue>;
+    /**
+     * calendar locale\
+     * **Default:** `ru-RU`
+     */
+    readonly locale?: string;
+    /**
+     * array of badges
+     */
+    readonly badges?: readonly CalendarBadge[];
+    /**
+     * Minimum date limit\
+     * **Default:** -100 year
+  
+     */
+    readonly minDate?: Date;
+    /**
+     * Maximum date limit\
+     * **Default:** +100 year
+     */
+    readonly maxDate?: Date;
+    /**
+     * The day the week starts from\
+     * **Default:** `monday`
+     */
+    readonly weekStartDay?: WeekDayName;
+    /**
+     * Int weekday format\
+     * **Default:** `short`
+     */
+    readonly weekDayLabelFormat?: WeekNameLabelFormat;
+    /**
+     * Display days with leading zero
+     * **Default:** `false`
+     */
+    readonly displayLeadingZero?: boolean;
+    /**
+     * Mark current day cell\
+     * **Default:** `true`
+     */
+    readonly markToday?: boolean;
+    /**
+     * Cell accent color\
+     * **Default:** `primary`
+     */
+    readonly accentColor?: 'primary' | 'secondary' | string;
+    /**
+     * Label for the Reset button. If label passed, then button will be rendered
+     */
+    readonly resetButtonLabel?: string;
+    /**
+     * Label for the Today button. If label passed, then button will be rendered
+     */
+    readonly todayButtonLabel?: string;
+    /**
+     * Heading
+     */
+    readonly heading?: React.ReactNode;
+    /**
+     * Subheading
+     */
+    readonly subheading?: React.ReactNode;
+    /**
+     * Initial name of the view\
+     * **Default:** `days`
+     */
+    readonly initialView?: CalendarView;
+    readonly view?: CalendarView;
+    /**
+     * Posibility calendar views list
+     */
+    readonly views?: readonly CalendarView[];
+    /**
+     * Custom footer elements
+     */
+    readonly footer?: React.ReactNode;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: CalendarOverrides;
+};
+export interface CalendarOverrides {
+    /**
+     * Element container
+     */
+    readonly Body?: React.ComponentType<CalendarBodyProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Day element
+     */
+    readonly Cell?: React.ComponentType<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Day element
+     */
+    readonly WeekDayCell?: React.ComponentType<CalendarWeekCellProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Number of the week in weeks selector
+     */
+    readonly WeekDayWeekNumber?: React.ComponentType<CalendarWeekDayWeekNumberProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The button to select the week in the `weeks` view
+     */
+    readonly WeekRowButton?: React.ComponentType<CalendarWeekRowButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Empty cell element
+     */
+    readonly EmptyCell?: React.ComponentType<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Common container element
+     */
+    readonly Paper?: React.ComponentType<CalendarPaperProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Header wrapper element
+     */
+    readonly Header?: React.ComponentType<CalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Week row container element
+     */
+    readonly WeekRow?: React.ComponentType<CalendarWeekRowProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Days wrapper element
+     */
+    readonly DateContainer?: React.ComponentType<CalendarDateContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Toolbar wrapper element
+     */
+    readonly Toolbar?: React.ComponentType<CalendarToolbarProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Years list element (year view)
+     */
+    readonly YearsSelector?: React.ComponentType<CalendarYearsSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Monthes list element (month view)
+     */
+    readonly MonthsSelector?: React.ComponentType<CalendarMonthsSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Month cell element in monthes list
+     */
+    readonly MonthCell?: React.ComponentType<CalendarMonthCellProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Badge of the day cell element
+     */
+    readonly DayBadge?: React.ComponentType<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Footer container element
+     */
+    readonly Footer?: React.ComponentType<CalendarFooterProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Common button element
+     */
+    readonly ControlButton?: React.ComponentType<CalendarControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Heading element
+     */
+    readonly Heading?: React.ComponentType<CalendarHeadingProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Subheading element
+     */
+    readonly Subheading?: React.ComponentType<CalendarSubheadingProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Prev icon element in prev month button
+     */
+    readonly IconPrev?: React.ComponentType<CalendarIconPrevProps & React.RefAttributes<SVGElement>>;
+    /**
+     * Next icon element in next month button
+     */
+    readonly IconNext?: React.ComponentType<CalendarIconNextProps & React.RefAttributes<SVGElement>>;
+    /**
+     * Weeks bar  element
+     */
+    readonly WeekDaysBar?: React.ComponentType<CalendarWeekDaysBarProps & React.RefAttributes<HTMLDivElement>>;
+}
+export type CalendarBadge = {
+    readonly date: Date;
+    readonly badgeContent: React.ReactNode;
+    readonly accentColor?: 'primary' | 'secondary' | string;
+};
+export type CalendarRef<IsRangeValue extends boolean | undefined = undefined> = {
+    readonly setView: (view: CalendarView) => void;
+    readonly getActiveView: () => CalendarView;
+    readonly setValue: (value: CalendarValue<IsRangeValue>) => void;
+    readonly setCalendarDate: (date: Date) => void;
+    readonly reset: () => void;
+};
+declare const CalendarComponent: React.ForwardRefExoticComponent<CalendarProps<boolean | undefined> & React.RefAttributes<CalendarRef<boolean | undefined>>>;
+export { CalendarComponent };