From 1c97949ef6bbe3d883d755c90e8384fc86715909 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 10 May 2024 15:46:21 +0800
Subject: [PATCH] Reorganize

---
 docs/pages/experiments/slider-controlled.tsx  |  4 +-
 docs/pages/experiments/slider-gradient.tsx    | 74 +++++++++----------
 docs/pages/experiments/slider-vertical.tsx    |  4 +-
 docs/pages/experiments/slider.tsx             |  4 +-
 .../src/Slider2/{ => Output}/SliderOutput.tsx | 12 +--
 .../src/Slider2/Output/SliderOutput.types.ts  |  4 +
 .../src/Slider2/{ => Root}/SliderContext.ts   |  5 +-
 .../src/Slider2/{ => Root}/SliderRoot.tsx     | 20 ++---
 .../Root/SliderRoot.types.ts}                 | 40 +++++++++-
 .../Root/useSlider.ts}                        | 22 +++---
 packages/mui-base/src/Slider2/Slider.types.ts | 69 -----------------
 .../src/Slider2/{ => Thumb}/SliderThumb.tsx   | 14 ++--
 .../Thumb/SliderThumb.types.ts}               | 16 +++-
 .../Thumb}/useSliderThumb.ts                  | 20 ++---
 .../src/Slider2/{ => Track}/SliderTrack.tsx   | 14 ++--
 .../src/Slider2/Track/SliderTrack.types.ts    |  4 +
 .../Track}/useSliderTrack.ts                  | 14 ++--
 packages/mui-base/src/Slider2/index.barrel.ts | 26 +++++++
 packages/mui-base/src/Slider2/index.ts        | 31 ++++++--
 .../src/{useSlider2 => Slider2}/utils.ts      |  0
 packages/mui-base/src/index.ts                | 12 +--
 packages/mui-base/src/useSlider2/index.ts     |  5 --
 22 files changed, 214 insertions(+), 200 deletions(-)
 rename packages/mui-base/src/Slider2/{ => Output}/SliderOutput.tsx (71%)
 create mode 100644 packages/mui-base/src/Slider2/Output/SliderOutput.types.ts
 rename packages/mui-base/src/Slider2/{ => Root}/SliderContext.ts (79%)
 rename packages/mui-base/src/Slider2/{ => Root}/SliderRoot.tsx (74%)
 rename packages/mui-base/src/{useSlider2/useSlider.types.ts => Slider2/Root/SliderRoot.types.ts} (85%)
 rename packages/mui-base/src/{useSlider2/useSlider2.ts => Slider2/Root/useSlider.ts} (96%)
 delete mode 100644 packages/mui-base/src/Slider2/Slider.types.ts
 rename packages/mui-base/src/Slider2/{ => Thumb}/SliderThumb.tsx (76%)
 rename packages/mui-base/src/{useSlider2/useSliderThumb.types.ts => Slider2/Thumb/SliderThumb.types.ts} (61%)
 rename packages/mui-base/src/{useSlider2 => Slider2/Thumb}/useSliderThumb.ts (90%)
 rename packages/mui-base/src/Slider2/{ => Track}/SliderTrack.tsx (66%)
 create mode 100644 packages/mui-base/src/Slider2/Track/SliderTrack.types.ts
 rename packages/mui-base/src/{useSlider2 => Slider2/Track}/useSliderTrack.ts (94%)
 create mode 100644 packages/mui-base/src/Slider2/index.barrel.ts
 rename packages/mui-base/src/{useSlider2 => Slider2}/utils.ts (100%)
 delete mode 100644 packages/mui-base/src/useSlider2/index.ts

