@limonify/zest-ui 0.3.2 → 0.4.0

package/src/drawer/popup/DrawerPopup.tsx

@@ -60,7 +60,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
     setActiveSnapPoint,
     snapToSequentialPoints,
   } = useDrawerSnapPoints();
-  const { store, open, transitionStatus, props } = useDialogPopupProps();
+  const { store, open, transitionStatus, nested, nestedDialogOpen, props } = useDialogPopupProps();
 
   const [swiping, setSwiping] = React.useState(false);
   const [swipeMovement, setSwipeMovement] = React.useState(0);
@@ -159,6 +159,8 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
   const state: DrawerPopupState = {
     open,
     transitionStatus,
+    nested,
+    nestedDialogOpen,
     swiping,
     swipeMovement,
     swipeDirection,
@@ -199,6 +201,15 @@ export interface DrawerPopupState {
    * to `undefined` after one frame), `'ending'` once it is closing.
    */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether this drawer is rendered inside another dialog's tree.
+   */
+  nested: boolean;
+  /**
+   * Whether a dialog nested inside this one is open — the cue to scale or dim
+   * this popup, which the web version drives with a CSS variable.
+   */
+  nestedDialogOpen: boolean;
   /**
    * Whether a swipe is currently in progress.
    */

package/src/filter/index.ts

@@ -0,0 +1,5 @@
+export {
+  useFilter,
+  type UseFilterParameters,
+  type UseFilterReturnValue,
+} from './useFilter';

package/src/filter/useFilter.ts

@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+
+export interface UseFilterParameters extends Intl.CollatorOptions {
+  /**
+   * The locale to compare in, as a BCP 47 language tag. Defaults to the
+   * runtime's.
+   */
+  locale?: string | undefined;
+}
+
+export interface UseFilterReturnValue {
+  /**
+   * Whether `string` starts with `substring`.
+   */
+  startsWith: (string: string, substring: string) => boolean;
+  /**
+   * Whether `string` ends with `substring`.
+   */
+  endsWith: (string: string, substring: string) => boolean;
+  /**
+   * Whether `string` contains `substring` anywhere.
+   */
+  contains: (string: string, substring: string) => boolean;
+}
+
+/**
+ * Locale-aware string matching for filtering a list.
+ *
+ * `Intl.Collator` is what makes this better than `toLowerCase().includes()`: at
+ * the default `'base'` sensitivity, "resume" matches "Résumé" and "PENO" matches
+ * "Jalapeño" — which a lowercase comparison never will. Pass
+ * `sensitivity: 'case'` (or any other `Intl.CollatorOptions`) to tighten it.
+ *
+ * All three compare a **fixed-width** window, so a query only matches a run of
+ * the same length. Characters that fold to a different number of characters are
+ * therefore not matched across that boundary: "straße" (6) does not find
+ * "STRASSE" (7), even though the collator considers the two equal. Scanning
+ * every width instead would make every keystroke quadratic.
+ *
+ * ```tsx
+ * const { contains } = useFilter({ sensitivity: 'base' });
+ * const matches = items.filter((item) => contains(item.label, query));
+ * ```
+ *
+ * This is the default filter behind `Combobox.Root` and `Autocomplete.Root`;
+ * use it directly when you filter the items yourself.
+ */
+export function useFilter(options?: UseFilterParameters): UseFilterReturnValue {
+  const { locale, ...collatorOptions } = options ?? {};
+
+  // `usage: 'search'` is what makes a collator answer "are these equal for
+  // matching purposes" rather than "how do these sort".
+  const collator = React.useMemo(
+    () =>
+      new Intl.Collator(locale, { usage: 'search', sensitivity: 'base', ...collatorOptions }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locale, JSON.stringify(collatorOptions)],
+  );
+
+  return React.useMemo(
+    () => ({
+      startsWith(string: string, substring: string) {
+        if (substring.length === 0) {
+          return true;
+        }
+
+        return collator.compare(string.slice(0, substring.length), substring) === 0;
+      },
+      endsWith(string: string, substring: string) {
+        if (substring.length === 0) {
+          return true;
+        }
+
+        return collator.compare(string.slice(-substring.length), substring) === 0;
+      },
+      contains(string: string, substring: string) {
+        if (substring.length === 0) {
+          return true;
+        }
+
+        // A collator compares whole strings, so a scan is the only way to ask
+        // about a substring.
+        for (let index = 0; index <= string.length - substring.length; index += 1) {
+          if (collator.compare(string.slice(index, index + substring.length), substring) === 0) {
+            return true;
+          }
+        }
+
+        return false;
+      },
+    }),
+    [collator],
+  );
+}

package/src/index.ts

@@ -31,6 +31,7 @@ export * from './tooltip';
 export * from './toggle';
 export * from './toggle-group';
 
+export * from './filter';
 export * from './store';
 export * from './hooks';
 export * from './types';

package/src/internals/field/useFieldControlRegistration.ts

@@ -1,23 +1,59 @@
 'use client';
+import * as React from 'react';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
 import { useStableCallback } from '../../hooks/useStableCallback';
 
+/** Whether a value counts as "the user has put something in this control". */
+function defaultIsFilled(value: unknown): boolean {
+  if (value == null || value === false || value === '') {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  return true;
+}
+
+export interface UseFieldControlRegistrationParameters {
+  /**
+   * The control's value at mount. `dirty` is whether the current value still
+   * equals this one.
+   */
+  initialValue?: unknown;
+  /**
+   * Whether a value counts as filled. Defaults to "not null, empty, or false".
+   */
+  isFilled?: ((value: unknown) => boolean) | undefined;
+}
+
 /**
- * Wires a non-text form control (Checkbox, Switch, RadioGroup, NumberField) into
- * a surrounding `Field.Root`, when there is one.
+ * Wires a non-text form control (Checkbox, Switch, RadioGroup, NumberField,
+ * Slider, Select, OTPField) into a surrounding `Field.Root`, when there is one.
  *
  * A field-aware control:
  * - is labelled by `Field.Label` and described by `Field.Description`/`Error`
  *   (through `accessibilityLabelledBy`/`accessibilityDescribedBy`);
  * - inherits the field's (and its fieldset's) `disabled`;
- * - runs the field's `validate` when its value changes.
+ * - runs the field's `validate` when its value changes;
+ * - reports `dirty`/`filled`/`touched`/`focused` back to the field, which is
+ *   what `Field.Validity` and `Field.Error` branch on.
  *
  * Outside a `Field.Root` everything is `undefined`/no-op, so a standalone
  * control is unaffected.
  */
-export function useFieldControlRegistration() {
+export function useFieldControlRegistration(
+  parameters: UseFieldControlRegistrationParameters = {},
+) {
+  const { initialValue, isFilled = defaultIsFilled } = parameters;
+
   const field = useFieldRootContext(false);
 
+  // Only the value the control mounted with decides `dirty`; a later prop change
+  // from the consumer is a new baseline they set themselves, not user input.
+  const initialValueRef = React.useRef(initialValue);
+
   const validate = useStableCallback((value: unknown) => {
     if (!field) {
       return;
@@ -26,6 +62,44 @@ export function useFieldControlRegistration() {
     field.setValidityData({ valid: errors.length === 0, errors });
   });
 
+  /**
+   * Records a user-driven value change: the field becomes dirty (unless the
+   * value is back to where it started), filled tracks the new value, and
+   * `onChange` validation runs.
+   */
+  const markChanged = useStableCallback((value: unknown) => {
+    if (!field) {
+      return;
+    }
+
+    field.setDirty(!Object.is(value, initialValueRef.current));
+    field.setFilled(isFilled(value));
+
+    if (field.validationMode === 'onChange') {
+      validate(value);
+    }
+  });
+
+  /**
+   * Records that the user is done with the control — the counterpart of a blur
+   * on a text input, which is when `onBlur` validation runs.
+   */
+  const markTouched = useStableCallback((value: unknown) => {
+    if (!field) {
+      return;
+    }
+
+    field.setTouched(true);
+
+    if (field.validationMode === 'onBlur') {
+      validate(value);
+    }
+  });
+
+  const markFocused = useStableCallback((focused: boolean) => {
+    field?.setFocused(focused);
+  });
+
   const describedBy =
     field && field.messageIds.length > 0 ? field.messageIds.join(' ') : undefined;
 
@@ -36,18 +110,24 @@ export function useFieldControlRegistration() {
     fieldDisabled: field?.disabled ?? false,
     /**
      * Accessibility props associating the control with the field's label and
-     * messages. Spread into the control's props before `elementProps`.
+     * messages, and reporting its validity. Spread into the control's props
+     * before `elementProps`.
      */
     fieldProps: {
       accessibilityLabelledBy: field?.labelId,
       accessibilityDescribedBy: describedBy,
       'aria-labelledby': field?.labelId,
       'aria-describedby': describedBy,
+      'aria-invalid': field?.validityData.valid === false || undefined,
     },
     /**
-     * Runs the field's validation for a new control value. No-op without a field.
+     * Runs the field's validation for a new control value, regardless of
+     * `validationMode`. No-op without a field.
      */
     validateField: validate,
+    markChanged,
+    markTouched,
+    markFocused,
     /**
      * Whether a surrounding field is present at all.
      */

package/src/menu/popup/MenuPopup.tsx

@@ -21,8 +21,17 @@ export function MenuPopup(componentProps: MenuPopup.Props) {
   const { transitionStatus } = useMenuTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
+  const triggerWidth = store.useState('triggerWidth');
+  const triggerHeight = store.useState('triggerHeight');
 
-  const state: MenuPopupState = { open, transitionStatus, side, align };
+  const state: MenuPopupState = {
+    open,
+    transitionStatus,
+    side,
+    align,
+    triggerWidth,
+    triggerHeight,
+  };
 
   const element = useRenderElement(View, componentProps, {
     state,
@@ -60,6 +69,16 @@ export interface MenuPopupState {
    * The alignment the popup was actually placed with.
    */
   align: Align;
+  /**
+   * The trigger's measured width, available for consumers to size the popup
+   * against its anchor. This is the React Native equivalent of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
 }
 
 export interface MenuPopupProps extends ZestUIComponentProps<typeof View, MenuPopupState> {}

package/src/menu/positioner/MenuPositioner.tsx

@@ -38,6 +38,8 @@ export function MenuPositioner(componentProps: MenuPositioner.Props) {
   useMenuPortalContext();
   const store = useMenuRootContext();
   const open = store.useState('open');
+  const triggerWidth = store.useState('triggerWidth');
+  const triggerHeight = store.useState('triggerHeight');
   const triggerNode = store.useState('triggerNode');
 
   const positioning = useAnchorPositioning({
@@ -65,7 +67,13 @@ export function MenuPositioner(componentProps: MenuPositioner.Props) {
 
   const mergedRef = useMergedRefs(ref, refs.setFloating);
 
-  const state: MenuPositionerState = { open, side: positioning.side, align: positioning.align };
+  const state: MenuPositionerState = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    triggerWidth,
+    triggerHeight,
+  };
 
   const contextValue: MenuPositionerContext = React.useMemo(
     () => ({ side: positioning.side, align: positioning.align, arrowRef, arrowStyles }),
@@ -95,6 +103,16 @@ export interface MenuPositionerState {
   open: boolean;
   side: Side;
   align: Align;
+  /**
+   * The trigger's measured width, available for consumers to size the popup
+   * against its anchor. This is the React Native equivalent of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
 }
 
 export interface MenuPositionerProps

package/src/menu/store/MenuStore.ts

@@ -11,6 +11,15 @@ export type State = {
    * The anchor's native node, carried across the portal boundary.
    */
   triggerNode: unknown;
+  /**
+   * The trigger's measured width, the React Native counterpart of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
   update: (() => void) | undefined;
   /**
    * The payload of the trigger the popup was opened by, handed to the root's
@@ -40,6 +49,8 @@ const selectors = {
   open: createSelector((state: State) => state.openProp ?? state.open),
   disablePointerDismissal: createSelector((state: State) => state.disablePointerDismissal),
   triggerNode: createSelector((state: State) => state.triggerNode),
+  triggerWidth: createSelector((state: State) => state.triggerWidth),
+  triggerHeight: createSelector((state: State) => state.triggerHeight),
   update: createSelector((state: State) => state.update),
   payload: createSelector((state: State) => state.payload),
   triggerId: createSelector((state: State) => state.triggerIdProp ?? state.triggerId),
@@ -53,6 +64,8 @@ export class MenuStore extends ReactStore<Readonly<State>, Context, typeof selec
         openProp: undefined,
         disablePointerDismissal: false,
         triggerNode: null,
+        triggerWidth: undefined,
+        triggerHeight: undefined,
         update: undefined,
         payload: undefined,
         triggerId: null,

package/src/menu/submenu-trigger/MenuSubmenuTrigger.tsx

@@ -62,6 +62,9 @@ export function MenuSubmenuTrigger(componentProps: MenuSubmenuTrigger.Props) {
       {
         onLayout(event: LayoutChangeEvent) {
           onLayout(event);
+          const { width, height } = event.nativeEvent.layout;
+          store.set('triggerWidth', width);
+          store.set('triggerHeight', height);
           store.state.update?.();
         },
         accessibilityRole: 'menuitem' as const,

package/src/menu/trigger/MenuTrigger.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { Pressable, type GestureResponderEvent } from 'react-native';
+import { Pressable, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
 import { MenuRootContext } from '../root/MenuRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useButton } from '../../internals/use-button/useButton';
@@ -98,7 +98,10 @@ export function MenuTrigger<Payload = unknown>(componentProps: MenuTrigger.Props
         onPressOut() {
           setPressed(false);
         },
-        onLayout() {
+        onLayout(event: LayoutChangeEvent) {
+          const { width, height } = event.nativeEvent.layout;
+          store.set('triggerWidth', width);
+          store.set('triggerHeight', height);
           store.state.update?.();
         },
         accessibilityState: { expanded: open, disabled: disabled || undefined },

package/src/meter/indicator/MeterIndicator.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useMeterRootContext } from '../root/MeterRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import type { MeterRootState } from '../root/MeterRoot';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -11,9 +12,7 @@ import type { ZestUIComponentProps } from '../../types';
 export function MeterIndicator(componentProps: MeterIndicator.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  const { percentageValue } = useMeterRootContext();
-
-  const state: MeterIndicatorState = {};
+  const { percentageValue, state } = useMeterRootContext();
 
   return useRenderElement(View, componentProps, {
     state,
@@ -22,7 +21,7 @@ export function MeterIndicator(componentProps: MeterIndicator.Props) {
   });
 }
 
-export interface MeterIndicatorState {}
+export interface MeterIndicatorState extends MeterRootState {}
 
 export interface MeterIndicatorProps
   extends ZestUIComponentProps<typeof View, MeterIndicatorState> {}

package/src/meter/label/MeterLabel.tsx

@@ -4,6 +4,7 @@ import { useMeterRootContext } from '../root/MeterRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useId } from '../../hooks/useId';
 import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import type { MeterRootState } from '../root/MeterRoot';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -13,7 +14,7 @@ import type { ZestUIComponentProps } from '../../types';
 export function MeterLabel(componentProps: MeterLabel.Props) {
   const { render, className, style, nativeID: idProp, ref, ...elementProps } = componentProps;
 
-  const { setLabelId } = useMeterRootContext();
+  const { setLabelId, state } = useMeterRootContext();
 
   const id = useId(idProp ?? undefined);
 
@@ -22,8 +23,6 @@ export function MeterLabel(componentProps: MeterLabel.Props) {
     return () => setLabelId(undefined);
   }, [id, setLabelId]);
 
-  const state: MeterLabelState = {};
-
   return useRenderElement(Text, componentProps, {
     state,
     ref,
@@ -31,7 +30,7 @@ export function MeterLabel(componentProps: MeterLabel.Props) {
   });
 }
 
-export interface MeterLabelState {}
+export interface MeterLabelState extends MeterRootState {}
 
 export interface MeterLabelProps extends ZestUIComponentProps<typeof Text, MeterLabelState> {}
 

package/src/meter/root/MeterRoot.tsx

@@ -45,11 +45,14 @@ export function MeterRoot(componentProps: MeterRoot.Props) {
     ? formatNumber(value, locale, format)
     : formatNumber(percentageValue / 100, locale, { style: 'percent' });
 
-  const state: MeterRootState = React.useMemo(() => ({}), []);
+  const state: MeterRootState = React.useMemo(
+    () => ({ value: clampedValue, min, max, percent: percentageValue, formattedValue }),
+    [clampedValue, min, max, percentageValue, formattedValue],
+  );
 
   const contextValue: MeterRootContext = React.useMemo(
-    () => ({ formattedValue, percentageValue, setLabelId, value }),
-    [formattedValue, percentageValue, value],
+    () => ({ formattedValue, percentageValue, setLabelId, state, value }),
+    [formattedValue, percentageValue, state, value],
   );
 
   const element = useRenderElement(View, componentProps, {
@@ -83,7 +86,29 @@ function valueToPercent(value: number, min: number, max: number) {
   return ((value - min) * 100) / (max - min);
 }
 
-export interface MeterRootState {}
+export interface MeterRootState {
+  /**
+   * The current value, clamped into `[min, max]`.
+   */
+  value: number;
+  /**
+   * The minimum value.
+   */
+  min: number;
+  /**
+   * The maximum value.
+   */
+  max: number;
+  /**
+   * How far the value sits through the range, `0`–`100`. This is what an
+   * indicator's width comes from.
+   */
+  percent: number;
+  /**
+   * The value as text, through `format`/`locale`.
+   */
+  formattedValue: string;
+}
 
 export interface MeterRootProps extends ZestUIComponentProps<typeof View, MeterRootState> {
   /**

package/src/meter/root/MeterRootContext.ts

@@ -1,7 +1,12 @@
 'use client';
 import * as React from 'react';
+import type { MeterRootState } from './MeterRoot';
 
 export interface MeterRootContext {
+  /**
+   * The state every part publishes to its style and render functions.
+   */
+  state: MeterRootState;
   /**
    * The current value.
    */

package/src/meter/track/MeterTrack.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useMeterRootContext } from '../root/MeterRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import type { MeterRootState } from '../root/MeterRoot';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -11,9 +12,7 @@ import type { ZestUIComponentProps } from '../../types';
 export function MeterTrack(componentProps: MeterTrack.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  useMeterRootContext();
-
-  const state: MeterTrackState = {};
+  const { state } = useMeterRootContext();
 
   return useRenderElement(View, componentProps, {
     state,
@@ -22,7 +21,7 @@ export function MeterTrack(componentProps: MeterTrack.Props) {
   });
 }
 
-export interface MeterTrackState {}
+export interface MeterTrackState extends MeterRootState {}
 
 export interface MeterTrackProps extends ZestUIComponentProps<typeof View, MeterTrackState> {}
 

package/src/meter/value/MeterValue.tsx

@@ -3,6 +3,7 @@ import type * as React from 'react';
 import { Text } from 'react-native';
 import { useMeterRootContext } from '../root/MeterRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import type { MeterRootState } from '../root/MeterRoot';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -15,9 +16,7 @@ import type { ZestUIComponentProps } from '../../types';
 export function MeterValue(componentProps: MeterValue.Props) {
   const { render, className, style, children, ref, ...elementProps } = componentProps;
 
-  const { value, formattedValue } = useMeterRootContext();
-
-  const state: MeterValueState = {};
+  const { value, formattedValue, state } = useMeterRootContext();
 
   return useRenderElement(Text, componentProps, {
     state,
@@ -35,7 +34,7 @@ export function MeterValue(componentProps: MeterValue.Props) {
   });
 }
 
-export interface MeterValueState {}
+export interface MeterValueState extends MeterRootState {}
 
 export interface MeterValueProps
   extends Omit<ZestUIComponentProps<typeof Text, MeterValueState>, 'children'> {

package/src/number-field/input/NumberFieldInput.tsx

@@ -43,7 +43,7 @@ export function NumberFieldInput(componentProps: NumberFieldInput.Props) {
 
   const { disabled, readOnly, value, inputValue } = state;
 
-  const { fieldProps } = useFieldControlRegistration();
+  const { fieldProps, markTouched, markFocused } = useFieldControlRegistration();
 
   const handleChangeText = useStableCallback((text: string) => {
     if (disabled || readOnly) {
@@ -147,7 +147,16 @@ export function NumberFieldInput(componentProps: NumberFieldInput.Props) {
         nativeID: id,
         value: inputValue,
         onChangeText: handleChangeText,
-        onBlur: handleBlur,
+        onFocus() {
+          markFocused(true);
+        },
+        onBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+          markFocused(false);
+          // Leaving the input is what ends the interaction, the same way it does
+          // for a text control — so this is where `onBlur` validation runs.
+          markTouched(valueRef.current);
+          handleBlur(event);
+        },
         editable: !disabled && !readOnly,
         // `numeric` rather than `decimal-pad`: a locale's format may include a
         // decimal separator, a minus sign or a currency symbol, and the numeric

package/src/number-field/root/NumberFieldRoot.tsx

@@ -52,7 +52,9 @@ export function NumberFieldRoot(componentProps: NumberFieldRoot.Props) {
     ...elementProps
   } = componentProps;
 
-  const { fieldDisabled, validateField } = useFieldControlRegistration();
+  const { fieldDisabled, markChanged } = useFieldControlRegistration({
+    initialValue: defaultValue ?? valueProp ?? null,
+  });
 
   const disabled = disabledProp || fieldDisabled;
 
@@ -135,7 +137,7 @@ export function NumberFieldRoot(componentProps: NumberFieldRoot.Props) {
 
         valueRef.current = validatedValue;
         setValueState(validatedValue);
-        validateField(validatedValue);
+        markChanged(validatedValue);
       }
 
       lastChangedValueRef.current = validatedValue;

package/src/otp-field/input/OTPFieldInput.tsx

@@ -163,6 +163,10 @@ export function OTPFieldInput(componentProps: OTPFieldInput.Props) {
         autoComplete: (index === 0 ? autoComplete : 'off') as 'one-time-code' | 'off',
         textContentType: index === 0 ? ('oneTimeCode' as const) : ('none' as const),
         enterKeyHint: index === length - 1 ? ('done' as const) : ('next' as const),
+        // Every slot is an identical one-character box, so position is the only
+        // thing that tells them apart out loud. A consumer-supplied
+        // `accessibilityLabel` in `elementProps` still wins.
+        accessibilityLabel: `Digit ${index + 1} of ${length}`,
         accessibilityState: { disabled: disabled || undefined },
       },
       elementProps,