diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index 4734cc628f..d1dc37cc92 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -1,8 +1,8 @@ --- productId: base-ui title: React Slider components -components: Slider, SliderRoot, SliderOutput, SliderControl, SliderIndicator, SliderThumb -hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderIndicator, useSliderThumb +components: Slider, SliderRoot, SliderOutput, SliderControl, SliderTrack, SliderThumb, SliderIndicator +hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderThumb, useSliderIndicator githubLabel: 'component: slider' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/ packageName: '@base_ui/react' diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js index fa6ac3d73f..5d749ff4ed 100644 --- a/docs/data/base/pagesApi.js +++ b/docs/data/base/pagesApi.js @@ -99,6 +99,10 @@ module.exports = [ pathname: '/base-ui/react-slider/components-api/#slider-thumb', title: 'SliderThumb', }, + { + pathname: '/base-ui/react-slider/components-api/#slider-track', + title: 'SliderTrack', + }, { pathname: '/base-ui/react-snackbar/components-api/#snackbar', title: 'Snackbar', diff --git a/docs/pages/base-ui/api/slider-track.json b/docs/pages/base-ui/api/slider-track.json new file mode 100644 index 0000000000..96af06e282 --- /dev/null +++ b/docs/pages/base-ui/api/slider-track.json @@ -0,0 +1,19 @@ +{ + "props": { + "className": { "type": { "name": "union", "description": "func
| string" } }, + "render": { "type": { "name": "union", "description": "element
| func" } } + }, + "name": "SliderTrack", + "imports": [ + "import * as Slider from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;" + ], + "classes": [], + "spread": true, + "themeDefaultProps": true, + "muiName": "SliderTrack", + "forwardsRefTo": "HTMLSpanElement", + "filename": "/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/base-ui/api/use-slider-track.json b/docs/pages/base-ui/api/use-slider-track.json new file mode 100644 index 0000000000..26a8777be9 --- /dev/null +++ b/docs/pages/base-ui/api/use-slider-track.json @@ -0,0 +1,20 @@ +{ + "parameters": { + "rootRef": { + "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" } + } + }, + "returnValue": { + "getRootProps": { + "type": { + "name": "(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>", + "description": "(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>" + }, + "required": true + } + }, + "name": "useSliderTrack", + "filename": "/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts", + "imports": ["import { useSliderTrack } from '@base_ui/react/Slider';"], + "demos": "" +} diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js index 76649ae5eb..f6b39cf395 100644 --- a/docs/pages/base-ui/react-slider/[docsTab]/index.js +++ b/docs/pages/base-ui/react-slider/[docsTab]/index.js @@ -9,6 +9,7 @@ import SliderIndicatorApiJsonPageContent from '../../api/slider-indicator.json'; import SliderOutputApiJsonPageContent from '../../api/slider-output.json'; import SliderRootApiJsonPageContent from '../../api/slider-root.json'; import SliderThumbApiJsonPageContent from '../../api/slider-thumb.json'; +import SliderTrackApiJsonPageContent from '../../api/slider-track.json'; import useSliderApiJsonPageContent from '../../api/use-slider.json'; import useSliderControlApiJsonPageContent from '../../api/use-slider-control.json'; import useSliderIndicatorApiJsonPageContent from '../../api/use-slider-indicator.json'; @@ -75,6 +76,13 @@ export const getStaticProps = () => { ); const SliderThumbApiDescriptions = mapApiPageTranslations(SliderThumbApiReq); + const SliderTrackApiReq = require.context( + 'docs-base/translations/api-docs/slider-track', + false, + /\.\/slider-track.*.json$/, + ); + const SliderTrackApiDescriptions = mapApiPageTranslations(SliderTrackApiReq); + const useSliderApiReq = require.context( 'docs-base/translations/api-docs/use-slider', false, @@ -126,6 +134,7 @@ export const getStaticProps = () => { SliderOutput: SliderOutputApiDescriptions, SliderRoot: SliderRootApiDescriptions, SliderThumb: SliderThumbApiDescriptions, + SliderTrack: SliderTrackApiDescriptions, }, componentsApiPageContents: { Slider: SliderApiJsonPageContent, @@ -134,6 +143,7 @@ export const getStaticProps = () => { SliderOutput: SliderOutputApiJsonPageContent, SliderRoot: SliderRootApiJsonPageContent, SliderThumb: SliderThumbApiJsonPageContent, + SliderTrack: SliderTrackApiJsonPageContent, }, hooksApiDescriptions: { useSlider: useSliderApiDescriptions, diff --git a/docs/pages/experiments/slider-change-committed-lag.tsx b/docs/pages/experiments/slider-change-committed-lag.tsx index 95c37022dd..198bad1b9c 100644 --- a/docs/pages/experiments/slider-change-committed-lag.tsx +++ b/docs/pages/experiments/slider-change-committed-lag.tsx @@ -23,8 +23,10 @@ export default function App() { > - - + + + + diff --git a/docs/pages/experiments/slider-label.tsx b/docs/pages/experiments/slider-label.tsx index cb7b650418..600a81ac2f 100644 --- a/docs/pages/experiments/slider-label.tsx +++ b/docs/pages/experiments/slider-label.tsx @@ -37,8 +37,10 @@ export default function App() { - - + + + + @@ -48,9 +50,11 @@ export default function App() { - - - + + + + + diff --git a/docs/pages/experiments/slider-rtl.tsx b/docs/pages/experiments/slider-rtl.tsx index 5ab0a460c4..6ffa26f86d 100644 --- a/docs/pages/experiments/slider-rtl.tsx +++ b/docs/pages/experiments/slider-rtl.tsx @@ -8,8 +8,10 @@ export default function App() { - - + + + + @@ -21,17 +23,21 @@ export default function App() { > - - + + + + - - - + + + + + @@ -43,9 +49,11 @@ export default function App() { > - - - + + + + + diff --git a/docs/pages/experiments/slider-track-padding.tsx b/docs/pages/experiments/slider-track-padding.tsx deleted file mode 100644 index c6114a76fd..0000000000 --- a/docs/pages/experiments/slider-track-padding.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import * as Slider from '@base_ui/react/Slider'; -import { Styles } from './slider'; - -export default function App() { - return ( -
- - - - - - - - - - - - - - - - - - -
- ); -} diff --git a/docs/pages/experiments/slider-vertical.tsx b/docs/pages/experiments/slider-vertical.tsx index a4879184e0..f9a2329cbc 100644 --- a/docs/pages/experiments/slider-vertical.tsx +++ b/docs/pages/experiments/slider-vertical.tsx @@ -8,17 +8,21 @@ export default function App() { - - + + + + - - - + + + + + diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx index 189c9602fd..e261cff625 100644 --- a/docs/pages/experiments/slider.tsx +++ b/docs/pages/experiments/slider.tsx @@ -12,35 +12,43 @@ export default function App() { - - + + + + - - + + + + - - - + + + + + - - - - + + + + + + @@ -54,8 +62,10 @@ export default function App() { > - - + + + + @@ -68,9 +78,11 @@ export default function App() { > - - - + + + + + @@ -83,9 +95,11 @@ export default function App() { > - {val3.map((_val, idx) => ( - - ))} + + {val3.map((_val, idx) => ( + + ))} + @@ -126,6 +140,8 @@ export function Styles() { } .MySlider { + --slider-track-height: 2px; + width: 100%; margin: 16px 0; align-items: center; @@ -158,17 +174,15 @@ export function Styles() { touch-action: none; } - .MySlider-control::before { - content: ''; + .MySlider-track { width: 100%; - height: 2px; + height: var(--slider-track-height); border-radius: 9999px; background-color: gainsboro; touch-action: none; } .MySlider-indicator { - height: 2px; border-radius: 9999px; background-color: black; } @@ -180,6 +194,11 @@ export function Styles() { border-radius: 50%; background-color: black; touch-action: none; + transform: translate(-50%, calc(calc(var(--slider-track-height)/2) - 50%)); + } + + [dir='rtl'] .MySlider-thumb { + transform: translate(50%, calc(calc(var(--slider-track-height)/2) - 50%)); } .MySlider-thumb:focus-visible { @@ -200,6 +219,8 @@ export function Styles() { } .VerticalSlider { + --vertical-slider-track-width: 2px; + height: 100%; width: 5rem; margin: 1rem 0; @@ -228,10 +249,9 @@ export function Styles() { touch-action: none; } - .VerticalSlider-control:before { - content: ''; + .VerticalSlider-track { height: 100%; - width: 2px; + width: var(--vertical-slider-track-width); border-radius: 9999px; background-color: gainsboro; touch-action: none; @@ -250,6 +270,11 @@ export function Styles() { border-radius: 50%; background-color: black; touch-action: none; + transform: translate(calc(calc(var(--vertical-slider-track-width)/2) - 50%), 50%); + } + + [dir='rtl'] .VerticalSlider-thumb { + transform: translate(calc(50% - calc(var(--vertical-slider-track-width)/2)), 50%); } .VerticalSlider-thumb:focus-visible { diff --git a/docs/translations/api-docs/slider-track/slider-track.json b/docs/translations/api-docs/slider-track/slider-track.json new file mode 100644 index 0000000000..4bc12cf1e0 --- /dev/null +++ b/docs/translations/api-docs/slider-track/slider-track.json @@ -0,0 +1,10 @@ +{ + "componentDescription": "", + "propDescriptions": { + "className": { + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "render": { "description": "A function to customize rendering of the component." } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/use-slider-track/use-slider-track.json b/docs/translations/api-docs/use-slider-track/use-slider-track.json new file mode 100644 index 0000000000..e3eb65c6e4 --- /dev/null +++ b/docs/translations/api-docs/use-slider-track/use-slider-track.json @@ -0,0 +1 @@ +{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} } diff --git a/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts b/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts index 23326462e8..7909c9f0b6 100644 --- a/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts +++ b/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts @@ -9,15 +9,15 @@ import { const axisProps = { horizontal: { offset: (percent: number) => ({ left: `${percent}%` }), - leap: (percent: number) => ({ width: `${percent}%` }), + leap: (percent: number) => ({ width: `${percent}%`, height: 'inherit' }), }, 'horizontal-reverse': { offset: (percent: number) => ({ right: `${percent}%` }), - leap: (percent: number) => ({ width: `${percent}%` }), + leap: (percent: number) => ({ width: `${percent}%`, height: 'inherit' }), }, vertical: { offset: (percent: number) => ({ bottom: `${percent}%` }), - leap: (percent: number) => ({ height: `${percent}%` }), + leap: (percent: number) => ({ height: `${percent}%`, width: 'inherit' }), }, }; /** @@ -55,12 +55,14 @@ function useSliderIndicator( position: 'absolute', bottom: 0, height: `${percentageValues[0]}%`, + width: 'inherit', }; } else { internalStyles = { position: 'absolute', [isRtl ? 'right' : 'left']: 0, width: `${percentageValues[0]}%`, + height: 'inherit', }; } diff --git a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts index 0373cf3e6c..9490b8dc6d 100644 --- a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts +++ b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts @@ -92,7 +92,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) { const isRtl = direction === 'rtl'; const getThumbStyle = React.useCallback(() => { - const isVertical = orientation === 'vertical'; + // const isVertical = orientation === 'vertical'; return { position: 'absolute', [{ @@ -100,12 +100,12 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) { 'horizontal-reverse': 'right', vertical: 'bottom', }[axis]]: `${percent}%`, - transform: `translate${isVertical ? 'Y' : 'X'}(${(isVertical || isRtl ? 1 : -1) * 50}%)`, + // transform: `translate${isVertical ? 'Y' : 'X'}(${(isVertical || isRtl ? 1 : -1) * 50}%)`, // So the non active thumb doesn't show its label on hover. pointerEvents: activeIndex !== -1 && activeIndex !== index ? 'none' : undefined, zIndex: activeIndex === index ? 1 : undefined, }; - }, [activeIndex, axis, isRtl, orientation, percent, index]); + }, [activeIndex, axis, /* isRtl, orientation, */ percent, index]); const getRootProps: UseSliderThumbReturnValue['getRootProps'] = React.useCallback( (externalProps = {}) => { diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx new file mode 100644 index 0000000000..ee305bf5b6 --- /dev/null +++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { createRenderer } from '@mui/internal-test-utils'; +import * as Slider from '@base_ui/react/Slider'; +import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider'; +import { describeConformance } from '../../../test/describeConformance'; + +const NOOP = () => {}; + +describe('', () => { + const { render } = createRenderer(); + + const testProviderValue: SliderProviderValue = { + active: -1, + areValuesEqual: () => true, + axis: 'horizontal', + changeValue: NOOP, + compoundComponentContextValue: { + registerItem: () => ({ id: 0, deregister: () => {} }), + getItemIndex: () => 0, + totalSubitemCount: 1, + }, + dragging: false, + disabled: false, + getFingerNewValue: () => ({ + newValue: 0, + activeIndex: 0, + newPercentageValue: 0, + }), + handleValueChange: NOOP, + direction: 'ltr', + largeStep: 10, + max: 100, + min: 0, + minStepsBetweenValues: 0, + open: -1, + orientation: 'horizontal', + ownerState: { + activeThumbIndex: -1, + disabled: false, + dragging: false, + direction: 'ltr', + max: 100, + min: 0, + minStepsBetweenValues: 0, + orientation: 'horizontal', + step: 1, + values: [0], + }, + percentageValues: [0], + registerSliderControl: NOOP, + scale: (val) => val, + setActive: NOOP, + setDragging: NOOP, + setOpen: NOOP, + setValueState: NOOP, + step: 1, + subitems: new Map(), + values: [0], + }; + + describeConformance(, () => ({ + inheritComponent: 'span', + render: (node) => { + const { container, ...other } = render( + {node}, + ); + + return { container, ...other }; + }, + refInstanceof: window.HTMLSpanElement, + skip: [ + 'reactTestRenderer', // Need to be wrapped with SliderProvider + ], + })); +}); diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx new file mode 100644 index 0000000000..0673a138ec --- /dev/null +++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx @@ -0,0 +1,54 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { useComponentRenderer } from '../../utils/useComponentRenderer'; +import { useSliderContext } from '../Root/SliderProvider'; +import { sliderStyleHookMapping } from '../Root/styleHooks'; +import { SliderTrackProps } from './SliderTrack.types'; +import { useSliderTrack } from './useSliderTrack'; + +const SliderTrack = React.forwardRef(function SliderTrack( + props: SliderTrackProps, + forwardedRef: React.ForwardedRef, +) { + const { render, className, ...otherProps } = props; + + const { ownerState } = useSliderContext(); + + const { getRootProps } = useSliderTrack({ + rootRef: forwardedRef, + }); + + const { renderElement } = useComponentRenderer({ + propGetter: getRootProps, + render: render ?? 'span', + ownerState, + className, + ref: forwardedRef, + extraProps: otherProps, + customStyleHookMapping: sliderStyleHookMapping, + }); + + return renderElement(); +}); + +SliderTrack.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * Class names applied to the element or a function that returns them based on the component's state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + /** + * A function to customize rendering of the component. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), +} as any; + +export { SliderTrack }; diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts new file mode 100644 index 0000000000..00905038b4 --- /dev/null +++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts @@ -0,0 +1,14 @@ +import { BaseUIComponentProps } from '../../utils/types'; +import { SliderRootOwnerState } from '../Root/SliderRoot.types'; + +export interface SliderTrackProps extends BaseUIComponentProps<'span', SliderRootOwnerState> {} + +export interface UseSliderTrackParameters { + rootRef?: React.Ref; +} + +export interface UseSliderTrackReturnValue { + getRootProps: ( + externalProps?: React.ComponentPropsWithRef<'span'>, + ) => React.ComponentPropsWithRef<'span'>; +} diff --git a/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts new file mode 100644 index 0000000000..f01664f33b --- /dev/null +++ b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts @@ -0,0 +1,31 @@ +'use client'; +import * as React from 'react'; +import { mergeReactProps } from '../../utils/mergeReactProps'; +import { UseSliderTrackParameters, UseSliderTrackReturnValue } from './SliderTrack.types'; +/** + * + * API: + * + * - [useSliderTrack API](https://mui.com/base-ui/api/use-slider-track/) + */ +function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderTrackReturnValue { + const { rootRef } = parameters; + + const getRootProps = React.useCallback( + (externalProps = {}) => { + return mergeReactProps(externalProps, { + ref: rootRef, + }); + }, + [rootRef], + ); + + return React.useMemo( + () => ({ + getRootProps, + }), + [getRootProps], + ); +} + +export { useSliderTrack }; diff --git a/packages/mui-base/src/Slider/index.barrel.ts b/packages/mui-base/src/Slider/index.barrel.ts index 4bcbe6a40d..d43d0c23d7 100644 --- a/packages/mui-base/src/Slider/index.barrel.ts +++ b/packages/mui-base/src/Slider/index.barrel.ts @@ -3,14 +3,13 @@ export type * from './Root/SliderRoot.types'; export { useSliderRoot } from './Root/useSliderRoot'; export * from './Root/SliderProvider'; -export { SliderThumb } from './SliderThumb/SliderThumb'; +export { SliderOutput } from './SliderOutput/SliderOutput'; export type { - SliderThumbOwnerState, - SliderThumbProps, - UseSliderThumbParameters, - UseSliderThumbReturnValue, -} from './SliderThumb/SliderThumb.types'; -export { useSliderThumb } from './SliderThumb/useSliderThumb'; + SliderOutputProps as OutputProps, + UseSliderOutputParameters, + UseSliderOutputReturnValue, +} from './SliderOutput/SliderOutput.types'; +export { useSliderOutput } from './SliderOutput/useSliderOutput'; export { SliderControl } from './SliderControl/SliderControl'; export type { @@ -20,6 +19,23 @@ export type { } from './SliderControl/SliderControl.types'; export { useSliderControl } from './SliderControl/useSliderControl'; +export { SliderTrack } from './SliderTrack/SliderTrack'; +export type { + SliderTrackProps, + UseSliderTrackParameters, + UseSliderTrackReturnValue, +} from './SliderTrack/SliderTrack.types'; +export { useSliderTrack } from './SliderTrack/useSliderTrack'; + +export { SliderThumb } from './SliderThumb/SliderThumb'; +export type { + SliderThumbOwnerState, + SliderThumbProps, + UseSliderThumbParameters, + UseSliderThumbReturnValue, +} from './SliderThumb/SliderThumb.types'; +export { useSliderThumb } from './SliderThumb/useSliderThumb'; + export { SliderIndicator } from './SliderIndicator/SliderIndicator'; export type { SliderIndicatorProps as IndicatorProps, @@ -27,11 +43,3 @@ export type { UseSliderIndicatorReturnValue, } from './SliderIndicator/SliderIndicator.types'; export { useSliderIndicator } from './SliderIndicator/useSliderIndicator'; - -export { SliderOutput } from './SliderOutput/SliderOutput'; -export type { - SliderOutputProps as OutputProps, - UseSliderOutputParameters, - UseSliderOutputReturnValue, -} from './SliderOutput/SliderOutput.types'; -export { useSliderOutput } from './SliderOutput/useSliderOutput'; diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts index a517ed9aaa..a5178b2cd3 100644 --- a/packages/mui-base/src/Slider/index.ts +++ b/packages/mui-base/src/Slider/index.ts @@ -12,14 +12,13 @@ export { export { useSliderRoot } from './Root/useSliderRoot'; export * from './Root/SliderProvider'; -export { SliderThumb as Thumb } from './SliderThumb/SliderThumb'; +export { SliderOutput as Output } from './SliderOutput/SliderOutput'; export type { - SliderThumbOwnerState as ThumbOwnerState, - SliderThumbProps as ThumbProps, - UseSliderThumbParameters, - UseSliderThumbReturnValue, -} from './SliderThumb/SliderThumb.types'; -export { useSliderThumb } from './SliderThumb/useSliderThumb'; + SliderOutputProps as OutputProps, + UseSliderOutputParameters, + UseSliderOutputReturnValue, +} from './SliderOutput/SliderOutput.types'; +export { useSliderOutput } from './SliderOutput/useSliderOutput'; export { SliderControl as Control } from './SliderControl/SliderControl'; export type { @@ -29,6 +28,23 @@ export type { } from './SliderControl/SliderControl.types'; export { useSliderControl } from './SliderControl/useSliderControl'; +export { SliderTrack as Track } from './SliderTrack/SliderTrack'; +export type { + SliderTrackProps as TrackProps, + UseSliderTrackParameters, + UseSliderTrackReturnValue, +} from './SliderTrack/SliderTrack.types'; +export { useSliderTrack } from './SliderTrack/useSliderTrack'; + +export { SliderThumb as Thumb } from './SliderThumb/SliderThumb'; +export type { + SliderThumbOwnerState as ThumbOwnerState, + SliderThumbProps as ThumbProps, + UseSliderThumbParameters, + UseSliderThumbReturnValue, +} from './SliderThumb/SliderThumb.types'; +export { useSliderThumb } from './SliderThumb/useSliderThumb'; + export { SliderIndicator as Indicator } from './SliderIndicator/SliderIndicator'; export type { SliderIndicatorProps as IndicatorProps, @@ -36,11 +52,3 @@ export type { UseSliderIndicatorReturnValue, } from './SliderIndicator/SliderIndicator.types'; export { useSliderIndicator } from './SliderIndicator/useSliderIndicator'; - -export { SliderOutput as Output } from './SliderOutput/SliderOutput'; -export type { - SliderOutputProps as OutputProps, - UseSliderOutputParameters, - UseSliderOutputReturnValue, -} from './SliderOutput/SliderOutput.types'; -export { useSliderOutput } from './SliderOutput/useSliderOutput';