@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/src/PowerSearch/formatTokenValue.ts

@@ -0,0 +1,215 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @fileoverview The text a PowerSearch filter token shows for a value.
+ *
+ * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @output `formatTokenValueText` — one string, or null for an empty value.
+ * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
+ * presentation's Filters rows and removal announcement
+ * (`PowerSearchBottomSheet.tsx`), so every reading of a value on the field
+ * uses the same words and the same zone handling.
+ */
+
+import type {OperatorValue, FilterValue, EnumItem} from './types';
+import type {Locale, TranslatorFn} from '../i18n';
+import {truncateCharacters} from '../utils/characters';
+import {
+  formatDateAbsoluteCompact,
+  formatSharedNumber,
+} from './formatFilterValue';
+import {registerEnglishFallback} from '../i18n/englishFallback';
+import english from '../i18n/generated-english/PowerSearch/formatTokenValue.generated';
+
+registerEnglishFallback(english);
+
+type ListFormatFn = (items: ReadonlyArray<string>) => string;
+
+function truncateString(value: string, limit: number): string {
+  // Same semantics as before — strings within limit + 3 pass through, longer
+  // ones cut to limit + '...' — but counted in characters, not code units.
+  return truncateCharacters(value, limit + 3, '...');
+}
+
+function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {
+  return values.find(v => v.value === value)?.label ?? value;
+}
+
+// Intl's maximum fraction cap: no number the row formats is rounded.
+const MAX_FRACTION_DIGITS = 100;
+
+// Whether a locale writes a number with the token's own numerals: Latin
+// digits and a `.` decimal mark, so `String(value)` is already the locale's
+// reading. Probed once per locale through the shared number helper.
+const tokenNumeralLocales = new Map<string, boolean>();
+function usesTokenNumerals(locale: Locale): boolean {
+  let uses = tokenNumeralLocales.get(locale);
+  if (uses == null) {
+    uses =
+      formatSharedNumber(1234567.5, locale, {
+        useGrouping: false,
+        maximumFractionDigits: MAX_FRACTION_DIGITS,
+      }) === '1234567.5';
+    tokenNumeralLocales.set(locale, uses);
+  }
+  return uses;
+}
+
+// A number as the token reads it. Where the locale writes Latin digits and a
+// `.` decimal mark, use the token's own text, `String(value)`. Elsewhere, use
+// the locale's digits and decimal mark, with no grouping and no rounding: the
+// fraction cap is Intl's maximum, so `1e-21` keeps its digits.
+function formatNumberAsToken(value: number, locale: Locale): string {
+  return usesTokenNumerals(locale)
+    ? String(value)
+    : formatSharedNumber(value, locale, {
+        useGrouping: false,
+        maximumFractionDigits: MAX_FRACTION_DIGITS,
+      });
+}
+
+// The summaries, lists, and numbers the token writes as English literals, and
+// the locale-aware readings of the same: with a translator (the sheet
+// presentation's rows and announcements) the summaries resolve through the
+// catalog, lists through the provider locale's list format, and numbers
+// through its number format; without one they stay the token's own literals,
+// the released popover token's text. In English the two read identically.
+function itemsSummary(count: number, t: TranslatorFn | undefined): string {
+  return t
+    ? t('@astryx.powersearch.valueEditor.itemsCount', {count})
+    : // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      `${count} items`;
+}
+
+function formatListText(
+  labels: ReadonlyArray<string>,
+  maxLength: number,
+  t: TranslatorFn | undefined,
+  formatList: ListFormatFn | undefined,
+): string | null {
+  if (labels.length === 0) {
+    return null;
+  }
+  if (labels.length === 1) {
+    return truncateString(labels[0], maxLength);
+  }
+  const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
+  if (totalLength > maxLength) {
+    return itemsSummary(labels.length, t);
+  }
+  return formatList ? formatList(labels) : labels.join(', ');
+}
+
+/**
+ * The text a filter token shows for a value: the one place that decides how
+ * a value reads on the field, so every other reading of the same value —
+ * the sheet presentation's Filters rows and its removal announcement — can
+ * use the same words and the same zone handling. `maxLength` is the token's
+ * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * With `t`, the list, date-range and nested summaries resolve through the
+ * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
+ * token's own literals. With `formatList` (the provider's list formatter),
+ * several labels join as a list in the locale; without it they join with
+ * the token's literal ", ".
+ */
+export function formatTokenValueText(
+  operatorValue: OperatorValue,
+  filterValue: FilterValue,
+  maxLength: number,
+  locale: Locale,
+  t?: TranslatorFn,
+  formatList?: ListFormatFn,
+): string | null {
+  switch (filterValue.type) {
+    case 'empty':
+      return null;
+
+    case 'string':
+      return truncateString(filterValue.value, maxLength);
+
+    case 'integer':
+    case 'float':
+      return t
+        ? formatNumberAsToken(filterValue.value, locale)
+        : String(filterValue.value);
+
+    case 'enum':
+      if (operatorValue.type === 'enum') {
+        return truncateString(
+          getEnumLabel(operatorValue.values, filterValue.value),
+          maxLength,
+        );
+      }
+      return truncateString(filterValue.value, maxLength);
+
+    case 'string_list':
+      return formatListText(filterValue.value, maxLength, t, formatList);
+
+    case 'enum_list': {
+      const items = filterValue.value;
+      if (items.length === 0) {
+        return null;
+      }
+      if (operatorValue.type === 'enum_list') {
+        return formatListText(
+          items.map(v => getEnumLabel(operatorValue.values, v)),
+          maxLength,
+          t,
+          formatList,
+        );
+      }
+      if (items.length === 1) {
+        return truncateString(items[0], maxLength);
+      }
+      return itemsSummary(items.length, t);
+    }
+
+    case 'entity_list':
+      return formatListText(
+        filterValue.value.map(e => e.label),
+        maxLength,
+        t,
+        formatList,
+      );
+
+    case 'time':
+      return filterValue.value;
+
+    case 'date_absolute':
+      return truncateString(
+        formatDateAbsoluteCompact(filterValue.unixSeconds, locale),
+        maxLength,
+      );
+
+    case 'date_relative':
+      return truncateString(filterValue.value, maxLength);
+
+    case 'date_range':
+      if (t) {
+        return t('@astryx.powersearch.valueEditor.dateRange');
+      }
+      // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      return 'date range';
+
+    case 'custom':
+      if (operatorValue.type === 'custom') {
+        return truncateString(
+          operatorValue.getString(filterValue.value),
+          maxLength,
+        );
+      }
+      return filterValue.value;
+
+    case 'nested': {
+      const count = filterValue.value.length;
+      if (t) {
+        return t('@astryx.powersearch.valueEditor.filtersCount', {count});
+      }
+      // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      return count === 1 ? '1 filter' : `${count} filters`;
+    }
+
+    default:
+      return null;
+  }
+}

