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

package/Calendar/index.js

@@ -10,6 +10,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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);
 };
@@ -17,285 +29,11 @@ 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 CalendarBody_1 = __importDefault(require("./CalendarBody"));
-const CalendarCell_1 = __importDefault(require("./CalendarCell"));
-const CalendarEmptyCell_1 = __importDefault(require("./CalendarEmptyCell"));
-const CalendarPaper_1 = __importDefault(require("./CalendarPaper"));
-const CalendarHeader_1 = __importDefault(require("./CalendarHeader"));
-const CalendarWeekRow_1 = __importDefault(require("./CalendarWeekRow"));
-const CalendarDateContainer_1 = __importDefault(require("./CalendarDateContainer"));
-const CalendarToolbar_1 = __importDefault(require("./CalendarToolbar"));
-const CalendarYearsSelector_1 = __importDefault(require("./CalendarYearsSelector"));
-const CalendarMonthsSelector_1 = __importDefault(require("./CalendarMonthsSelector"));
-const CalendarMonthCell_1 = __importDefault(require("./CalendarMonthCell"));
-const CalendarYearCell_1 = __importDefault(require("./CalendarYearCell"));
-const CalendarDayBadge_1 = __importDefault(require("./CalendarDayBadge"));
-const CalendarFooter_1 = __importDefault(require("./CalendarFooter"));
-const CalendarControlButton_1 = __importDefault(require("./CalendarControlButton"));
-const CalendarHeading_1 = __importDefault(require("./CalendarHeading"));
-const CalendarSubheading_1 = __importDefault(require("./CalendarSubheading"));
-const CalendarIconPrev_1 = __importDefault(require("./CalendarIconPrev"));
-const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
-const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
-const use_calendar_1 = require("./use-calendar");
-const reducer_1 = require("./reducer");
-__exportStar(require("./use-calendar"), exports);
-__exportStar(require("./CalendarWeekDaysBar"), exports);
-const Calendar = (props) => {
-    const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView, views, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
-    if (typeof value !== 'undefined' && typeof onChange === 'undefined') {
-        throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
-    }
-    const overridesMap = react_1.default.useMemo(() => ({
-        Body: (overrides === null || overrides === void 0 ? void 0 : overrides.Body) || CalendarBody_1.default,
-        Cell: (overrides === null || overrides === void 0 ? void 0 : overrides.Cell) || CalendarCell_1.default,
-        EmptyCell: (overrides === null || overrides === void 0 ? void 0 : overrides.EmptyCell) || CalendarEmptyCell_1.default,
-        Paper: (overrides === null || overrides === void 0 ? void 0 : overrides.Paper) || CalendarPaper_1.default,
-        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || CalendarHeader_1.default,
-        WeekRow: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRow) || CalendarWeekRow_1.default,
-        DateContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.DateContainer) || CalendarDateContainer_1.default,
-        Toolbar: (overrides === null || overrides === void 0 ? void 0 : overrides.Toolbar) || CalendarToolbar_1.default,
-        YearsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.YearsSelector) || CalendarYearsSelector_1.default,
-        MonthsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthsSelector) || CalendarMonthsSelector_1.default,
-        MonthCell: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthCell) || CalendarMonthCell_1.default,
-        YearCell: (overrides === null || overrides === void 0 ? void 0 : overrides.YearCell) || CalendarYearCell_1.default,
-        DayBadge: (overrides === null || overrides === void 0 ? void 0 : overrides.DayBadge) || CalendarDayBadge_1.default,
-        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || CalendarFooter_1.default,
-        ControlButton: (overrides === null || overrides === void 0 ? void 0 : overrides.ControlButton) || CalendarControlButton_1.default,
-        Heading: (overrides === null || overrides === void 0 ? void 0 : overrides.Heading) || CalendarHeading_1.default,
-        Subheading: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheading) || CalendarSubheading_1.default,
-        IconPrev: (overrides === null || overrides === void 0 ? void 0 : overrides.IconPrev) || CalendarIconPrev_1.default,
-        IconNext: (overrides === null || overrides === void 0 ? void 0 : overrides.IconNext) || IconChevronRight_1.default,
-        WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default,
-    }), [overrides]);
-    const realValue = react_1.default.useMemo(() => typeof value !== 'undefined'
-        ? value
-        : typeof defaultValue !== 'undefined'
-            ? defaultValue
-            : new Date(), [value, defaultValue]);
-    const initialProps = react_1.default.useRef({
-        value: realValue,
-        badges,
-        initialView,
-        views,
-    });
-    const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range, {
-        initialView,
-        views,
-    })), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue });
-    const [state, dispatch] = react_1.default.useReducer(reducer_1.reducer, initialState);
-    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = (0, use_calendar_1.useCalendar)({
-        minDate,
-        maxDate,
-        weekStartDay,
-        locale,
-        displayLeadingZero,
-    });
-    const { calendarCurrentView, calendarViewVariants, calendarValue, calendarDate } = state;
-    /**
-     * Prev and next month buttons
-     */
-    const handleChangeMonthClick = react_1.default.useCallback((type) => () => {
-        const newDate = type === 'prev'
-            ? new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1)
-            : new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
-        dispatch({ type: 'setPartial', payload: { calendarDate: newDate } });
-    }, [calendarDate]);
-    /**
-     * Date props was changed
-     */
-    react_1.default.useEffect(() => {
-        if (typeof value !== 'undefined') {
-            dispatch({
-                type: 'setPartial',
-                payload: {
-                    calendarValue: value,
-                    // calendarDate: Array.isArray(value) ? value[0] : value,
-                },
-            });
-        }
-    }, [value, calendarValue, isSameDay, dispatch]);
-    /**
-     * Handles click on a day cell.
-     * Range selection follows a simple two‑click model:
-     * 1) First click sets the start date.
-     * 2) Second click sets the end date.
-     * If a full range is already selected, a new click starts a new range.
-     */
-    const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
-        if (!onChange) {
-            return;
-        }
-        // Single-date mode
-        if (!range) {
-            onChange(selectedDate);
-            return;
-        }
-        const [from, to] = calendarValue;
-        // No range selected yet → first click
-        if (!from && !to) {
-            onChange([selectedDate, selectedDate]);
-            return;
-        }
-        // Only start date selected → second click
-        if (from && (!to || from.getTime() === to.getTime())) {
-            if (selectedDate < from) {
-                // User clicked before the start → swap
-                onChange([selectedDate, from]);
-            }
-            else {
-                // Normal forward range
-                onChange([from, selectedDate]);
-            }
-            return;
-        }
-        // Full range already selected → start a new range
-        onChange([selectedDate, selectedDate]);
-    }, [onChange, calendarValue, range]);
-    /**
-     * Handle of click on year item
-     */
-    const handleYearSelected = react_1.default.useCallback((selectedYear) => () => {
-        const newDate = new Date(calendarDate);
-        newDate.setFullYear(selectedYear);
-        newDate.setMonth(calendarDate.getMonth());
-        newDate.setDate(1);
-        newDate.setHours(0);
-        newDate.setMinutes(0);
-        newDate.setMilliseconds(0);
-        const nextView = calendarViewVariants.includes('days') ? 'days' : undefined;
-        dispatch({
-            type: 'setPartial',
-            payload: {
-                calendarDate: newDate,
-                calendarCurrentView: nextView !== null && nextView !== void 0 ? nextView : calendarCurrentView,
-            },
-        });
-        if (!nextView && typeof onChange === 'function') {
-            handleCellDateClick(newDate)();
-        }
-    }, [calendarCurrentView, calendarDate, calendarViewVariants, handleCellDateClick, onChange]);
-    /**
-     * Handle of click on month item
-     */
-    const handleMonthSelected = react_1.default.useCallback((monthIndex) => () => {
-        const newDate = new Date(calendarDate);
-        newDate.setMonth(monthIndex);
-        newDate.setDate(1);
-        newDate.setHours(0);
-        newDate.setMinutes(0);
-        newDate.setMilliseconds(0);
-        const nextView = calendarViewVariants.includes('days') ? 'days' : undefined;
-        dispatch({
-            type: 'setPartial',
-            payload: {
-                calendarDate: newDate,
-                calendarCurrentView: nextView !== null && nextView !== void 0 ? nextView : calendarCurrentView,
-            },
-        });
-        if (!nextView && typeof onChange === 'function') {
-            handleCellDateClick(newDate)();
-        }
-    }, [calendarDate, calendarViewVariants, handleCellDateClick, onChange, calendarCurrentView]);
-    /**
-     * Manual view changing
-     */
-    const handleChangeView = react_1.default.useCallback((selectedView) => () => {
-        if (!calendarViewVariants.includes(selectedView)) {
-            return;
-        }
-        dispatch({
-            type: 'setPartial',
-            payload: {
-                calendarCurrentView: selectedView,
-            },
-        });
-    }, [calendarViewVariants]);
-    /**
-     * Handle click on «Reset» button
-     */
-    const handleReset = react_1.default.useCallback(() => {
-        dispatch({
-            type: 'setPartial',
-            payload: {
-                calendarCurrentView: initialProps.current.initialView,
-                calendarDate: initialProps.current.value,
-                calendarValue: initialProps.current.value,
-            },
-        });
-        if (typeof onChange === 'function') {
-            onChange(initialProps.current.value);
-        }
-    }, [onChange]);
-    /**
-     * Handle click on «Today» button
-     */
-    const handleToday = react_1.default.useCallback(() => {
-        const today = new Date();
-        today.setHours(0);
-        today.setMinutes(0);
-        today.setSeconds(0);
-        today.setMilliseconds(0);
-        dispatch({
-            type: 'setPartial',
-            payload: {
-                calendarDate: today,
-            },
-        });
-    }, []);
-    const weeks = react_1.default.useMemo(() => (calendarCurrentView === 'days' ? getWeeks(calendarDate) : []), [calendarCurrentView, calendarDate, getWeeks]);
-    const yearsRange = react_1.default.useMemo(() => (calendarCurrentView === 'years' ? getYearsRange(minDate, maxDate) : []), [calendarCurrentView, minDate, maxDate, getYearsRange]);
-    const monthsRange = react_1.default.useMemo(() => (calendarCurrentView === 'months' ? getMonthsRange(minDate, maxDate) : []), [calendarCurrentView, minDate, maxDate, getMonthsRange]);
-    const normalizedRange = react_1.default.useMemo(() => {
-        const [from, to] = Array.isArray(calendarValue)
-            ? calendarValue[0].getTime() <= calendarValue[1].getTime()
-                ? calendarValue
-                : [calendarValue[1], calendarValue[0]]
-            : [calendarValue, calendarValue];
-        return [from, to];
-    }, [calendarValue]);
-    return (react_1.default.createElement(overridesMap.Paper, null,
-        react_1.default.createElement(overridesMap.Header, null,
-            typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
-            typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
-            react_1.default.createElement(overridesMap.Toolbar, null,
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('prev'), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
-                    react_1.default.createElement(overridesMap.IconPrev, null)),
-                react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === 'months', disabled: !calendarViewVariants.includes('months'), onClick: handleChangeView(calendarCurrentView === 'months' ? 'days' : 'months') }, getMonthLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === 'years', disabled: !calendarViewVariants.includes('years'), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === 'years' ? 'days' : 'years') }, getYearLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('next'), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
-                    react_1.default.createElement(overridesMap.IconNext, null)))),
-        calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[0], format: weekDayLabelFormat || 'short' })),
-        react_1.default.createElement(overridesMap.Body, null,
-            calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, yearsRange.map(year => {
-                const isSelected = calendarDate.getFullYear() === year;
-                return (react_1.default.createElement(overridesMap.YearCell, { key: year, accentColor: accentColor, isSelected: isSelected, onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))));
-            }))),
-            calendarCurrentView === 'months' && (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
-                const isSelected = calendarDate.getMonth() === monthIndex;
-                return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex + monthsRange[monthIndex], accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
-            }))),
-            calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
-                if (day.date.getMonth() === calendarDate.getMonth()) {
-                    const badge = badges.find(b => isSameDay(b.date, day.date));
-                    // Normalize range order
-                    const [from, to] = normalizedRange;
-                    const fill = Array.isArray(calendarValue) &&
-                        day.date.getTime() >= from.getTime() &&
-                        day.date.getTime() <= to.getTime();
-                    const isSelected = isSameDay(from, day.date) || isSameDay(to, day.date);
-                    return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
-                        getDayLabel(day.date),
-                        badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
-                }
-                return react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() });
-            }))))))),
-        (typeof resetButtonLabel !== 'undefined' ||
-            typeof todayButtonLabel !== 'undefined' ||
-            typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,
-            typeof footer !== 'undefined' && react_1.default.createElement(react_1.default.Fragment, null, footer),
-            typeof todayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, todayButtonLabel)),
-            typeof resetButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
-};
+const React = __importStar(require("react"));
+const CalendarComponent_1 = require("./CalendarComponent");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+__exportStar(require("./CalendarComponent"), exports);
+const Calendar = React.forwardRef((props, ref) => (React.createElement(ErrorBoundary_1.default, null,
+    React.createElement(CalendarComponent_1.CalendarComponent, Object.assign({}, props, { ref: ref })))));
+Calendar.displayName = 'Calendar';
 exports.default = Calendar;

