@snack-uikit/fields 0.31.0 → 0.32.0

package/src/components/FieldTime/styles.module.scss

@@ -0,0 +1,41 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+
+$sizes: 's', 'm', 'l';
+$icons-sizes: (
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s
+);
+
+.triggerClassName {
+  --offset: #{styles-tokens-fields.$space-drop-list-drop-offset};
+
+  display: block;
+  width: 100%;
+}
+
+.container {
+  .calendarIcon {
+    color: styles-tokens-fields.$sys-neutral-text-light;
+
+    @each $size in $sizes {
+      &[data-size='#{$size}'] {
+        width: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover, &:focus-within, &[data-focused] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-support;
+    }
+  }
+
+  &[data-disabled], &[data-readonly] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/components/index.ts

@@ -1,9 +1,10 @@
+export * from './FieldColor';
+export * from './FieldDate';
 export * from './FieldDecorator';
-export * from './FieldText';
-export * from './FieldTextArea';
 export * from './FieldSecure';
-export * from './FieldDate';
 export * from './FieldSelect';
-export * from './FieldStepper';
 export * from './FieldSlider';
-export * from './FieldColor';
+export * from './FieldStepper';
+export * from './FieldText';
+export * from './FieldTextArea';
+export * from './FieldTime';

package/src/constants/dateFields.ts

@@ -0,0 +1,127 @@
+import { Mode, NoSecondsMode, Slot, TimeMode } from '../types';
+
+export enum SlotKey {
+  Day = 'D',
+  Month = 'M',
+  Year = 'Y',
+  Hours = 'h',
+  Minutes = 'm',
+  Seconds = 's',
+}
+
+export const MODES = {
+  Date: 'date',
+  DateTime: 'date-time',
+} as const;
+
+export const TIME_MODES = {
+  FullTime: 'full-time',
+  NoSeconds: 'no-seconds',
+} as const;
+
+export const NO_SECONDS_MODE = 'date-time-no-sec';
+
+export const MASK: Record<Mode | TimeMode | NoSecondsMode, Record<string, string>> = {
+  [MODES.Date]: {
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY',
+  },
+  [MODES.DateTime]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+    'en-US': 'DD.MM.YYYY, hh:mm:ss',
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм',
+    'en-US': 'DD.MM.YYYY, hh:mm',
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': 'чч:мм:сс',
+    'en-US': 'hh:mm:ss',
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': 'чч:мм',
+    'en-US': 'hh:mm',
+  },
+};
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+
+const DATE_SLOTS = {
+  [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
+  [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
+  [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
+};
+
+const TIME_SLOTS = (shift: number, showSeconds: boolean) => ({
+  [SlotKey.Hours]: { start: shift, end: shift + 2, max: 23, min: 0 },
+  [SlotKey.Minutes]: { start: shift + 3, end: shift + 5, max: 59, min: 0 },
+  ...(showSeconds ? { [SlotKey.Seconds]: { start: shift + 6, end: shift + 8, max: 59, min: 0 } } : {}),
+});
+
+export const SLOTS: Record<Mode | TimeMode | NoSecondsMode, Record<SlotKey | string, Slot>> = {
+  [MODES.Date]: DATE_SLOTS,
+  [MODES.DateTime]: { ...DATE_SLOTS, ...TIME_SLOTS(12, true) },
+  [NO_SECONDS_MODE]: { ...DATE_SLOTS, ...TIME_SLOTS(12, false) },
+  [TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+  [TIME_MODES.NoSeconds]: TIME_SLOTS(0, false),
+};
+
+export type FocusSlot = SlotKey | 'auto';
+
+export const SLOT_ORDER: Record<Mode | TimeMode | NoSecondsMode, SlotKey[]> = {
+  [MODES.Date]: [SlotKey.Day, SlotKey.Month, SlotKey.Year],
+  [MODES.DateTime]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [NO_SECONDS_MODE]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes],
+  [TIME_MODES.FullTime]: [SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [TIME_MODES.NoSeconds]: [SlotKey.Hours, SlotKey.Minutes],
+};
+
+const RU_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'ДД',
+  [SlotKey.Month]: 'ММ',
+  [SlotKey.Year]: 'ГГГГ',
+};
+
+const RU_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'чч',
+  [SlotKey.Minutes]: 'мм',
+  [SlotKey.Seconds]: 'сс',
+};
+
+const EN_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'DD',
+  [SlotKey.Month]: 'MM',
+  [SlotKey.Year]: 'YYYY',
+};
+
+const EN_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'hh',
+  [SlotKey.Minutes]: 'mm',
+  [SlotKey.Seconds]: 'ss',
+};
+
+export const SLOTS_PLACEHOLDER: Record<
+  Mode | TimeMode | NoSecondsMode,
+  Record<string, Partial<Record<SlotKey, string>>>
+> = {
+  [MODES.Date]: {
+    'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+    'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+  },
+  [MODES.DateTime]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER },
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': RU_TIME_SLOTS_PLACEHOLDER,
+    'en-US': EN_TIME_SLOTS_PLACEHOLDER,
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': { ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/src/hooks/dateHandlers/index.ts

@@ -0,0 +1,3 @@
+export * from './useDateField';
+export * from './useFocusHandlers';
+export * from './useHandlers';

package/src/{components/FieldDate/hooks → hooks/dateHandlers}/useDateField.ts

@@ -1,32 +1,71 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject, useCallback, useMemo, useRef } from 'react';
 
