@gravity-ui/date-components 2.11.0-beta.0 → 2.12.0

package/dist/esm/components/RangeDateField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RangeDateField/index.ts"],"names":[],"mappings":"AAAA,oCAAiC;AAEjC,kDAA+C","sourcesContent":["export * from './RangeDateField';\n\nexport * from './hooks/useRangeDateFieldState';\n"]}

package/dist/esm/components/RangeDateField/utils/createPlaceholderRangeValue.d.ts

@@ -1,4 +1,4 @@
-import type { PlaceholderValueOptions } from '../../utils/dates';
+import type { PlaceholderValueOptions } from "../../utils/dates.js";
 export declare function createPlaceholderRangeValue({ placeholderValue, timeZone }: PlaceholderValueOptions): {
     start: import("@gravity-ui/date-utils").DateTime;
     end: import("@gravity-ui/date-utils").DateTime;

package/dist/esm/components/RangeDateField/utils/createPlaceholderRangeValue.js

@@ -1,5 +1,6 @@
-import { createPlaceholderValue } from '../../utils/dates';
+import { createPlaceholderValue } from "../../utils/dates.js";
 export function createPlaceholderRangeValue({ placeholderValue, timeZone }) {
     const date = createPlaceholderValue({ placeholderValue, timeZone });
-    return { start: date, end: date };
+    return { start: date.startOf('day'), end: date.endOf('day') };
 }
+//# sourceMappingURL=createPlaceholderRangeValue.js.map

package/dist/esm/components/RangeDateField/utils/createPlaceholderRangeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPlaceholderRangeValue.js","sourceRoot":"../../../../../src","sources":["components/RangeDateField/utils/createPlaceholderRangeValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,6BAA0B;AAGzD,MAAM,UAAU,2BAA2B,CAAC,EAAC,gBAAgB,EAAE,QAAQ,EAA0B;IAC7F,MAAM,IAAI,GAAG,sBAAsB,CAAC,EAAC,gBAAgB,EAAE,QAAQ,EAAC,CAAC,CAAC;IAClE,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAC,CAAC;AAChE,CAAC","sourcesContent":["import {createPlaceholderValue} from '../../utils/dates';\nimport type {PlaceholderValueOptions} from '../../utils/dates';\n\nexport function createPlaceholderRangeValue({placeholderValue, timeZone}: PlaceholderValueOptions) {\n    const date = createPlaceholderValue({placeholderValue, timeZone});\n    return {start: date.startOf('day'), end: date.endOf('day')};\n}\n"]}

package/dist/esm/components/RangeDateField/utils/getRangeEditableSections.d.ts

@@ -1,5 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DateFieldSectionWithoutPosition } from '../../DateField/types';
-import type { EDITABLE_SEGMENTS } from '../../DateField/utils';
-import type { RangeValue } from '../../types';
-export declare function getRangeEditableSections(sections: DateFieldSectionWithoutPosition[], value: RangeValue<DateTime>, validSegments: RangeValue<typeof EDITABLE_SEGMENTS>, delimiter: string): import("../../DateField/types").DateFieldSection[];
+import type { DateFieldSectionWithoutPosition } from "../../DateField/types.js";
+import type { EDITABLE_SEGMENTS } from "../../DateField/utils.js";
+import type { RangeValue } from "../../types/index.js";
+export declare function getRangeEditableSections(sections: DateFieldSectionWithoutPosition[], value: RangeValue<DateTime>, validSegments: RangeValue<typeof EDITABLE_SEGMENTS>, delimiter: string): import("../../DateField/types.js").DateFieldSection[];

package/dist/esm/components/RangeDateField/utils/getRangeEditableSections.js

@@ -1,4 +1,4 @@
-import { getEditableSections, isEditableSection, toEditableSection } from '../../DateField/utils';
+import { getEditableSections, isEditableSection, toEditableSection } from "../../DateField/utils.js";
 export function getRangeEditableSections(sections, value, validSegments, delimiter) {
     const start = getEditableSections(sections, value.start, validSegments.start);
     const end = getEditableSections(sections, value.end, validSegments.end);
@@ -36,3 +36,4 @@ export function getRangeEditableSections(sections, value, validSegments, delimit
     }
     return [...start, delimiterSection, ...end];
 }
+//# sourceMappingURL=getRangeEditableSections.js.map

package/dist/esm/components/RangeDateField/utils/getRangeEditableSections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRangeEditableSections.js","sourceRoot":"../../../../../src","sources":["components/RangeDateField/utils/getRangeEditableSections.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAC,iCAA8B;AAIhG,MAAM,UAAU,wBAAwB,CACpC,QAA2C,EAC3C,KAA2B,EAC3B,aAAmD,EACnD,SAAiB;IAEjB,MAAM,KAAK,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,GAAG,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAExE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACrC,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;IACxB,MAAM,uBAAuB,GAAG,IAAI,CAAC,mBAAmB,CAAC;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAEvC,MAAM,gBAAgB,GAAG,iBAAiB,CACtC;QACI,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,QAAQ;QACrB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,eAAe,EAAE,KAAK;KACzB,EACD,KAAK,CAAC,KAAK,EACX,aAAa,CAAC,KAAK,EACnB,QAAQ,EACR,uBAAuB,CAC1B,CAAC;IAEF,QAAQ,IAAI,gBAAgB,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAElD,IAAI,mBAAmB,CAAC;IACxB,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAC9C,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;QAE3B,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;QAC1B,OAAO,CAAC,GAAG,IAAI,QAAQ,CAAC;QAExB,IAAI,OAAO,CAAC,uBAAuB,KAAK,CAAC,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;YAC7E,OAAO,CAAC,uBAAuB,GAAG,uBAAuB,CAAC;QAC9D,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,uBAAuB,IAAI,aAAa,CAAC;QACrD,CAAC;QAED,OAAO,CAAC,mBAAmB,IAAI,aAAa,CAAC;QAE7C,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;YAClE,mBAAmB,GAAG,KAAK,GAAG,aAAa,CAAC;QAChD,CAAC;IACL,CAAC;IAED,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QACpC,gBAAgB,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;QAE3D,KAAK,CAAC,uBAAuB,CAAC,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;IAC7E,CAAC;IAED,OAAO,CAAC,GAAG,KAAK,EAAE,gBAAgB,EAAE,GAAG,GAAG,CAAC,CAAC;AAChD,CAAC","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {DateFieldSectionWithoutPosition} from '../../DateField/types';\nimport {getEditableSections, isEditableSection, toEditableSection} from '../../DateField/utils';\nimport type {EDITABLE_SEGMENTS} from '../../DateField/utils';\nimport type {RangeValue} from '../../types';\n\nexport function getRangeEditableSections(\n    sections: DateFieldSectionWithoutPosition[],\n    value: RangeValue<DateTime>,\n    validSegments: RangeValue<typeof EDITABLE_SEGMENTS>,\n    delimiter: string,\n) {\n    const start = getEditableSections(sections, value.start, validSegments.start);\n    const end = getEditableSections(sections, value.end, validSegments.end);\n\n    const last = start[start.length - 1];\n    let position = last.end;\n    const previousEditableSection = last.nextEditableSection;\n    const sectionsCount = start.length + 1;\n\n    const delimiterSection = toEditableSection(\n        {\n            type: 'literal',\n            contentType: 'letter',\n            format: delimiter,\n            placeholder: delimiter,\n            hasLeadingZeros: false,\n        },\n        value.start,\n        validSegments.start,\n        position,\n        previousEditableSection,\n    );\n\n    position += delimiterSection.textValue.length - 1;\n\n    let nextEditableSection;\n    for (let index = 0; index < end.length; index++) {\n        const section = end[index];\n\n        section.start += position;\n        section.end += position;\n\n        if (section.previousEditableSection === 0 && nextEditableSection === undefined) {\n            section.previousEditableSection = previousEditableSection;\n        } else {\n            section.previousEditableSection += sectionsCount;\n        }\n\n        section.nextEditableSection += sectionsCount;\n\n        if (isEditableSection(section) && nextEditableSection === undefined) {\n            nextEditableSection = index + sectionsCount;\n        }\n    }\n\n    if (nextEditableSection !== undefined) {\n        delimiterSection.nextEditableSection = nextEditableSection;\n\n        start[previousEditableSection].nextEditableSection = nextEditableSection;\n    }\n\n    return [...start, delimiterSection, ...end];\n}\n"]}

