@pushwoosh/dumb-components 1.1.47 → 1.1.48

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Horizontal, usePersistentFunction, Vertical } from '@pushwoosh/kit-helpers';
+import { ArrowIcon } from '@pushwoosh/kit-icons';
+import { Root, Viewport, Strip, Panel, NavButtonLeft, NavButtonRight, StyledSelect } from './styles';
+import { Button } from '../../Button';
+import { CalendarMonth } from '../CalendarMonth/CalendarMonth';
+import { addPeriod, monthName } from '../helpers';
+function makeBaseline(a, count) {
+  return Array.from({
+    length: count
+  }, (_, i) => addPeriod(a, 'month', i));
+}
+function delayCallback(fn) {
+  return setTimeout(() => {
+    requestAnimationFrame(fn);
+  }, 10);
+}
+export const CalendarMonthSlider = ({
+  startMonth,
+  monthWidth = 224,
+  gap = 16,
+  visibleCount = 1,
+  renderAfter,
+  ...monthProps
+}) => {
+  const [anchor, setAnchor] = useState(startMonth);
+  const [inTransition, setInTransition] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [panels, setPanels] = useState(() => makeBaseline(anchor, visibleCount));
+  const stepPx = monthWidth + gap;
+  const shiftPx = index * (stepPx * -1);
+  const toBaseline = usePersistentFunction(mon => {
+    setInTransition(false);
+    setPanels(makeBaseline(mon, visibleCount));
+    setIndex(0);
+  });
+  const animateForward = () => {
+    const newAnchor = addPeriod(anchor, 'month', 1);
+    setPanels(makeBaseline(anchor, visibleCount + 1));
+    setIndex(0);
+    delayCallback(() => {
+      setInTransition(true);
+      setIndex(1);
+    });
+    setAnchor(newAnchor);
+  };
+  const animateBackward = () => {
+    const newAnchor = addPeriod(anchor, 'month', -1);
+    setPanels(makeBaseline(newAnchor, visibleCount + 1));
+    setIndex(1);
+    delayCallback(() => {
+      setInTransition(true);
+      setIndex(0);
+    });
+    setAnchor(newAnchor);
+  };
+  const handleMonthChange = (event, panelIndex, currentPanel) => {
+    const monthNumber = parseInt(event.target.value, 10);
+    const selectedDate = {
+      ...currentPanel,
+      month: monthNumber
+    };
+    const newAnchor = addPeriod(selectedDate, 'month', -panelIndex);
+    setAnchor(newAnchor);
+    setPanels(makeBaseline(newAnchor, visibleCount));
+  };
+  const handleYearChange = (event, panelIndex, currentPanel) => {
+    const yearNumber = parseInt(event.target.value, 10);
+    const selectedDate = {
+      ...currentPanel,
+      year: yearNumber
+    };
+    const newAnchor = addPeriod(selectedDate, 'month', -panelIndex);
+    setAnchor(newAnchor);
+    setPanels(makeBaseline(newAnchor, visibleCount));
+  };
+  const currentYear = new Date().getFullYear();
+  const yearOptions = Array.from({
+    length: 11
+  }, (_, i) => currentYear - 5 + i);
+  const viewportWidth = `${visibleCount * monthWidth + gap * (visibleCount - 1)}px`;
+  return React.createElement(Root, {
+    style: {
+      ['--slider-width']: viewportWidth,
+      ['--col-width']: `${monthWidth}px`,
+      ['--gap']: `${gap}px`,
+      ['--shift']: `${shiftPx}px`
+    }
+  }, React.createElement(Viewport, null, React.createElement(Strip, {
+    withTransition: inTransition,
+    onTransitionEnd: () => {
+      toBaseline(anchor);
+    }
+  }, panels.map((p, i) =>
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement(Panel, {
+    key: `${p.year}-${p.month}-${i}`
+  }, React.createElement(Vertical, {
+    "$gap": 4
+  }, React.createElement(Horizontal, {
+    "$justifyContent": "center",
+    "$gap": 6
+  }, React.createElement(StyledSelect, {
+    value: p.month,
+    onChange: e => handleMonthChange(e, i, p)
+  }, Array.from({
+    length: 12
+  }, (_, idx) => React.createElement("option", {
+    key: idx + 1,
+    value: idx + 1
+  }, monthName(idx + 1, 'long')))), React.createElement(StyledSelect, {
+    value: p.year,
+    onChange: e => handleYearChange(e, i, p)
+  }, yearOptions.map(year => React.createElement("option", {
+    key: year,
+    value: year
+  }, year)))), React.createElement(CalendarMonth, {
+    month: p,
+    ...monthProps
+  })))))), React.createElement(NavButtonLeft, null, React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    view: "ghost",
+    icon: React.createElement(ArrowIcon, {
+      size: "small",
+      direction: "left"
+    }),
+    onClick: animateBackward,
+    isDisabled: inTransition
+  })), React.createElement(NavButtonRight, null, React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    view: "ghost",
+    icon: React.createElement(ArrowIcon, {
+      size: "small",
+      direction: "right"
+    }),
+    onClick: animateForward,
+    isDisabled: inTransition
+  })), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter());
+};

