@limonify/zest-ui 0.1.0

package/src/meter/track/MeterTrack.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { View } from 'react-native';
+import { useMeterRootContext } from '../root/MeterRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Contains the meter indicator.
+ * Renders a `<View>`.
+ */
+export function MeterTrack(componentProps: MeterTrack.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  useMeterRootContext();
+
+  const state: MeterTrackState = {};
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: elementProps,
+  });
+}
+
+export interface MeterTrackState {}
+
+export interface MeterTrackProps extends ZestUIComponentProps<typeof View, MeterTrackState> {}
+
+export namespace MeterTrack {
+  export type State = MeterTrackState;
+  export type Props = MeterTrackProps;
+}

package/src/meter/value/MeterValue.tsx

@@ -0,0 +1,48 @@
+'use client';
+import type * as React from 'react';
+import { Text } from 'react-native';
+import { useMeterRootContext } from '../root/MeterRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A text element displaying the current value.
+ * Renders a `<Text>`.
+ *
+ * Hidden from assistive technology: `Meter.Root` already announces the value
+ * through its `accessibilityValue`, so reading this too would duplicate it.
+ */
+export function MeterValue(componentProps: MeterValue.Props) {
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+  const { value, formattedValue } = useMeterRootContext();
+
+  const state: MeterValueState = {};
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: 'no-hide-descendants' as const,
+        'aria-hidden': true,
+        children:
+          typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue),
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface MeterValueState {}
+
+export interface MeterValueProps
+  extends Omit<ZestUIComponentProps<typeof Text, MeterValueState>, 'children'> {
+  children?: React.ReactNode | ((formattedValue: string, value: number) => React.ReactNode);
+}
+
+export namespace MeterValue {
+  export type State = MeterValueState;
+  export type Props = MeterValueProps;
+}

package/src/number-field/decrement/NumberFieldDecrement.tsx

@@ -0,0 +1,23 @@
+'use client';
+import {
+  useNumberFieldStepperButton,
+  type NumberFieldStepperButtonProps,
+  type NumberFieldStepperButtonState,
+} from '../root/useNumberFieldStepperButton';
+
+/**
+ * A stepper button that decreases the field value when pressed.
+ * Renders a `<Pressable>`.
+ */
+export function NumberFieldDecrement(componentProps: NumberFieldDecrement.Props) {
+  return useNumberFieldStepperButton(componentProps, false);
+}
+
+export interface NumberFieldDecrementState extends NumberFieldStepperButtonState {}
+
+export interface NumberFieldDecrementProps extends NumberFieldStepperButtonProps {}
+
+export namespace NumberFieldDecrement {
+  export type State = NumberFieldDecrementState;
+  export type Props = NumberFieldDecrementProps;
+}

package/src/number-field/group/NumberFieldGroup.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { View } from 'react-native';
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { NumberFieldRootState } from '../root/NumberFieldRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Groups the input with the increment and decrement buttons.
+ * Renders a `<View>`.
+ */
+export function NumberFieldGroup(componentProps: NumberFieldGroup.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const { state } = useNumberFieldRootContext();
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [{ role: 'group' as const }, elementProps],
+  });
+}
+
+export interface NumberFieldGroupState extends NumberFieldRootState {}
+
+export interface NumberFieldGroupProps
+  extends ZestUIComponentProps<typeof View, NumberFieldGroupState> {}
+
+export namespace NumberFieldGroup {
+  export type State = NumberFieldGroupState;
+  export type Props = NumberFieldGroupProps;
+}

package/src/number-field/increment/NumberFieldIncrement.tsx

@@ -0,0 +1,23 @@
+'use client';
+import {
+  useNumberFieldStepperButton,
+  type NumberFieldStepperButtonProps,
+  type NumberFieldStepperButtonState,
+} from '../root/useNumberFieldStepperButton';
+
+/**
+ * A stepper button that increases the field value when pressed.
+ * Renders a `<Pressable>`.
+ */
+export function NumberFieldIncrement(componentProps: NumberFieldIncrement.Props) {
+  return useNumberFieldStepperButton(componentProps, true);
+}
+
+export interface NumberFieldIncrementState extends NumberFieldStepperButtonState {}
+
+export interface NumberFieldIncrementProps extends NumberFieldStepperButtonProps {}
+
+export namespace NumberFieldIncrement {
+  export type State = NumberFieldIncrementState;
+  export type Props = NumberFieldIncrementProps;
+}

package/src/number-field/index.parts.ts

@@ -0,0 +1,6 @@
+export { NumberFieldRoot as Root } from './root/NumberFieldRoot';
+export { NumberFieldGroup as Group } from './group/NumberFieldGroup';
+export { NumberFieldInput as Input } from './input/NumberFieldInput';
+export { NumberFieldIncrement as Increment } from './increment/NumberFieldIncrement';
+export { NumberFieldDecrement as Decrement } from './decrement/NumberFieldDecrement';
+export { NumberFieldScrubArea as ScrubArea } from './scrub-area/NumberFieldScrubArea';

package/src/number-field/index.ts

@@ -0,0 +1,9 @@
+export * as NumberField from './index.parts';
+
+export type * from './root/NumberFieldRoot';
+export type * from './group/NumberFieldGroup';
+export type * from './input/NumberFieldInput';
+export type * from './increment/NumberFieldIncrement';
+export type * from './decrement/NumberFieldDecrement';
+export type * from './scrub-area/NumberFieldScrubArea';
+export { useNumberFieldRootContext } from './root/NumberFieldRootContext';

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

