Move "MultiValueButton" props to component

src/base/Base.types.ts

@@ -48,27 +48,6 @@ export type ValueRotationButtonProps<Value extends string | number> =
     | (ValueRotationButtonBaseProps<Value> & PropertiesNever<ValueRotationButtonDefaultableProps<Value>>)
     | ValueRotationButtonDefaultableProps<Value>;
 
-export interface MultiValueButtonBaseProps<Value extends string | number, MultiValue extends Value | Value[] = Value> {
-    value: MultiValue;
-    defaultValue?: Value;
-    values: Value[];
-    setValue: (value: MultiValue) => void;
-    valueToDisplayData: ValueToDisplayData<Value>;
-}
-
-export interface MultiValueButtonDefaultableProps<
-    Value extends string | number,
-    MultiValue extends Value | Value[] = Value,
-> extends OptionalProperty<MultiValueButtonBaseProps<Value, MultiValue>, 'value'> {
-    isDefaultable?: boolean;
-    onDefault?: () => void;
-}
-
-export type MultiValueButtonProps<Value extends string | number, MultiValue extends Value | Value[] = Value> =
-    | (MultiValueButtonBaseProps<Value, MultiValue> &
-          PropertiesNever<MultiValueButtonDefaultableProps<Value, MultiValue>>)
-    | MultiValueButtonDefaultableProps<Value, MultiValue>;
-
 export enum ScrollOffset {
     BACKWARD,
     FORWARD,

src/base/components/buttons/SelectButton.tsx

@@ -10,8 +10,29 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import type { MultiValueButtonProps } from '@/base/Base.types.ts';
 import { Superscript } from '@/base/components/texts/Superscript.tsx';
+import type { ValueToDisplayData } from '@/base/Base.types.ts';
+
+export interface MultiValueButtonBaseProps<Value extends string | number, MultiValue extends Value | Value[] = Value> {
+    value: MultiValue;
+    defaultValue?: Value;
+    values: Value[];
+    setValue: (value: MultiValue) => void;
+    valueToDisplayData: ValueToDisplayData<Value>;
+}
+
+export interface MultiValueButtonDefaultableProps<
+    Value extends string | number,
+    MultiValue extends Value | Value[] = Value,
+> extends OptionalProperty<MultiValueButtonBaseProps<Value, MultiValue>, 'value'> {
+    isDefaultable?: boolean;
+    onDefault?: () => void;
+}
+
+export type MultiValueButtonProps<Value extends string | number, MultiValue extends Value | Value[] = Value> =
+    | (MultiValueButtonBaseProps<Value, MultiValue> &
+          PropertiesNever<MultiValueButtonDefaultableProps<Value, MultiValue>>)
+    | MultiValueButtonDefaultableProps<Value, MultiValue>;
 
 export const SelectButton = <Value extends string | number, MultiValue extends Value | Value[] = Value>({
     value,

src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx

@@ -21,8 +21,8 @@ import {
     READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED,
     READER_PAGE_SCALE_MODE_VALUES,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
 import { CustomIconButton } from '@/base/components/buttons/CustomIconButton.tsx';
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderNavBarDesktopPageScale = ({
     pageScaleMode,

src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx

@@ -13,7 +13,8 @@ import {
     READING_DIRECTION_VALUES,
     READING_DIRECTION_VALUE_TO_DISPLAY_DATA,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
+
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderNavBarDesktopReadingDirection = ({
     readingDirection,

src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx

@@ -13,7 +13,8 @@ import {
     READING_MODE_VALUE_TO_DISPLAY_DATA,
     READING_MODE_VALUES,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
+
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderNavBarDesktopReadingMode = ({
     readingMode,

src/features/reader/settings/layout/components/ReaderSettingPageGap.tsx

@@ -12,7 +12,8 @@ import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import { SliderInput } from '@/base/components/inputs/SliderInput.tsx';
 import { DEFAULT_READER_SETTINGS, PAGE_GAP } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { isContinuousReadingMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
+
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderSettingPageGap = ({
     pageGap,

src/features/reader/settings/layout/components/ReaderSettingPageScaleMode.tsx

@@ -17,7 +17,8 @@ import {
     READER_PAGE_SCALE_MODE_VALUES,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
+
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderSettingPageScaleMode = ({
     pageScaleMode,

src/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx

@@ -12,8 +12,9 @@ import { useLingui } from '@lingui/react/macro';
 import { msg } from '@lingui/core/macro';
 import type { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
 import { ReadingDirection } from '@/features/reader/Reader.types.ts';
-import type { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
+import type { ValueToDisplayData } from '@/base/Base.types.ts';
 import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {
     [ReadingDirection.LTR]: {

src/features/reader/settings/layout/components/ReaderSettingReadingMode.tsx

@@ -13,7 +13,8 @@ import {
     READING_MODE_VALUES,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
+
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderSettingReadingMode = ({
     readingMode,

src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx

@@ -8,7 +8,7 @@
 
 import { useLingui } from '@lingui/react/macro';
 import { msg } from '@lingui/core/macro';
-import type { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
+import type { ValueToDisplayData } from '@/base/Base.types.ts';
 import type {
     IReaderSettings,
     IReaderSettingsWithDefaultFlag,
@@ -16,6 +16,7 @@ import type {
 } from '@/features/reader/Reader.types.ts';
 import type { TapZoneInvertMode } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 enum TapZonesInvertOption {
     NONE,

src/features/reader/settings/layout/components/ReaderSettingTapZoneLayout.tsx

@@ -9,9 +9,10 @@
 import { useLingui } from '@lingui/react/macro';
 import { msg } from '@lingui/core/macro';
 import { TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
-import type { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
+import type { ValueToDisplayData } from '@/base/Base.types.ts';
 import type { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<TapZoneLayouts> = {
     [TapZoneLayouts.EDGE]: {

src/features/reader/settings/layout/components/ReaderSettingWidth.tsx

@@ -14,8 +14,8 @@ import type { ReaderService } from '@/features/reader/services/ReaderService.ts'
 import { SliderInput } from '@/base/components/inputs/SliderInput.tsx';
 import { DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { isReaderWidthEditable } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import type { MultiValueButtonDefaultableProps } from '@/base/Base.types.ts';
 import { ResetButton } from '@/base/components/buttons/ResetButton.tsx';
+import type { MultiValueButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
 
 export const ReaderSettingWidth = ({
     readerWidth,