package/Calendar/CalendarMonthSlider/styles.d.ts

@@ -0,0 +1,67 @@
+export declare const Root: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export declare const Viewport: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Strip: import("styled-components").StyledComponent<"div", any, {
+    withTransition: boolean;
+}, never>;
+export declare const Panel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<import("react").FC<import("@pushwoosh/kit-icons").ArrowIconProps>, any, {
+    size: "small";
+}, "size">;
+export declare const NavButtonLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavButtonRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<"select", any, {}, never>;

package/Calendar/CalendarMonthSlider/styles.js

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+import { Color, FontFamily, FontSize, FontWeight, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { ArrowIcon } from '@pushwoosh/kit-icons';
+export const Root = styled(Vertical).withConfig({
+  displayName: "Root",
+  componentId: "sc-1qqlxvi-0"
+})(["position:relative;width:var(--slider-width,0px);"]);
+export const Viewport = styled.div.withConfig({
+  displayName: "Viewport",
+  componentId: "sc-1qqlxvi-1"
+})(["position:relative;overflow:hidden;width:var(--slider-width,0px);"]);
+export const Strip = styled.div.withConfig({
+  displayName: "Strip",
+  componentId: "sc-1qqlxvi-2"
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:var(--col-width,0px);column-gap:var(--gap,0px);transform:translateX(var(--shift,0px));", ""], ({
+  withTransition
+}) => withTransition && css(["transition:transform var(--duration,150ms) ease-out;"]));
+export const Panel = styled.div.withConfig({
+  displayName: "Panel",
+  componentId: "sc-1qqlxvi-3"
+})(["width:var(--col-width,0px);"]);
+export const Arrow = styled(ArrowIcon).attrs({
+  size: 'small'
+}).withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1qqlxvi-4"
+})(["color:", ";cursor:pointer;&:hover{color:", ";transform:scale(1.2);transition:transform 0.2s ease-in-out;}"], Color.SOFT_HOVER, Color.SOFT_HOVER);
+export const NavButtonLeft = styled.div.withConfig({
+  displayName: "NavButtonLeft",
+  componentId: "sc-1qqlxvi-5"
+})(["position:absolute;top:0;left:0;"]);
+export const NavButtonRight = styled.div.withConfig({
+  displayName: "NavButtonRight",
+  componentId: "sc-1qqlxvi-6"
+})(["position:absolute;top:0;right:0;"]);
+export const StyledSelect = styled.select.withConfig({
+  displayName: "StyledSelect",
+  componentId: "sc-1qqlxvi-7"
+})(["appearance:none;background:transparent;border:none;padding:0;height:", ";cursor:pointer;color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;&:hover{color:", ";}&:focus{outline:none;}"], UnitSize.COMPACT_HEIGHT, Color.SOFT, FontFamily.MAIN, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5, Color.PRIMARY_HOVER);