package/dist/esm/components/RangeDateField/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from './getRangeEditableSections';
-export * from './isValidRange';
-export * from './createPlaceholderRangeValue';
+export * from "./getRangeEditableSections.js";
+export * from "./isValidRange.js";
+export * from "./createPlaceholderRangeValue.js";

package/dist/esm/components/RangeDateField/utils/index.js

@@ -1,3 +1,4 @@
-export * from './getRangeEditableSections';
-export * from './isValidRange';
-export * from './createPlaceholderRangeValue';
+export * from "./getRangeEditableSections.js";
+export * from "./isValidRange.js";
+export * from "./createPlaceholderRangeValue.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/RangeDateField/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/RangeDateField/utils/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,kCAA+B;AAC/B,iDAA8C","sourcesContent":["export * from './getRangeEditableSections';\nexport * from './isValidRange';\nexport * from './createPlaceholderRangeValue';\n"]}

package/dist/esm/components/RangeDateField/utils/isValidRange.d.ts

@@ -1,3 +1,3 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { RangeValue } from '../../types';
+import type { RangeValue } from "../../types/index.js";
 export declare function isValidRange({ start, end }: RangeValue<DateTime>): boolean;

package/dist/esm/components/RangeDateField/utils/isValidRange.js

@@ -1,4 +1,4 @@
-import { isValid } from '@gravity-ui/date-utils';
 export function isValidRange({ start, end }) {
-    return isValid(start) && isValid(end) && (start.isSame(end) || start.isBefore(end));
+    return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));
 }
+//# sourceMappingURL=isValidRange.js.map

package/dist/esm/components/RangeDateField/utils/isValidRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isValidRange.js","sourceRoot":"../../../../../src","sources":["components/RangeDateField/utils/isValidRange.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,YAAY,CAAC,EAAC,KAAK,EAAE,GAAG,EAAuB;IAC3D,OAAO,KAAK,CAAC,OAAO,EAAE,IAAI,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {RangeValue} from '../../types';\n\nexport function isValidRange({start, end}: RangeValue<DateTime>): boolean {\n    return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));\n}\n"]}

package/dist/esm/components/RangeDatePicker/RangeDatePicker.css

@@ -19,4 +19,5 @@
 }
 .g-date-range-date-picker__time-field-wrapper {
   padding: 10px;
-}
+}
+/*# sourceMappingURL=RangeDatePicker.css.map */

package/dist/esm/components/RangeDatePicker/RangeDatePicker.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RangeDatePicker/data:;charset=utf-8,@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-picker';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20display:%20inline-block;%0A%0A%20%20%20%20outline:%20none;%0A%0A%20%20%20%20&__field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-anchor%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20z-index:%20-1;%0A%20%20%20%20%20%20%20%20inset:%200;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-content%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__time-field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}range-date-picker';\n\n#{$block} {\n    position: relative;\n\n    display: inline-block;\n\n    outline: none;\n\n    &__field {\n        width: 100%;\n    }\n\n    &__popup-anchor {\n        position: absolute;\n        z-index: -1;\n        inset: 0;\n    }\n\n    &__popup-content {\n        outline: none;\n    }\n\n    &__time-field {\n        width: 100%;\n\n        &-wrapper {\n            padding: 10px;\n        }\n    }\n}\n"],"file":"RangeDatePicker.css"}

package/dist/esm/components/RangeDatePicker/RangeDatePicker.d.ts

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DatePickerProps } from '../DatePicker';
-import type { RangeValue } from '../types';
-import './RangeDatePicker.css';
+import type { DatePickerProps } from "../DatePicker/index.js";
+import type { RangeValue } from "../types/index.js";
+import "./RangeDatePicker.css";
 export type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;
 export declare function RangeDatePicker({ className, ...props }: RangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDatePicker/RangeDatePicker.js

@@ -4,22 +4,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput } from '@gravity-ui/uikit';
-import { block } from '../../utils/cn';
-import { RangeCalendar } from '../Calendar';
-import { useDatePickerProps } from '../DatePicker';
-import { StubButton } from '../DatePicker/StubButton';
-import { HiddenInput } from '../HiddenInput/HiddenInput';
-import { RangeDateField } from '../RangeDateField';
-import { useRangeDatePickerState } from './hooks/useRangeDatePickerState';
-import './RangeDatePicker.css';
+import { block } from "../../utils/cn.js";
+import { RangeCalendar } from "../Calendar/index.js";
+import { useDatePickerProps } from "../DatePicker/index.js";
+import { StubButton } from "../DatePicker/StubButton.js";
+import { HiddenInput } from "../HiddenInput/HiddenInput.js";
+import { RangeDateField } from "../RangeDateField/index.js";
+import { useRangeDatePickerState } from "./hooks/useRangeDatePickerState.js";
+import "./RangeDatePicker.css";
 const b = block('range-date-picker');
 export function RangeDatePicker(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     const anchorRef = React.useRef(null);
     const state = useRangeDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
-    const isOnlyTime = state.hasTime && !state.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.formatInfo.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.dateFieldState.setDate(v);
                 }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }
+//# sourceMappingURL=RangeDatePicker.js.map

package/dist/esm/components/RangeDatePicker/RangeDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {RangeCalendar} from '../Calendar';\nimport {useDatePickerProps} from '../DatePicker';\nimport type {DatePickerProps} from '../DatePicker';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {RangeDateField} from '../RangeDateField';\nimport type {RangeValue} from '../types';\n\nimport {useRangeDatePickerState} from './hooks/useRangeDatePickerState';\n\nimport './RangeDatePicker.scss';\n\nconst b = block('range-date-picker');\n\nexport type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;\n\nexport function RangeDatePicker({className, ...props}: RangeDatePickerProps) {\n    const anchorRef = React.useRef<HTMLDivElement>(null);\n\n    const state = useRangeDatePickerState(props);\n\n    const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n        useDatePickerProps(state, props);\n\n    const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n    return (\n        <div className={b(null, className)} {...groupProps}>\n            {!isOnlyTime && (\n                <div ref={anchorRef} className={b('popup-anchor')}>\n                    <Popup anchorRef={anchorRef} {...popupProps}>\n                        <div className={b('popup-content')}>\n                            {typeof props.children === 'function' ? (\n                                props.children({...calendarProps, value: state.value})\n                            ) : (\n                                <RangeCalendar {...calendarProps} value={state.value} />\n                            )}\n                            {state.formatInfo.hasTime && (\n                                <div className={b('time-field-wrapper')}>\n                                    <RangeDateField {...timeInputProps} />\n                                </div>\n                            )}\n                        </div>\n                    </Popup>\n                </div>\n            )}\n            <TextInput\n                {...fieldProps}\n                className={b('field')}\n                endContent={\n                    <React.Fragment>\n                        {!isOnlyTime && (\n                            <Button {...calendarButtonProps}>\n                                <Icon data={CalendarIcon} />\n                            </Button>\n                        )}\n                        {isOnlyTime && (\n                            <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n                        )}\n                    </React.Fragment>\n                }\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                onReset={(v) => {\n                    state.dateFieldState.setDate(v);\n                }}\n                value={state.value}\n                toStringValue={(v) => (v ? v.start.toISOString() : '')}\n                disabled={state.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => (v ? v.end.toISOString() : '')}\n                disabled={state.disabled}\n            />\n        </div>\n    );\n}\n"]}

package/dist/esm/components/RangeDatePicker/hooks/useRangeDatePickerState.d.ts

@@ -1,7 +1,10 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DatePickerState } from '../../DatePicker';
-import type { RangeDateFieldStateOptions } from '../../RangeDateField';
-import type { RangeValue } from '../../types';
+import type { DatePickerState } from "../../DatePicker/index.js";
+import type { RangeDateFieldStateOptions } from "../../RangeDateField/index.js";
+import type { RangeValue } from "../../types/index.js";
 export type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;
 export type RangeDatePickerStateOptions = RangeDateFieldStateOptions;
-export declare const useRangeDatePickerState: (props: RangeDateFieldStateOptions) => DatePickerState<RangeValue<DateTime>>;
+export declare const useRangeDatePickerState: (props: RangeDateFieldStateOptions) => DatePickerState<{
+    start: DateTime;
+    end: DateTime;
+}>;

package/dist/esm/components/RangeDatePicker/hooks/useRangeDatePickerState.js

@@ -1,17 +1,19 @@
-import { datePickerStateFactory } from '../../DatePicker/hooks/datePickerStateFactory';
-import { getDateTimeValue } from '../../DatePicker/utils';
-import { useRangeDateFieldState } from '../../RangeDateField';
-import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { adjustDateToFormat } from "../../DateField/utils.js";
+import { datePickerStateFactory } from "../../DatePicker/hooks/datePickerStateFactory.js";
+import { getDateTimeValue } from "../../DatePicker/utils/index.js";
+import { useRangeDateFieldState } from "../../RangeDateField/index.js";
+import { createPlaceholderRangeValue } from "../../RangeDateField/utils/index.js";
+import { mergeDateTime } from "../../utils/dates.js";
 export const useRangeDatePickerState = datePickerStateFactory({
     getPlaceholderTime,
     mergeDateTime: mergeRangeDateTime,
     setTimezone,
     getDateTime: getDateTimeValue,
     useDateFieldState: useRangeDateFieldState,
+    adjustDateToFormat: adjustRangeToFormat,
 });
 function getPlaceholderTime(placeholderValue, timeZone) {
-    const date = createPlaceholderValue({ placeholderValue, timeZone });
-    return { start: date, end: date };
+    return createPlaceholderRangeValue({ placeholderValue, timeZone });
 }
 function mergeRangeDateTime(date, time) {
     const start = mergeDateTime(date.start, time.start);
@@ -23,3 +25,9 @@ function setTimezone(date, timeZone) {
     const end = date.end.timeZone(timeZone);
     return { start, end };
 }
+function adjustRangeToFormat(date, sectionsInfo) {
+    const start = adjustDateToFormat(date.start, sectionsInfo, 'startOf');
+    const end = adjustDateToFormat(date.end, sectionsInfo, 'endOf');
+    return { start, end };
+}
+//# sourceMappingURL=useRangeDatePickerState.js.map

package/dist/esm/components/RangeDatePicker/hooks/useRangeDatePickerState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RangeDatePicker/hooks/useRangeDatePickerState.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,kBAAkB,EAAC,iCAA8B;AAEzD,OAAO,EAAC,sBAAsB,EAAC,yDAAsD;AACrF,OAAO,EAAC,gBAAgB,EAAC,wCAA+B;AACxD,OAAO,EAAC,sBAAsB,EAAC,sCAA6B;AAE5D,OAAO,EAAC,2BAA2B,EAAC,4CAAmC;AAEvE,OAAO,EAAC,aAAa,EAAC,6BAA0B;AAMhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,sBAAsB,CAAC;IAC1D,kBAAkB;IAClB,aAAa,EAAE,kBAAkB;IACjC,WAAW;IACX,WAAW,EAAE,gBAAgB;IAC7B,iBAAiB,EAAE,sBAAsB;IACzC,kBAAkB,EAAE,mBAAmB;CAC1C,CAAC,CAAC;AAEH,SAAS,kBAAkB,CACvB,gBAAsC,EACtC,QAAiB;IAEjB,OAAO,2BAA2B,CAAC,EAAC,gBAAgB,EAAE,QAAQ,EAAC,CAAC,CAAC;AACrE,CAAC;AAED,SAAS,kBAAkB,CACvB,IAA0B,EAC1B,IAA0B;IAE1B,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,WAAW,CAAC,IAA0B,EAAE,QAAgB;IAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACxC,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,mBAAmB,CAAC,IAA0B,EAAE,YAAwB;IAC7E,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAChE,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {FormatInfo} from '../../DateField/types';\nimport {adjustDateToFormat} from '../../DateField/utils';\nimport type {DatePickerState} from '../../DatePicker';\nimport {datePickerStateFactory} from '../../DatePicker/hooks/datePickerStateFactory';\nimport {getDateTimeValue} from '../../DatePicker/utils';\nimport {useRangeDateFieldState} from '../../RangeDateField';\nimport type {RangeDateFieldStateOptions} from '../../RangeDateField';\nimport {createPlaceholderRangeValue} from '../../RangeDateField/utils';\nimport type {RangeValue} from '../../types';\nimport {mergeDateTime} from '../../utils/dates';\n\nexport type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;\n\nexport type RangeDatePickerStateOptions = RangeDateFieldStateOptions;\n\nexport const useRangeDatePickerState = datePickerStateFactory({\n    getPlaceholderTime,\n    mergeDateTime: mergeRangeDateTime,\n    setTimezone,\n    getDateTime: getDateTimeValue,\n    useDateFieldState: useRangeDateFieldState,\n    adjustDateToFormat: adjustRangeToFormat,\n});\n\nfunction getPlaceholderTime(\n    placeholderValue: DateTime | undefined,\n    timeZone?: string,\n): RangeValue<DateTime> {\n    return createPlaceholderRangeValue({placeholderValue, timeZone});\n}\n\nfunction mergeRangeDateTime(\n    date: RangeValue<DateTime>,\n    time: RangeValue<DateTime>,\n): RangeValue<DateTime> {\n    const start = mergeDateTime(date.start, time.start);\n    const end = mergeDateTime(date.end, time.end);\n    return {start, end};\n}\n\nfunction setTimezone(date: RangeValue<DateTime>, timeZone: string): RangeValue<DateTime> {\n    const start = date.start.timeZone(timeZone);\n    const end = date.end.timeZone(timeZone);\n    return {start, end};\n}\n\nfunction adjustRangeToFormat(date: RangeValue<DateTime>, sectionsInfo: FormatInfo) {\n    const start = adjustDateToFormat(date.start, sectionsInfo, 'startOf');\n    const end = adjustDateToFormat(date.end, sectionsInfo, 'endOf');\n    return {start, end};\n}\n"]}

package/dist/esm/components/RangeDatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './RangeDatePicker';
-export * from './hooks/useRangeDatePickerState';
+export * from "./RangeDatePicker.js";
+export * from "./hooks/useRangeDatePickerState.js";

package/dist/esm/components/RangeDatePicker/index.js

@@ -1,2 +1,3 @@
-export * from './RangeDatePicker';
-export * from './hooks/useRangeDatePickerState';
+export * from "./RangeDatePicker.js";
+export * from "./hooks/useRangeDatePickerState.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/RangeDatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/index.ts"],"names":[],"mappings":"AAAA,qCAAkC;AAElC,mDAAgD","sourcesContent":["export * from './RangeDatePicker';\n\nexport * from './hooks/useRangeDatePickerState';\n"]}

