@salutejs/plasma-new-hope 0.339.0-canary.2299.18773440976.0 → 0.339.0-canary.2300.18832443234.0

package/styled-components/es/components/TimePickerGrid/TimePickerGrid.styles.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { css } from "styled-components";
+import { tokens } from "./TimePickerGrid.tokens";
+export var base = css([
+    "display:flex;width:100%;height:10rem;"
+]);
+export var StyledTimePicker = styled.div.withConfig({
+    displayName: "TimePickerGrid.styles__StyledTimePicker",
+    componentId: "sc-25f5922-0"
+})([
+    "background:var(",
+    ");border-radius:var(",
+    ");width:",
+    ";display:flex;padding:var(",
+    ");flex:1 1 1;gap:var(",
+    ");box-sizing:border-box;position:relative;height:var(",
+    ");"
+], tokens.timePickerGridBackground, tokens.timePickerGridBorderRadius, function(param) {
+    var width = param.width;
+    return (width === 'fullWidth' ? '100%' : width) || "var(".concat(tokens.timePickerGridWidth, ")");
+}, tokens.timePickerGridPadding, tokens.scrollbarWidth, tokens.columnHeight);

package/styled-components/es/components/TimePickerGrid/TimePickerGrid.tokens.js

@@ -0,0 +1,32 @@
+export var classes = {
+    timePickerGridRoot: '--plasma-time-picker-grid-grid-root',
+    timePickerGridStretched: '--plasma-time-picker-grid-grid-stretched',
+    timeItemActive: '--plasma-time-picker-grid-item-active',
+    timeColumn: '--plasma-time-picker-grid-column',
+    scrollbarVisible: '--plasma-time-picker-grid-scrollbar-visible',
+    timeColumnActive: '--plasma-time-picker-grid-column-active',
+    itemDisabled: '--plasma-time-picker-grid-item-disabled'
+};
+export var tokens = {
+    timePickerGridBackground: '--plasma-time-picker-grid-grid-background',
+    timePickerGridBorderRadius: '--plasma-time-picker-grid-grid-border-radius',
+    timePickerGridWidth: '--plasma-time-picker-grid-grid-width',
+    timePickerGridPadding: '--plasma-time-picker-grid-grid-padding',
+    disabledOpacity: '--plasma-time-picker-grid-disabled-opacity',
+    columnHeight: '--plasma-time-picker-grid-column-height',
+    itemHeight: '--plasma-time-picker-grid-item-height',
+    itemBorderRadius: '--plasma-time-picker-grid-item-border-radius',
+    itemPadding: '--plasma-time-picker-grid-item-padding',
+    itemBackgroundHover: '--plasma-time-picker-grid-item-hover-background',
+    itemBackgroundActive: '--plasma-time-picker-grid-item-active-background',
+    itemFontFamily: '--plasma-time-picker-grid-item-font-family',
+    itemFontStyle: '--plasma-time-picker-grid-item-font-style',
+    itemFontSize: '--plasma-time-picker-grid-item-font-size',
+    itemFontWeight: '--plasma-time-picker-grid-item-font-weight',
+    itemLetterSpacing: '--plasma-time-picker-grid-item-letter-spacing',
+    itemLineHeight: '--plasma-time-picker-grid-item-line-height',
+    scrollbarWidth: '--plasma-time-picker-grid-scrollbar-width',
+    scrollbarColor: '--plasma-time-picker-grid-scrollbar-color',
+    scrollbarTrackColor: '--plasma-time-picker-grid-scrollbar-track-color',
+    scrollbarMargin: '--plasma-time-picker-grid-scrollbar-margin'
+};

package/styled-components/es/components/TimePickerGrid/hooks/useKeyboardNavigation.js

@@ -0,0 +1,20 @@
+export var useKeyNavigation = function(param) {
+    var isCalendarOpen = param.isCalendarOpen, closeOnEsc = param.closeOnEsc, format = param.format, maskWithFormat = param.maskWithFormat, delimiter = param.delimiter, onToggle = param.onToggle;
+    var onKeyDown = function(event) {
+        if (event.key === delimiter && maskWithFormat && format) {
+            event.preventDefault();
+            return;
+        }
+        if (event.code === 'Space' && !isCalendarOpen) {
+            event.preventDefault();
+            onToggle(true, event);
+        }
+        if (event.code === 'Escape' && isCalendarOpen && closeOnEsc) {
+            event.preventDefault();
+            onToggle(false, event);
+        }
+    };
+    return {
+        onKeyDown: onKeyDown
+    };
+};