package/Calendar/CalendarSuperForm/CalendarSuperForm.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type CalendarSuperFormProps } from './types';
+export declare const CalendarSuperForm: FC<CalendarSuperFormProps>;

package/Calendar/CalendarSuperForm/CalendarSuperForm.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { CalendarRangePicker } from './components/CalendarRangePicker/CalendarRangePicker';
+import { CalendarTimeAndTimezoneSection } from './components/CalendarTimeAndTimezoneSection/CalendarTimeAndTimezoneSection';
+export const CalendarSuperForm = props => {
+  const {
+    mode,
+    value,
+    onChange,
+    timezone,
+    onChangeTimezone,
+    disableOnAndBefore,
+    disableOnAndAfter,
+    minDays,
+    maxDays,
+    visibleCount,
+    monthWidth,
+    gap,
+    firstDayOfWeek
+  } = props;
+  const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
+  const withTime = mode === 'single-datetime' || mode === 'range-datetime';
+  return React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(CalendarRangePicker, {
+    disableOnAndBefore: disableOnAndBefore,
+    disableOnAndAfter: disableOnAndAfter,
+    minDays: minDays,
+    maxDays: maxDays,
+    value: isRangePicker ? value : value ? [value] : [],
+    onChange: val => {
+      if (isRangePicker) {
+        if (withTime) {
+          if (val.length === 2) {
+            onChange([{
+              ...val[0],
+              hour: 0,
+              minute: 0,
+              second: 0,
+              millisecond: 0
+            }, {
+              ...val[1],
+              hour: 23,
+              minute: 59,
+              second: 59,
+              millisecond: 999
+            }]);
+          } else if (val.length === 1) {
+            onChange([{
+              hour: 0,
+              minute: 0,
+              second: 0,
+              millisecond: 0,
+              ...val[0]
+            }]);
+          }
+        } else {
+          onChange(val);
+        }
+      } else if (val[0]) {
+        if (withTime) {
+          onChange({
+            hour: 0,
+            minute: 0,
+            second: 0,
+            millisecond: 0,
+            ...value,
+            ...val[0]
+          });
+        } else {
+          onChange(val[0]);
+        }
+      }
+    },
+    singleMode: !isRangePicker,
+    visibleCount: visibleCount !== undefined ? visibleCount : isRangePicker ? 2 : 1,
+    monthWidth: monthWidth,
+    gap: gap,
+    renderAfter: withTime || maxDays && maxDays > 0 ? () => {
+      return React.createElement(Vertical, {
+        "$gap": 8,
+        "$margin": {
+          top: 16
+        }
+      }, maxDays && maxDays > 0 && React.createElement(Text, {
+        "$variant": "footnote",
+        "$color": Color.LOCKED
+      }, `Max length: ${maxDays} days`), withTime && timezone && onChangeTimezone && React.createElement(CalendarTimeAndTimezoneSection, {
+        isRangePicker: isRangePicker,
+        value: value,
+        onChange: onChange,
+        timezone: timezone,
+        onChangeTimezone: onChangeTimezone,
+        visibleCount: visibleCount
+      }));
+    } : undefined,
+    firstDayOfWeek: firstDayOfWeek
+  }));
+};

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.d.ts

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react';
+import { type DateStruct } from '../../../types';
+export type RangePickerValue = [DateStruct, DateStruct] | [DateStruct] | [];
+type CalendarRangePickerProps = {
+    value: RangePickerValue;
+    visibleCount?: number;
+    monthWidth?: number;
+    gap?: number;
+    singleMode?: boolean;
+    disableOnAndBefore?: DateStruct;
+    disableOnAndAfter?: DateStruct;
+    minDays?: number;
+    maxDays?: number;
+    onChange: (range: RangePickerValue) => void;
+    renderAfter?: () => React.ReactNode;
+    firstDayOfWeek?: 0 | 1;
+};
+export declare const CalendarRangePicker: FC<CalendarRangePickerProps>;
+export {};

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { getDisabledRanges } from './getDisabledRanges';
+import { CalendarMonthSlider } from '../../../CalendarMonthSlider/CalendarMonthSlider';
+import { compareStructs } from '../../../helpers';
+export const CalendarRangePicker = ({
+  value,
+  visibleCount,
+  monthWidth = 224,
+  gap = 16,
+  singleMode,
+  disableOnAndBefore,
+  disableOnAndAfter,
+  minDays,
+  maxDays,
+  onChange,
+  renderAfter,
+  firstDayOfWeek
+}) => {
+  const startMonthRef = useRef();
+  if (!startMonthRef.current) {
+    const d = new Date();
+    startMonthRef.current = value[0] || {
+      year: d.getFullYear(),
+      month: d.getMonth() + 1,
+      day: d.getDate()
+    };
+  }
+  return React.createElement(CalendarMonthSlider, {
+    startMonth: startMonthRef.current,
+    visibleCount: visibleCount,
+    monthWidth: monthWidth,
+    gap: gap,
+    renderAfter: renderAfter,
+    firstDayOfWeek: firstDayOfWeek,
+    selectedDay: singleMode ? value[0] : undefined,
+    periodFrom: !singleMode ? value[0] : undefined,
+    periodTo: !singleMode ? value[1] : undefined,
+    ...getDisabledRanges({
+      value,
+      disableOnAndBefore,
+      disableOnAndAfter,
+      minDays,
+      maxDays
+    }),
+    onDaySelect: day => {
+      if (singleMode || !value[0] || value.length === 2) {
+        onChange([day]);
+      } else if (value.length === 1) {
+        if (compareStructs(day, value[0]) < 0) {
+          onChange([day, value[0]]);
+        } else {
+          onChange([value[0], day]);
+        }
+      }
+    }
+  });
+};

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/getDisabledRanges.d.ts