package/dist/esm/components/RangeDateSelection/RangeDateSelection.css

@@ -25,4 +25,5 @@
   grid-area: buttons-end;
   padding-inline-start: var(--g-spacing-half);
   border-inline-start: 1px solid var(--g-color-line-generic);
-}
+}
+/*# sourceMappingURL=RangeDateSelection.css.map */

package/dist/esm/components/RangeDateSelection/RangeDateSelection.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RangeDateSelection/data:;charset=utf-8,@use%20'../variables';%0A@use%20'../mixins';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-selection';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20display:%20grid;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20grid-template-areas:%20'buttons-start%20ruler%20buttons-end';%0A%20%20%20%20grid-template-columns:%20auto%201fr%20auto;%0A%0A%20%20%20%20border-block:%201px%20solid%20var(--g-color-line-generic);%0A%0A%20%20%20%20&__ruler%20%7B%0A%20%20%20%20%20%20%20%20grid-area:%20ruler;%0A%0A%20%20%20%20%20%20%20%20&_dragging%20%23%7B$block%7D__selection%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__buttons%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20%20%20height:%2022px;%0A%0A%20%20%20%20%20%20%20%20&_position_start%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-area:%20buttons-start;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-inline-end:%20var(--g-spacing-half);%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20border-inline-end:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_position_end%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-area:%20buttons-end;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-inline-start:%20var(--g-spacing-half);%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20border-inline-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EAEA;;AAEA;EACI;EAEA;EAEA;;AAGJ;EACI;EAEA;EAEA","sourcesContent":["@use '../variables';\n@use '../mixins';\n\n$block: '.#{variables.$ns}range-date-selection';\n\n#{$block} {\n    display: grid;\n    align-items: center;\n    grid-template-areas: 'buttons-start ruler buttons-end';\n    grid-template-columns: auto 1fr auto;\n\n    border-block: 1px solid var(--g-color-line-generic);\n\n    &__ruler {\n        grid-area: ruler;\n\n        &_dragging #{$block}__selection {\n            pointer-events: none;\n        }\n    }\n\n    &__buttons {\n        display: flex;\n        align-items: center;\n\n        height: 22px;\n\n        &_position_start {\n            grid-area: buttons-start;\n\n            padding-inline-end: var(--g-spacing-half);\n\n            border-inline-end: 1px solid var(--g-color-line-generic);\n        }\n\n        &_position_end {\n            grid-area: buttons-end;\n\n            padding-inline-start: var(--g-spacing-half);\n\n            border-inline-start: 1px solid var(--g-color-line-generic);\n        }\n    }\n}\n"],"file":"RangeDateSelection.css"}

package/dist/esm/components/RangeDateSelection/RangeDateSelection.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { AccessibilityProps, DomProps, StyleProps } from '../types';
-import type { ViewportDimensions, ViewportInterval } from './components/Ruler/Ruler';
-import type { RangeDateSelectionOptions } from './hooks/useRangeDateSelectionState';
-import './RangeDateSelection.css';
+import type { AccessibilityProps, DomProps, StyleProps } from "../types/index.js";
+import type { ViewportDimensions, ViewportInterval } from "./components/Ruler/Ruler.js";
+import type { RangeDateSelectionOptions } from "./hooks/useRangeDateSelectionState.js";
+import "./RangeDateSelection.css";
 export interface RangeDateSelectionProps extends RangeDateSelectionOptions, DomProps, StyleProps, AccessibilityProps {
     /** Formats time ticks */
     formatTime?: (time: DateTime) => string;

package/dist/esm/components/RangeDateSelection/RangeDateSelection.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Minus, Plus } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
-import { block } from '../../utils/cn';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { DateTimeRuler } from './components/Ruler/Ruler';
-import { SelectionControl } from './components/SelectionControl/SelectionControl';
-import { useRangeDateSelectionState } from './hooks/useRangeDateSelectionState';
-import { i18n } from './i18n';
-import './RangeDateSelection.css';
+import { block } from "../../utils/cn.js";
+import { filterDOMProps } from "../utils/filterDOMProps.js";
+import { DateTimeRuler } from "./components/Ruler/Ruler.js";
+import { SelectionControl } from "./components/SelectionControl/SelectionControl.js";
+import { useRangeDateSelectionState } from "./hooks/useRangeDateSelectionState.js";
+import { i18n } from "./i18n/index.js";
+import "./RangeDateSelection.css";
 const b = block('range-date-selection');
 export function RangeDateSelection(props) {
     var _a, _b;
@@ -41,3 +41,4 @@ export function RangeDateSelection(props) {
                             state.endDragging();
                         }, extraProps: { 'aria-label': i18n('Increase range') }, children: _jsx(Icon, { data: Plus }) })] })) : null] })));
 }