package/Calendar/use-calendar.d.ts

@@ -1,4 +1,4 @@
-export type CalendarValue<Multiple> = Multiple extends undefined ? Date : [Date, Date];
+export type CalendarValue<Range> = Range extends undefined ? Date | null : [Date, Date] | [Date | null] | null;
 export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export type Day = {
     readonly date: Date;

package/Color/Color.d.ts

@@ -0,0 +1,138 @@
+import { ParsedColor } from './ColorParser';
+import { ColorGenerator } from './ColorGenerator';
+export type ColorFormat = 'rgb' | 'rgba' | 'hex' | 'hsl' | 'hsla';
+export declare class Color {
+    private readonly _r;
+    private readonly _g;
+    private readonly _b;
+    private readonly _a;
+    get r(): number;
+    get g(): number;
+    get b(): number;
+    get a(): number;
+    private constructor();
+    /**
+     * Создает цвет из строкового представления
+     */
+    static fromString(value: string): Color;
+    /**
+     * Создает цвет из RGB компонентов
+     */
+    static fromRgb(r: number, g: number, b: number, a?: number): Color;
+    /**
+     * Создает цвет из HEX строки
+     */
+    static fromHex(hex: string): Color;
+    /**
+     * Создает цвет из HSL строки
+     */
+    static fromHsl(hsl: string): Color;
+    /**
+     * Создает цвет из UUID (использует генератор)
+     */
+    static fromUuid(uuid: string, palette?: keyof typeof ColorGenerator.getPalettes): Color;
+    /**
+     * Создает цвет из строки с хешированием
+     */
+    static fromHashString(str: string): Color;
+    /**
+     * Возвращает новый цвет, осветленный на указанное количество единиц
+     */
+    lighten(units: number): Color;
+    /**
+     * Возвращает новый цвет, затемненный на указанное количество единиц
+     */
+    darken(units: number): Color;
+    /**
+     * Изменяет яркость цвета путем умножения каждого канала на коэффициент
+     * @param lum - Коэффициент изменения яркости (от -1 до 1, где отрицательные значения затемняют, положительные - осветляют)
+     * @returns Новый объект Color с измененной яркостью
+     *
+     * @example
+     * ```ts
+     * const color = Color.fromString('#ff0000');
+     * const lighter = color.luminance(0.2); // на 20% светлее
+     * const darker = color.luminance(-0.2); // на 20% темнее
+     * ```
+     */
+    luminance(lum: number): Color;
+    /**
+     * Возвращает новый цвет с измененной яркостью (процентное изменение)
+     */
+    adjustBrightness(percent: number): Color;
+    /**
+     * Возвращает новый цвет с измененным альфа-каналом
+     */
+    alpha(value: number): Color;
+    /**
+     * Возвращает относительную яркость цвета (luminance)
+     */
+    getLuminance(): number;
+    /**
+     * Возвращает контраст между текущим цветом и переданным
+     */
+    getContrast(other: Color | string): number;
+    /**
+     * Проверяет, достаточно ли контрастен цвет для белого текста
+     */
+    isLight(): boolean;
+    /**
+     * Возвращает наиболее контрастный цвет (черный или белый)
+     */
+    getContrastColor(): Color;
+    /**
+     * Возвращает новый цвет, смешанный с другим цветом
+     */
+    mix(other: Color | string, weight?: number): Color;
+    /**
+     * Возвращает цвет в разных форматах
+     */
+    toString(format?: ColorFormat): string;
+    toRgbString(includeAlpha?: boolean): string;
+    toHexString(includeAlpha?: boolean): string;
+    toHslString(includeAlpha?: boolean): string;
+    /**
+     * Возвращает HSL представление цвета
+     */
+    toHsl(): [number, number, number];
+    private clamp;
+    /**
+     * @deprecated Use {@link Color.toRgbString} instead
+     */
+    rgbString(): string;
+    /**
+     * @deprecated Use {@link Color.toHslString} instead
+     */
+    hslString(): string;
+    /**
+     * @deprecated Use {@link Color.toHexString} instead
+     */
+    hexString(): string;
+    /**
+     * @deprecated Use getters `color.r`, `color.g`, `color.b`, `color.a` instead.
+     * This method will be removed in future versions.
+     *
+     * @returns {ParsedColor} Object with r, g, b, a properties
+     */
+    rgb(): ParsedColor;
+    /**
+     * @deprecated Use {@Link Color.fromString} or {@Link ColorParser.parse} instead.
+     */
+    static parseColor(value: string): ParsedColor;
+    /**
+     * @deprecated Use {@Link Color.fromHsl} or ColorParser.parse() instead.
+     */
+    static hslToRgb(value: string): ParsedColor;
+    /**
+     * @deprecated Use {@Link Color.fromString} with named colors instead.
+     */
+    static getHextByWebColor(value: string): string | undefined;
+    /**
+     * @deprecated Do not use.
+     */
+    static intToRGB(i: number): string;
+    /**
+     * @deprecated Use {@Link Color.fromUuid}
+     */
+    static uuidToColor(uuid: string): Color;
+}