diff --git a/docs/pages/experiments/slider-controlled.tsx b/docs/pages/experiments/slider-controlled.tsx
index 96bea6e7ca..f91d83907c 100644
--- a/docs/pages/experiments/slider-controlled.tsx
+++ b/docs/pages/experiments/slider-controlled.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { alpha, useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');
diff --git a/docs/pages/experiments/slider-gradient.tsx b/docs/pages/experiments/slider-gradient.tsx
index 9758c86781..3246c0d1c5 100644
--- a/docs/pages/experiments/slider-gradient.tsx
+++ b/docs/pages/experiments/slider-gradient.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { alpha, hexToRgb, decomposeColor, recomposeColor, rgbToHex } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { percentToValue, roundValueToStep } from '@base_ui/react/useSlider2/utils';
+import { percentToValue, roundValueToStep } from '@base_ui/react/Slider2/utils';
 import { clamp } from '@base_ui/react/utils/clamp';
 import { BaseUIEvent } from '@base_ui/react/utils/BaseUI.types';
 
@@ -34,7 +34,9 @@ export default function App() {
   const insertNewValue = (newPosition: number) => {
     // console.log('insertNewValue position:', newPosition)
 
-    const newIndex = [...values.map(val => val.position), newPosition].sort((a, b) => a - b).indexOf(newPosition);
+    const newIndex = [...values.map((val) => val.position), newPosition]
+      .sort((a, b) => a - b)
+      .indexOf(newPosition);
     // console.log('newIndex:', newIndex)
 
     const newValue = { color: null, position: newPosition };
@@ -43,28 +45,34 @@ export default function App() {
     const floor = newValues[newIndex - 1];
     const ceiling = newValues[newIndex + 1];
 
-    const distance = Math.abs(ceiling.position - floor.position)
+    const distance = Math.abs(ceiling.position - floor.position);
 
     const percentage = (newPosition - floor.position) / distance;
 
-    const { values: floorColor } = decomposeColor(hexToRgb((floor as Stop).color))
-    const { values: ceilingColor } = decomposeColor(hexToRgb((ceiling as Stop).color))
+    const { values: floorColor } = decomposeColor(hexToRgb((floor as Stop).color));
+    const { values: ceilingColor } = decomposeColor(hexToRgb((ceiling as Stop).color));
 
     // console.log('floor color', floorColor);
     // console.log('ceiling color', ceilingColor);
     // console.log('percentage', percentage);
 
-    const newColor = recomposeColor({ type: 'rgb', values: [
-      floorColor[0] * (1 - percentage) + ceilingColor[0] * percentage,
-      floorColor[1] * (1 - percentage) + ceilingColor[1] * percentage,
-      floorColor[2] * (1 - percentage) + ceilingColor[2] * percentage,
-      ] })
+    const newColor = recomposeColor({
+      type: 'rgb',
+      values: [
+        floorColor[0] * (1 - percentage) + ceilingColor[0] * percentage,
+        floorColor[1] * (1 - percentage) + ceilingColor[1] * percentage,
+        floorColor[2] * (1 - percentage) + ceilingColor[2] * percentage,
+      ],
+    });
     // console.log('newColor', rgbToHex(newColor))
 
-    const finalValues = [...values, {
-      color: rgbToHex(newColor),
-      position: newPosition,
-    }].sort((a, b) => a.position - b.position);
+    const finalValues = [
+      ...values,
+      {
+        color: rgbToHex(newColor),
+        position: newPosition,
+      },
+    ].sort((a, b) => a.position - b.position);
 
     setValues(finalValues);
   };
@@ -84,13 +92,13 @@ export default function App() {
 
   const handleValueChange = (newValue: number | number[], activeThumbIndex: number) => {
     if (!Array.isArray(newValue)) {
-      console.error('array only!')
+      console.error('array only!');
       return;
     }
 
     const activeStopColor = activeStopRef.current?.color ?? null;
     // FIXME: bug happens if activeStopColor appears twice or more
-    const valuesWithoutActiveStop = values.filter(val => val.color !== activeStopColor);
+    const valuesWithoutActiveStop = values.filter((val) => val.color !== activeStopColor);
     // console.log('valuesWithoutActiveStop', JSON.stringify(valuesWithoutActiveStop))
     // console.log('newThumbIndex', activeThumbIndex);
 
@@ -98,14 +106,14 @@ export default function App() {
       ...valuesWithoutActiveStop,
       {
         ...activeStopRef.current,
-        position: newValue[activeThumbIndex]
+        position: newValue[activeThumbIndex],
       },
     ].sort((a, b) => a.position - b.position);
 
     // console.log('handleValueChange', newValues);
     // @ts-ignore
     setValues(newValues);
-  }
+  };
 
   const handlePointerDown = (event: BaseUIEvent<React.PointerEvent>) => {
     if (event.target === trackRef.current) {
@@ -144,7 +152,9 @@ export default function App() {
         value={values.map(({ position }) => position)}
         onValueChange={handleValueChange}
       >
-        <Slider.Output className="MySlider-output"><pre>background: {gradient}</pre></Slider.Output>
+        <Slider.Output className="MySlider-output">
+          <pre>background: {gradient}</pre>
+        </Slider.Output>
         <Slider.Track
           className="MySlider-track"
           render={<span />}
@@ -158,7 +168,7 @@ export default function App() {
           {values.map(({ color }, index) => (
             <Slider.Thumb
               key={`slider-thumb-${index}`}
-              className={classNames('MySlider-thumb', openThumbIndex === index && 'active' )}
+              className={classNames('MySlider-thumb', openThumbIndex === index && 'active')}
               onFocus={(event: BaseUIEvent<React.FocusEvent<HTMLInputElement>>) => {
                 const currentIndex = Number(event.target.dataset.index);
                 if (Number.isInteger(currentIndex)) {
@@ -173,7 +183,7 @@ export default function App() {
                   activeStopRef.current = null;
                 }
               }}
-              onPointerDown={event => {
+              onPointerDown={(event) => {
                 isDraggingRef.current = true;
                 const currentIndex = Number(event.currentTarget.dataset.index);
                 // console.log('currentStop', values[currentIndex])
@@ -223,27 +233,15 @@ export default function App() {
                         return {
                           ...val,
                           color: event.target.value,
-                        }
+                        };
                       }
                       return val;
-                    })
-                    setValues(newValues)
+                    });
+                    setValues(newValues);
                   }}
                 />
-                <input
-                  type="text"
-                  value={color}
-                  readOnly
-                  disabled
-                  className="Stop-color"
-                />
-                <input
-                  type="text"
-                  value={position}
-                  readOnly
-                  disabled
-                  className="Stop-position"
-                />
+                <input type="text" value={color} readOnly disabled className="Stop-color" />
+                <input type="text" value={position} readOnly disabled className="Stop-position" />
                 <button
                   type="button"
                   onClick={() => removeValueByIndex(index)}
diff --git a/docs/pages/experiments/slider-vertical.tsx b/docs/pages/experiments/slider-vertical.tsx
index 001a3b942a..ee861da292 100644
--- a/docs/pages/experiments/slider-vertical.tsx
+++ b/docs/pages/experiments/slider-vertical.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
index 8682023ae5..3c031caa2a 100644
--- a/docs/pages/experiments/slider.tsx
+++ b/docs/pages/experiments/slider.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');
diff --git a/packages/mui-base/src/Slider2/SliderOutput.tsx b/packages/mui-base/src/Slider2/Output/SliderOutput.tsx
similarity index 71%
rename from packages/mui-base/src/Slider2/SliderOutput.tsx
rename to packages/mui-base/src/Slider2/Output/SliderOutput.tsx
index 8813e3ff6e..ed6609b976 100644
--- a/packages/mui-base/src/Slider2/SliderOutput.tsx
+++ b/packages/mui-base/src/Slider2/Output/SliderOutput.tsx
@@ -1,17 +1,17 @@
 'use client';
 import * as React from 'react';
-import { evaluateRenderProp } from '../utils/evaluateRenderProp';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { useSliderContext } from './SliderContext';
-import { OutputProps } from './Slider.types';
+import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { useSliderContext } from '../Root/SliderContext';
+import { SliderOutputProps } from './SliderOutput.types';
 
 function defaultRender(props: React.ComponentPropsWithRef<'output'>) {
   return <output {...props} />;
 }
 
 const SliderOutput = React.forwardRef(function SliderOutput(
-  props: OutputProps,
+  props: SliderOutputProps,
   forwardedRef: React.ForwardedRef<HTMLOutputElement>,
 ) {
   const { render: renderProp, className, ...otherProps } = props;
diff --git a/packages/mui-base/src/Slider2/Output/SliderOutput.types.ts b/packages/mui-base/src/Slider2/Output/SliderOutput.types.ts
new file mode 100644
index 0000000000..d26579e83f
--- /dev/null
+++ b/packages/mui-base/src/Slider2/Output/SliderOutput.types.ts
@@ -0,0 +1,4 @@
+import { BaseUIComponentProps } from '../../utils/BaseUI.types';
+import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+
+export interface SliderOutputProps extends BaseUIComponentProps<'output', SliderRootOwnerState> {}
diff --git a/packages/mui-base/src/Slider2/SliderContext.ts b/packages/mui-base/src/Slider2/Root/SliderContext.ts
similarity index 79%
rename from packages/mui-base/src/Slider2/SliderContext.ts
rename to packages/mui-base/src/Slider2/Root/SliderContext.ts
index 4764871156..a9f34e2291 100644
--- a/packages/mui-base/src/Slider2/SliderContext.ts
+++ b/packages/mui-base/src/Slider2/Root/SliderContext.ts
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { UseSliderReturnValue } from '../useSlider2/useSlider.types';
-import { SliderOwnerState } from './Slider.types';
+import { UseSliderReturnValue, SliderRootOwnerState } from './SliderRoot.types';
 
 export type SliderContextValue = Omit<UseSliderReturnValue, 'compoundComponentContextValue'> & {
-  ownerState: SliderOwnerState;
+  ownerState: SliderRootOwnerState;
 };
 
 export const SliderContext = React.createContext<SliderContextValue | undefined>(undefined);
diff --git a/packages/mui-base/src/Slider2/SliderRoot.tsx b/packages/mui-base/src/Slider2/Root/SliderRoot.tsx
similarity index 74%
rename from packages/mui-base/src/Slider2/SliderRoot.tsx
rename to packages/mui-base/src/Slider2/Root/SliderRoot.tsx
index d0c40584fd..10a3b93d50 100644
--- a/packages/mui-base/src/Slider2/SliderRoot.tsx
+++ b/packages/mui-base/src/Slider2/Root/SliderRoot.tsx
@@ -1,20 +1,20 @@
 'use client';
 import * as React from 'react';
-import { evaluateRenderProp } from '../utils/evaluateRenderProp';
-import { getStyleHookProps } from '../utils/getStyleHookProps';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { CompoundComponentContext } from '../useCompound';
-import { useSlider } from '../useSlider2';
+import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
+import { getStyleHookProps } from '../../utils/getStyleHookProps';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { CompoundComponentContext } from '../../useCompound';
+import { useSlider } from './useSlider';
 import { SliderContext } from './SliderContext';
-import { RootProps, SliderOwnerState } from './Slider.types';
+import { SliderRootProps, SliderRootOwnerState } from './SliderRoot.types';
 
 function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
   return <div {...props} />;
 }
 
 const SliderRoot = React.forwardRef(function SliderRoot(
-  props: RootProps,
+  props: SliderRootProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -40,7 +40,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     ...otherProps,
   });
 
-  const ownerState: SliderOwnerState = React.useMemo(
+  const ownerState: SliderRootOwnerState = React.useMemo(
     () => ({
       disabled,
       dragging: slider.dragging,
@@ -79,4 +79,4 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   );
 });
 
-export { SliderRoot };
+export { SliderRoot as Slider };
diff --git a/packages/mui-base/src/useSlider2/useSlider.types.ts b/packages/mui-base/src/Slider2/Root/SliderRoot.types.ts
similarity index 85%
rename from packages/mui-base/src/useSlider2/useSlider.types.ts
rename to packages/mui-base/src/Slider2/Root/SliderRoot.types.ts
index fc46e3cd03..7894b46412 100644
--- a/packages/mui-base/src/useSlider2/useSlider.types.ts
+++ b/packages/mui-base/src/Slider2/Root/SliderRoot.types.ts
@@ -1,5 +1,39 @@
-import { CompoundComponentContextValue } from '../useCompound';
-import { ThumbMetadata } from './useSliderThumb.types';
+import { SliderThumbMetadata } from '../Thumb/SliderThumb.types';
+import type { BaseUIComponentProps } from '../../utils/BaseUI.types';
+import { CompoundComponentContextValue } from '../../useCompound';
+
+export interface SliderRootOwnerState {
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: boolean;
+  min: number;
+  max: number;
+  /**
+   * The raw number value of the slider.
+   */
+  value: number | ReadonlyArray<number>;
+}
+
+export interface SliderRootProps
+  extends UseSliderParameters,
+    Omit<BaseUIComponentProps<'div', SliderRootOwnerState>, 'defaultValue' | 'onChange' | 'value'> {
+  /**
+   * The default value of the slider. Use when the component is not controlled.
+   */
+  defaultValue?: number | ReadonlyArray<number>;
+  /**
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: number | ReadonlyArray<number>;
+}
 
 export interface UseSliderParameters {
   /**
@@ -155,7 +189,7 @@ export interface UseSliderReturnValue {
     index: number,
     event: React.KeyboardEvent | React.ChangeEvent,
   ) => void;
-  compoundComponentContextValue: CompoundComponentContextValue<any, ThumbMetadata>;
+  compoundComponentContextValue: CompoundComponentContextValue<any, SliderThumbMetadata>;
   dragging: boolean;
   disabled: boolean;
   getFingerNewValue: (args: {
diff --git a/packages/mui-base/src/useSlider2/useSlider2.ts b/packages/mui-base/src/Slider2/Root/useSlider.ts
similarity index 96%
rename from packages/mui-base/src/useSlider2/useSlider2.ts
rename to packages/mui-base/src/Slider2/Root/useSlider.ts
index 6b975577c1..ce6ddae0f8 100644
--- a/packages/mui-base/src/useSlider2/useSlider2.ts
+++ b/packages/mui-base/src/Slider2/Root/useSlider.ts
@@ -1,15 +1,15 @@
 'use client';
 import * as React from 'react';
-import { areArraysEqual } from '../utils/areArraysEqual';
-import { clamp } from '../utils/clamp';
-import { mergeReactProps } from '../utils/mergeReactProps';
-import { ownerDocument } from '../utils/owner';
-import { useControlled } from '../utils/useControlled';
-import { useForkRef } from '../utils/useForkRef';
-import { useCompoundParent } from '../useCompound';
-import { percentToValue, roundValueToStep, valueToPercent } from './utils';
-import { Mark, UseSliderParameters, UseSliderReturnValue } from './useSlider.types';
-import { ThumbMetadata } from './useSliderThumb.types';
+import { areArraysEqual } from '../../utils/areArraysEqual';
+import { clamp } from '../../utils/clamp';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { ownerDocument } from '../../utils/owner';
+import { useControlled } from '../../utils/useControlled';
+import { useForkRef } from '../../utils/useForkRef';
+import { useCompoundParent } from '../../useCompound';
+import { percentToValue, roundValueToStep, valueToPercent } from '../utils';
+import { Mark, UseSliderParameters, UseSliderReturnValue } from './SliderRoot.types';
+import { SliderThumbMetadata } from '../Thumb/SliderThumb.types';
 
 export function areValuesEqual(
   newValue: number | ReadonlyArray<number>,
@@ -167,7 +167,7 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
 
   const { contextValue: compoundComponentContextValue, subitems } = useCompoundParent<
     string,
-    ThumbMetadata
+    SliderThumbMetadata
   >();
 
   const handleValueChange = React.useCallback(
diff --git a/packages/mui-base/src/Slider2/Slider.types.ts b/packages/mui-base/src/Slider2/Slider.types.ts
deleted file mode 100644
index fac533414a..0000000000
--- a/packages/mui-base/src/Slider2/Slider.types.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { UseSliderParameters } from '../useSlider2/useSlider.types';
-import { UseSliderThumbParameters } from '../useSlider2/useSliderThumb.types';
-import type { BaseUIComponentProps } from '../utils/BaseUI.types';
-
-export interface SliderOwnerState {
-  /**
-   * If `true`, the component is disabled.
-   */
-  disabled: boolean;
-  min: number;
-  max: number;
-  /**
-   * The raw number value of the slider.
-   */
-  value: number | ReadonlyArray<number>;
-}
-
-export interface RootProps
-  extends UseSliderParameters,
-    Omit<BaseUIComponentProps<'div', SliderOwnerState>, 'defaultValue' | 'onChange' | 'value'> {
-  /**
-   * The default value of the slider. Use when the component is not controlled.
-   */
-  defaultValue?: number | ReadonlyArray<number>;
-  /**
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The value of the slider.
-   * For ranged sliders, provide an array with two values.
-   */
-  value?: number | ReadonlyArray<number>;
-}
-
-/*
-export type HiddenInputProps = {
-  'aria-labelledby'?: string;
-  'aria-orientation'?: React.AriaAttributes['aria-orientation'];
-  'aria-valuemax'?: React.AriaAttributes['aria-valuemax'];
-  'aria-valuemin'?: React.AriaAttributes['aria-valuemin'];
-  // to disable an individual thumb
-  disabled: boolean; // move to thumb
-  name?: string; // move to thumb
-  onBlur: React.FocusEventHandler; // move to thumb
-  onChange: React.ChangeEventHandler<HTMLInputElement>; // move to thumb
-  onFocus: React.FocusEventHandler; // move to thumb
-  step?: number;
-  style: React.CSSProperties;
-  tabIndex?: number; // move to thumb
-  type?: React.InputHTMLAttributes<HTMLInputElement>['type']; // remove? hard code to 'range'
-};
-*/
-
-export interface ThumbProps
-  extends UseSliderThumbParameters,
-    BaseUIComponentProps<'div', SliderOwnerState> {
-  onPointerLeave?: React.PointerEventHandler;
-  onPointerOver?: React.PointerEventHandler;
-  onBlur?: React.FocusEventHandler;
-  onFocus?: React.FocusEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
-}
-
-export interface TrackProps extends BaseUIComponentProps<'div', SliderOwnerState> {}
-
-export interface OutputProps extends BaseUIComponentProps<'output', SliderOwnerState> {}
diff --git a/packages/mui-base/src/Slider2/SliderThumb.tsx b/packages/mui-base/src/Slider2/Thumb/SliderThumb.tsx
similarity index 76%
rename from packages/mui-base/src/Slider2/SliderThumb.tsx
rename to packages/mui-base/src/Slider2/Thumb/SliderThumb.tsx
index ab50f97f28..c21b0801a1 100644
--- a/packages/mui-base/src/Slider2/SliderThumb.tsx
+++ b/packages/mui-base/src/Slider2/Thumb/SliderThumb.tsx
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
-import { getStyleHookProps } from '../utils/getStyleHookProps';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { useSliderContext } from './SliderContext';
-import { ThumbProps } from './Slider.types';
-import { useSliderThumb } from '../useSlider2/useSliderThumb';
+import { getStyleHookProps } from '../../utils/getStyleHookProps';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { useSliderContext } from '../Root/SliderContext';
+import { SliderThumbProps } from './SliderThumb.types';
+import { useSliderThumb } from './useSliderThumb';
 
 function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
   return <div {...props} />;
@@ -14,7 +14,7 @@ function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
 function NOOP() {}
 
 const SliderThumb = React.forwardRef(function SliderThumb(
-  props: ThumbProps,
+  props: SliderThumbProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
diff --git a/packages/mui-base/src/useSlider2/useSliderThumb.types.ts b/packages/mui-base/src/Slider2/Thumb/SliderThumb.types.ts
similarity index 61%
rename from packages/mui-base/src/useSlider2/useSliderThumb.types.ts
rename to packages/mui-base/src/Slider2/Thumb/SliderThumb.types.ts
index f64fcaf1d9..e16f4bd538 100644
--- a/packages/mui-base/src/useSlider2/useSliderThumb.types.ts
+++ b/packages/mui-base/src/Slider2/Thumb/SliderThumb.types.ts
@@ -1,3 +1,17 @@
+import { BaseUIComponentProps } from '../../utils/BaseUI.types';
+
+export type SliderThumbOwnerState = {};
+
+export interface SliderThumbProps
+  extends UseSliderThumbParameters,
+    BaseUIComponentProps<'div', SliderThumbOwnerState> {
+  onPointerLeave?: React.PointerEventHandler;
+  onPointerOver?: React.PointerEventHandler;
+  onBlur?: React.FocusEventHandler;
+  onFocus?: React.FocusEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
+}
+
 export interface UseSliderThumbParameters {
   id?: string;
   disabled?: boolean;
@@ -20,7 +34,7 @@ export interface UseSliderThumbReturnValue {
   index: number;
 }
 
-export interface ThumbMetadata {
+export interface SliderThumbMetadata {
   inputId: string;
   ref: React.RefObject<HTMLElement>;
   inputRef: React.RefObject<HTMLInputElement>;
diff --git a/packages/mui-base/src/useSlider2/useSliderThumb.ts b/packages/mui-base/src/Slider2/Thumb/useSliderThumb.ts
similarity index 90%
rename from packages/mui-base/src/useSlider2/useSliderThumb.ts
rename to packages/mui-base/src/Slider2/Thumb/useSliderThumb.ts
index bb9ff4d29f..14f2e32263 100644
--- a/packages/mui-base/src/useSlider2/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider2/Thumb/useSliderThumb.ts
@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { mergeReactProps } from '../utils/mergeReactProps';
-import { useForkRef } from '../utils/useForkRef';
-import { useId } from '../utils/useId';
-import { visuallyHidden } from '../utils/visuallyHidden';
-import { useCompoundItem } from '../useCompound';
-import { useSliderContext } from '../Slider2/SliderContext';
-import { valueToPercent } from './utils';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useForkRef } from '../../utils/useForkRef';
+import { useId } from '../../utils/useId';
+import { visuallyHidden } from '../../utils/visuallyHidden';
+import { useCompoundItem } from '../../useCompound';
+import { useSliderContext } from '../Root/SliderContext';
+import { valueToPercent } from '../utils';
 import {
-  ThumbMetadata,
+  SliderThumbMetadata,
   UseSliderThumbParameters,
   UseSliderThumbReturnValue,
-} from './useSliderThumb.types';
+} from './SliderThumb.types';
 
 function idGenerator(existingKeys: Set<string>) {
   return `thumb-${existingKeys.size}`;
@@ -46,7 +46,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
 
   const handleRef = useForkRef(externalRef, thumbRef);
 
-  const thumbMetadata: ThumbMetadata = React.useMemo(
+  const thumbMetadata: SliderThumbMetadata = React.useMemo(
     () => ({ inputId: thumbId ? `${thumbId}-input` : '', ref: thumbRef, inputRef }),
     [thumbId],
   );
diff --git a/packages/mui-base/src/Slider2/SliderTrack.tsx b/packages/mui-base/src/Slider2/Track/SliderTrack.tsx
similarity index 66%
rename from packages/mui-base/src/Slider2/SliderTrack.tsx
rename to packages/mui-base/src/Slider2/Track/SliderTrack.tsx
index d51d94f47e..eda6e76010 100644
--- a/packages/mui-base/src/Slider2/SliderTrack.tsx
+++ b/packages/mui-base/src/Slider2/Track/SliderTrack.tsx
@@ -1,18 +1,18 @@
 'use client';
 import * as React from 'react';
-import { evaluateRenderProp } from '../utils/evaluateRenderProp';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { useSliderContext } from './SliderContext';
-import { TrackProps } from './Slider.types';
-import { useSliderTrack } from '../useSlider2/useSliderTrack';
+import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { useSliderContext } from '../Root/SliderContext';
+import { SliderTrackProps } from './SliderTrack.types';
+import { useSliderTrack } from './useSliderTrack';
 
 function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
   return <div {...props} />;
 }
 
 const SliderTrack = React.forwardRef(function SliderTrack(
-  props: TrackProps,
+  props: SliderTrackProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { render: renderProp, className, ...otherProps } = props;
diff --git a/packages/mui-base/src/Slider2/Track/SliderTrack.types.ts b/packages/mui-base/src/Slider2/Track/SliderTrack.types.ts
new file mode 100644
index 0000000000..7485312aa9
--- /dev/null
+++ b/packages/mui-base/src/Slider2/Track/SliderTrack.types.ts
@@ -0,0 +1,4 @@
+import { BaseUIComponentProps } from '../../utils/BaseUI.types';
+import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+
+export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRootOwnerState> {}
diff --git a/packages/mui-base/src/useSlider2/useSliderTrack.ts b/packages/mui-base/src/Slider2/Track/useSliderTrack.ts
similarity index 94%
rename from packages/mui-base/src/useSlider2/useSliderTrack.ts
rename to packages/mui-base/src/Slider2/Track/useSliderTrack.ts
index c69970bf59..545591523d 100644
--- a/packages/mui-base/src/useSlider2/useSliderTrack.ts
+++ b/packages/mui-base/src/Slider2/Track/useSliderTrack.ts
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { mergeReactProps } from '../utils/mergeReactProps';
-import { useForkRef } from '../utils/useForkRef';
-import { useSliderContext } from '../Slider2/SliderContext';
-import { useEventCallback } from '../utils/useEventCallback';
-import { areValuesEqual, focusThumb, trackFinger } from './useSlider2';
-import { ownerDocument } from '../utils/owner';
-import { roundValueToStep, valueToPercent } from './utils';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useForkRef } from '../../utils/useForkRef';
+import { useSliderContext } from '../Root/SliderContext';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { areValuesEqual, focusThumb, trackFinger } from '../Root/useSlider';
+import { ownerDocument } from '../../utils/owner';
+import { roundValueToStep, valueToPercent } from '../utils';
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
diff --git a/packages/mui-base/src/Slider2/index.barrel.ts b/packages/mui-base/src/Slider2/index.barrel.ts
new file mode 100644
index 0000000000..5961588acf
--- /dev/null
+++ b/packages/mui-base/src/Slider2/index.barrel.ts
@@ -0,0 +1,26 @@
+export { Slider } from './Root/SliderRoot';
+export {
+  SliderRootOwnerState,
+  SliderRootProps,
+  UseSliderParameters,
+  UseSliderReturnValue,
+} from './Root/SliderRoot.types';
+export { useSlider } from './Root/useSlider';
+export { SliderContext, type SliderContextValue, useSliderContext } from './Root/SliderContext';
+
+export { SliderThumb } from './Thumb/SliderThumb';
+export type {
+  SliderThumbOwnerState,
+  SliderThumbProps,
+  UseSliderThumbParameters,
+  UseSliderThumbReturnValue,
+  SliderThumbMetadata,
+} from './Thumb/SliderThumb.types';
+export { useSliderThumb } from './Thumb/useSliderThumb';
+
+export { SliderTrack } from './Track/SliderTrack';
+export type { SliderTrackProps } from './Track/SliderTrack.types';
+export { useSliderTrack } from './Track/useSliderTrack';
+
+export { SliderOutput } from './Output/SliderOutput';
+export type { SliderOutputProps } from './Output/SliderOutput.types';
diff --git a/packages/mui-base/src/Slider2/index.ts b/packages/mui-base/src/Slider2/index.ts
index 6d1634eab4..6cda82301b 100644
--- a/packages/mui-base/src/Slider2/index.ts
+++ b/packages/mui-base/src/Slider2/index.ts
@@ -1,7 +1,26 @@
-'use client';
-export { SliderRoot as Root } from './SliderRoot';
-export { SliderThumb as Thumb } from './SliderThumb';
-export { SliderTrack as Track } from './SliderTrack';
-export { SliderOutput as Output } from './SliderOutput';
+export { Slider as Root } from './Root/SliderRoot';
+export {
+  SliderRootOwnerState as SliderOwnerState,
+  SliderRootProps as RootProps,
+  UseSliderParameters,
+  UseSliderReturnValue,
+} from './Root/SliderRoot.types';
+export { useSlider } from './Root/useSlider';
+export { SliderContext, type SliderContextValue, useSliderContext } from './Root/SliderContext';
 
-export * from './Slider.types';
+export { SliderThumb as Thumb } from './Thumb/SliderThumb';
+export type {
+  SliderThumbOwnerState as ThumbOwnerState,
+  SliderThumbProps as ThumbProps,
+  UseSliderThumbParameters,
+  UseSliderThumbReturnValue,
+  SliderThumbMetadata as ThumbMetadata,
+} from './Thumb/SliderThumb.types';
+export { useSliderThumb } from './Thumb/useSliderThumb';
+
+export { SliderTrack as Track } from './Track/SliderTrack';
+export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
+export { useSliderTrack } from './Track/useSliderTrack';
+
+export { SliderOutput as Output } from './Output/SliderOutput';
+export type { SliderOutputProps as OutputProps } from './Output/SliderOutput.types';
diff --git a/packages/mui-base/src/useSlider2/utils.ts b/packages/mui-base/src/Slider2/utils.ts
similarity index 100%
rename from packages/mui-base/src/useSlider2/utils.ts
rename to packages/mui-base/src/Slider2/utils.ts
diff --git a/packages/mui-base/src/index.ts b/packages/mui-base/src/index.ts
index 86e36655a2..5462094238 100644
--- a/packages/mui-base/src/index.ts
+++ b/packages/mui-base/src/index.ts
@@ -22,16 +22,7 @@ export {
   type ScrubAreaCursorProps as NumberFieldScrubAreaCursorProps,
   type OwnerState as NumberFieldOwnerState,
 } from './NumberField';
-export {
-  Root as SliderRoot,
-  Track as SliderTrack,
-  Thumb as SliderThumb,
-  Output as SliderOutput,
-  type RootProps as SliderRootProps,
-  type TrackProps as SliderTrackProps,
-  type ThumbProps as SliderThumbProps,
-  type OutputProps as SliderOutputProps,
-} from './Slider2';
+export * from './Slider2/index.barrel';
 export {
   Root as SwitchRoot,
   Thumb as SwitchThumb,
@@ -43,5 +34,4 @@ export * from './Tabs/index.barrel';
 
 export * from './useCheckbox';
 export * from './useNumberField';
-export * from './useSlider2';
 export * from './useSwitch';
diff --git a/packages/mui-base/src/useSlider2/index.ts b/packages/mui-base/src/useSlider2/index.ts
deleted file mode 100644
index d4035c9b88..0000000000
--- a/packages/mui-base/src/useSlider2/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-'use client';
-export * from './useSlider2';
-export * from './useSlider.types';
-export * from './useSliderThumb';
-export * from './useSliderThumb.types';