+import { TimePickerProps } from '@snack-uikit/calendar';
 import { isBrowser } from '@snack-uikit/utils';
 
-import { DEFAULT_LOCALE, MASK, SlotKey, SLOTS, SLOTS_PLACEHOLDER } from '../constants';
-import { getNextSlotKey, getPrevSlotKey, getSlotKey } from '../utils';
-import { useDateFieldHelpers } from './useDateFieldHelpers';
-
-type UseDateFieldProps = {
+import {
+  DEFAULT_LOCALE,
+  FocusSlot,
+  MASK,
+  MODES,
+  NO_SECONDS_MODE,
+  SLOT_ORDER,
+  SlotKey,
+  SLOTS,
+  SLOTS_PLACEHOLDER,
+} from '../../constants';
+import { Mode, TimeMode } from '../../types';
+import { parseDate } from '../../utils/dateFields';
+import { useDateFieldHelpersForMode } from './useDateFieldHelpersForMode';
+
+type BaseProps = {
   inputRef: RefObject<HTMLInputElement>;
-  onChange?(value: string): void;
   readonly?: boolean;
   locale?: Intl.Locale;
   setIsOpen(v: boolean): void;
+  showSeconds?: boolean;
 };
 
-type FocusSlot = SlotKey.Day | SlotKey.Year | 'auto';
-
-export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen }: UseDateFieldProps) {
-  const { setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, isValidInput, tryToCompleteInput } =
-    useDateFieldHelpers(inputRef);
-  const focusSlotRef = useRef<FocusSlot>(SlotKey.Day);
-
-  const mask = useMemo(() => MASK[locale.baseName] || MASK[DEFAULT_LOCALE.baseName], [locale]);
-
-  const slotsPlaceHolder = useMemo(
-    () => SLOTS_PLACEHOLDER[locale.baseName] || SLOTS_PLACEHOLDER[DEFAULT_LOCALE.baseName],
-    [locale.baseName],
-  );
+type UseDateFieldProps =
+  | ({
+      mode: Mode;
+      onChange?(value: Date | undefined): void;
+    } & BaseProps)
+  | ({
+      mode: TimeMode;
+      onChange?: TimePickerProps['onChangeValue'];
+    } & BaseProps);
+
+export function useDateField({
+  inputRef,
+  onChange,
+  readonly,
+  locale = DEFAULT_LOCALE,
+  setIsOpen,
+  mode,
+  showSeconds,
+}: UseDateFieldProps) {
+  const dateTimeMode = mode === MODES.DateTime && !showSeconds ? NO_SECONDS_MODE : mode;
+  const slotsInfo = SLOTS[dateTimeMode];
+  const mask = MASK[dateTimeMode][locale.baseName] || MASK[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotsPlaceholder =
+    SLOTS_PLACEHOLDER[dateTimeMode][locale.baseName] || SLOTS_PLACEHOLDER[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotOrder = SLOT_ORDER[dateTimeMode];
+  const {
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+    setFocus,
+    updateSlot,
+    getSlot,
+    isLikeDate,
+    isAllSelected,
+    tryToCompleteInput,
+    isValidInput,
+  } = useDateFieldHelpersForMode({ inputRef, mode: dateTimeMode });
+
+  const focusSlotKey = useMemo(() => slotOrder[0], [slotOrder]);
+  const focusSlotRef = useRef<FocusSlot>(focusSlotKey);
 
   const setInputFocus = useCallback(
     (focusSlot?: FocusSlot) => {
@@ -35,20 +74,20 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
       }
 
       if (isBrowser() && document.activeElement !== inputRef.current) {
-        focusSlotRef.current = focusSlot || SlotKey.Day;
+        focusSlotRef.current = focusSlot || focusSlotKey;
         inputRef.current.focus();
         return;
       }
 
       const focusSlotValue = focusSlot || focusSlotRef.current;
 
-      if (isLikeDate() && focusSlotValue === SlotKey.Day) {
+      if (isLikeDate() && focusSlotValue === focusSlotKey) {
         return;
       }
 
       if (!inputRef.current.value) {
         inputRef.current.value = mask;
-        setFocus(SlotKey.Day);
+        setFocus(focusSlotKey);
         return;
       }
 
@@ -57,14 +96,14 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         return;
       }
 
-      const slotKey = getSlotKey(inputRef.current.selectionStart);
+      const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
 
       if (slotKey) {
-        const { start, end } = SLOTS[slotKey];
+        const { start, end } = slotsInfo[slotKey];
         inputRef.current.setSelectionRange(start, end);
       }
     },
-    [inputRef, isLikeDate, mask, readonly, setFocus],
+    [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo],
   );
 
   const handleClick = useCallback(() => {
@@ -72,12 +111,12 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
   }, [setInputFocus]);
 
   const handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void = () => {
-    onChange && isLikeDate() && onChange(inputRef.current?.value || '');
+    onChange && isLikeDate() && onChange(parseDate(inputRef.current?.value || ''));
   };
 
   const checkInputAndGoNext = useCallback(
-    (slotKey: string) => {
-      if (slotKey === SlotKey.Year && tryToCompleteInput()) {
+    (slotKey: SlotKey | undefined) => {
+      if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
         return;
       }
 
@@ -88,19 +127,19 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
 
       switch (slotKey) {
         case SlotKey.Day:
-          updateSlot(SlotKey.Month, slotsPlaceHolder[SlotKey.Month]);
+          updateSlot(SlotKey.Month, slotsPlaceholder?.[SlotKey.Month] ?? '');
           setFocus(SlotKey.Month);
           return;
         case SlotKey.Year:
         case SlotKey.Month:
-          updateSlot(SlotKey.Day, slotsPlaceHolder[SlotKey.Day]);
+          updateSlot(SlotKey.Day, slotsPlaceholder?.[SlotKey.Day] ?? '');
           setFocus(SlotKey.Day);
           return;
         default:
           setFocus(getNextSlotKey(slotKey));
       }
     },
-    [tryToCompleteInput, isValidInput, setFocus, slotsPlaceHolder, updateSlot],
+    [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder],
   );
 
   const handleKeyDown = useCallback(
@@ -125,16 +164,16 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         }
 
         const clickIndex = inputRef.current.selectionStart;
-        const slotKey = getSlotKey(clickIndex);
+        const slotKey = getSlotKeyFromIndex(clickIndex);
 
         if (slotKey) {
           const value = getSlot(slotKey);
-          const { max } = SLOTS[slotKey];
+          const { max } = slotsInfo[slotKey];
 
           const numberValue = Number(value) || 0;
 
           if (e.key === 'ArrowRight') {
-            if (isAllSelected() || slotKey === SlotKey.Year) {
+            if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
               inputRef.current.selectionStart = inputRef.current.value.length;
               return;
             }
@@ -150,9 +189,9 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
           if (e.key === 'Backspace') {
             if (isAllSelected()) {
               inputRef.current.value = mask;
-              setFocus(SlotKey.Day);
+              setFocus(focusSlotKey);
             } else {
-              updateSlot(slotKey, slotsPlaceHolder[slotKey]);
+              updateSlot(slotKey, slotsPlaceholder[slotKey] ?? '');
             }
           }
 
@@ -189,24 +228,31 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
               }
             }
           }
-          onChange?.(isLikeDate() ? inputRef.current.value : '');
+          const newDate = parseDate(isLikeDate() ? inputRef.current.value : '');
+          onChange?.(newDate);
         }
       }
     },
     [
-      checkInputAndGoNext,
-      getSlot,
       inputRef,
-      isAllSelected,
-      isLikeDate,
-      mask,
-      onChange,
       readonly,
-      setFocus,
+      getSlotKeyFromIndex,
       setIsOpen,
-      slotsPlaceHolder,
       tryToCompleteInput,
+      getSlot,
+      slotsInfo,
+      isLikeDate,
+      onChange,
+      isAllSelected,
+      slotOrder,
+      setFocus,
+      getNextSlotKey,
+      getPrevSlotKey,
+      mask,
+      focusSlotKey,
       updateSlot,
+      slotsPlaceholder,
+      checkInputAndGoNext,
     ],
   );
 
