@cloud-ru/ds-fields 1.0.0

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

@@ -0,0 +1,409 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm', 'l';
+
+.materialLayer {
+  @include m.with-material('acrylic', #{acrylicBg});
+
+  width: 100%;
+  height: 100%;
+}
+
+.acrylicBg {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.borderStateLayer {
+  width: 100%;
+  height: 100%;
+}
+
+.lineWrapper {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+
+.backgroundWrapper {
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin borderRadius($size) {
+  $borderTopLeftRadius: base.simple-var(
+    field.$field,
+    'anatomy',
+    'size',
+    $size,
+    'fieldContainer',
+    'border-top-left-radius'
+  );
+  $borderTopRightRadius: base.simple-var(
+    field.$field,
+    'anatomy',
+    'size',
+    $size,
+    'fieldContainer',
+    'border-top-right-radius'
+  );
+  $borderBottomRightRadius: base.simple-var(
+    field.$field,
+    'anatomy',
+    'size',
+    $size,
+    'fieldContainer',
+    'border-bottom-right-radius'
+  );
+  $borderBottomLeftRadius: base.simple-var(
+    field.$field,
+    'anatomy',
+    'size',
+    $size,
+    'fieldContainer',
+    'border-bottom-left-radius'
+  );
+
+  border-radius: $borderTopLeftRadius $borderTopRightRadius $borderBottomRightRadius $borderBottomLeftRadius;
+}
+
+.focusLayer {
+  position: absolute;
+  inset: 0;
+
+  display: none;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: field.$sn-field-effect-focusedFrame-opacity;
+  outline: base.$sn-brand-anatomy-focusLine-field-strokeWeight solid base.$sn-theme-color-primary-accent;
+  outline-offset: 0;
+}
+
+.fieldWrapper[data-validation-state='error'] .focusLayer {
+  outline-color: base.$sn-theme-color-red-accent;
+}
+
+.fieldWrapper[data-validation-state='warning'] .focusLayer {
+  outline-color: base.$sn-theme-color-yellow-accent;
+}
+
+.fieldWrapper[data-validation-state='warning'] {
+  background-color: base.$sn-theme-color-yellow-background;
+}
+
+.fieldWrapper[data-validation-state='success'] .focusLayer {
+  outline-color: base.$sn-theme-color-green-accent;
+}
+
+.fieldInput {
+  flex: 1 1 0;
+  align-self: stretch;
+  min-width: 0;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  &::placeholder {
+    color: base.$sn-theme-color-available-version-textDisabled;
+    opacity: 1;
+  }
+
+  // Figma-паритет: у disabled-вариантов полей слой placeholder отсутствует (disabled+empty
+  // не рендерит текст-подсказку). Прячем placeholder целиком, как в @cloud-ru/ds-search — единый паттерн
+  // disabled в DS. Иначе на `.fieldWrapper` с opacity 0.4 поверх textDisabled (α 0.4) он остаётся
+  // бледным «призраком».
+  &:disabled::placeholder {
+    visibility: hidden;
+  }
+}
+
+.clearButtonSlot,
+.postfixButtonsSlot {
+  display: flex;
+  gap: base.$sn-primitive-dimension-2;
+  align-items: center;
+  justify-content: center;
+}
+
+.inputLine {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  min-width: 0;
+}
+
+.prefix,
+.postfix {
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.postfix {
+  text-align: right;
+}
+
+.inputArea {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  min-width: 0;
+}
+
+.iconSlot {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.contentWrapper {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+}
+
+.elementWrapperBefore,
+.elementWrapperAfter {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  align-self: stretch;
+
+  // Droplist оборачивает кнопку-слот в trigger-span (block, естественная высота) —
+  // растягиваем обёртку и кнопку на всю высоту сегмента, чтобы statelayer
+  // заливал buttonField до рамки поля (Figma: fill flush к border).
+  > * {
+    display: flex;
+    align-items: stretch;
+  }
+}
+
+.fieldWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  // Сегментные слоты `elementBefore` / `elementAfter` — это вертикальные сегменты слева/справа
+  // от поля (между сегментом и инпутом стоит вертикальный `<Divider>`), поэтому при их наличии
+  // раскладка обёртки — строка, а не колонка. Без сегментов column безвреден: in-flow ребёнок
+  // только `fieldContainer` (backgroundWrapper — absolute), и направление оси не влияет.
+  &:has(> .elementWrapperBefore),
+  &:has(> .elementWrapperAfter) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  @include m.has-state-layer-as-child(#{borderStateLayer});
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .lineWrapper {
+        display: none;
+        width: 0;
+        padding: base.simple-var(field.$field, 'anatomy', 'size', $size, 'elementWrapper', 'lineWrapper', 'padding')
+          0;
+      }
+
+      .focusLayer {
+        @include borderRadius($size);
+      }
+
+      .borderStateLayer,
+      .materialLayer {
+        @include borderRadius($size);
+      }
+
+      .fieldContainer {
+        $paddingTop: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-top');
+        $paddingRight: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-right');
+        $paddingBottom: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-bottom');
+        $paddingLeft: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-left');
+
+        min-height: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'min-height');
+        padding: $paddingTop $paddingRight $paddingBottom $paddingLeft;
+      }
+
+      .inputLine {
+        @include base.composite-var(
+          field.$field,
+          'anatomy',
+          'size',
+          $size,
+          'fieldContainer',
+          'contentWrapper',
+          'inputLine'
+        );
+      }
+
+      .prefix,
+      .postfix,
+      .fieldInput {
+        @include base.composite-var(base.$sn-regular, 'body', $size);
+      }
+
+      .iconSlot {
+        max-height: base.simple-var(
+          field.$field,
+          'anatomy',
+          'size',
+          $size,
+          'fieldContainer',
+          'centeredWrapper',
+          'max-height'
+        );
+
+        // Иконки полей (iconBefore/iconAfter + декоративные chevron/calendar/watch) масштабируются
+        // по размеру поля: s → icon-xs (16), m/l → icon-s (24). max-* (а не width/height) — тот же
+        // приём, что в @cloud-ru/ds-button: @cloud-ru/ds-icons задают инлайн `style="width:24"`, который перебивает
+        // обычный width, но не max-width, поэтому svg клампится к нужному размеру без JS-пропа.
+        svg {
+          $iconSlotSize: base.$sn-density-size-icon-s;
+
+          @if $size == 's' {
+            $iconSlotSize: base.$sn-density-size-icon-xs;
+          }
+
+          max-width: $iconSlotSize;
+          max-height: $iconSlotSize;
+        }
+      }
+
+      .clearButtonSlot,
+      .postfixButtonsSlot {
+        // Кнопки clear/copy — иконный квадрат (паритет с легаси ButtonClearValue: 16px при s,
+        // 24px при m/l), а не полноразмерная function-кнопка 32px. Те же icon-токены, что у .iconSlot.
+        // @cloud-ru/ds-button читает min-height и iconOnly-minWidth через var() (figma-variables
+        // button.module.scss) — локальный override сжимает кнопку до иконного квадрата без
+        // правки @cloud-ru/ds-button. BUTTON_SIZE_MAP (@cloud-ru/ds-input-private): field s → button s, m/l → m.
+        $iconSquare: base.$sn-density-size-icon-s;
+        $btnSize: 'm';
+
+        @if $size == 's' {
+          $iconSquare: base.$sn-density-size-icon-xs;
+          $btnSize: 's';
+        }
+
+        --sn-button-anatomy-size-#{$btnSize}-container-minHeight: #{$iconSquare};
+        --sn-button-anatomy-size-#{$btnSize}-container-iconOnly-minWidth: #{$iconSquare};
+
+        max-width: $iconSquare;
+        max-height: $iconSquare;
+
+        // Иконки @cloud-ru/ds-icons инлайнят style width:24 — без max-* кнопка при field s не сожмётся до 16.
+        svg {
+          max-width: $iconSquare;
+          max-height: $iconSquare;
+        }
+      }
+
+      &[data-withbackground='true'] {
+        .backgroundWrapper {
+          @include borderRadius($size);
+
+          display: initial;
+        }
+
+        .lineWrapper {
+          &[data-outline='true'] {
+            display: initial;
+          }
+        }
+
+        [data-acrylic-background] {
+          @include borderRadius($size);
+        }
+
+        &:not([data-disabled='true'])[data-focusvisible='true'] {
+          .focusLayer {
+            display: initial;
+          }
+
+          // Внутренний бордер поля по фокусу — accent (Figma: fieldWrapper stroke, 1px, full opacity).
+          // Дефолт → primary-accent; error/warning/success → цвет accent'а валидации
+          // (перекрытия — сразу после size-цикла, на равной специфичности по порядку источника).
+          & > .backgroundWrapper > .borderStateLayer[data-state='borderOnBackground'] {
+            border-color: base.$sn-theme-color-primary-accent;
+            border-width: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'width');
+          }
+        }
+      }
+    }
+  }
+
+  // Состояния валидации сигнализируются тонировкой acrylic-фона (см. getAcrylicProps) + цветом
+  // подсказки/иконки в FieldDecorator. В ПОКОЕ бордер нейтральный (паритет с Figma). По ФОКУСУ
+  // внутренний бордер перекрашивается в accent валидации — правила ниже, после readonly-блока
+  // (порядок источника + no-descending-specificity).
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+
+  &[data-readonly='true']:not([data-disabled='true']) {
+    cursor: default;
+
+    .fieldInput {
+      color: base.$sn-theme-color-available-version-textTertiary;
+    }
+
+    &:active {
+      .borderStateLayer[data-state='borderOnBackground'] {
+        border-color: base.$sn-theme-color-material-stateLayer-neutral-border-default-borderColor;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        .borderStateLayer[data-state='borderOnBackground'] {
+          border-color: base.$sn-theme-color-material-stateLayer-neutral-border-default-borderColor;
+        }
+      }
+    }
+  }
+
+  // Внутренний бордер по фокусу в состояниях валидации — accent валидации (Figma: focused-вариант,
+  // fieldWrapper stroke = red/yellow/green-accent, 1px, full opacity). Идёт последним среди правил
+  // `.borderStateLayer[data-state='borderOnBackground']` — перекрывает primary-accent из size-цикла по
+  // порядку источника и не нарушает no-descending-specificity. `:not([data-disabled])` держит
+  // специфичность вровень с in-loop-правилом фокуса.
+  &[data-withbackground='true'][data-focusvisible='true'][data-validation-state='error']:not([data-disabled='true'])
+    > .backgroundWrapper
+    > .borderStateLayer[data-state='borderOnBackground'] {
+    border-color: base.$sn-theme-color-red-accent;
+  }
+
+  &[data-withbackground='true'][data-focusvisible='true'][data-validation-state='warning']:not([data-disabled='true'])
+    > .backgroundWrapper
+    > .borderStateLayer[data-state='borderOnBackground'] {
+    border-color: base.$sn-theme-color-yellow-accent;
+  }
+
+  &[data-withbackground='true'][data-focusvisible='true'][data-validation-state='success']:not([data-disabled='true'])
+    > .backgroundWrapper
+    > .borderStateLayer[data-state='borderOnBackground'] {
+    border-color: base.$sn-theme-color-green-accent;
+  }
+}
+
+.fieldContainer {
+  position: relative;
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  min-width: 0;
+}

package/src/components/shared/utils.ts

@@ -0,0 +1,128 @@
+import { SIZE, Size, VALIDATION_STATE, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { BUTTON_SIZE_MAP, ButtonSize, Size as InputPrivateSize } from '@cloud-ru/ds-input-private';
+import { copyToClipboard, isBrowser } from '@cloud-ru/ds-utils';
+import { MouseEvent } from 'react';
+
+/**
+ * Копирует текст в буфер обмена (через `copyToClipboard` из `@cloud-ru/ds-utils`). Резолвится в `true`
+ * при успехе — поля используют это, чтобы показать индикатор «скопировано».
+ */
+export function copyTextToClipboard(text: string): Promise<boolean> {
+  if (!isBrowser() || text.length === 0) {
+    return Promise.resolve(false);
+  }
+
+  return copyToClipboard(text);
+}
+
+/**
+ * Курсор в начале строки ввода (нет выделения, обе границы на позиции 0). Используется
+ * полями (`FieldCombo`, `FieldSecure`) для перевода ArrowLeft в левый слот, когда дальше
+ * влево по тексту двигаться некуда.
+ */
+export const isCursorAtStart = (el: HTMLInputElement | null): boolean =>
+  Boolean(el && el.selectionStart === 0 && el.selectionEnd === 0);
+
+/**
+ * Курсор в конце строки ввода (нет выделения, обе границы на длине значения). Используется
+ * полями для перевода ArrowRight в правый слот, когда дальше вправо по тексту двигаться некуда.
+ */
+export const isCursorAtEnd = (el: HTMLInputElement | null): boolean =>
+  Boolean(el && el.selectionStart === el.value.length && el.selectionEnd === el.value.length);
+
+type AcrylicLevel = 'default' | '1Level' | '2Level';
+
+type AcrylicAppearance = 'neutral' | 'red' | 'yellow' | 'green';
+
+type AcrylicParams = {
+  validationState?: ValidationState;
+  disabled?: boolean;
+  readonly?: boolean;
+  hover?: boolean;
+  focusVisible?: boolean;
+};
+
+const VALIDATION_ACRYLIC_APPEARANCE: Partial<Record<ValidationState, AcrylicAppearance>> = {
+  [VALIDATION_STATE.Error]: 'red',
+  [VALIDATION_STATE.Warning]: 'yellow',
+  [VALIDATION_STATE.Success]: 'green',
+};
+
+function isColoredValidation(validationState?: ValidationState): boolean {
+  return Boolean(validationState && VALIDATION_ACRYLIC_APPEARANCE[validationState]);
+}
+
+/**
+ * Appearance acrylic-фона поля. Тонируется по состоянию валидации (Figma: error→red,
+ * warning→yellow, success→green; valid/default — нейтральный фон). На неактивном поле
+ * (disabled/readonly) тонировка снимается — фон нейтральный.
+ */
+export function getAcrylicAppearance({ validationState, disabled, readonly }: AcrylicParams): AcrylicAppearance {
+  if (disabled || readonly) {
+    return 'neutral';
+  }
+
+  return (validationState && VALIDATION_ACRYLIC_APPEARANCE[validationState]) || 'neutral';
+}
+
+/**
+ * Уровень acrylic-фона поля. `default` для disabled/readonly и для покоя тонированных
+ * (error/warning/success) состояний (red/green/yellow background по Figma); `2Level` на
+ * hover/focus; `1Level` для нейтрального поля в покое.
+ */
+export function getAcrylicLevel({
+  validationState,
+  disabled,
+  readonly,
+  hover,
+  focusVisible,
+}: AcrylicParams): AcrylicLevel {
+  if (disabled || readonly) {
+    return 'default';
+  }
+
+  if (hover || focusVisible) {
+    return '2Level';
+  }
+
+  return isColoredValidation(validationState) ? 'default' : '1Level';
+}
+
+/**
+ * data-* атрибуты acrylic-материала поля (appearance + level) одним объектом для spread
+ * на materialLayer — единый источник тонировки фона по валидации для всех полей shell.
+ */
+export function getAcrylicProps(params: AcrylicParams) {
+  return {
+    'data-acrylic-appearance': getAcrylicAppearance(params),
+    'data-acrylic-level': getAcrylicLevel(params),
+  };
+}
+
+/**
+ * Гасит mousedown на слот-обёртке функциональной кнопки (clear/copy): фокус остаётся в input.
+ * Статический обработчик, общий для полей со слотами (`FieldDate`, `FieldSelect`).
+ */
+export const preventSlotMouseDown = (event: MouseEvent<HTMLSpanElement>): void => event.preventDefault();
+
+/**
+ * Гасит click на слот-обёртке: не доходит до триггера, чтобы клик по кнопке не
+ * тогглил dropdown/calendar. Общий статический обработчик для полей со слотами.
+ */
+export const stopSlotClickPropagation = (event: MouseEvent<HTMLSpanElement>): void => event.stopPropagation();
+
+/**
+ * Размер поля → размер `InputPrivate`. Оси `'s' | 'm' | 'l'` совпадают, маппинг тождественный —
+ * хелпер убирает инлайн-касты `size as InputPrivateSize` из реализаций полей.
+ */
+export function toInputSize(size: Size = SIZE.M): InputPrivateSize {
+  return size;
+}
+
+/**
+ * Размер поля → размер кнопки-слота. У кнопок нет `l`, поэтому `l` сводится к `m`
+ * через `BUTTON_SIZE_MAP` (паритет с input-private), а не приводится небезопасным кастом.
+ */
+export function toButtonSize(size: Size = SIZE.M): ButtonSize {
+  return BUTTON_SIZE_MAP[size];
+}

package/src/constants.ts

@@ -0,0 +1,73 @@
+export const TEST_IDS = {
+  fieldDecorator: 'field-decorator',
+  fieldDecoratorLabel: 'field-decorator__label',
+  fieldDecoratorRequired: 'field-decorator__required-sign',
+  fieldDecoratorLabelTooltip: 'field-decorator__label-tooltip',
+  fieldDecoratorCaption: 'field-decorator__caption',
+  fieldDecoratorHint: 'field-decorator__hint',
+  fieldDecoratorCounter: 'field-decorator__counter',
+  fieldCombo: 'field-combo',
+  fieldComboInput: 'field-combo__input',
+  fieldComboElementButton: 'field-combo__element-button',
+  // Внутренняя оболочка (`fieldWrapper`): несёт effectiveValidationState (error форсит 'error'),
+  // тогда как корень с публичным data-test-id хранит RAW `validationState`.
+  fieldComboShell: 'field-combo__shell',
+  fieldText: 'field-text',
+  fieldTextInput: 'field-text__input',
+  fieldTextShell: 'field-text__shell',
+  // Кнопка копирования общая для всех полей (дефолт `useCopyButton`).
+  fieldTextCopyButton: 'button-copy-value',
+  fieldSecure: 'field-secure',
+  fieldSecureInput: 'field-secure__input',
+  fieldSecureHideButton: 'button-toggle-hidden',
+  fieldSecureShell: 'field-secure__shell',
+  // Skeleton, заменяющий input во время async-загрузки значения (asyncValueGetter).
+  fieldSecureSkeleton: 'field-secure__skeleton',
+  fieldTextArea: 'field-textarea',
+  fieldTextAreaInput: 'field-textarea__input',
+  fieldTextAreaScrollArea: 'field-textarea__scroll-area',
+  fieldTextAreaShell: 'field-textarea__shell',
+  fieldStepper: 'field-stepper',
+  fieldStepperInput: 'field-stepper__input',
+  fieldStepperMinus: 'field-stepper__minus-button',
+  fieldStepperPlus: 'field-stepper__plus-button',
+  fieldStepperCopyButton: 'field-stepper__copy-button',
+  fieldStepperLimitTooltip: 'field-stepper__limit-tooltip',
+  fieldSlider: 'field-slider',
+  fieldSliderInput: 'field-slider__input',
+  fieldSliderCopyButton: 'field-slider__copy-button',
+  fieldSliderHandle: 'field-slider__slider',
+  // Внутренняя оболочка слайдера: на ней живут data-validation-state / disabled / readonly /
+  // withbackground / focusvisible (корень с data-test-id их не несёт).
+  fieldSliderField: 'field-slider__field',
+  fieldSelect: 'field-select',
+  fieldSelectChips: 'field-select__chips',
+  fieldSelectInput: 'field-select__input',
+  fieldSelectClear: 'field-select__clear',
+  fieldSelectCopy: 'field-select__copy',
+  fieldDate: 'field-date',
+  fieldDateInput: 'field-date__input',
+  fieldDateInputFrom: 'field-date__input-from',
+  fieldDateInputTo: 'field-date__input-to',
+  fieldDateClear: 'field-date__clear',
+  fieldDateCopy: 'field-date__copy',
+  fieldDateCalendar: 'field-date__calendar',
+  // CalendarDropdown (@cloud-ru/ds-calendar) тегирует контент открытого календаря только когда ему передан
+  // `data-test-id` (его билдер строит контент-узел как `content-<id>`). FieldDate проставляет этот id,
+  // чтобы портальный календарь был адресуем в e2e/visual; реальный узел контента — `content-field-date__calendar-dropdown`.
+  fieldDateCalendarDropdown: 'field-date__calendar-dropdown',
+  fieldColor: 'field-color',
+  fieldColorInput: 'field-color__input',
+  fieldColorSwatch: 'field-color__swatch',
+  fieldColorChevron: 'field-color__chevron',
+  // ColorPicker (@cloud-ru/ds-color-picker) тегирует свой корень только переданным data-test-id
+  // (root рендерит `{...extractSupportProps(rest)}`). FieldColor проставляет этот id, чтобы
+  // открытая палитра была адресуема в play/e2e.
+  fieldColorPicker: 'field-color__picker',
+  fieldColorSheetTitle: 'field-color__sheet-title',
+  fieldColorCancel: 'field-color__cancel',
+  fieldColorApply: 'field-color__apply',
+  fieldTime: 'field-time',
+  fieldTimeInput: 'field-time__input',
+  fieldTimeIcon: 'field-time__icon',
+} as const;

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAdaptiveAutoFocus';

package/src/hooks/useAdaptiveAutoFocus.ts

@@ -0,0 +1,16 @@
+import { LayoutPresets, mergePresets, useLayoutDefaults } from '@cloud-ru/ds-adaptive';
+
+/** Пресеты адаптивных дефолтов поля по раскладке (сейчас — только `autoFocus`). */
+export type FieldLayoutPresets = LayoutPresets<{ autoFocus: boolean }>;
+
+// На mobile autoFocus выключен — иначе открывает экранную клавиатуру без действия пользователя.
+const DS_AUTOFOCUS_PRESET: FieldLayoutPresets = { mobile: { autoFocus: false } };
+
+/** Резолвит `autoFocus` по раскладке: desktop — проп, mobile — выключен; переопределяемо через `layoutPresets`. */
+export function useAdaptiveAutoFocus(autoFocus = false, layoutPresets?: FieldLayoutPresets): boolean {
+  return useLayoutDefaults<{ autoFocus: boolean }>(
+    { autoFocus: false },
+    mergePresets(DS_AUTOFOCUS_PRESET, layoutPresets),
+    { autoFocus },
+  ).autoFocus;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';

package/src/segments/index.ts

@@ -0,0 +1,2 @@
+export * from './segments';
+export * from './useSegmentedMask';