@@ -0,0 +1,179 @@
+'use client';
+import { TextInput, type NativeSyntheticEvent, type TextInputFocusEventData } from 'react-native';
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useFieldControlRegistration } from '../../internals/field/useFieldControlRegistration';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import { formatNumber } from '../../utils/formatNumber';
+import type { NumberFieldRootState } from '../root/NumberFieldRoot';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+import { parseNumber } from '../utils/parse';
+import { hasNumberFormatRoundingOptions, removeFloatingPointErrors } from '../utils/validate';
+
+/**
+ * The input element for the number field.
+ * Renders a `<TextInput>`.
+ *
+ * **Diverges from the web deliberately.** Upstream filters every keystroke
+ * against the set of characters the locale's format can produce. React Native's
+ * `TextInput` reports whole strings through `onChangeText`, not keys, so the text
+ * is accepted as typed and simply left alone when it does not parse — the value
+ * only changes when it does. `keyboardType` steers the on-screen keyboard toward
+ * the right characters instead.
+ */
+export function NumberFieldInput(componentProps: NumberFieldInput.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const {
+    allowInputSyncRef,
+    formatOptionsRef,
+    id,
+    lastChangedValueRef,
+    locale,
+    max,
+    min,
+    onValueCommitted,
+    setInputValue,
+    setValue,
+    state,
+    valueRef,
+  } = useNumberFieldRootContext();
+
+  const { disabled, readOnly, value, inputValue } = state;
+
+  const { fieldProps } = useFieldControlRegistration();
+
+  const handleChangeText = useStableCallback((text: string) => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    // The user is now the source of truth for the text; nothing may reformat it
+    // underneath them until blur.
+    allowInputSyncRef.current = false;
+    setInputValue(text);
+
+    if (text.trim() === '') {
+      setValue(null, createChangeEventDetails(REASONS.inputClear));
+      return;
+    }
+
+    const parsedValue = parseNumber(text, locale, formatOptionsRef.current);
+    if (parsedValue === null) {
+      // Unparseable so far ('-', '1.', a half-typed currency): keep the text and
+      // wait. Blur is what forces a resolution.
+      return;
+    }
+
+    setValue(parsedValue, createChangeEventDetails(REASONS.inputChange));
+  });
+
+  const handleBlur = useStableCallback((event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    const hadManualInput = !allowInputSyncRef.current;
+    allowInputSyncRef.current = true;
+
+    if (inputValue.trim() === '') {
+      const clearDetails = createChangeEventDetails(REASONS.inputClear, event);
+      setValue(null, clearDetails);
+
+      if (clearDetails.isCanceled) {
+        return;
+      }
+
+      // Blurring an untouched, already-empty field cleared nothing.
+      if (hadManualInput || value !== null) {
+        onValueCommitted(null, createChangeEventDetails(REASONS.inputClear, event));
+      }
+      return;
+    }
+
+    const formatOptions = formatOptionsRef.current;
+    const parsedValue = parseNumber(inputValue, locale, formatOptions);
+
+    if (parsedValue === null) {
+      // The text never resolved to a number, so restore the last good value.
+      setInputValue(formatNumber(valueRef.current, locale, formatOptions));
+      return;
+    }
+
+    const hasRoundingOptions = hasNumberFormatRoundingOptions(formatOptions);
+
+    let committed: number | null;
+    if (!hadManualInput && !hasRoundingOptions) {
+      // No rounding options and no edit: the text is purely formatted display, so
+      // keep the authoritative value rather than re-parsing the rounded text and
+      // discarding precision.
+      committed = value;
+    } else if (hasRoundingOptions) {
+      committed = removeFloatingPointErrors(parsedValue, formatOptions);
+    } else {
+      committed = parsedValue;
+    }
+
+    const shouldUpdateValue = value !== committed;
+    let committedValue = committed;
+
+    if (shouldUpdateValue) {
+      const changeDetails = createChangeEventDetails(REASONS.inputBlur, event);
+      setValue(committed, changeDetails);
+
+      if (changeDetails.isCanceled) {
+        return;
+      }
+
+      // Read back what was stored, since setValue clamps and snaps.
+      committedValue = lastChangedValueRef.current ?? committed;
+    }
+
+    if (hadManualInput || shouldUpdateValue) {
+      onValueCommitted(committedValue, createChangeEventDetails(REASONS.inputBlur, event));
+    }
+
+    // Whatever happened, the text goes back to being formatted display.
+    setInputValue(formatNumber(committedValue, locale, formatOptions));
+  });
+
+  return useRenderElement(TextInput, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        nativeID: id,
+        value: inputValue,
+        onChangeText: handleChangeText,
+        onBlur: handleBlur,
+        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
+        // keyboard is the one that offers them.
+        keyboardType: 'numeric' as const,
+        accessibilityRole: 'spinbutton' as const,
+        accessibilityState: { disabled: disabled || undefined },
+        accessibilityValue: {
+          min,
+          max,
+          now: value ?? undefined,
+          text: inputValue || undefined,
+        },
+        ...fieldProps,
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface NumberFieldInputState extends NumberFieldRootState {}
+
+export interface NumberFieldInputProps
+  extends Omit<ZestUIComponentProps<typeof TextInput, NumberFieldInputState>, 'value'> {}
+
+export namespace NumberFieldInput {
+  export type State = NumberFieldInputState;
+  export type Props = NumberFieldInputProps;
+}