+//# sourceMappingURL=RangeDateSelection.js.map

package/dist/esm/components/RangeDateSelection/RangeDateSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n    extends RangeDateSelectionOptions,\n        DomProps,\n        StyleProps,\n        AccessibilityProps {\n    /** Formats time ticks */\n    formatTime?: (time: DateTime) => string;\n    /** Displays now line */\n    displayNow?: boolean;\n    /** Enables dragging ruler */\n    draggableRuler?: boolean;\n    /** Displays buttons to scale selection */\n    hasScaleButtons?: boolean;\n    /** Position of scale buttons */\n    scaleButtonsPosition?: 'start' | 'end';\n    /** Renders additional svg content in the ruler */\n    renderAdditionalRulerContent?: (props: {\n        interval: ViewportInterval;\n        dimensions: ViewportDimensions;\n    }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n    const state = useRangeDateSelectionState(props);\n\n    const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n    const handleRulerMoveStart = () => {\n        state.setDraggingValue(state.value);\n        setDraggingRuler(true);\n    };\n    const handleRulerMove = (d: number) => {\n        const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n        const delta = -Math.floor((d * intervalWidth) / 100);\n        state.move(delta);\n    };\n    const handleRulerMoveEnd = () => {\n        setDraggingRuler(false);\n        state.endDragging();\n    };\n\n    let id = React.useId();\n    id = props.id ?? id;\n\n    return (\n        <div\n            {...filterDOMProps(props, {labelable: true})}\n            id={id}\n            className={b(null, props.className)}\n            style={props.style}\n            dir=\"ltr\" // TODO: RTL support\n        >\n            <DateTimeRuler\n                className={b('ruler', {dragging: isDraggingRuler})}\n                {...state.viewportInterval}\n                onMoveStart={handleRulerMoveStart}\n                onMove={props.draggableRuler ? handleRulerMove : undefined}\n                onMoveEnd={handleRulerMoveEnd}\n                dragDisabled={state.isDragging}\n                displayNow={props.displayNow}\n                minValue={props.minValue}\n                maxValue={props.maxValue}\n                formatTime={props.formatTime}\n                timeZone={state.timeZone}\n                renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n            >\n                <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n            </DateTimeRuler>\n            {props.hasScaleButtons ? (\n                <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(0.5);\n                            state.endDragging();\n                        }}\n                        extraProps={{'aria-label': i18n('Decrease range')}}\n                    >\n                        <Icon data={Minus} />\n                    </Button>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(1.5);\n                            state.endDragging();\n                        }}\n                        extraProps={{'aria-label': i18n('Increase range')}}\n                    >\n                        <Icon data={Plus} />\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.css

@@ -1,4 +1,5 @@
 .g-date-timeline-now-line {
   stroke: var(--g-date-thin-timeline-now-color);
   stroke-width: 2px;
-}
+}
+/*# sourceMappingURL=NowLine.css.map */

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RangeDateSelection/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Dtimeline-now-line';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20stroke:%20var(--g-date-thin-timeline-now-color);%0A%20%20%20%20stroke-width:%202px;%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EACA","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}timeline-now-line';\n\n#{$block} {\n    stroke: var(--g-date-thin-timeline-now-color);\n    stroke-width: 2px;\n}\n"],"file":"NowLine.css"}

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.d.ts

@@ -1,2 +1,2 @@
-import './NowLine.css';
+import "./NowLine.css";
 export declare function NowLine(): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import {dateTime} from '@gravity-ui/date-utils';
 import React from 'react';
-import { block } from '../../../../utils/cn';
-import { SECOND } from '../../../utils/constants';
-import { useViewportDimensions, useViewportInterval } from '../Ruler/Ruler';
+import { block } from "../../../../utils/cn.js";
+import { SECOND } from "../../../utils/constants.js";
+import { useViewportDimensions, useViewportInterval } from "../Ruler/Ruler.js";
 const MIN_UPDATE_DISTANCE = 4; // in px
-import './NowLine.css';
+import "./NowLine.css";
 const b = block('timeline-now-line');
 export function NowLine() {
     const viewport = useViewportDimensions();
@@ -35,3 +34,4 @@ export function NowLine() {
         viewport.width;
     return _jsx("path", { d: `M${nowX},0l0,${viewport.height}`, className: b() });
 }
+//# sourceMappingURL=NowLine.js.map

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NowLine.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/NowLine/NowLine.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,MAAM,EAAC,oCAAiC;AAChD,OAAO,EAAC,qBAAqB,EAAE,mBAAmB,EAAC,0BAAuB;AAE1E,MAAM,mBAAmB,GAAG,CAAC,CAAC,CAAC,QAAQ;AAEvC,uBAAwB;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,OAAO;IACnB,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IACzC,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAC,GAAG,mBAAmB,EAAE,CAAC;IAC/D,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACrB,MAAM,EACN,CAAC,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,EAChE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,CAChC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,KAAK,GAAkB,IAAI,CAAC;QAChC,IAAI,aAAa,EAAE,CAAC;YAChB,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;gBAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC;YACjB,CAAC,EAAE,QAAQ,CAAC,CAAC;QACjB,CAAC;QACD,OAAO,GAAG,EAAE;YACR,IAAI,KAAK,EAAE,CAAC;gBACR,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC5B,KAAK,GAAG,IAAI,CAAC;YACjB,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,IAAI,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,IAAI,OAAO,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;QAC/D,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,IAAI,GACN,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7E,QAAQ,CAAC,KAAK,CAAC;IAEnB,OAAO,eAAM,CAAC,EAAE,IAAI,IAAI,QAAQ,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,GAAI,CAAC;AAC1E,CAAC","sourcesContent":["import React from 'react';\n\nimport {block} from '../../../../utils/cn';\nimport {SECOND} from '../../../utils/constants';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nconst MIN_UPDATE_DISTANCE = 4; // in px\n\nimport './NowLine.scss';\n\nconst b = block('timeline-now-line');\n\nexport function NowLine() {\n    const viewport = useViewportDimensions();\n    const {start: startDate, end: endDate} = useViewportInterval();\n    const [, rerender] = React.useState({});\n\n    const nowTime = Date.now();\n    const needUpdateNow = endDate.valueOf() > nowTime;\n    const interval = Math.max(\n        SECOND,\n        (MIN_UPDATE_DISTANCE * endDate.diff(startDate)) / viewport.width,\n        startDate.valueOf() - nowTime,\n    );\n\n    React.useEffect(() => {\n        let timer: number | null = null;\n        if (needUpdateNow) {\n            timer = window.setInterval(() => {\n                rerender({});\n            }, interval);\n        }\n        return () => {\n            if (timer) {\n                window.clearInterval(timer);\n                timer = null;\n            }\n        };\n    }, [needUpdateNow, interval]);\n\n    if (nowTime < startDate.valueOf() || endDate.valueOf() < nowTime) {\n        return null;\n    }\n\n    const nowX =\n        ((nowTime - startDate.valueOf()) / (endDate.valueOf() - startDate.valueOf())) *\n        viewport.width;\n\n    return <path d={`M${nowX},0l0,${viewport.height}`} className={b()} />;\n}\n"]}

package/dist/esm/components/RangeDateSelection/components/Ruler/Ruler.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from '../../../../hooks/useMove';
-import type { RangeValue } from '../../../types';
+import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from "../../../../hooks/useMove.js";
+import type { RangeValue } from "../../../types/index.js";
 interface RulerProps {
     className?: string;
     children?: React.ReactNode;

package/dist/esm/components/RangeDateSelection/components/Ruler/Ruler.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { useResizeObserver } from '../../../../hooks/useResizeObserver';
-import { block } from '../../../../utils/cn';
-import { NowLine } from '../NowLine/NowLine';
-import { RulerViewport } from '../RulerViewport/RulerViewport';
-import { MiddleTicks } from '../Ticks/MiddleTicks';
-import { SlitTicks } from '../Ticks/SlitTicks';
-import { UnavailableTicks } from '../Ticks/UnavialableTicks';
-import { makeUnavailableTicksGeometry } from '../Ticks/utils';
+import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { block } from "../../../../utils/cn.js";
+import { NowLine } from "../NowLine/NowLine.js";
+import { RulerViewport } from "../RulerViewport/RulerViewport.js";
+import { MiddleTicks } from "../Ticks/MiddleTicks.js";
+import { SlitTicks } from "../Ticks/SlitTicks.js";
+import { UnavailableTicks } from "../Ticks/UnavialableTicks.js";
+import { makeUnavailableTicksGeometry } from "../Ticks/utils.js";
 const b = block('ruler');
 const viewportDimensionsContext = React.createContext(null);
 const viewportIntervalContext = React.createContext(null);
@@ -51,3 +51,4 @@ export function useViewportInterval() {
     }
     return viewport;
 }
+//# sourceMappingURL=Ruler.js.map

package/dist/esm/components/RangeDateSelection/components/Ruler/Ruler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ruler.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/Ruler/Ruler.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport ReactDOM from 'react-dom';\n\nimport type {MoveEndEvent, MoveMoveEvent, MoveStartEvent} from '../../../../hooks/useMove';\nimport {useResizeObserver} from '../../../../hooks/useResizeObserver';\nimport {block} from '../../../../utils/cn';\nimport type {RangeValue} from '../../../types';\nimport {NowLine} from '../NowLine/NowLine';\nimport {RulerViewport} from '../RulerViewport/RulerViewport';\nimport {MiddleTicks} from '../Ticks/MiddleTicks';\nimport {SlitTicks} from '../Ticks/SlitTicks';\nimport {UnavailableTicks} from '../Ticks/UnavialableTicks';\nimport {makeUnavailableTicksGeometry} from '../Ticks/utils';\n\nconst b = block('ruler');\n\ninterface RulerProps {\n    className?: string;\n    children?: React.ReactNode;\n    start: DateTime;\n    end: DateTime;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    onMoveStart?: (event: MoveStartEvent) => void;\n    onMove?: (delta: number, event: MoveMoveEvent) => void;\n    onMoveEnd?: (event: MoveEndEvent) => void;\n    displayNow?: boolean;\n    formatTime?: (time: DateTime) => string;\n    timeZone?: string;\n    dragDisabled?: boolean;\n    renderAdditionalRulerContent?: (props: {\n        interval: ViewportInterval;\n        dimensions: ViewportDimensions;\n    }) => React.ReactNode;\n}\n\nexport interface ViewportDimensions {\n    width: number;\n    height: number;\n}\n\nexport type ViewportInterval = RangeValue<DateTime>;\n\nconst viewportDimensionsContext = React.createContext<ViewportDimensions | null>(null);\nconst viewportIntervalContext = React.createContext<ViewportInterval | null>(null);\n\nexport function DateTimeRuler({\n    className,\n    children,\n    start,\n    end,\n    minValue,\n    maxValue,\n    onMove,\n    onMoveStart,\n    onMoveEnd,\n    displayNow,\n    formatTime,\n    timeZone,\n    dragDisabled,\n    renderAdditionalRulerContent,\n}: RulerProps) {\n    const [container, setContainer] = React.useState<HTMLDivElement | null>(null);\n    const viewportInterval = React.useMemo(() => ({start, end}), [start, end]);\n    const [viewportDimensions, setViewportDimensions] = React.useState<ViewportDimensions>({\n        width: 0,\n        height: 0,\n    });\n    const onResize = React.useCallback(() => {\n        if (!container) {\n            return;\n        }\n        const {width, height} = container.getBoundingClientRect();\n        setViewportDimensions({width, height});\n    }, [container]);\n\n    const containerRef = React.useMemo(() => ({current: container}), [container]);\n\n    useResizeObserver({ref: containerRef, onResize});\n\n    const hasConstrains = Boolean(minValue || maxValue);\n\n    return (\n        <div className={b(null, className)}>\n            <viewportIntervalContext.Provider value={viewportInterval}>\n                <viewportDimensionsContext.Provider value={viewportDimensions}>\n                    <RulerViewport\n                        ref={setContainer}\n                        onMove={onMove}\n                        onMoveStart={onMoveStart}\n                        onMoveEnd={onMoveEnd}\n                        dragDisabled={dragDisabled}\n                    >\n                        <MiddleTicks timeZone={timeZone} />\n                        <SlitTicks formatTime={formatTime} timeZone={timeZone} />\n                        {hasConstrains ? (\n                            <UnavailableTicks\n                                theme=\"dim\"\n                                minValue={minValue}\n                                maxValue={maxValue}\n                                geometry={makeUnavailableTicksGeometry({\n                                    tickHeight: 10,\n                                    viewportHeight: viewportDimensions.height,\n                                })}\n                                tickWidth={viewportDimensions.height + 10}\n                            />\n                        ) : null}\n                        {displayNow ? <NowLine /> : null}\n                        {renderAdditionalRulerContent?.({\n                            interval: viewportInterval,\n                            dimensions: viewportDimensions,\n                        })}\n                    </RulerViewport>\n                    {container ? ReactDOM.createPortal(children, container) : null}\n                </viewportDimensionsContext.Provider>\n            </viewportIntervalContext.Provider>\n        </div>\n    );\n}\n\nexport function useViewportDimensions() {\n    const viewport = React.useContext(viewportDimensionsContext);\n    if (!viewport) {\n        throw new Error('useViewportDimensions must be used within a RulerViewport');\n    }\n    return viewport;\n}\n\nexport function useViewportInterval() {\n    const viewport = React.useContext(viewportIntervalContext);\n    if (!viewport) {\n        throw new Error('useViewportInterval must be used within a RulerViewport');\n    }\n    return viewport;\n}\n"]}

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.css

@@ -22,4 +22,5 @@
 }
 .g-date-ruler-viewport__svg {
   pointer-events: none;
-}
+}
+/*# sourceMappingURL=RulerViewport.css.map */

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RangeDateSelection/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Druler-viewport';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--_--g-date-ruler-viewport-background:%20var(%0A%20%20%20%20%20%20%20%20--g-date-ruler-viewport-background,%0A%20%20%20%20%20%20%20%20var(--g-color-base-background)%0A%20%20%20%20);%0A%0A%20%20%20%20--g-date-thin-timeline-height:%2022px;%0A%20%20%20%20--g-date-thin-timeline-now-color:%20var(--g-color-line-danger);%0A%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20box-sizing:%20border-box;%0A%20%20%20%20height:%20var(--g-date-thin-timeline-height);%0A%0A%20%20%20%20&__dragger%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset:%200;%0A%0A%20%20%20%20%20%20%20%20cursor:%20grab;%0A%0A%20%20%20%20%20%20%20%20&:focus-visible%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%202px%20solid%20var(--g-color-line-focus);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_disabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__svg%20%7B%0A%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;AAAA;AAAA;AAAA;EAKA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}ruler-viewport';\n\n#{$block} {\n    --_--g-date-ruler-viewport-background: var(\n        --g-date-ruler-viewport-background,\n        var(--g-color-base-background)\n    );\n\n    --g-date-thin-timeline-height: 22px;\n    --g-date-thin-timeline-now-color: var(--g-color-line-danger);\n\n    position: relative;\n\n    box-sizing: border-box;\n    height: var(--g-date-thin-timeline-height);\n\n    &__dragger {\n        position: absolute;\n        inset: 0;\n\n        cursor: grab;\n\n        &:focus-visible {\n            outline: 2px solid var(--g-color-line-focus);\n        }\n\n        &_disabled {\n            pointer-events: none;\n        }\n    }\n\n    &__svg {\n        pointer-events: none;\n    }\n}\n"],"file":"RulerViewport.css"}

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from '../../../../hooks/useMove';
-import './RulerViewport.css';
+import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from "../../../../hooks/useMove.js";
+import "./RulerViewport.css";
 interface RulerViewportProps {
     className?: string;
     children?: React.ReactNode;

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { useMove } from '../../../../hooks/useMove';
-import { block } from '../../../../utils/cn';
-import './RulerViewport.css';
+import { useMove } from "../../../../hooks/useMove.js";
+import { block } from "../../../../utils/cn.js";
+import "./RulerViewport.css";
 const b = block('ruler-viewport');
 function RulerViewport({ className, children, onMove, onMoveStart, onMoveEnd, dragDisabled }, ref) {
     const containerRef = React.useRef(null);
@@ -27,3 +27,4 @@ function RulerViewport({ className, children, onMove, onMoveStart, onMoveEnd, dr
 }
 const _RulerViewport = React.forwardRef(RulerViewport);
 export { _RulerViewport as RulerViewport };
+//# sourceMappingURL=RulerViewport.js.map

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RulerViewport.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/RulerViewport/RulerViewport.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,qCAAkC;AAElD,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAE3C,6BAA8B;AAE9B,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAWlC,SAAS,aAAa,CAClB,EAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAqB,EACvF,GAA8B;IAE9B,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC;IAC/C,MAAM,EAAC,SAAS,EAAC,GAAG,OAAO,CAAC;QACxB,WAAW,EAAE,WAAW;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,EAAE,CAAC;gBAC9B,MAAM,EAAC,KAAK,EAAC,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;gBAClD,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC;gBACrC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;gBACtC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;oBACd,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,EAAE,CAAC,CAAC,CAAC;gBACvB,CAAC;YACL,CAAC;QACL,CAAC;QACD,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aACxC,eACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,EACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,aAEzC,yBAEI,kBAAQ,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,uBAAuB,aAC/D,kBAAS,UAAU,EAAC,4CAA4C,GAAG,EACnE,sBAAa,EAAE,EAAC,eAAe,GAAG,IAC7B,GACN,EACN,QAAQ,IACP,EACL,SAAS,CAAC,CAAC,CAAC,CACT,4BAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,YAAY,EAAC,CAAC,IAAM,SAAS,EAAI,CAC5E,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC;AAED,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AACvD,OAAO,EAAC,cAAc,IAAI,aAAa,EAAC,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useMove} from '../../../../hooks/useMove';\nimport type {MoveEndEvent, MoveMoveEvent, MoveStartEvent} from '../../../../hooks/useMove';\nimport {block} from '../../../../utils/cn';\n\nimport './RulerViewport.scss';\n\nconst b = block('ruler-viewport');\n\ninterface RulerViewportProps {\n    className?: string;\n    children?: React.ReactNode;\n    onMoveStart?: (event: MoveStartEvent) => void;\n    onMove?: (delta: number, event: MoveMoveEvent) => void;\n    onMoveEnd?: (event: MoveEndEvent) => void;\n    dragDisabled?: boolean;\n}\n\nfunction RulerViewport(\n    {className, children, onMove, onMoveStart, onMoveEnd, dragDisabled}: RulerViewportProps,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const containerRef = React.useRef<SVGSVGElement>(null);\n    const draggable = typeof onMove === 'function';\n    const {moveProps} = useMove({\n        onMoveStart: onMoveStart,\n        onMove: (e) => {\n            const container = containerRef.current;\n            if (e.deltaX !== 0 && container) {\n                const {width} = container.getBoundingClientRect();\n                let delta = (e.deltaX * 100) / width;\n                delta = Math.round(delta * 100) / 100;\n                if (delta !== 0) {\n                    onMove?.(delta, e);\n                }\n            }\n        },\n        onMoveEnd: onMoveEnd,\n    });\n\n    return (\n        <div ref={ref} className={b(null, className)}>\n            <svg\n                ref={containerRef}\n                className={b('svg')}\n                width=\"100%\"\n                height=\"100%\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n            >\n                <defs>\n                    {/* this one allows rendering background under tick labels */}\n                    <filter x=\"0\" y=\"0\" width=\"1\" height=\"1\" id=\"g-date-tt-ticklabelbg\">\n                        <feFlood floodColor=\"var(--_--g-date-ruler-viewport-background)\" />\n                        <feComposite in=\"SourceGraphic\" />\n                    </filter>\n                </defs>\n                {children}\n            </svg>\n            {draggable ? (\n                <div className={b('dragger', {disabled: dragDisabled})} {...moveProps} />\n            ) : null}\n        </div>\n    );\n}\n\nconst _RulerViewport = React.forwardRef(RulerViewport);\nexport {_RulerViewport as RulerViewport};\n"]}

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.css

@@ -75,4 +75,5 @@
   white-space: nowrap;
   border: 0;
   clip-path: inset(50%);
-}
+}
+/*# sourceMappingURL=SelectionControl.css.map */

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RangeDateSelection/mixins';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-selection-control';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--_--g-date-timeline-color-selection:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection,%0A%20%20%20%20%20%20%20%20var(--g-color-base-info-light)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-hover:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-hover,%0A%20%20%20%20%20%20%20%20var(--g-color-base-info-light-hover)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-handle:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-handle,%0A%20%20%20%20%20%20%20%20var(--g-color-base-brand)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-handle-hover:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-handle-hover,%0A%20%20%20%20%20%20%20%20var(--g-color-base-brand-hover)%0A%20%20%20%20);%0A%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20z-index:%201;%0A%20%20%20%20inset-block:%200;%0A%0A%20%20%20%20@supports%20(selector(:has(*)))%20and%20(selector(:focus-visible))%20%7B%0A%20%20%20%20%20%20%20%20&__start:has(&__slider-input:focus-visible),%0A%20%20%20%20%20%20%20%20&__end:has(&__slider-input:focus-visible),%0A%20%20%20%20%20%20%20%20&__dragger:has(&__slider-input:focus-visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%20var(--g-border-radius-xs);%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%20var(--g-color-line-focus)%20solid%202px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20@supports%20not%20(selector(:has(*)))%20%7B%0A%20%20%20%20%20%20%20%20&__start:focus-within,%0A%20%20%20%20%20%20%20%20&__end:focus-within,%0A%20%20%20%20%20%20%20%20&__dragger:focus-within%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%20var(--g-border-radius-xs);%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%20var(--g-color-line-focus)%20solid%202px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__dragger%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-block:%200;%0A%20%20%20%20%20%20%20%20inset-inline:%202px;%0A%0A%20%20%20%20%20%20%20%20cursor:%20move;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection);%0A%0A%20%20%20%20%20%20%20%20&:hover,%0A%20%20%20%20%20%20%20%20&_dragging%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-hover);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_disabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__start%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-block:%200;%0A%20%20%20%20%20%20%20%20inset-inline-start:%200;%0A%0A%20%20%20%20%20%20%20%20width:%204px;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__end%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-inline-end:%200;%0A%0A%20%20%20%20%20%20%20%20width:%204px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__start,%0A%20%20%20%20&__end%20%7B%0A%20%20%20%20%20%20%20%20cursor:%20ew-resize;%0A%0A%20%20%20%20%20%20%20%20&:hover,%0A%20%20%20%20%20%20%20%20&_dragging%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle-hover);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__slider-input-wrapper%20%7B%0A%20%20%20%20%20%20%20%20@include%20mixins.visually-hidden();%0A%20%20%20%20%7D%0A%7D%0A","components/RangeDateSelection/components/SelectionControl/file:/home/runner/work/date-components/date-components/src/components/mixins.scss"],"names":[],"mappings":"AAKA;EACI;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;EACA;EACA;;AAEA;EACI;IAGI;IACA;;;AAIR;EACI;IAGI;IACA;;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAEA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;EAEA;;AAGJ;EAEI;;AAEA;EAEI;;AAIR;EChGA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA","sourcesContent":["@use '../../../variables';\n@use '../../../mixins';\n\n$block: '.#{variables.$ns}range-date-selection-control';\n\n#{$block} {\n    --_--g-date-timeline-color-selection: var(\n        --g-date-timeline-color-selection,\n        var(--g-color-base-info-light)\n    );\n\n    --_--g-date-timeline-color-selection-hover: var(\n        --g-date-timeline-color-selection-hover,\n        var(--g-color-base-info-light-hover)\n    );\n\n    --_--g-date-timeline-color-selection-handle: var(\n        --g-date-timeline-color-selection-handle,\n        var(--g-color-base-brand)\n    );\n\n    --_--g-date-timeline-color-selection-handle-hover: var(\n        --g-date-timeline-color-selection-handle-hover,\n        var(--g-color-base-brand-hover)\n    );\n\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n\n    @supports (selector(:has(*))) and (selector(:focus-visible)) {\n        &__start:has(&__slider-input:focus-visible),\n        &__end:has(&__slider-input:focus-visible),\n        &__dragger:has(&__slider-input:focus-visible) {\n            border-radius: var(--g-border-radius-xs);\n            outline: var(--g-color-line-focus) solid 2px;\n        }\n    }\n\n    @supports not (selector(:has(*))) {\n        &__start:focus-within,\n        &__end:focus-within,\n        &__dragger:focus-within {\n            border-radius: var(--g-border-radius-xs);\n            outline: var(--g-color-line-focus) solid 2px;\n        }\n    }\n\n    &__dragger {\n        position: absolute;\n        inset-block: 0;\n        inset-inline: 2px;\n\n        cursor: move;\n\n        background: var(--_--g-date-timeline-color-selection);\n\n        &:hover,\n        &_dragging {\n            background: var(--_--g-date-timeline-color-selection-hover);\n        }\n\n        &_disabled {\n            pointer-events: none;\n        }\n    }\n\n    &__start {\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 0;\n\n        width: 4px;\n\n        background: var(--_--g-date-timeline-color-selection-handle);\n    }\n\n    &__end {\n        position: absolute;\n        inset-inline-end: 0;\n\n        width: 4px;\n        height: 100%;\n\n        background: var(--_--g-date-timeline-color-selection-handle);\n    }\n\n    &__start,\n    &__end {\n        cursor: ew-resize;\n\n        &:hover,\n        &_dragging {\n            background: var(--_--g-date-timeline-color-selection-handle-hover);\n        }\n    }\n\n    &__slider-input-wrapper {\n        @include mixins.visually-hidden();\n    }\n}\n","@mixin visually-hidden() {\n    position: absolute;\n\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n\n    white-space: nowrap;\n\n    border: 0;\n    clip-path: inset(50%);\n}\n"],"file":"SelectionControl.css"}

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.d.ts

@@ -1,6 +1,6 @@
-import type { AccessibilityProps, DomProps, StyleProps } from '../../../types';
-import type { RangeDateSelectionState } from '../../hooks/useRangeDateSelectionState';
-import './SelectionControl.css';
+import type { AccessibilityProps, DomProps, StyleProps } from "../../../types/index.js";
+import type { RangeDateSelectionState } from "../../hooks/useRangeDateSelectionState.js";
+import "./SelectionControl.css";
 interface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {
     state: RangeDateSelectionState;
 }