package/src/PowerSearch/powerSearchSheetUtils.ts

@@ -0,0 +1,224 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file powerSearchSheetUtils.ts
+ * @input PowerSearch config/filter types and the field typeahead source
+ * @output Pure helpers for the sheet presentation: which operators the
+ *   sheet's own controls edit, field matching, filter identity tracking
+ *   across controlled re-renders, the focus target after a removal, and the
+ *   content search's suggestion source over the field typeahead
+ * @position Helper module; consumed by PowerSearchBottomSheet.tsx and its
+ *   tests
+ */
+
+import type {SearchSource} from '../Typeahead/types';
+import type {InternalConfig} from './useInternalConfig';
+import type {
+  PowerSearchField,
+  PowerSearchFilter,
+  PowerSearchItem,
+  PowerSearchOperator,
+} from './types';
+
+// =============================================================================
+// Operators and fields
+// =============================================================================
+
+/**
+ * Whether the value step edits an operator's value with a sheet-native
+ * control (choice rows, or the popover's editor in its sheet presentation).
+ * A `nested` value is the exception: it is edited by the popover's built-in
+ * NestedEditor, rendered in the step's body,
+ * so every operator opens an editable step and no field is left out.
+ */
+export function isSupportedOperator(operator: PowerSearchOperator): boolean {
+  return operator.value.type !== 'nested';
+}
+
+export function fieldMatchesQuery(
+  field: PowerSearchField,
+  normalizedQuery: string,
+): boolean {
+  if (normalizedQuery === '') {
+    return true;
+  }
+  if (field.label.toLowerCase().includes(normalizedQuery)) {
+    return true;
+  }
+  return (
+    field.typeaheadAliases?.some(alias =>
+      alias.toLowerCase().includes(normalizedQuery),
+    ) ?? false
+  );
+}
+
+/** Synchronous suggestion source; the sheet renders results inline. */
+export interface SheetSuggestionSource {
+  search(query: string): PowerSearchItem[];
+  bootstrap(): PowerSearchItem[];
+}
+
+/**
+ * The field typeahead source as the content search's rows: the popover
+ * presentation's own suggestions, minus any whose field the config no longer
+ * knows. That source resolves synchronously from the config; a promise (none
+ * today) yields no rows rather than a stale list.
+ */
+export function createSheetSuggestionSource(
+  config: InternalConfig,
+  source: SearchSource<PowerSearchItem>,
+): SheetSuggestionSource {
+  // Every suggestion whose field the config knows is offered: the value step
+  // edits every operator, `nested` included.
+  const isEditable = (item: PowerSearchItem): boolean => {
+    const aux = item.auxiliaryData;
+    return aux != null && config.getField(aux.fieldKey) != null;
+  };
+  const settle = (
+    results: PowerSearchItem[] | Promise<PowerSearchItem[]>,
+  ): PowerSearchItem[] =>
+    Array.isArray(results) ? results.filter(isEditable) : [];
+  return {
+    search: query => settle(source.search(query)),
+    bootstrap: () => settle(source.bootstrap()),
+  };
+}
+
+// =============================================================================
+// Filter identity across controlled updates
+// =============================================================================
+
+function stableSerialize(value: unknown): string {
+  if (Array.isArray(value)) {
+    return `[${value.map(stableSerialize).join(',')}]`;
+  }
+  if (value != null && typeof value === 'object') {
+    return `{${Object.entries(value)
+      .sort(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0))
+      .map(([key, entry]) => `${JSON.stringify(key)}:${stableSerialize(entry)}`)
+      .join(',')}}`;
+  }
+  return JSON.stringify(value) ?? 'undefined';
+}
+
+/**
+ * Stable identities for the Filters rows across controlled updates, so a row
+ * keeps its element — and its focus — when the parent reorders the filters or
+ * removes one above it. A filter object seen before keeps its
+ * id; a new object takes the id of a filter from the previous update with the
+ * same signature that no present object claims (a parent that clones its
+ * values on every change); anything else mints a new id. Two equal filters
+ * are told apart by order. Call `next` once per render with the current list.
+ */
+export function createFilterIdentities(): {
+  next: (filters: ReadonlyArray<PowerSearchFilter>) => number[];
+} {
+  const byObject = new WeakMap<PowerSearchFilter, number>();
+  let previousBySignature = new Map<string, number[]>();
+  let nextId = 0;
+  return {
+    next(filters) {
+      const used = new Set<number>();
+      const ids: (number | null)[] = filters.map(filter => {
+        const known = byObject.get(filter);
+        if (known == null || used.has(known)) {
+          return null;
+        }
+        used.add(known);
+        return known;
+      });
+      const bySignature = new Map<string, number[]>();
+      filters.forEach((filter, index) => {
+        const signature = filterSignature(filter);
+        let id = ids[index];
+        if (id == null) {
+          id =
+            previousBySignature
+              .get(signature)
+              ?.find(candidate => !used.has(candidate)) ?? nextId++;
+          used.add(id);
+          byObject.set(filter, id);
+          ids[index] = id;
+        }
+        bySignature.set(signature, [...(bySignature.get(signature) ?? []), id]);
+      });
+      previousBySignature = bySignature;
+      return ids as number[];
+    },
+  };
+}
+
+/** Structural snapshot of a filter, for parents that clone their values. */
+export function filterSignature(filter: PowerSearchFilter): string {
+  return stableSerialize({
+    field: filter.field,
+    operator: filter.operator,
+    value: filter.value,
+    isReadOnly: filter.isReadOnly ?? false,
+  });
+}
+
+/**
+ * Finds the filter a step was opened on after the controlled parent may have
+ * reordered, cloned, or removed it: object identity first, then the original
+ * slot when it still holds a structurally equal filter, then a unique
+ * structural match anywhere. Returns null when the target is gone or
+ * ambiguous, so an edit never lands on a different filter.
+ */
+export function resolveFilterIdentityIndex(
+  filters: ReadonlyArray<PowerSearchFilter>,
+  sourceFilter: PowerSearchFilter,
+  sourceSignature: string,
+  preferredIndex: number,
+): number | null {
+  const identityIndex = filters.indexOf(sourceFilter);
+  if (identityIndex >= 0) {
+    return identityIndex;
+  }
+  if (
+    filters[preferredIndex] != null &&
+    filterSignature(filters[preferredIndex]) === sourceSignature
+  ) {
+    return preferredIndex;
+  }
+  const matchingIndices = filters.flatMap((filter, index) =>
+    filterSignature(filter) === sourceSignature ? [index] : [],
+  );
+  return matchingIndices.length === 1 ? matchingIndices[0] : null;
+}
+
+/**
+ * After removing the filter at `removedIndex`, focus should land on the
+ * nearest remaining row that is a button, preferring the one after it.
+ * `isRowButton` is the Filters sheet's own rule for which rows are buttons:
+ * the field interactive and the filter not read-only (a `nested` or stale
+ * filter's row is a button too).
+ */
+export function nearestEditableIndex(
+  nextFilters: ReadonlyArray<PowerSearchFilter>,
+  removedIndex: number,
+  isRowButton: (filter: PowerSearchFilter) => boolean = filter =>
+    !filter.isReadOnly,
+): number | undefined {
+  const editableIndices = nextFilters.flatMap((candidate, candidateIndex) =>
+    isRowButton(candidate) ? [candidateIndex] : [],
+  );
+  return editableIndices.reduce<number | undefined>((nearest, candidate) => {
+    if (nearest == null) {
+      return candidate;
+    }
+    const candidateDistance = Math.abs(candidate - removedIndex);
+    const nearestDistance = Math.abs(nearest - removedIndex);
+    if (candidateDistance < nearestDistance) {
+      return candidate;
+    }
+    if (
+      candidateDistance === nearestDistance &&
+      candidate >= removedIndex &&
+      nearest < removedIndex
+    ) {
+      return candidate;
+    }
+    return nearest;
+  }, undefined);
+}

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -101,7 +101,8 @@ export const docs = {
     {
       name: 'isIndeterminate',
       type: 'boolean',
-      description: 'Animated loading indicator for unknown progress.',
+      description:
+        'Animated loading indicator for unknown progress. Under reduced motion it pulses in place instead of sliding.',
       default: 'false',
     },
     {
@@ -390,7 +391,8 @@ export const docsDense = {
     formatValueLabel:
       'Custom value label formatter; defaults to percentage string.',
     variant: 'Semantic color variant.',
-    isIndeterminate: 'Animated loading indicator for unknown progress.',
+    isIndeterminate:
+      'Animated loading indicator for unknown progress. Under reduced motion it pulses in place instead of sliding.',
     marks:
       'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. Marks inside the fill take the variant on-color; marks on the bare track take the primary text color (secondary when disabled). A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
     isDisabled: 'Visually disabled: grays out fill and text.',

package/src/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file ProgressBar.tsx
- * @input Uses React, useId, stylex, tokens and ProgressBarTouch
+ * @input Uses React, useId, stylex, tokens, ProgressBarTouch and resolveMotion
  * @output Exports ProgressBar component, ProgressBarProps, ProgressBarVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -36,6 +36,10 @@ import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {ProgressBarVariantMap} from './index';
 import {useProgressBarTouch} from './ProgressBarTouch';
+import {formatMotionRoleValue} from '../motion/roles';
+import {resolveMotion} from '../motion/resolveMotion';
+import {progressBar} from '../motion/uikit/progressBar';
+import {timing} from '../motion/uikit/timing';
 
 // Every mark is wrapped in a Tooltip (marks always carry a label), so load it
 // lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
@@ -117,7 +121,7 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
    * When true, renders an animated indeterminate progress indicator.
    * Use when the progress amount is unknown (e.g. loading, processing).
    * The `value` and `hasValueLabel` props are ignored in this mode.
-   * Respects `prefers-reduced-motion` by slowing the animation.
+   * Under reduced motion it pulses in place instead of sliding.
    * @default false
    */
   isIndeterminate?: boolean;
@@ -170,6 +174,19 @@ const indeterminateSlideRtl = stylex.keyframes({
   },
 });
 
+// Under reduced motion the indeterminate fill stops travelling and pulses in
+// place. It goes from full opacity down to the pulse's floor
+// (`--_progress-bar-pulse-floor`, the progress table's) and back. The
+// animation alternates direction each pass.
+const indeterminatePulse = stylex.keyframes({
+  from: {
+    opacity: 1,
+  },
+  to: {
+    opacity: 'var(--_progress-bar-pulse-floor)',
+  },
+});
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -266,7 +283,6 @@ const styles = stylex.create({
       default: '100%',
       '@media (forced-colors: active)': {
         default: 'var(--_progress-bar-fill, 0%)',
-        // Under a finger: the touch minimum and the flip offset (below).
         '@media (pointer: coarse)':
           'calc(max(var(--_progress-bar-fill, 0%), var(--_progress-bar-min, 0px)) + var(--_progress-bar-flip, 0) * 0.01px)',
       },
@@ -353,17 +369,37 @@ const styles = stylex.create({
       '@media (forced-colors: active)': 'CanvasText',
     },
     outlineOffset: {default: null, '@media (forced-colors: active)': '-1px'},
-    width: '40%',
+    // Under reduced motion, on every pointer, the fill spans the whole track
+    // as one solid bar, and only its opacity pulses. Each way takes the
+    // `progress.reducedMotionPulseMs` role on the `timing.curves.move` curve
+    // (`--_progress-bar-pulse`, `--_progress-bar-pulse-curve`, set inline from
+    // the progress table). A busy loop: tempo does not scale it.
+    width: {
+      default: '40%',
+      '@media (prefers-reduced-motion: reduce)': '100%',
+    },
     borderRadius: radiusVars['--radius-full'],
     animationName: {
       default: indeterminateSlide,
-      ':is([dir="rtl"] *)': indeterminateSlideRtl,
+      ':is([dir="rtl"] *)': {
+        default: indeterminateSlideRtl,
+        '@media (prefers-reduced-motion: reduce)': indeterminatePulse,
+      },
+      '@media (prefers-reduced-motion: reduce)': indeterminatePulse,
     },
     animationDuration: {
       default: '1.5s',
-      '@media (prefers-reduced-motion: reduce)': '3s',
+      '@media (prefers-reduced-motion: reduce)': 'var(--_progress-bar-pulse)',
+    },
+    animationTimingFunction: {
+      default: 'ease-in-out',
+      '@media (prefers-reduced-motion: reduce)':
+        'var(--_progress-bar-pulse-curve)',
+    },
+    animationDirection: {
+      default: null,
+      '@media (prefers-reduced-motion: reduce)': 'alternate',
     },
-    animationTimingFunction: 'ease-in-out',
     animationIterationCount: 'infinite',
   },
   // A mark is a vertical tick centered on the track via their shared positioning container.
@@ -474,6 +510,15 @@ const markOnTrackStyles = stylex.create({
   },
 });
 
+// The reduced-motion pulse's variables, from the progress table.
+type PulseStyle = CSSProperties &
+  Record<
+    | '--_progress-bar-pulse'
+    | '--_progress-bar-pulse-curve'
+    | '--_progress-bar-pulse-floor',
+    string
+  >;
+
 // `CSSProperties` has no index signature for custom properties, so the fill's
 // inline style — which publishes the filled share as the private
 // `--_progress-bar-fill` — needs this augmentation to typecheck.
@@ -487,6 +532,20 @@ type FillStyle = CSSProperties &
     string
   >;
 
+/**
+ * The reduced-motion pulse plays the `progress.reducedMotionPulseMs` role on
+ * the `timing.curves.move` curve, down to the progress table's floor.
+ */
+function pulseStyle(element: Element | null): PulseStyle {
+  const pulseMs = resolveMotion(element, progressBar, 'reducedMotionPulseMs');
+  const curve = resolveMotion(element, timing.curves.move);
+  return {
+    '--_progress-bar-pulse': `${pulseMs}ms`,
+    '--_progress-bar-pulse-curve': formatMotionRoleValue('curve', curve),
+    '--_progress-bar-pulse-floor': String(progressBar.reducedMotionPulseFloor),
+  };
+}
+
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
   return `${pct}%`;
@@ -662,6 +721,7 @@ export function ProgressBar({
                   variantStyles[fillVariant],
                 ),
               )}
+              style={pulseStyle(null)}
             />
           ) : (
             <div

package/src/RadioList/RadioList.doc.mjs

@@ -148,12 +148,14 @@ export const docs = {
     {
       name: 'containerClassName',
       type: 'string',
-      description: 'Class name for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Class name for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'containerStyle',
       type: 'CSSProperties',
-      description: 'Inline styles for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Inline styles for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'controlXstyle',

package/src/RadioList/RadioList.tsx

@@ -29,9 +29,10 @@ import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {Field} from '../Field/Field';
 import type {InputStatus} from '../Field/types';
-import {useTooltip} from '../Tooltip';
+import {useTooltip} from '../Tooltip/useTooltip';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
-import {composeEventHandlers, mergeProps} from '../utils';
+import {composeEventHandlers} from '../utils/composeEventHandlers';
+import {mergeProps} from '../utils/mergeProps';
 import {joinAriaIDs} from '../utils/inputAria';
 import {
   type FieldInputBaseProps,
@@ -403,6 +404,10 @@ export function RadioList({
           disabledMessageTooltip.ref(el);
         }}
         role="radiogroup"
+        // Screen readers announce the whole group as unavailable. Its dimmed
+        // label then labels a disabled control. An enabled list keeps a
+        // caller's own value.
+        aria-disabled={isDisabled || rest['aria-disabled']}
         // A caller aria-labelledby names the group together with its label.
         aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
         onFocus={composeEventHandlers(handleFocus, onFocus)}

package/src/RadioList/RadioListItem.tsx

@@ -26,12 +26,14 @@ import {RadioListContext} from './RadioList';
 import {RadioListReasonContext} from './RadioListReasonContext';
 import {joinAriaIDs} from '../utils/inputAria';
 import {colorVars, radiusVars} from '../theme/tokens.stylex';
-import {mergeProps, isRenderable, rtlStyles} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
+import {mergeProps} from '../utils/mergeProps';
+import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useIndicator} from '../Indicator';
-import {Item, type ItemAlign} from '../Item';
+import {useIndicator} from '../Indicator/useIndicator';
+import {Item, type ItemAlign} from '../Item/Item';
 import {themeProps} from '../utils/themeProps';
 
 // The touch press's paint, declared by the shared overlay styles on the