@@ -214,8 +260,8 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
     if (!readonly && inputRef.current?.value === mask) {
       inputRef.current.value = '';
     }
-    focusSlotRef.current = SlotKey.Day;
-  }, [inputRef, mask, readonly]);
+    focusSlotRef.current = focusSlotKey;
+  }, [inputRef, mask, readonly, focusSlotKey]);
 
   return {
     handleKeyDown,

package/src/hooks/dateHandlers/useDateFieldHelpersForMode.ts

@@ -0,0 +1,145 @@
+import { RefObject, useCallback, useMemo } from 'react';
+
+import { MODES, NO_SECONDS_MODE, SlotKey, SLOTS, TIME_MODES } from '../../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../../types';
+import { getNextSlotKeyHandler, getPrevSlotKeyHandler, getSlotKeyFromIndexHandler } from '../../utils/dateFields';
+
+export function useDateFieldHelpersForMode({
+  inputRef,
+  mode,
+}: {
+  inputRef: RefObject<HTMLInputElement>;
+  mode: Mode | TimeMode | NoSecondsMode;
+}) {
+  const setFocus = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        const { start, end } = SLOTS[mode][slotKey];
+
+        inputRef.current.setSelectionRange(start, end);
+      }
+    },
+    [mode, inputRef],
+  );
+
+  const isAllSelected = useCallback(
+    () => inputRef.current?.value.length === inputRef.current?.selectionEnd && inputRef.current?.selectionStart === 0,
+    [inputRef],
+  );
+
+  const getSlot = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        return inputRef.current.value.slice(SLOTS[mode][slotKey].start, SLOTS[mode][slotKey].end);
+      }
+
+      return '';
+    },
+    [mode, inputRef],
+  );
+
+  const isLikeDate = useCallback(() => {
+    if (inputRef.current) {
+      return Object.keys(SLOTS[mode]).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+    }
+    return false;
+  }, [mode, getSlot, inputRef]);
+
+  const isValidInput = useCallback((): boolean => {
+    const isTimeMode = Object.values(TIME_MODES).includes(mode as TimeMode);
+
+    if (isTimeMode) {
+      return true;
+    }
+
+    const day = parseInt(getSlot(SlotKey.Day), 10);
+    const month = parseInt(getSlot(SlotKey.Month), 10);
+    const year = parseInt(getSlot(SlotKey.Year), 10);
+
+    if (!month || !day) {
+      return true;
+    }
+
+    const date = new Date(year || /* високосный год = */ 2020, month - 1, day);
+
+    return date.getDate() === day;
+  }, [getSlot, mode]);
+
+  const tryToCompleteInput = useCallback((): boolean => {
+    let isCompleted: boolean;
+
+    const parsedSlotsData = Object.keys(SLOTS[mode]).reduce(
+      (res, key) => {
+        const slotKey = key as SlotKey;
+        res[slotKey] = parseInt(getSlot(slotKey), 10);
+        return res;
+      },
+      {} as Record<SlotKey, number>,
+    );
+
+    const {
+      [SlotKey.Day]: day,
+      [SlotKey.Month]: month,
+      [SlotKey.Year]: year,
+      [SlotKey.Hours]: hours,
+      [SlotKey.Minutes]: minutes,
+      [SlotKey.Seconds]: seconds,
+    } = parsedSlotsData;
+
+    const yearSlotMeta = SLOTS[mode][SlotKey.Year];
+    const isDateCompleted = Boolean(day && month && year >= yearSlotMeta?.min && year <= yearSlotMeta?.max);
+    const isTimeCompleted = [
+      hours,
+      minutes,
+      ...(mode === MODES.DateTime || mode === TIME_MODES.FullTime ? [seconds] : []),
+    ].every(value => value !== undefined);
+
+    if (mode === MODES.DateTime || mode === NO_SECONDS_MODE) {
+      isCompleted = isDateCompleted && isTimeCompleted;
+    } else if (mode === TIME_MODES.FullTime || mode === TIME_MODES.NoSeconds) {
+      isCompleted = isTimeCompleted;
+    } else {
+      isCompleted = isDateCompleted;
+    }
+
+    if (isCompleted && inputRef.current) {
+      const lastPosition = inputRef.current?.value.length;
+      inputRef.current.selectionStart = lastPosition;
+      inputRef.current.selectionEnd = lastPosition;
+    }
+
+    return isCompleted;
+  }, [getSlot, inputRef, mode]);
+
+  const updateSlot = useCallback(
+    (slotKey: string, slotValue: number | string) => {
+      if (inputRef.current) {
+        const { start, end, max } = SLOTS[mode][slotKey];
+
+        inputRef.current.value =
+          inputRef.current.value.slice(0, start) +
+          slotValue.toString().padStart(max.toString().length, '0') +
+          inputRef.current.value.slice(end);
+        setFocus(slotKey);
+      }
+    },
+    [inputRef, setFocus, mode],
+  );
+
+  const getNextSlotKey = useMemo(() => getNextSlotKeyHandler(mode), [mode]);
+  const getPrevSlotKey = useMemo(() => getPrevSlotKeyHandler(mode), [mode]);
+  const getSlotKeyFromIndex = useMemo(() => getSlotKeyFromIndexHandler(mode), [mode]);
+
+  return {
+    isAllSelected,
+    isValidInput,
+    tryToCompleteInput,
+    getSlot,
+    updateSlot,
+    setFocus,
+    isLikeDate,
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+  };
+}

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './dateHandlers';
 export * from './useCopyButton';
 export * from './useHideButton';
 export * from './usePostfix';

package/src/hooks/useCopyButton.tsx

@@ -36,7 +36,7 @@ export function useCopyButton({
         <ButtonCopyValue
           {...props}
           size={BUTTON_SIZE_MAP[size]}
-          valueToCopy={prefix + valueToCopy + postfix}
+          valueToCopy={(prefix ?? '') + valueToCopy + (postfix ?? '')}
           onValueRequest={onValueRequest}
           disabled={disabled}
         />

package/src/{types.ts → types/allFields.ts}

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
 
-import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from '../constants';
 
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 

package/src/types/dateFields.ts

@@ -0,0 +1,14 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { MODES, NO_SECONDS_MODE, TIME_MODES } from '../constants';
+
+export type Slot = {
+  start: number;
+  end: number;
+  max: number;
+  min: number;
+};
+
+export type Mode = ValueOf<typeof MODES>;
+export type TimeMode = ValueOf<typeof TIME_MODES>;
+export type NoSecondsMode = typeof NO_SECONDS_MODE;

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';