@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/Calendar/CalendarWeekDaysBar.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekDayLabel_1 = __importDefault(require("./CalendarWeekDayLabel"));
+const Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CalendarWeekDaysBar = (props, ref) => {
+    const { locale, week, format } = props, restProps = __rest(props, ["locale", "week", "format"]);
+    const weekDayLabels = react_1.default.useMemo(() => week.days.map(day => new Intl.DateTimeFormat(locale, {
+        weekday: format,
+    }).format(day.date)), [format, locale, week]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
+};
+exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Calendar/CalendarWeekRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarWeekRow.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekRow = styled_1.default.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+`;
+exports.default = react_1.default.memo(CalendarWeekRow);

package/Calendar/IconChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Calendar/IconChevronLeft.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
+exports.default = react_1.default.forwardRef(IconChevronLeft);

package/Calendar/IconChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Calendar/IconChevronRight.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconChevronRight = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "m184 112 144 144-144 144" })));
+exports.default = react_1.default.forwardRef(IconChevronRight);

package/Calendar/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WeekDayName } from './use-calendar';
+import { WeekNameLabelFormat } from './CalendarWeekDaysBar';
+export interface CalendarProps {
+    readonly date?: Date;
+    readonly locale?: string;
+    readonly selected?: Date[];
+    readonly onSelectDate?: (date: Date) => void;
+    readonly onDateChange?: (date: Date) => void;
+    readonly maxDate?: Date;
+    readonly minDate?: Date;
+    readonly weekStartDay?: WeekDayName;
+    readonly weekDayLabelFormat?: WeekNameLabelFormat;
+    readonly displayLeadingZero?: boolean;
+}
+export * from './use-calendar';
+declare const _default: React.NamedExoticComponent<CalendarProps>;
+export default _default;

package/Calendar/index.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const use_calendar_1 = __importDefault(require("./use-calendar"));
+const CalendarCell_1 = __importDefault(require("./CalendarCell"));
+const CalendarEmptyCell_1 = __importDefault(require("./CalendarEmptyCell"));
+const CalendarPaper_1 = __importDefault(require("./CalendarPaper"));
+const CalendarWeekRow_1 = __importDefault(require("./CalendarWeekRow"));
+const CalendarDateContainer_1 = __importDefault(require("./CalendarDateContainer"));
+const CalendarTopBar_1 = __importDefault(require("./CalendarTopBar"));
+const CalendarMonthControl_1 = __importDefault(require("./CalendarMonthControl"));
+const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
+const Menu_1 = __importDefault(require("../Menu"));
+const ButtonBase_1 = __importDefault(require("../Button/ButtonBase"));
+__exportStar(require("./use-calendar"), exports);
+const Calendar = props => {
+    const { date, locale, selected, maxDate, minDate, weekStartDay, weekDayLabelFormat, displayLeadingZero, onDateChange, onSelectDate, } = props;
+    const [yearsMenuEl, setYearsMenuEl] = react_1.default.useState(null);
+    const [monthMenuEl, setMonthMenuEl] = react_1.default.useState(null);
+    const [selectedDates, setSelectedDates] = react_1.default.useState([...(selected || [])]);
+    const calendar = (0, use_calendar_1.default)({
+        weekStartDay,
+        displayLeadingZero,
+        date,
+        minDate,
+        maxDate,
+        locale,
+    });
+    const currentMonthLabel = react_1.default.useMemo(() => {
+        const intl = new Intl.DateTimeFormat(calendar.locale, {
+            month: 'long',
+        });
+        const title = intl.format(calendar.date);
+        return title.charAt(0).toUpperCase() + title.slice(1);
+    }, [calendar.date, calendar.locale]);
+    react_1.default.useEffect(() => {
+        calendar.dispatch({
+            type: 'partial',
+            payload: props,
+        });
+    }, [calendar, props]);
+    // If selected props has been changed
+    react_1.default.useEffect(() => {
+        const prev = selectedDates;
+        const next = [...(selected || [])];
+        const has1 = prev.every(prevDate => next.find(nextDate => calendar.isSameDay(prevDate, nextDate)));
+        const has2 = next.every(nextDate => prev.find(prevDate => calendar.isSameDay(nextDate, prevDate)));
+        const isEqual = has1 && has2;
+        if (!isEqual) {
+            setSelectedDates([...(selected || [])]);
+        }
+    }, [calendar, selected, selectedDates]);
+    const [year, month] = react_1.default.useMemo(() => [calendar.date.getFullYear(), calendar.date.getMonth()], [calendar.date]);
+    const handlePrevClick = react_1.default.useCallback(() => {
+        const d = new Date(year, month - 1, 1);
+        if (!calendar.isSameDay(d, calendar.date)) {
+            calendar.setDate(d);
+            if (typeof onDateChange === 'function') {
+                onDateChange(d);
+            }
+        }
+    }, [year, month, calendar, onDateChange]);
+    const handleNextClick = react_1.default.useCallback(() => {
+        const d = new Date(year, month + 1, 1);
+        if (!calendar.isSameDay(d, calendar.date)) {
+            calendar.setDate(d);
+            if (typeof onDateChange === 'function') {
+                onDateChange(d);
+            }
+        }
+    }, [year, month, calendar, onDateChange]);
+    const handleDayClick = react_1.default.useCallback((day) => () => {
+        if (typeof onSelectDate === 'function') {
+            onSelectDate(day);
+        }
+    }, [onSelectDate]);
+    const getDayLabel = react_1.default.useCallback((day) => {
+        const dateNum = day.getDate();
+        if (!calendar.displayLeadingZero) {
+            return dateNum.toString();
+        }
+        const numStr = `0${dateNum}`;
+        return numStr.substring(numStr.length - 2);
+    }, [calendar.displayLeadingZero]);
+    const years = react_1.default.useMemo(() => {
+        const y = [];
+        for (let year = calendar.minDate.getFullYear(); year >= calendar.minDate.getFullYear() && year <= calendar.maxDate.getFullYear(); year++) {
+            y.push(year);
+        }
+        return y;
+    }, [calendar.maxDate, calendar.minDate]);
+    const monthes = react_1.default.useMemo(() => {
+        const m = [];
+        const y = calendar.date.getFullYear();
+        for (let index = 0; index < 12; index++) {
+            const d = new Date(y, index, 1, 0, 0, 0);
+            if (d.getTime() > calendar.minDate.getTime() && d.getTime() < calendar.maxDate.getTime()) {
+                m.push(index);
+            }
+        }
+        return m;
+    }, [calendar.date, calendar.maxDate, calendar.minDate]);
+    return (react_1.default.createElement(CalendarPaper_1.default, null,
+        react_1.default.createElement(CalendarTopBar_1.default, null,
+            react_1.default.createElement(CalendarMonthControl_1.default, { displayIcon: "prev", onClick: handlePrevClick }),
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(ButtonBase_1.default, { type: "button", onClick: event => setMonthMenuEl(event.currentTarget) }, currentMonthLabel),
+                react_1.default.createElement(ButtonBase_1.default, { type: "button", onClick: event => setYearsMenuEl(event.currentTarget) }, calendar.date.getFullYear()),
+                react_1.default.createElement(Menu_1.default, { value: calendar.date.getFullYear(), isOpen: Boolean(yearsMenuEl), anchorElement: yearsMenuEl, onRequestClose: () => setYearsMenuEl(null), onSelectItem: item => {
+                        const newDate = new Date(calendar.date);
+                        newDate.setFullYear(item);
+                        newDate.setMonth(11 - 1);
+                        setYearsMenuEl(null);
+                        if (calendar.date.getFullYear() !== newDate.getFullYear()) {
+                            calendar.setDate(newDate);
+                            if (typeof onDateChange === 'function') {
+                                onDateChange(newDate);
+                            }
+                        }
+                    }, items: years, renderItem: item => item.item }),
+                react_1.default.createElement(Menu_1.default, { value: { value: calendar.date.getMonth(), label: 'month' }, isOpen: Boolean(monthMenuEl), anchorElement: monthMenuEl, onRequestClose: () => setMonthMenuEl(null), onSelectItem: item => {
+                        const newDate = new Date(calendar.date);
+                        newDate.setMonth(item.value);
+                        setMonthMenuEl(null);
+                        if (calendar.date.getMonth() !== newDate.getMonth()) {
+                            calendar.setDate(newDate);
+                            if (typeof onDateChange === 'function') {
+                                onDateChange(newDate);
+                            }
+                        }
+                    }, items: monthes.map(monthIndex => {
+                        const intl = new Intl.DateTimeFormat(calendar.locale, {
+                            month: 'long',
+                        });
+                        return {
+                            value: monthIndex,
+                            label: intl.format(new Date(calendar.date.getFullYear(), monthIndex, 1, 0, 0, 0, 0)),
+                        };
+                    }), renderItem: item => item.item.label })),
+            react_1.default.createElement(CalendarMonthControl_1.default, { displayIcon: "next", onClick: handleNextClick })),
+        react_1.default.createElement(CalendarWeekDaysBar_1.default, { locale: calendar.locale, week: calendar.weeks[0], format: weekDayLabelFormat || 'short' }),
+        react_1.default.createElement(CalendarDateContainer_1.default, null, calendar.weeks.map(week => (react_1.default.createElement(CalendarWeekRow_1.default, { key: week.weekNumber.toString() }, week.days.map(day => {
+            if (day.date.getMonth() === calendar.date.getMonth()) {
+                return (react_1.default.createElement(CalendarCell_1.default, { key: day.date.getTime(), isToday: day.isToday, isDisabled: day.isDisabled, isSelected: selectedDates.find(s => calendar.isSameDay(s, day.date)) !== undefined, onClick: handleDayClick(day.date) }, getDayLabel(day.date)));
+            }
+            return react_1.default.createElement(CalendarEmptyCell_1.default, { key: day.date.getTime() });
+        })))))));
+};
+exports.default = react_1.default.memo(Calendar);

package/Calendar/use-calendar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
+export type Day = {
+    readonly date: Date;
+    readonly isToday: boolean;
+    readonly isDisabled: boolean;
+};
+export type Week = {
+    readonly weekNumber: number;
+    readonly days: Day[];
+};
+export interface UseCalendarProps {
+    readonly date?: Date;
+    readonly minDate?: Date;
+    readonly maxDate?: Date;
+    readonly locale?: string;
+    readonly weekStartDay?: WeekDayName;
+    readonly displayLeadingZero?: boolean;
+}
+type CalendarState = {
+    readonly date: Date;
+    readonly minDate: Date;
+    readonly maxDate: Date;
+    readonly locale: string;
+    readonly weekStartDay: WeekDayName;
+    readonly displayLeadingZero: boolean;
+};
+type CalendarActionPartial = {
+    readonly type: 'partial';
+    readonly payload: Partial<CalendarState>;
+};
+type CalendarActionDate = {
+    readonly type: 'date';
+    readonly payload: Date;
+};
+type CalendarActions = CalendarActionPartial | CalendarActionDate;
+export declare const useCalendar: (props: UseCalendarProps) => {
+    isSameDay: (a: Date, b: Date) => boolean;
+    isToday: (dateValue: Date) => boolean;
+    setDate: (value: Date) => void;
+    dispatch: React.Dispatch<CalendarActions>;
+    minDate: Date;
+    maxDate: Date;
+    weeks: Week[];
+    weekStartDay: WeekDayName;
+    locale: string;
+    displayLeadingZero: boolean;
+    date: Date;
+};
+export default useCalendar;

package/Calendar/use-calendar.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendar = void 0;
+const react_1 = __importDefault(require("react"));
+const calendarReducer = (state, action) => {
+    switch (action.type) {
+        case 'partial':
+            return Object.assign(Object.assign({}, state), action.payload);
+        case 'date': {
+            return Object.assign(Object.assign({}, state), { date: action.payload });
+        }
+        default:
+            return state;
+    }
+};
+const calendarDefaults = {
+    date: new Date(),
+    minDate: new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0),
+    maxDate: new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0),
+    locale: 'ru-RU',
+    weekStartDay: 'monday',
+    displayLeadingZero: false,
+};
+const useCalendar = (props) => {
+    const [state, dispatch] = react_1.default.useReducer(calendarReducer, Object.assign(Object.assign({}, calendarDefaults), props));
+    const { date, minDate, maxDate, locale, weekStartDay, displayLeadingZero } = state;
+    const isSameDay = react_1.default.useCallback((a, b) => a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate(), []);
+    const isToday = react_1.default.useCallback((dateValue) => isSameDay(dateValue, new Date()), [isSameDay]);
+    const isDisabled = react_1.default.useCallback((dateValue) => {
+        const min = minDate.getTime() || 0;
+        const max = maxDate.getTime() || Number.MAX_VALUE;
+        const current = dateValue.getTime();
+        return current > max || current < min;
+    }, [maxDate, minDate]);
+    const calculateWeekNumber = react_1.default.useCallback((dt) => {
+        const tdt = new Date(dt.valueOf());
+        const dayn = (dt.getDay() + 6) % 7;
+        tdt.setDate(tdt.getDate() - dayn + 3);
+        const firstThursday = tdt.valueOf();
+        tdt.setMonth(0, 1);
+        if (tdt.getDay() !== 4) {
+            tdt.setMonth(0, 1 + ((4 - tdt.getDay() + 7) % 7));
+        }
+        return 1 + Math.ceil((firstThursday - tdt.getTime()) / 604800000);
+    }, []);
+    const weekDaysMap = react_1.default.useMemo(() => ({
+        sunday: 0,
+        monday: 1,
+        tuesday: 2,
+        wednesday: 3,
+        thursday: 4,
+        friday: 5,
+        saturday: 6,
+    }), []);
+    const weeks = react_1.default.useMemo(() => {
+        const list = [];
+        const startOfDate = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
+        const lastOfDate = new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0);
+        const startDayNum = weekDaysMap[weekStartDay];
+        const week = new Set();
+        const d = new Date(date);
+        for (let dateNum = 1; dateNum < lastOfDate.getDate() + 1; dateNum++) {
+            d.setDate(dateNum);
+            // if is start of the week then set a new week
+            if (d.getDay() === startDayNum) {
+                const days = [...week].map(day => ({
+                    date: day,
+                    isToday: isToday(day),
+                    isDisabled: isDisabled(day),
+                }));
+                if (days.length) {
+                    list.push({
+                        weekNumber: calculateWeekNumber(days[0].date),
+                        days,
+                    });
+                }
+                week.clear();
+            }
+            week.add(new Date(d));
+            // if is last of iteration
+            if (dateNum === lastOfDate.getDate()) {
+                const days = [...week].map(day => ({
+                    date: day,
+                    isToday: isToday(day),
+                    isDisabled: isDisabled(day),
+                }));
+                if (days.length) {
+                    list.push({
+                        weekNumber: calculateWeekNumber(days[0].date),
+                        days,
+                    });
+                }
+                week.clear();
+            }
+        }
+        // Fill the prev days
+        if (list[0].days.length < 7) {
+            const fillDays = 7 - list[0].days.length;
+            const days = list[0].days;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(startOfDate.getFullYear(), startOfDate.getMonth(), -fillIndex, 0, 0, 0, 0);
+                days.unshift({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list[0] = {
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            };
+        }
+        // fill the next days
+        if (list[list.length - 1].days.length < 7) {
+            const fillDays = 7 - list[list.length - 1].days.length;
+            const days = list[list.length - 1].days;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(lastOfDate.getFullYear(), lastOfDate.getMonth() + 1, fillIndex + 1, 0, 0, 0, 0);
+                days.push({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list[list.length - 1] = {
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            };
+        }
+        // if weeks length is 4 only
+        // then prepend week
+        if (list.length === 4) {
+            const fillDays = 7;
+            const days = [];
+            const firstWeek = list[0];
+            const firstDate = firstWeek.days[0].date;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() - fillIndex, 0, 0, 0, 0);
+                days.unshift({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list.unshift({
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            });
+        }
+        // if weeks length is 5 only
+        // then append week
+        if (list.length === 5) {
+            const lastWeek = list[list.length - 1];
+            const lastDate = lastWeek.days[lastWeek.days.length - 1].date;
+            const days = [];
+            for (let fillIndex = 0; fillIndex < 7; fillIndex++) {
+                const day = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + fillIndex + 1, 0, 0, 0, 0);
+                days.push({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list.push({
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            });
+        }
+        return list;
+    }, [date, weekDaysMap, weekStartDay, isToday, isDisabled, calculateWeekNumber]);
+    const setDate = react_1.default.useCallback((value) => {
+        dispatch({
+            type: 'date',
+            payload: value,
+        });
+    }, []);
+    return {
+        isSameDay,
+        isToday,
+        setDate,
+        dispatch,
+        minDate,
+        maxDate,
+        weeks,
+        weekStartDay,
+        locale,
+        displayLeadingZero,
+        date,
+    };
+};
+exports.useCalendar = useCalendar;
+exports.default = exports.useCalendar;

package/Color/index.d.ts

@@ -0,0 +1,113 @@
+export type ParsedColor = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+declare class Color {
+    #private;
+    constructor(value: string | Color);
+    /**
+     * Lightens the current color by the \
+     * transmitted number of conventional units.\
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .lighten(60)
+     *   .toString();
+     * ```
+     *
+     */
+    lighten(decimal: number): this;
+    /**
+     * Darkens the current color by\
+     * the transmitted number of conventional units.
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .darken(60)
+     *   .toString();
+     * ```
+     */
+    darken(decimal: number): this;
+    /**
+     * Applies transparency (alpha channel) to the current color\
+     * Takes as an argument a number from 0 to 1
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .alpha(0.5)
+     *   .toString();
+     * ```
+     */
+    alpha(decimal: number): this;
+    /**
+     * Returns color luminance value
+     */
+    luminance(): number;
+    /**
+     * Returns the contrast level between the\
+     * current and transmitted colors
+     * \
+     * Example:
+     * ```tsx
+     * const { colors } = themes;
+     * const contrast = colors
+     *   .accentPrimary
+     *   .contrast(color.textPrimary.rgbString());
+     *
+     * if (contrast > 5) {
+     *   return color.textPrimary.toString();
+     * } else {
+     *   return color.textSecondary.toString()
+     * }
+     * ```
+     */
+    contrast(rgb2: string | Color): number;
+    /**
+     * Lighten or darknest color to lum steps
+     * lum - 0-25
+     */
+    private shade;
+    /**
+     * Returns the current color as separate rgb channels
+     */
+    rgb(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    /**
+     * Returns the current color as an rgba string
+     */
+    toString(): string;
+    /**
+     * Returns the current color as an rgba string
+     */
+    rgbString(): string;
+    /**
+     * Returns the current color as an hex string
+     */
+    hexString(): string;
+    /**
+     * Parse the transmitted color and returns its\
+     * representation as separate rgba channels
+     */
+    private parseColor;
+    /**
+     * Recodes the transmitted color value in hsl format to rgba
+     */
+    private hslToRgb;
+    /**
+     * Returns color code by web color name
+     */
+    private getHextByWebColor;
+}
+export default Color;