package/styled-components/es/components/TimePickerGrid/index.js

@@ -0,0 +1,2 @@
+export { timePickerGridRoot, timePickerGridConfig } from "./TimePickerGrid";
+export { tokens as timePickerGridTokens, classes as timePickerGridClasses } from "./TimePickerGrid.tokens";

package/styled-components/es/components/TimePickerGrid/ui/TimeColumn/TimeColumn.js

@@ -0,0 +1,103 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import React from "react";
+import cls from "classnames";
+import { classes } from "../../TimePickerGrid.tokens";
+import { StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledRoot } from "./TimeColumn.styles";
+export var renderTimeColumn = function(param) {
+    var values = param.values, disabledValues = param.disabledValues, dropdownHeight = param.dropdownHeight, column = param.column, activeTime = param.activeTime, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler, setScrollbar = param.setScrollbar, columnRef = param.columnRef, scrollbarState = param.scrollbarState, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs;
+    var handleKeyDown = function(e, columnType, value) {
+        handleTimeItemKeyDown(e, columnType, value);
+    };
+    var handleClick = function(value, columnType) {
+        var isDisabled = disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.some(function(disabledValue) {
+            return parseInt(disabledValue.toString(), 10) === parseInt(value, 10);
+        });
+        if (!isDisabled) {
+            handleTimeItemClick(value, columnType);
+        }
+    };
+    var minDisableIndex = function() {
+        if (!disabledValues || disabledValues.length === 0) {
+            return 0;
+        }
+        var disabledNumbers = disabledValues.map(function(val) {
+            return parseInt(val.toString(), 10);
+        });
+        for(var i = 0; i < values.length; i++){
+            var currentValue = parseInt(values[i], 10);
+            if (!disabledNumbers.includes(currentValue)) {
+                return i;
+            }
+        }
+        return 0;
+    };
+    var isColumnActive = activeTime.currentColumn === column;
+    var minAvailableIndex = minDisableIndex();
+    return /*#__PURE__*/ React.createElement(StyledRoot, null, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
+        key: column,
+        ref: columnRef,
+        height: dropdownHeight,
+        className: classes.timeColumn,
+        tabIndex: -1
+    }, values.map(function(value, index) {
+        var isDisabled = disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.some(function(disabledValue) {
+            return disabledValue === index;
+        });
+        var isActive = activeTime[column] === parseInt(value, 10);
+        var getTabIndex = function() {
+            if (isDisabled) return -1;
+            var isValueActive = activeTime[column] === parseInt(value, 10);
+            if (isColumnActive && isValueActive) {
+                return 0;
+            }
+            if (index === minAvailableIndex) {
+                return 0;
+            }
+            return -1;
+        };
+        var tabIndex = getTabIndex();
+        var _obj;
+        return /*#__PURE__*/ React.createElement(StyledTimeItem, {
+            key: column + value,
+            ref: function(el) {
+                timeItemRefs.current["".concat(column, "-").concat(value)] = el;
+            },
+            className: cls((_obj = {}, _define_property(_obj, classes.timeItemActive, isActive), _define_property(_obj, classes.itemDisabled, isDisabled), _obj)),
+            onClick: function() {
+                return handleClick(value, column);
+            },
+            onKeyDown: function(e) {
+                return handleKeyDown(e, column, value);
+            },
+            "aria-disabled": isDisabled,
+            tabIndex: tabIndex,
+            "data-value": value,
+            "data-column": column,
+            "data-active": isActive
+        }, value);
+    }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
+        ref: scrollbarRef,
+        className: cls(_define_property({}, classes.scrollbarVisible, scrollbarState === null || scrollbarState === void 0 ? void 0 : scrollbarState.isVisible)),
+        tabIndex: -1
+    }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+            height: "".concat(scrollbarState === null || scrollbarState === void 0 ? void 0 : scrollbarState.thumbHeight, "px"),
+            top: "".concat(scrollbarState === null || scrollbarState === void 0 ? void 0 : scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: columnRef && setScrollbar && timeoutRef ? createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef) : undefined,
+        tabIndex: -1
+    }))));
+};

package/styled-components/es/components/{TimePicker → TimePickerGrid}/ui/TimeColumn/TimeColumn.styles.js

@@ -1,14 +1,14 @@
 import styled from "styled-components";
-import { classes, tokens } from "../../TimePicker.tokens";
+import { classes, tokens } from "../../TimePickerGrid.tokens";
 export var StyledRoot = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledRoot",
