From 1a5542e4ff478b2d73e7c3f99c54f33a89025ad0 Mon Sep 17 00:00:00 2001
From: seloner <georgekalohome@gmail.com>
Date: Fri, 3 Jan 2025 20:55:09 +0200
Subject: [PATCH 1/2] restrict slider type

---
 packages/react/src/slider/root/SliderRoot.tsx | 34 ++++++++++++++-----
 .../react/src/slider/utils/fixedForwardRef.ts |  7 ++++
 2 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/src/slider/utils/fixedForwardRef.ts

diff --git a/packages/react/src/slider/root/SliderRoot.tsx b/packages/react/src/slider/root/SliderRoot.tsx
index 22e18422f0..1567810d1e 100644
--- a/packages/react/src/slider/root/SliderRoot.tsx
+++ b/packages/react/src/slider/root/SliderRoot.tsx
@@ -10,6 +10,7 @@ import { sliderStyleHookMapping } from './styleHooks';
 import { useSliderRoot } from './useSliderRoot';
 import { SliderRootContext } from './SliderRootContext';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
+import { fixedForwardRef } from '../utils/fixedForwardRef';
 
 /**
  * Groups all parts of the slider.
@@ -17,8 +18,8 @@ import { useFieldRootContext } from '../../field/root/FieldRootContext';
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-const SliderRoot = React.forwardRef(function SliderRoot(
-  props: SliderRoot.Props,
+const SliderRoot = fixedForwardRef(function SliderRoot<TValue extends number | number[]>(
+  props: SliderRoot.Props<TValue>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -59,8 +60,8 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     min,
     minStepsBetweenValues,
     name,
-    onValueChange,
-    onValueCommitted,
+    onValueChange: onValueChange as useSliderRoot.Parameters['onValueChange'],
+    onValueCommitted: onValueCommitted as useSliderRoot.Parameters['onValueCommitted'],
     orientation,
     rootRef: forwardedRef,
     step,
@@ -157,7 +158,7 @@ export namespace SliderRoot {
     values: ReadonlyArray<number>;
   }
 
-  export interface Props
+  export interface Props<TValue extends number[] | number = number | number[]>
     extends Pick<
         useSliderRoot.Parameters,
         | 'disabled'
@@ -165,8 +166,6 @@ export namespace SliderRoot {
         | 'min'
         | 'minStepsBetweenValues'
         | 'name'
-        | 'onValueChange'
-        | 'onValueCommitted'
         | 'orientation'
         | 'largeStep'
         | 'step'
@@ -178,7 +177,7 @@ export namespace SliderRoot {
      *
      * To render a controlled slider, use the `value` prop instead.
      */
-    defaultValue?: number | ReadonlyArray<number>;
+    defaultValue?: TValue;
     /**
      * Whether the component should ignore user interaction.
      * @default false
@@ -192,7 +191,24 @@ export namespace SliderRoot {
      * The value of the slider.
      * For ranged sliders, provide an array with two values.
      */
-    value?: number | ReadonlyArray<number>;
+    value?: TValue;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {number | number[]} value The new value.
+     * @param {Event} event The corresponding event that initiated the change.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * @param {number} activeThumbIndex Index of the currently moved thumb.
+     */
+    onValueChange?: (value: TValue, event: Event, activeThumbIndex: number) => void;
+    /**
+     * Callback function that is fired when the `pointerup` is triggered.
+     *
+     * @param {number | number[]} value The new value.
+     * @param {Event} event The corresponding event that initiated the change.
+     * **Warning**: This is a generic event not a change event.
+     */
+    onValueCommitted?: (value: TValue, event: Event) => void;
   }
 }
 
diff --git a/packages/react/src/slider/utils/fixedForwardRef.ts b/packages/react/src/slider/utils/fixedForwardRef.ts
new file mode 100644
index 0000000000..f00ce49f37
--- /dev/null
+++ b/packages/react/src/slider/utils/fixedForwardRef.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function fixedForwardRef<T, P extends React.PropsWithoutRef<any> = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  return React.forwardRef(render) as any;
+}

From 15ae9debd73cfb25bb293786e90743a376825ea9 Mon Sep 17 00:00:00 2001
From: seloner <georgekalohome@gmail.com>
Date: Fri, 3 Jan 2025 20:55:51 +0200
Subject: [PATCH 2/2] propType ts ignore

---
 packages/react/src/slider/root/SliderRoot.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/slider/root/SliderRoot.tsx b/packages/react/src/slider/root/SliderRoot.tsx
index 1567810d1e..e30612b31b 100644
--- a/packages/react/src/slider/root/SliderRoot.tsx
+++ b/packages/react/src/slider/root/SliderRoot.tsx
@@ -214,6 +214,7 @@ export namespace SliderRoot {
 
 export { SliderRoot };
 
+// @ts-expect-error
 SliderRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │