@snack-uikit/fields 0.9.1 → 0.10.0

package/src/components/FieldDecorator/Header.tsx

@@ -18,7 +18,7 @@ export type HeaderProps = {
   size?: Size;
   /**
    * Расположение подсказки лейбла
-   * @default Tooltip.placements.Top
+   * @default top
    */
   labelTooltipPlacement?: TooltipProps['placement'];
 };
@@ -29,7 +29,7 @@ export function Header({
   labelFor,
   size,
   required = false,
-  labelTooltipPlacement = Tooltip.placements.Top,
+  labelTooltipPlacement = 'top',
 }: HeaderProps) {
   return (
     <span className={styles.header} data-size={size}>

package/src/components/FieldSecure/FieldSecure.tsx

@@ -7,13 +7,12 @@ import {
   InputPrivateProps,
   moveCursorToEnd,
   runAfterRerender,
-  Size,
+  SIZE,
   useButtonNavigation,
 } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useHideButton } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
@@ -49,7 +48,7 @@ type FieldSecureOwnProps = {
 
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 
-const ForwardedFieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
+export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
   (
     {
       id,
@@ -73,8 +72,8 @@ const ForwardedFieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       labelTooltipPlacement,
       required = false,
       hint,
-      size = Size.S,
-      validationState = ValidationState.Default,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
       prefixIcon,
       ...rest
     },
@@ -130,7 +129,7 @@ const ForwardedFieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
           validationState={validationState}
           disabled={disabled}
           readonly={readonly}
-          variant={ContainerVariant.SingleLine}
+          variant={CONTAINER_VARIANT.SingleLine}
           inputRef={localRef}
           prefix={prefixIcon}
           postfix={buttons}
@@ -147,7 +146,7 @@ const ForwardedFieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
             placeholder={placeholder}
             disabled={disabled}
             readonly={readonly}
-            type={hidden ? InputPrivate.types.Password : InputPrivate.types.Text}
+            type={hidden ? 'password' : 'text'}
             maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
             id={id}
             name={name}
@@ -158,13 +157,3 @@ const ForwardedFieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
     );
   },
 );
-
-export const FieldSecure = ForwardedFieldSecure as typeof ForwardedFieldSecure & {
-  sizes: typeof Size;
-  validationStates: typeof ValidationState;
-  labelTooltipPlacements: typeof Tooltip.placements;
-};
-
-FieldSecure.sizes = Size;
-FieldSecure.validationStates = ValidationState;
-FieldSecure.labelTooltipPlacements = Tooltip.placements;

package/src/components/FieldSelect/FieldSelect.tsx

@@ -1,41 +1,26 @@
 import { forwardRef } from 'react';
 
-import { Size } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
-
-import { ValidationState } from '../../constants';
+import { SELECTION_MODE } from './constants';
 import { FieldSelectMulti } from './FieldSelectMulti';
 import { FieldSelectSingle } from './FieldSelectSingle';
-import { FieldSelectMultiProps, FieldSelectSingleProps, SelectionMode } from './types';
+import { FieldSelectMultiProps, FieldSelectSingleProps } from './types';
 
 export type FieldSelectProps =
   | ({
-      selectionMode?: SelectionMode.Single;
+      selectionMode?: typeof SELECTION_MODE.Single;
     } & FieldSelectSingleProps)
   | ({
-      selectionMode: SelectionMode.Multi;
+      selectionMode: typeof SELECTION_MODE.Multi;
     } & FieldSelectMultiProps);
 