-    componentId: "sc-a5ee4233-0"
+    componentId: "sc-2a18995b-0"
 })([
     "position:relative;width:100%;"
 ]);
 export var StyledTimeItem = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeItem",
-    componentId: "sc-a5ee4233-1"
+    componentId: "sc-2a18995b-1"
 })([
     "height:var(",
     ");padding:var(",
@@ -22,11 +22,13 @@ export var StyledTimeItem = styled.div.withConfig({
     ");&:hover{background:var(",
     ");}&.",
     "{background:var(",
+    ");}&.",
+    "{cursor:not-allowed;opacity:var(",
     ");}"
-], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemBackgroundHover, classes.timeItemActive, tokens.itemBackgroundActive);
+], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemBackgroundHover, classes.timeItemActive, tokens.itemBackgroundActive, classes.itemDisabled, tokens.disabledOpacity);
 export var StyledTimeColumn = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeColumn",
-    componentId: "sc-a5ee4233-2"
+    componentId: "sc-2a18995b-2"
 })([
     "max-height:",
     ";overflow-y:scroll;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
@@ -40,7 +42,7 @@ export var StyledTimeColumn = styled.div.withConfig({
 }, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemBackgroundHover, tokens.itemBorderRadius);
 export var CustomScrollbar = styled.div.withConfig({
     displayName: "TimeColumn.styles__CustomScrollbar",
-    componentId: "sc-a5ee4233-3"
+    componentId: "sc-2a18995b-3"
 })([
     "position:absolute;top:var(",
     ");right:0;bottom:var(",
@@ -50,7 +52,7 @@ export var CustomScrollbar = styled.div.withConfig({
 ], tokens.scrollbarMargin, tokens.scrollbarMargin, tokens.scrollbarWidth, classes.scrollbarVisible);
 export var ScrollbarTrack = styled.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarTrack",
-    componentId: "sc-a5ee4233-4"
+    componentId: "sc-2a18995b-4"
 })([
     "position:relative;width:100%;height:100%;background:var(",
     ");border-radius:var(",
@@ -58,7 +60,7 @@ export var ScrollbarTrack = styled.div.withConfig({
 ], tokens.scrollbarTrackColor, tokens.scrollbarWidth);
 export var ScrollbarThumb = styled.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarThumb",
-    componentId: "sc-a5ee4233-5"
+    componentId: "sc-2a18995b-5"
 })([
     "position:absolute;top:0;left:0;width:100%;background:var(",
     ");border-radius:var(",
@@ -68,7 +70,7 @@ export var ScrollbarThumb = styled.div.withConfig({
 ], tokens.scrollbarColor, tokens.scrollbarWidth, tokens.scrollbarColor, tokens.scrollbarTrackColor);
 export var StyledEmpty = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledEmpty",
-    componentId: "sc-a5ee4233-6"
+    componentId: "sc-2a18995b-6"
 })([
     "width:100%;height:0%.125rem;"
 ]);

package/styled-components/es/components/TimePickerGrid/utils/index.js

@@ -0,0 +1,133 @@
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+export var getColumnsFromFormat = function(format) {
+    var parts = format.split(':');
+    var columns = [];
+    parts.forEach(function(part) {
+        switch(part){
+            case 'HH':
+                columns.push({
+                    type: 'hours',
+                    values: range(24),
+                    format: 'HH'
+                });
+                break;
+            case 'mm':
+                columns.push({
+                    type: 'minutes',
+                    values: range(60),
+                    format: 'mm'
+                });
+                break;
+            case 'ss':
+                columns.push({
+                    type: 'seconds',
+                    values: range(60),
+                    format: 'ss'
+                });
+                break;
+            default:
+        }
+    });
+    return columns;
+};
+export var parseTimeString = function(timeString, format) {
+    var timeParts = timeString.split(':');
+    var formatParts = format.split(':');
+    var result = {
+        hh: null,
+        mm: null,
+        ss: null
+    };
+    formatParts.forEach(function(part, index) {
+        var value = timeParts[index] ? parseInt(timeParts[index], 10) : null;
+        switch(part){
+            case 'HH':
+                result.hh = value;
+                break;
+            case 'mm':
+                result.mm = value;
+                break;
+            case 'ss':
+                result.ss = value;
+                break;
+            default:
+        }
+    });
+    return result;
+};
+export var buildTimeString = function(timeValues, format) {
+    var formatParts = format.split(':');
+    return formatParts.map(function(part) {
+        switch(part){
+            case 'HH':
+                return timeValues.hh !== null ? timeValues.hh.toString().padStart(2, '0') : '00';
+            case 'mm':
+                return timeValues.mm !== null ? timeValues.mm.toString().padStart(2, '0') : '00';
+            case 'ss':
+                return timeValues.ss !== null ? timeValues.ss.toString().padStart(2, '0') : '00';
+            default:
+                return '00';
+        }
+    }).join(':');
+};
+export var isTimeDisabled = function(timeValues, min, max, format) {
+    if (!min && !max) return false;
+    if (timeValues.hh === null || timeValues.mm === null || timeValues.ss === null) {
+        return false;
+    }
+    var totalSeconds = timeValues.hh * 3600 + timeValues.mm * 60 + timeValues.ss;
+    var minSeconds = 0;
+    var maxSeconds = 23 * 3600 + 59 * 60 + 59;
+    if (min) {
+        if (_instanceof(min, Date)) {
+            minSeconds = min.getHours() * 3600 + min.getMinutes() * 60 + min.getSeconds();
+        } else {
+            var minTime = parseTimeString(min, format !== null && format !== void 0 ? format : 'HH:mm:ss');
+            minSeconds = (minTime.hh || 0) * 3600 + (minTime.mm || 0) * 60 + (minTime.ss || 0);
+        }
+    }
+    if (max) {
+        if (_instanceof(max, Date)) {
+            maxSeconds = max.getHours() * 3600 + max.getMinutes() * 60 + max.getSeconds();
+        } else {
+            var maxTime = parseTimeString(max, format !== null && format !== void 0 ? format : 'HH:mm:ss');
+            maxSeconds = (maxTime.hh || 0) * 3600 + (maxTime.mm || 0) * 60 + (maxTime.ss || 0);
+        }
+    }
+    return totalSeconds < minSeconds || totalSeconds > maxSeconds;
+};
+export var delimiter = ':';
+export var range = function(number) {
+    var padLength = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
+    return Array.from({
+        length: number
+    }, function(_, i) {
+        return i.toString().padStart(padLength, '0');
+    });
+};
+export var animateScrollTo = function(element, targetScrollTop) {
+    var duration = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 300;
+    var startScrollTop = element.scrollTop;
+    var distance = targetScrollTop - startScrollTop;
+    var startTime = null;
+    var animate = function(currentTime) {
+        if (!startTime) startTime = currentTime;
+        var timeElapsed = currentTime - startTime;
+        var progress = Math.min(timeElapsed / duration, 1);
+        var easeOut = function(t) {
+            return 1 - Math.pow(1 - t, 3);
+        };
+        var scrollPosition = startScrollTop + distance * easeOut(progress);
+        element.scrollTop = scrollPosition;
+        if (timeElapsed < duration) {
+            requestAnimationFrame(animate);
+        }
+    };
+    requestAnimationFrame(animate);
+};

package/styled-components/es/components/TimePickerGrid/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export var base = css([
+    ""
+]);

package/styled-components/es/examples/components/Combobox/Combobox.js

@@ -0,0 +1,7 @@
+import { component, mergeConfig } from "../../../engines";
+import { comboboxNewConfig } from "../../..";
+import { config } from "./Combobox.config";
+var mergedConfig = mergeConfig(comboboxNewConfig, config);
+var ComboboxComponent = component(mergedConfig);
+var Combobox = ComboboxComponent;
+export { Combobox };

package/styled-components/es/examples/components/TimePicker/TimePicker.config.js

@@ -30,8 +30,9 @@ export var config = {
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-tertiary);",
-                ":var(--surface-transparent-primary);"
-            ], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.labelColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldPlaceholderColorFocus, tokens.timePickerBackground, tokens.itemBackgroundHover, tokens.itemBackgroundActive, tokens.scrollbarColor, tokens.scrollbarTrackColor)
+                ":var(--surface-transparent-primary);",
+                ":0.4;"
+            ], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.labelColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldPlaceholderColorFocus, tokens.timePickerBackground, tokens.itemBackgroundHover, tokens.itemBackgroundActive, tokens.scrollbarColor, tokens.scrollbarTrackColor, tokens.disabledOpacity)
         },
         size: {
             l: css([

package/styled-components/es/examples/components/TimePickerGrid/TimePickerGrid.config.js

@@ -0,0 +1,93 @@
+import { css } from "styled-components";
+import { timePickerGridTokens as tokens } from "../../../components/TimePickerGrid";
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css([
+                "",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-primary);",
+                ":0.4;"
+            ], tokens.itemBackgroundHover, tokens.itemBackgroundActive, tokens.scrollbarColor, tokens.scrollbarTrackColor, tokens.disabledOpacity)
+        },
+        size: {
+            l: css([
+                "",
+                ":15rem;",
+                ":36.25rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":3.5rem;",
+                ":0.75rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.5rem;"
+            ], tokens.timePickerGridWidth, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            m: css([
+                "",
+                ":15rem;",
+                ":31.25rem;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-size);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":3rem;",
+                ":0.625rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.375rem;"
+            ], tokens.timePickerGridWidth, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            s: css([
+                "",
+                ":15rem;",
+                ":26.25rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":2.5rem;",
+                ":0.5rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], tokens.timePickerGridWidth, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            xs: css([
+                "",
+                ":15rem;",
+                ":21.25rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":2rem;",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;",
+                ":0.4;"
+            ], tokens.timePickerGridWidth, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin, tokens.disabledOpacity)
+        },
+        disabled: {
+            true: css([
+                "",
+                ":0.4;"
+            ], tokens.disabledOpacity)
+        }
+    }
+};

package/styled-components/es/examples/components/TimePickerGrid/TimePickerGrid.js

@@ -0,0 +1,5 @@
+import { component, mergeConfig } from "../../../engines";
+import { timePickerGridConfig } from "../../../components/TimePickerGrid";
+import { config } from "./TimePickerGrid.config";
+var mergedConfig = mergeConfig(timePickerGridConfig, config);
+export var TimePickerGrid = component(mergedConfig);

package/types/components/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,eAAO,MAAM,cAAc,SACjB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;kBAN7F,MAAO,YAAY;mBAKtB,MAAO,YAAY;;;;iNAgvBhB,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAjvBnB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;sBAN7F,MAAO,YAAY;uBAKtB,MAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;CA2wBpB,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgBrD,eAAO,MAAM,cAAc,SACjB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;kBAAvD,MAAO,YAAY;mBAE/C,MAAO,YAAY;;;;iNA2P7B,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBA/PnB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;sBAAvD,MAAO,YAAY;uBAE/C,MAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;CAsRjC,CAAC"}

package/types/components/TimePicker/TimePicker.styles.d.ts

@@ -1,4 +1,22 @@
 export declare const StyledPopover: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("react").HTMLAttributes<HTMLDivElement> & import("../Popover/Popover.types").CustomPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const StyledTimePickerGrid: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & {
+    value?: string;
+    dropdownHeight?: import("react").CSSProperties["height"];
+    dropdownWidth?: "auto" | "fullWidth" | import("react").CSSProperties["width"];
+    format?: string;
+    min?: string | Date;
+    max?: string | Date;
+    columnsQuantity?: 2 | 3;
+    size?: string;
+    view?: string;
+    disabled?: boolean;
+    disabledValues?: {
+        hour?: number[];
+        minute?: number[];
+        second?: number[];
+    };
+    onChange?: (event: import("../TimePickerGrid/TimePickerGrid.types").TimePickerGridChangeEvent) => void;
+} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const StyledInput: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & (({
     size?: string;
     view?: string;

package/types/components/TimePicker/TimePicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,mTAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;kBAkFgD,MAAO,YAAY;mBACvB,MAAO,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;oCAlFkC,CAAC;;;;;;;;;;;;wBA2EuB,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAP0D,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;oCAlFkC,CAAC;;;;;;;;;;;;wBA2EuB,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAP0D,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;oCAlFkC,CAAC;;;;;;;;;;;;wBA2EuB,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAP0D,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;oCAlFkC,CAAC;;;;;;;;;;;;wBA2EuB,YAAY;yBAChB,YAAY;;;oCAMnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;yIAMpB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAwBhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAWnE,CAAC"}
+{"version":3,"file":"TimePicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.styles.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,mTAAoB,CAAC;AAE/C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;YAMA,CAAC;cAA0B,CAAC;cAEpD,CAAC;;;qHAmBT,CAAC;AAGF,eAAO,MAAM,WAAW;;;;;;;;kBAsDkD,MAAO,YAAY;mBAEnC,MAAO,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;oCAxFP,CAAC;;;;;;;;;;;;wBAiFyD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAPmD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;oCAxFP,CAAC;;;;;;;;;;;;wBAiFyD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAPmD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;oCAxFP,CAAC;;;;;;;;;;;;wBAiFyD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAPmD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;oCAxFP,CAAC;;;;;;;;;;;;wBAiFyD,YAAY;yBAE5B,YAAY;;;oCAKhD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;yIAkC7B,CAAC;AAEF,eAAO,MAAM,IAAI,0CAwBhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAWnE,CAAC"}

package/types/components/TimePicker/utils/index.d.ts

@@ -11,10 +11,9 @@ export interface NormalizedSegment {
 export declare const delimiter = ":";
 export declare const range: (number: number, padLength?: number) => string[];
 export declare const normalizeTimeSegment: (type: "HH" | "mm" | "ss", input: string) => NormalizedSegment;
-export declare const processTimeInput: (input: string, format: ("HH:mm" | "HH:mm:ss") | undefined, cursorPosition: number | null) => {
+export declare const processTimeInput: (input: string, format: "HH:mm" | "HH:mm:ss", cursorPosition: number | null) => {
     innerString: string;
     values: TimeValues;
     newCursorPosition: number | null;
 };
-export declare const animateScrollTo: (element: HTMLDivElement, targetScrollTop: number, duration?: number) => void;
 //# sourceMappingURL=index.d.ts.map

package/types/components/TimePicker/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,KAAK,WAAY,MAAM,yBAAkB,MAAM,EAE3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,IAAI,GAAG,IAAI,GAAG,IAAI,SAAS,MAAM,KAAG,iBA8D9E,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAClB,MAAM,WACL,OAAO,GAAG,UAAU,+BACZ,MAAM,GAAG,IAAI,KAC9B;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAC;IAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;CAkC7E,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,cAAc,mBAAmB,MAAM,4BAqB/E,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,KAAK,WAAY,MAAM,yBAAkB,MAAM,EAE3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,IAAI,GAAG,IAAI,GAAG,IAAI,SAAS,MAAM,KAAG,iBA8D9E,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAClB,MAAM,UACL,OAAO,GAAG,UAAU,kBACZ,MAAM,GAAG,IAAI,KAC9B;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAC;IAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;CAkC7E,CAAC"}

package/types/components/TimePickerGrid/TimePickerGrid.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { RootProps } from '../../engines';
+import { TimePickerGridChangeEvent, TimePickerGridProps } from './TimePickerGrid.types';
+export declare const timePickerGridRoot: (Root: RootProps<HTMLDivElement, Omit<TimePickerGridProps, "defaultValue" | "onChange">>) => React.ForwardRefExoticComponent<{
+    value?: string;
+    dropdownHeight?: React.CSSProperties["height"];
+    dropdownWidth?: "auto" | "fullWidth" | React.CSSProperties["width"];
+    format?: string;
+    min?: string | Date;
+    max?: string | Date;
+    columnsQuantity?: 2 | 3;
+    size?: string;
+    view?: string;
+    disabled?: boolean;
+    disabledValues?: {
+        hour?: number[];
+        minute?: number[];
+        second?: number[];
+    };
+    onChange?: (event: TimePickerGridChangeEvent) => void;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export declare const timePickerGridConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, Omit<TimePickerGridProps, "defaultValue" | "onChange">>) => React.ForwardRefExoticComponent<{
+        value?: string;
+        dropdownHeight?: React.CSSProperties["height"];
+        dropdownWidth?: "auto" | "fullWidth" | React.CSSProperties["width"];
+        format?: string;
+        min?: string | Date;
+        max?: string | Date;
+        columnsQuantity?: 2 | 3;
+        size?: string;
+        view?: string;
+        disabled?: boolean;
+        disabledValues?: {
+            hour?: number[];
+            minute?: number[];
+            second?: number[];
+        };
+        onChange?: (event: TimePickerGridChangeEvent) => void;
+    } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+    };
+    defaults: {
+        size: string;
+        view: string;
+    };
+};
+//# sourceMappingURL=TimePickerGrid.d.ts.map

package/types/components/TimePickerGrid/TimePickerGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/TimePickerGrid/TimePickerGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuF,MAAM,OAAO,CAAC;AAC5G,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAsBxF,eAAO,MAAM,kBAAkB,SACrB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;YAE5D,CAAC;cACxB,CAAF;cAEU,CAAP;;;iGAovBJ,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBA3vBvB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;gBAE5D,CAAC;kBACxB,CAAF;kBAEU,CAAP;;;;;;;;;;;;;;;;;;;;;CA2wBR,CAAC"}

package/types/components/TimePickerGrid/TimePickerGrid.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledTimePicker: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    width?: string | number;
+}>;
+//# sourceMappingURL=TimePickerGrid.styles.d.ts.map