@@ -0,0 +1,14 @@
+import { type DateStruct } from '../../../types';
+export type DisableSpec = {
+    disableOnAndBefore?: DateStruct;
+    disableOnAndAfter?: DateStruct;
+    disablePeriod?: [from: DateStruct, to: DateStruct];
+};
+export type GetDisabledArgs = {
+    value?: [from: DateStruct, to: DateStruct] | [from: DateStruct] | [];
+    disableOnAndBefore?: DateStruct;
+    disableOnAndAfter?: DateStruct;
+    minDays?: number;
+    maxDays?: number;
+};
+export declare function getDisabledRanges(args: GetDisabledArgs): DisableSpec;

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/getDisabledRanges.js

@@ -0,0 +1,62 @@
+import { addPeriod, compareStructs } from '../../../helpers';
+export function getDisabledRanges(args) {
+  const {
+    value,
+    disableOnAndBefore,
+    disableOnAndAfter,
+    minDays,
+    maxDays
+  } = args;
+  if (!value || value.length === 0) {
+    return {
+      disableOnAndBefore,
+      disableOnAndAfter
+    };
+  }
+  const result = {};
+  if (value.length === 1) {
+    const startDate = value[0];
+    if (minDays !== undefined && minDays > 1) {
+      const beforeDate = addPeriod(startDate, 'day', -(minDays - 2));
+      const afterDate = addPeriod(startDate, 'day', minDays - 2);
+      result.disablePeriod = [beforeDate, afterDate];
+    }
+    if (maxDays !== undefined) {
+      const maxBefore = addPeriod(startDate, 'day', -maxDays);
+      const maxAfter = addPeriod(startDate, 'day', maxDays);
+      if (result.disableOnAndBefore) {
+        if (compareStructs(maxBefore, result.disableOnAndBefore) > 0) {
+          result.disableOnAndBefore = maxBefore;
+        }
+      } else {
+        result.disableOnAndBefore = maxBefore;
+      }
+      if (result.disableOnAndAfter) {
+        if (compareStructs(maxAfter, result.disableOnAndAfter) < 0) {
+          result.disableOnAndAfter = maxAfter;
+        }
+      } else {
+        result.disableOnAndAfter = maxAfter;
+      }
+    }
+  }
+  if (disableOnAndBefore) {
+    if (result.disableOnAndBefore) {
+      if (compareStructs(disableOnAndBefore, result.disableOnAndBefore) > 0) {
+        result.disableOnAndBefore = disableOnAndBefore;
+      }
+    } else {
+      result.disableOnAndBefore = disableOnAndBefore;
+    }
+  }
+  if (disableOnAndAfter) {
+    if (result.disableOnAndAfter) {
+      if (compareStructs(disableOnAndAfter, result.disableOnAndAfter) < 0) {
+        result.disableOnAndAfter = disableOnAndAfter;
+      }
+    } else {
+      result.disableOnAndAfter = disableOnAndAfter;
+    }
+  }
+  return result;
+}

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/CalendarTimeAndTimezoneSection.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type CalendarTimeAndTimezoneSectionProps } from './types';
+export declare const CalendarTimeAndTimezoneSection: FC<CalendarTimeAndTimezoneSectionProps>;

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/CalendarTimeAndTimezoneSection.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { TimeIcon } from '@pushwoosh/kit-icons';
+import { H5, Text } from '@pushwoosh/kit-typography';
+import { Button } from '../../../../Button';
+import { extendPeriodStruct, formatTwoDigitNumber } from '../../../helpers';
+import { formatTimezoneShort } from '../../../helpers-tz';
+import { CalendarTimeInput } from '../CalendarTimeInput';
+import { CalendarTimezoneSelect } from '../CalendarTimezoneSelect';
+export const CalendarTimeAndTimezoneSection = ({
+  isRangePicker,
+  value,
+  onChange,
+  timezone,
+  onChangeTimezone,
+  visibleCount
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const timezoneShort = formatTimezoneShort(timezone);
+  const getSelectedTimeText = () => {
+    if (isRangePicker) {
+      const [startValue, endValue] = value;
+      const startTime = startValue ? `${formatTwoDigitNumber(startValue.hour || 0)}:${formatTwoDigitNumber(startValue.minute || 0)}` : '00:00';
+      const endTime = endValue ? `${formatTwoDigitNumber(endValue.hour || 0)}:${formatTwoDigitNumber(endValue.minute || 0)}` : '23:59';
+      return `${startTime} – ${endTime}`;
+    }
+    return value ? `${formatTwoDigitNumber(value.hour || 0)}:${formatTwoDigitNumber(value.minute || 0)}` : '00:00';
+  };
+  const showCollapsed = isRangePicker && !expanded;
+  const isDisabled = isRangePicker ? value.length !== 2 : !value;
+  let padding;
+  let backgroundColor;
+  let borderRadius;
+  if (!isRangePicker) {
+    padding = 0;
+    backgroundColor = undefined;
+    borderRadius = undefined;
+  } else if (showCollapsed) {
+    padding = {
+      vertical: 6,
+      horizontal: 12
+    };
+    backgroundColor = Color.SOFT_LIGHT;
+    borderRadius = ShapeRadius.SECTION;
+  } else {
+    padding = {
+      top: 6,
+      horizontal: 12,
+      bottom: 12
+    };
+    backgroundColor = Color.SOFT_LIGHT;
+    borderRadius = ShapeRadius.SECTION;
+  }
+  return React.createElement(Vertical, {
+    "$padding": padding,
+    "$borderRadius": borderRadius,
+    "$bgColor": backgroundColor
+  }, showCollapsed ? React.createElement(Columns, {
+    "$sizes": "max-content 1fr max-content",
+    "$gap": 6,
+    "$alignItems": "center"
+  }, React.createElement(TimeIcon, {
+    size: "small",
+    view: "lined"
+  }), React.createElement(Text, {
+    "$variant": "footnote"
+  }, getSelectedTimeText(), ' ', timezoneShort), React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    view: "ghost",
+    onClick: () => setExpanded(true)
+  }, "Expand time")) : React.createElement(React.Fragment, null, isRangePicker && React.createElement(Columns, {
+    "$sizes": "1fr max-content",
+    "$gap": 8,
+    "$alignItems": "center"
+  }, React.createElement(H5, null, "Time range:"), React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    view: "ghost",
+    onClick: () => setExpanded(false)
+  }, "Collapse time")), !isRangePicker ? React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 8,
+    "$justifyContent": "start"
+  }, React.createElement(CalendarTimeInput, {
+    value: value,
+    onChange: time => {
+      const newStruct = extendPeriodStruct(value, time);
+      onChange(newStruct);
+    },
+    disabled: isDisabled
+  }), React.createElement(CalendarTimezoneSelect, {
+    timezone: timezone,
+    onChange: onChangeTimezone,
+    isDisabled: isDisabled
+  })) : React.createElement(Columns, {
+    "$sizes": visibleCount === 1 ? '1fr' : 'auto 1fr',
+    "$gap": 8
+  }, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 8,
+    "$justifyContent": "start"
+  }, React.createElement(CalendarTimeInput, {
+    value: value[0],
+    onChange: time => {
+      const oldStruct = value[0];
+      const newStruct = extendPeriodStruct(oldStruct, time);
+      const newValue = value.length === 2 ? [newStruct, value[1]] : [newStruct];
+      onChange(newValue);
+    },
+    disabled: isDisabled
+  }), React.createElement("span", null, "\u2013"), React.createElement(CalendarTimeInput, {
+    value: value[1],
+    onChange: time => {
+      const oldStruct = value[1];
+      const newStruct = extendPeriodStruct(oldStruct, time);
+      const newValue = value.length === 2 ? [value[0], newStruct] : [newStruct];
+      onChange(newValue);
+    },
+    endPeriod: true,
+    disabled: isDisabled
+  })), React.createElement(CalendarTimezoneSelect, {
+    timezone: timezone,
+    onChange: onChangeTimezone,
+    isDisabled: isDisabled
+  })), isDisabled && React.createElement(Horizontal, {
+    "$margin": {
+      top: 4
+    }
+  }, React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
+  }, "Please select", ' ', isRangePicker ? 'date range' : 'date', ' ', "first to set time"))));
+};

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/types.d.ts

@@ -0,0 +1,18 @@
+import { type DateTimeStruct, type RangeValue, type SingleValue } from '../../../types';
+interface BaseProps {
+    timezone: string;
+    onChangeTimezone: (timezone: string) => void;
+    visibleCount?: number;
+}
+export interface CalendarTimeAndTimezoneSectionSingleProps extends BaseProps {
+    isRangePicker?: false;
+    value?: SingleValue<DateTimeStruct>;
+    onChange: (value: SingleValue<DateTimeStruct>) => void;
+}
+export interface CalendarTimeAndTimezoneSectionRangeProps extends BaseProps {
+    isRangePicker: true;
+    value: RangeValue<DateTimeStruct>;
+    onChange: (value: RangeValue<DateTimeStruct>) => void;
+}
+export type CalendarTimeAndTimezoneSectionProps = CalendarTimeAndTimezoneSectionSingleProps | CalendarTimeAndTimezoneSectionRangeProps;
+export {};

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/types.js

@@ -0,0 +1 @@
+export {};