-const ForwardedFieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(
-  ({ selectionMode = SelectionMode.Single, ...props }, ref) => {
+export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(
+  ({ selectionMode = SELECTION_MODE.Single, ...props }, ref) => {
     switch (selectionMode) {
-      case SelectionMode.Multi:
+      case SELECTION_MODE.Multi:
         return <FieldSelectMulti {...(props as FieldSelectMultiProps)} ref={ref} />;
-      case SelectionMode.Single:
+      case SELECTION_MODE.Single:
       default:
         return <FieldSelectSingle {...(props as FieldSelectSingleProps)} ref={ref} />;
     }
   },
 );
-
-export const FieldSelect = ForwardedFieldSelect as typeof ForwardedFieldSelect & {
-  sizes: typeof Size;
-  validationStates: typeof ValidationState;
-  selectionModes: typeof SelectionMode;
-  labelTooltipPlacements: typeof Tooltip.placements;
-};
-
-FieldSelect.sizes = Size;
-FieldSelect.validationStates = ValidationState;
-FieldSelect.selectionModes = SelectionMode;
-FieldSelect.labelTooltipPlacements = Tooltip.placements;

package/src/components/FieldSelect/FieldSelectBase.tsx

@@ -10,17 +10,18 @@ import {
 } from 'react';
 
 import { Droplist } from '@snack-uikit/droplist';
-import { InputPrivate, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { useHandlers } from '../FieldDate/hooks/useHandlers';
 import { FieldDecorator } from '../FieldDecorator';
+import { SELECTION_MODE } from './constants';
 import { getArrowIcon } from './helpers';
 import styles from './styles.module.scss';
-import { ExtendedOption, FieldSelectBaseProps, Option, SelectionMode } from './types';
+import { ExtendedOption, FieldSelectBaseProps, Option } from './types';
 
 type BaseProps = Omit<FieldSelectBaseProps, 'open' | 'onOpenChange' | 'options'> &
   Required<Pick<FieldSelectBaseProps, 'open' | 'onOpenChange'>> & {
@@ -39,17 +40,17 @@ type BaseProps = Omit<FieldSelectBaseProps, 'open' | 'onOpenChange' | 'options'>
     copyButtonRef: RefObject<HTMLButtonElement>;
     onClick?: MouseEventHandler<HTMLElement>;
     onContainerPrivateMouseDown?: MouseEventHandler<HTMLElement>;
-    onDroplistFocusLeave: (direction: string) => void;
+    onDroplistFocusLeave(direction: string): void;
     firstDroplistItemRefCallback: RefCallback<HTMLButtonElement>;
   };
 
 type Props =
   | ({
-      selectionMode: SelectionMode.Single;
+      selectionMode: typeof SELECTION_MODE.Single;
       selected: Option;
     } & BaseProps)
   | ({
-      selectionMode: SelectionMode.Multi;
+      selectionMode: typeof SELECTION_MODE.Multi;
       selected: Option[];
     } & BaseProps);
 
@@ -89,8 +90,8 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
       required = false,
       hint,
       showHintIcon,
-      size = Size.S,
-      validationState = ValidationState.Default,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
       prefixIcon,
       locale,
       noDataText = locale?.language === 'ru' ? 'Нет данных' : 'No data',
@@ -101,7 +102,7 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
     ref,
   ) => {
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-    const Item = selectionMode === SelectionMode.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
+    const Item = selectionMode === SELECTION_MODE.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
 
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
@@ -147,10 +148,10 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
         {...extractSupportProps(rest)}
       >
         <Droplist
-          trigger={Droplist.triggers.Click}
+          trigger='click'
           triggerClassName={styles.triggerClassName}
           triggerClickByKeys={!searchable}
-          placement={Droplist.placements.Bottom}
+          placement='bottom'
           onFocusLeave={onFocusLeaveHandler}
           firstElementRefCallback={firstDroplistItemRefCallback}
           data-test-id='field-select__list'
@@ -162,7 +163,7 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
               validationState={validationState}
               disabled={disabled}
               readonly={readonly}
-              variant={ContainerVariant.SingleLine}
+              variant={CONTAINER_VARIANT.SingleLine}
               focused={open}
               selectable={!searchable}
               inputRef={localRef}
@@ -178,7 +179,7 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
               <InputPrivate
                 id={id}
                 name={name}
-                type={InputPrivate.types.Text}
+                type='text'
                 placeholder={placeholder}
                 ref={mergeRefs(ref, localRef)}
                 onFocus={onFocus}

package/src/components/FieldSelect/FieldSelectMulti.tsx

@@ -1,11 +1,11 @@
 import { FocusEventHandler, forwardRef, MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { DEFAULT_LOCALE } from './constants';
+import { DEFAULT_LOCALE, SELECTION_MODE } from './constants';
 import { FieldSelectBase } from './FieldSelectBase';
 import { getDisplayedValue } from './helpers';
 import { useList } from './hooks';
-import { FieldSelectMultiProps, Option, SelectionMode } from './types';
+import { FieldSelectMultiProps, Option } from './types';
 
 export const FieldSelectMulti = forwardRef<HTMLInputElement, FieldSelectMultiProps>(
   (
@@ -28,7 +28,7 @@ export const FieldSelectMulti = forwardRef<HTMLInputElement, FieldSelectMultiPro
     },
     ref,
   ) => {
-    const selectionMode = SelectionMode.Multi;
+    const selectionMode = SELECTION_MODE.Multi;
     const [value, setValue] = useUncontrolledProp(valueProp, [], onChange);
     const selected = useMemo(() => options.filter(option => value?.includes(option.value)), [options, value]);
     const displayedValue = getDisplayedValue({ selectionMode, selected, getSelectedItemsText });

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -3,11 +3,11 @@ import { useUncontrolledProp } from 'uncontrollable';
 
 import { selectAll } from '@snack-uikit/input-private';
 
-import { DEFAULT_LOCALE, EMPTY_OPTION } from './constants';
+import { DEFAULT_LOCALE, EMPTY_OPTION, SELECTION_MODE } from './constants';
 import { FieldSelectBase } from './FieldSelectBase';
 import { getDisplayedValue } from './helpers';
 import { useList } from './hooks';
-import { FieldSelectSingleProps, Option, SelectionMode } from './types';
+import { FieldSelectSingleProps, Option } from './types';
 
 export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>(
   (
@@ -27,7 +27,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     },
     ref,
   ) => {
-    const selectionMode = SelectionMode.Single;
+    const selectionMode = SELECTION_MODE.Single;
     const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
     const selected = useMemo(() => options.find(option => option.value === value) ?? EMPTY_OPTION, [options, value]);
     const displayedValue = getDisplayedValue({ selectionMode, selected });

package/src/components/FieldSelect/constants.ts

@@ -2,3 +2,8 @@ import { Option } from './types';
 
 export const EMPTY_OPTION: Option = { value: '', label: '' };
 export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multi: 'multi',
+} as const;

package/src/components/FieldSelect/helpers/getArrowIcon.ts

@@ -1,6 +1,9 @@
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { IconSize, Size } from '@snack-uikit/input-private';
+import { ICON_SIZE, SIZE, Size } from '@snack-uikit/input-private';
 
 export function getArrowIcon({ size, open }: { size: Size; open: boolean }) {
-  return { ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG, arrowIconSize: size === Size.S ? IconSize.Xs : IconSize.S };
+  return {
+    ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
+    arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
+  };
 }

package/src/components/FieldSelect/helpers/getDisplayedValue.ts

@@ -1,11 +1,12 @@
-import { Option, SelectionMode } from '../types';
+import { SELECTION_MODE } from '../constants';
+import { Option } from '../types';
 
 export const getDisplayedValue = (
   props:
-    | { selectionMode: SelectionMode.Single; selected: Option }
-    | { selectionMode: SelectionMode.Multi; selected: Option[]; getSelectedItemsText(amount: number): string },
+    | { selectionMode: typeof SELECTION_MODE.Single; selected: Option }
+    | { selectionMode: typeof SELECTION_MODE.Multi; selected: Option[]; getSelectedItemsText(amount: number): string },
 ) => {
-  if (props.selectionMode === SelectionMode.Single) {
+  if (props.selectionMode === SELECTION_MODE.Single) {
     return props.selected.label;
   }
 

package/src/components/FieldSelect/types.ts

@@ -6,11 +6,6 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { FieldDecoratorProps } from '../FieldDecorator';
 
-export enum SelectionMode {
-  Single = 'single',
-  Multi = 'multi',
-}
-
 export type Option = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar' | 'disabled'> & {
   value: string;
   label: string;

package/src/components/FieldText/FieldText.tsx

@@ -2,11 +2,10 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, ReactElement, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { InputPrivate, InputPrivateProps, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { InputPrivate, InputPrivateProps, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
@@ -38,7 +37,7 @@ type FieldTextOwnProps = {
 
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 
-const ForwardedFieldText = forwardRef<HTMLInputElement, FieldTextProps>(
+export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
   (
     {
       id,
@@ -60,8 +59,8 @@ const ForwardedFieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       required = false,
       hint,
       showHintIcon,
-      size = Size.S,
-      validationState = ValidationState.Default,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
       prefixIcon,
       ...rest
     },
@@ -114,7 +113,7 @@ const ForwardedFieldText = forwardRef<HTMLInputElement, FieldTextProps>(
           validationState={validationState}
           disabled={disabled}
           readonly={readonly}
-          variant={ContainerVariant.SingleLine}
+          variant={CONTAINER_VARIANT.SingleLine}
           inputRef={localRef}
           prefix={prefixIcon}
           postfix={buttons}
@@ -131,7 +130,7 @@ const ForwardedFieldText = forwardRef<HTMLInputElement, FieldTextProps>(
             placeholder={placeholder}
             disabled={disabled}
             readonly={readonly}
-            type={InputPrivate.types.Text}
+            type='text'
             maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
             id={id}
             name={name}
@@ -142,13 +141,3 @@ const ForwardedFieldText = forwardRef<HTMLInputElement, FieldTextProps>(
     );
   },
 );
-
-export const FieldText = ForwardedFieldText as typeof ForwardedFieldText & {
-  sizes: typeof Size;
-  validationStates: typeof ValidationState;
-  labelTooltipPlacements: typeof Tooltip.placements;
-};
-
-FieldText.sizes = Size;
-FieldText.validationStates = ValidationState;
-FieldText.labelTooltipPlacements = Tooltip.placements;

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -2,12 +2,11 @@ import mergeRefs from 'merge-refs';
 import { ChangeEvent, forwardRef, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { Scroll } from '@snack-uikit/scroll';
-import { Tooltip } from '@snack-uikit/tooltip';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate, TextArea, TextAreaProps } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
@@ -44,7 +43,7 @@ type FieldTextAreaOwnProps = {
 
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 
-const ForwardedFieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>(
+export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>(
   (
     {
       id,
@@ -68,8 +67,8 @@ const ForwardedFieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProp
       labelTooltipPlacement,
       required = false,
       hint,
-      size = Size.S,
-      validationState = ValidationState.Default,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
       ...rest
     },
     ref,
@@ -123,16 +122,16 @@ const ForwardedFieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProp
           disabled={disabled}
           readonly={readonly}
           data-resizable={isResizable || undefined}
-          variant={ContainerVariant.MultiLine}
+          variant={CONTAINER_VARIANT.MultiLine}
           style={{ '--max-rows': maxRows }}
           inputRef={localRef}
           postfix={<span className={styles.postfix}>{buttons}</span>}
         >
           <Scroll
             className={styles.scrollContainer}
-            size={Scroll.sizes.S}
-            barHideStrategy={Scroll.barHideStrategies.Never}
-            resize={isResizable ? Scroll.resizes.Vertical : Scroll.resizes.None}
+            size='s'
+            barHideStrategy='never'
+            resize={isResizable ? 'vertical' : 'none'}
             data-test-id='field-textarea__scroll-area'
           >
             <TextArea
@@ -159,13 +158,3 @@ const ForwardedFieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProp
     );
   },
 );
-
-export const FieldTextArea = ForwardedFieldTextArea as typeof ForwardedFieldTextArea & {
-  sizes: typeof Size;
-  validationStates: typeof ValidationState;
-  labelTooltipPlacements: typeof Tooltip.placements;
-};
-
-FieldTextArea.sizes = Size;
-FieldTextArea.validationStates = ValidationState;
-FieldTextArea.labelTooltipPlacements = Tooltip.placements;

package/src/constants.ts

@@ -1,11 +1,11 @@
-export enum ValidationState {
-  Default = 'default',
-  Error = 'error',
-  Warning = 'warning',
-  Success = 'success',
-}
+export const VALIDATION_STATE = {
+  Default: 'default',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'success',
+} as const;
 
-export enum ContainerVariant {
-  SingleLine = 'single-line-container',
-  MultiLine = 'multi-line-container',
-}
+export const CONTAINER_VARIANT = {
+  SingleLine: 'single-line-container',
+  MultiLine: 'multi-line-container',
+} as const;

package/src/helperComponents/ButtonCopyValue/helpers.tsx

@@ -1,5 +1,5 @@
 import { CheckSVG, CopySVG } from '@snack-uikit/icons';
-import { ButtonSize } from '@snack-uikit/input-private';
+import { BUTTON_SIZE, ButtonSize } from '@snack-uikit/input-private';
 
 type GetIconProps = {
   size: ButtonSize;
@@ -8,10 +8,10 @@ type GetIconProps = {
 
 export function getIcon({ size, isChecked }: GetIconProps) {
   switch (size) {
-    case ButtonSize.S: {
+    case BUTTON_SIZE.S: {
       return isChecked ? <CheckSVG size={16} /> : <CopySVG size={16} />;
     }
-    case ButtonSize.M:
+    case BUTTON_SIZE.M:
     default: {
       return isChecked ? <CheckSVG size={24} /> : <CopySVG size={24} />;
     }

package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, KeyboardEventHandler, MouseEventHandler } from 'react';
 
 import { EyeClosedSVG, EyeSVG } from '@snack-uikit/icons';
-import { ButtonSize } from '@snack-uikit/input-private';
+import { BUTTON_SIZE, ButtonSize } from '@snack-uikit/input-private';
 
 import styles from './styles.module.scss';
 
@@ -40,13 +40,13 @@ export const ButtonHideValue = forwardRef<HTMLButtonElement, ButtonHideValueProp
       >
         {hidden ? (
           <>
-            {size === ButtonSize.S && <EyeClosedSVG size={16} />}
-            {size === ButtonSize.M && <EyeClosedSVG />}
+            {size === BUTTON_SIZE.S && <EyeClosedSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeClosedSVG />}
           </>
         ) : (
           <>
-            {size === ButtonSize.S && <EyeSVG size={16} />}
-            {size === ButtonSize.M && <EyeSVG />}
+            {size === BUTTON_SIZE.S && <EyeSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeSVG />}
           </>
         )}
       </button>

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -4,7 +4,8 @@ import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, RefObject }
 import { Size } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContainerVariant, ValidationState } from '../../constants';
+import { VALIDATION_STATE } from '../../constants';
+import { ContainerVariant, ValidationState } from '../../types';
 import styles from './styles.module.scss';
 
 export type FieldContainerPrivateProps = WithSupportProps<{
@@ -53,7 +54,7 @@ export function FieldContainerPrivate({
       className={cn(className, styles.container)}
       style={style}
       data-size={size}
-      data-validation={disabled || readonly ? ValidationState.Default : validationState}
+      data-validation={disabled || readonly ? VALIDATION_STATE.Default : validationState}
       data-variant={variant}
       data-disabled={disabled || undefined}
       data-readonly={readonly || undefined}

package/src/types.ts

@@ -0,0 +1,7 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+
+export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
+
+export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;