Refactor NumberInput

packages/bento-design-system/src/NumberInput/NumberInput.tsx → packages/bento-design-system/src/NumberField/InternalNumberInput.tsx

@@ -4,23 +4,20 @@ import useDimensions from "react-cool-dimensions";
 import { Label, LocalizedString, Box, Children, Columns } from "..";
 import { inputRecipe } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
-import { FormatProps } from "./FormatProps";
+import { BaseNumberProps, FormatProps } from "./types";
 import { useBentoConfig } from "../BentoConfigContext";
 import { match, not, __ } from "ts-pattern";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 
-type Props = {
+type Props = BaseNumberProps & {
   inputProps: React.InputHTMLAttributes<HTMLInputElement>;
   inputRef: React.Ref<HTMLInputElement>;
-  placeholder?: LocalizedString;
   validationState: "valid" | "invalid";
   disabled?: boolean;
-  isReadOnly?: boolean;
-  rightAccessory?: Children;
 } & FormatProps;
 
-export function NumberInput(props: Props) {
+export function InternalNumberInput(props: Props) {
   const config = useBentoConfig().input;
   const { locale } = useLocale();
 
@@ -132,5 +129,3 @@ export function NumberInput(props: Props) {
     </Box>
   );
 }
-
-export type { Props as NumberInputProps };

packages/bento-design-system/src/NumberField/NumberField.tsx

@@ -2,18 +2,15 @@ import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
 import { NumberFieldStateOptions, useNumberFieldState } from "@react-stately/numberfield";
 import { useRef } from "react";
-import { Children, LocalizedString } from "..";
 import { FieldProps } from "../Field/FieldProps";
-import { FormatProps } from "../NumberInput/FormatProps";
-import { useFormatOptions } from "../NumberInput/formatOptions";
+import { BaseNumberProps, FormatProps } from "./types";
+import { useFormatOptions } from "./formatOptions";
 import { Field } from "../Field/Field";
-import { NumberInput } from "../NumberInput/NumberInput";
+import { InternalNumberInput } from "./InternalNumberInput";
 
-type Props = FieldProps<number | undefined, number> & {
-  placeholder?: LocalizedString;
-  isReadOnly?: boolean;
-  rightAccessory?: Children;
-} & FormatProps &
+type Props = FieldProps<number | undefined, number> &
+  BaseNumberProps &
+  FormatProps &
   Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
 
 export function NumberField(props: Props) {
@@ -45,7 +42,7 @@ export function NumberField(props: Props) {
       assistiveTextProps={descriptionProps}
       errorMessageProps={errorMessageProps}
     >
-      <NumberInput
+      <InternalNumberInput
         inputProps={inputProps}
         inputRef={inputRef}
         validationState={validationState}

packages/bento-design-system/src/NumberField/NumberInput.tsx

@@ -0,0 +1,40 @@
+import { NumberFieldStateOptions, useNumberFieldState } from "@react-stately/numberfield";
+import { FieldProps } from "../Field/FieldProps";
+import { BaseNumberProps, FormatProps } from "./types";
+import { useLocale } from "@react-aria/i18n";
+import { useFormatOptions } from "./formatOptions";
+import { HTMLAttributes, useRef } from "react";
+import { useNumberField } from "@react-aria/numberfield";
+import { InternalNumberInput } from "./InternalNumberInput";
+import { AtLeast } from "../util/AtLeast";
+
+type Props = AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">> &
+  Pick<
+    FieldProps<number | undefined, number>,
+    "autoFocus" | "disabled" | "name" | "onBlur" | "onChange" | "value"
+  > &
+  BaseNumberProps & {
+    validationState: "valid" | "invalid";
+  } & FormatProps &
+  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
+
+export function NumberInput(props: Props) {
+  const { locale } = useLocale();
+  const formatOptions = useFormatOptions(props);
+  const state = useNumberFieldState({ ...props, locale, formatOptions });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { inputProps } = useNumberField(
+    {
+      ...props,
+      isDisabled: props.disabled,
+      formatOptions,
+    },
+    state,
+    inputRef
+  );
+
+  return <InternalNumberInput inputProps={inputProps} inputRef={inputRef} {...props} />;
+}
+
+export type { Props as NumberInputProps };

packages/bento-design-system/src/NumberInput/formatOptions.ts → packages/bento-design-system/src/NumberField/formatOptions.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { FormatProps } from "./FormatProps";
+import { FormatProps } from "./types";
 
 export function useFormatOptions({ kind }: FormatProps) {
   // This function must be memoized, see this relevant issue:

packages/bento-design-system/src/NumberField/types.ts

@@ -0,0 +1,20 @@
+import { Children } from "../util/Children";
+import { LocalizedString } from "../util/LocalizedString";
+
+export type BaseNumberProps = {
+  placeholder?: LocalizedString;
+  isReadOnly?: boolean;
+  rightAccessory?: Children;
+};
+
+export type FormatProps =
+  | {
+      kind: "currency";
+      currency: string;
+    }
+  | {
+      kind: "percentage";
+    }
+  | {
+      kind?: "decimal";
+    };

packages/bento-design-system/src/SliderField/SliderField.tsx

@@ -6,8 +6,8 @@ import { ValueBase } from "@react-types/shared";
 import { useRef } from "react";
 import { Field, Slider } from "..";
 import { FieldProps } from "../Field/FieldProps";
-import { useFormatOptions } from "../NumberInput/formatOptions";
-import { FormatProps } from "../NumberInput/FormatProps";
+import { useFormatOptions } from "../NumberField/formatOptions";
+import { FormatProps } from "../NumberField/types";
 
 type Props = (
   | ({