@fluentui/react-slider 9.5.16 → 9.6.0

package/CHANGELOG.md

@@ -1,17 +1,26 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Wed, 11 Mar 2026 09:20:38 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Mar 2026 08:10:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.6.0)
+
+Thu, 26 Mar 2026 08:10:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.16..@fluentui/react-slider_v9.6.0)
+
+### Minor changes
+
+- feat: add base hooks for Slider ([PR #35815](https://github.com/microsoft/fluentui/pull/35815) by dmytrokirpa@microsoft.com)
+
 ## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.16)
 
-Wed, 11 Mar 2026 09:20:38 GMT 
+Wed, 11 Mar 2026 09:22:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.15..@fluentui/react-slider_v9.5.16)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
 
 ## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.15)
 

package/dist/index.d.ts

@@ -9,13 +9,24 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Slider
  */
-export declare const renderSlider_unstable: (state: SliderState) => JSXElement;
+export declare const renderSlider_unstable: (state: SliderBaseState) => JSXElement;
 
 /**
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
  */
 export declare const Slider: ForwardRefComponent<SliderProps>;
 
+/**
+ * Slider base props, excluding design-related props like size.
+ * Note: vertical is kept as it affects aria-orientation behavior.
+ */
+export declare type SliderBaseProps = Omit<SliderProps, 'size'>;
+
+/**
+ * Slider base state, excluding design-related state like size.
+ */
+export declare type SliderBaseState = Omit<SliderState, 'size'>;
+
 export declare const sliderClassNames: SlotClassNames<SliderSlots>;
 
 export declare const sliderCSSVars: {
@@ -120,7 +131,16 @@ export declare type SliderState = ComponentState<SliderSlots> & Pick<SliderProps
 
 export declare const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;
 
-export declare const useSliderState_unstable: (state: SliderState, props: SliderProps) => SliderState;
+/**
+ * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,
+ * keyboard handling, and controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Slider component.
+ * @param ref - User provided ref to be passed to the Slider input element.
+ */
+export declare const useSliderBase_unstable: (props: SliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => SliderBaseState;
+
+export declare const useSliderState_unstable: (state: SliderBaseState, props: SliderBaseProps) => SliderBaseState;
 
 /**
  * Apply styling to the Slider slots based on the state

package/lib/Slider.js

@@ -1 +1 @@
-export { Slider, renderSlider_unstable, sliderCSSVars, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './components/Slider/index';
+export { Slider, renderSlider_unstable, sliderCSSVars, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, useSliderBase_unstable } from './components/Slider/index';

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

package/lib/components/Slider/Slider.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/Slider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Slider/Slider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\n/**\n * Slider base props, excluding design-related props like size.\n * Note: vertical is kept as it affects aria-orientation behavior.\n */\nexport type SliderBaseProps = Omit<SliderProps, 'size'>;\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n\n/**\n * Slider base state, excluding design-related state like size.\n */\nexport type SliderBaseState = Omit<SliderState, 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Slider/index.js

@@ -1,5 +1,5 @@
 export { Slider } from './Slider';
 export { renderSlider_unstable } from './renderSlider';
-export { useSlider_unstable } from './useSlider';
+export { useSlider_unstable, useSliderBase_unstable } from './useSlider';
 export { useSliderState_unstable } from './useSliderState';
 export { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';

package/lib/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { Slider } from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider.types';\nexport { renderSlider_unstable } from './renderSlider';\nexport { useSlider_unstable } from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';\n"],"names":["Slider","renderSlider_unstable","useSlider_unstable","useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { Slider } from './Slider';\nexport type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './Slider.types';\nexport { renderSlider_unstable } from './renderSlider';\nexport { useSlider_unstable, useSliderBase_unstable } from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';\n"],"names":["Slider","renderSlider_unstable","useSlider_unstable","useSliderBase_unstable","useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ,2BAA2B"}

package/lib/components/Slider/renderSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState): JSXElement => {\n  assertSlots<SliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}
+{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SliderBaseState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderBaseState): JSXElement => {\n  assertSlots<SliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}

package/lib/components/Slider/useSlider.js

@@ -5,6 +5,20 @@ import { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui
 import { useSliderState_unstable } from './useSliderState';
 import { useFocusWithin } from '@fluentui/react-tabster';
 export const useSlider_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSliderBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+/**
+ * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,
+ * keyboard handling, and controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Slider component.
+ * @param ref - User provided ref to be passed to the Slider input element.
+ */ export const useSliderBase_unstable = (props, ref)=>{
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true
@@ -13,15 +27,13 @@ export const useSlider_unstable = (props, ref)=>{
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
-            'onChange',
-            'size'
+            'onChange'
         ]
     });
-    const { disabled, vertical, size = 'medium', // Slots
+    const { disabled, vertical, // Slots
     root, input, rail, thumb } = props;
     const state = {
         disabled,
-        size,
         vertical,
         components: {
             input: 'input',

package/lib/components/Slider/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'size'],\n  });\n\n  const {\n    disabled,\n    vertical,\n    size = 'medium',\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderState = {\n    disabled,\n    size,\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAClG,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,cAAcV,0BAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,KAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,KAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIxB,MAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,KAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,KAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,GAAGN,cAAckB,MAAMJ,IAAI,CAACR,GAAG,EAAEH;IAE/CD,wBAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderBaseProps, SliderBaseState, SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSliderBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,\n * keyboard handling, and controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Slider component.\n * @param ref - User provided ref to be passed to the Slider input element.\n */\nexport const useSliderBase_unstable = (props: SliderBaseProps, ref: React.Ref<HTMLInputElement>): SliderBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange'],\n  });\n\n  const {\n    disabled,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderBaseState = {\n    disabled,\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","size","baseProps","baseState","useSliderBase_unstable","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAClG,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,yBAAyB,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEM,kBAAkB;IAAK;IAEtE,MAAMC,cAAcd,0BAA0B;QAC5CO;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGf;IAEJ,MAAMgB,QAAyB;QAC7BN;QACAC;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMhB,KAAKsB,MAAM,CAACN,MAAM;YACtBO,cAAcZ,YAAYK,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOjB,KAAKsB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAI3B,MAAM,WAAWM,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGM,YAAYe,OAAO;gBACtBC,MAAM;gBACNC,QAAQb,WAAW,aAAac;YAClC;YACAL,aAAa;QACf;QACAN,MAAMlB,KAAKsB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOnB,KAAKsB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACX,GAAG,GAAGN,cAAcqB,MAAMJ,IAAI,CAACX,GAAG,EAAEH;IAE/CD,wBAAwBmB,OAAOhB;IAE/B,OAAOgB;AACT,EAAE"}

package/lib/components/Slider/useSliderState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps): SliderState => {\n  'use no memo';\n\n  const { min = 0, max = 100, step } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n  const clampedValue = clamp(currentValue, min, max);\n  const valuePercent = getPercent(clampedValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderProgressVar]: `${valuePercent}%`,\n    // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n    ...(stepPercent !== undefined && {\n      [sliderStepsPercentVar]: stepPercent,\n    }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAC3D;AAEA,OAAO,MAAME,0BAA0B,CAACC,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAG,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderBaseState, SliderBaseProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderBaseState, props: SliderBaseProps): SliderBaseState => {\n  'use no memo';\n\n  const { min = 0, max = 100, step } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n  const clampedValue = clamp(currentValue, min, max);\n  const valuePercent = getPercent(clampedValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderProgressVar]: `${valuePercent}%`,\n    // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n    ...(stepPercent !== undefined && {\n      [sliderStepsPercentVar]: stepPercent,\n    }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAC3D;AAEA,OAAO,MAAME,0BAA0B,CAACC,OAAwBC;IAC9D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAG,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { Slider, renderSlider_unstable, sliderClassNames, sliderCSSVars, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './Slider';
+export { Slider, renderSlider_unstable, sliderClassNames, sliderCSSVars, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, useSliderBase_unstable } from './Slider';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './Slider';\nexport type {\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n  SliderBaseProps,\n  SliderBaseState,\n} from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW"}

package/lib-commonjs/Slider.js

@@ -21,6 +21,9 @@ _export(exports, {
     sliderClassNames: function() {
         return _index.sliderClassNames;
     },
+    useSliderBase_unstable: function() {
+        return _index.useSliderBase_unstable;
+    },
     useSliderState_unstable: function() {
         return _index.useSliderState_unstable;
     },

package/lib-commonjs/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,oBAAa;;;eACbC,uBAAgB;;;eAChBC,8BAAuB;;;eACvBC,+BAAwB;;;eACxBC,yBAAkB;;;uBACb,4BAA4B"}
+{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":";;;;;;;;;;;IASEA;4BAAM;;;eACNC,4BAAqB;;;eACrBC,oBAAa;;;eACbC,uBAAgB;;IAIhBI;4CAAsB;;;eAHtBH,8BAAuB;;;eACvBC,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}

package/lib-commonjs/components/Slider/Slider.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/Slider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Slider/Slider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\n/**\n * Slider base props, excluding design-related props like size.\n * Note: vertical is kept as it affects aria-orientation behavior.\n */\nexport type SliderBaseProps = Omit<SliderProps, 'size'>;\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n\n/**\n * Slider base state, excluding design-related state like size.\n */\nexport type SliderBaseState = Omit<SliderState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Slider/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     sliderClassNames: function() {
         return _useSliderStylesstyles.sliderClassNames;
     },
+    useSliderBase_unstable: function() {
+        return _useSlider.useSliderBase_unstable;
+    },
     useSliderState_unstable: function() {
         return _useSliderState.useSliderState_unstable;
     },

package/lib-commonjs/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { Slider } from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider.types';\nexport { renderSlider_unstable } from './renderSlider';\nexport { useSlider_unstable } from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';\n"],"names":["Slider","renderSlider_unstable","useSlider_unstable","useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;6BAAM;;IAENC;kDAAqB;;;eAGHI,oCAAa;;;eAA/BD,uCAAgB;;;eADhBD,uCAAuB;;;eACUG,+CAAwB;;;eAFzDJ,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACpB,cAAc;gCACT,mBAAmB;uCACe,2BAA2B"}
+{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { Slider } from './Slider';\nexport type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './Slider.types';\nexport { renderSlider_unstable } from './renderSlider';\nexport { useSlider_unstable, useSliderBase_unstable } from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';\n"],"names":["Slider","renderSlider_unstable","useSlider_unstable","useSliderBase_unstable","useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;6BAAM;;;eASNC,mCAAqB;;iBAGU;eAAbK;;;eAAlBD,uCAAgB;;;eAFIF,iCAAsB;;;eAC1CC,uCAAuB;;;eACUG,+CAAwB;;;eAFzDL,6BAAkB;;;wBAVJ,WAAW;8BASI,iBAAiB;2BACI,cAAc;gCACjC,mBAAmB;uCACe,2BAA2B"}

package/lib-commonjs/components/Slider/renderSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState): JSXElement => {\n  assertSlots<SliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}
+{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SliderBaseState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderBaseState): JSXElement => {\n  assertSlots<SliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

package/lib-commonjs/components/Slider/useSlider.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSlider_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSliderBase_unstable: function() {
+        return useSliderBase_unstable;
+    },
+    useSlider_unstable: function() {
         return useSlider_unstable;
     }
 });
@@ -16,6 +24,14 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useSliderState = require("./useSliderState");
 const _reacttabster = require("@fluentui/react-tabster");
 const useSlider_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSliderBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+const useSliderBase_unstable = (props, ref)=>{
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true
@@ -24,14 +40,12 @@ const useSlider_unstable = (props, ref)=>{
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
-            'onChange',
-            'size'
+            'onChange'
         ]
     });
-    const { disabled, vertical, size = 'medium', root, input, rail, thumb } = props;
+    const { disabled, vertical, root, input, rail, thumb } = props;
     const state = {
         disabled,
-        size,
         vertical,
         components: {
             input: 'input',

package/lib-commonjs/components/Slider/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'size'],\n  });\n\n  const {\n    disabled,\n    vertical,\n    size = 'medium',\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderState = {\n    disabled,\n    size,\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"mappings":"AAAA;;;;;+BASaQ;;;;;;;iEAPU,QAAQ;4BACe,wBAAwB;gCACA,4BAA4B;gCAC1D,mBAAmB;8BAE5B,0BAA0B;AAElD,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,kBAAcV,yCAAAA,EAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIxB,qBAAAA,EAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,OAAGN,6BAAAA,EAAckB,MAAMJ,IAAI,CAACR,GAAG,MAAEH,4BAAAA;QAE/CD,uCAAAA,EAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderBaseProps, SliderBaseState, SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSliderBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,\n * keyboard handling, and controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Slider component.\n * @param ref - User provided ref to be passed to the Slider input element.\n */\nexport const useSliderBase_unstable = (props: SliderBaseProps, ref: React.Ref<HTMLInputElement>): SliderBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange'],\n  });\n\n  const {\n    disabled,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderBaseState = {\n    disabled,\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","size","baseProps","baseState","useSliderBase_unstable","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"mappings":"AAAA;;;;;;;;;;;;0BA2Bac;eAAAA;;IAlBAN,kBAAAA;;;;;iEAPU,QAAQ;4BACe,wBAAwB;gCACA,4BAA4B;gCAC1D,mBAAmB;8BAE5B,0BAA0B;AAElD,2BAA2B,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AASK,+BAA+B,CAACF,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEM,kBAAkB;IAAK;IAEtE,MAAMC,kBAAcd,yCAAAA,EAA0B;QAC5CO;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGf;IAEJ,MAAMgB,QAAyB;QAC7BN;QACAC;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMhB,oBAAAA,CAAKsB,MAAM,CAACN,MAAM;YACtBO,cAAcZ,YAAYK,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOjB,oBAAAA,CAAKsB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAI3B,qBAAAA,EAAM,WAAWM,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGM,YAAYe,OAAO;gBACtBC,MAAM;gBACNC,QAAQb,WAAW,aAAac;YAClC;YACAL,aAAa;QACf;QACAN,MAAMlB,oBAAAA,CAAKsB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOnB,oBAAAA,CAAKsB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACX,GAAG,OAAGN,6BAAAA,EAAcqB,MAAMJ,IAAI,CAACX,GAAG,MAAEH,4BAAAA;QAE/CD,uCAAAA,EAAwBmB,OAAOhB;IAE/B,OAAOgB;AACT,EAAE"}

package/lib-commonjs/components/Slider/useSliderState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps): SliderState => {\n  'use no memo';\n\n  const { min = 0, max = 100, step } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n  const clampedValue = clamp(currentValue, min, max);\n  const valuePercent = getPercent(clampedValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderProgressVar]: `${valuePercent}%`,\n    // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n    ...(stepPercent !== undefined && {\n      [sliderStepsPercentVar]: stepPercent,\n    }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":"AAAA;;;;;;;;eAcac;;;;iEAZU,QAAQ;gCAC+B,4BAA4B;qCAC1C,kCAAkC;uCACpD,2BAA2B;AAGzD,MAAM,EAAEP,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH,oCAAAA;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D;AAEO,gCAAgC,CAACG,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAM,CAACc,cAAcC,gBAAgB,OAAGlB,oCAAAA,EAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,mBAAevB,qBAAAA,EAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,eAAuDzB,gCAAAA,EAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,yBAAAA,EAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAIA,OAAO,MAAQJ,CAAAA,MAAMD,GAAAA,CAAE,CAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderBaseState, SliderBaseProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderBaseState, props: SliderBaseProps): SliderBaseState => {\n  'use no memo';\n\n  const { min = 0, max = 100, step } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n  const clampedValue = clamp(currentValue, min, max);\n  const valuePercent = getPercent(clampedValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderProgressVar]: `${valuePercent}%`,\n    // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n    ...(stepPercent !== undefined && {\n      [sliderStepsPercentVar]: stepPercent,\n    }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":"AAAA;;;;;;;;eAcac;;;;iEAZU,QAAQ;gCAC+B,4BAA4B;qCAC1C,kCAAkC;uCACpD,2BAA2B;AAGzD,MAAM,EAAEP,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH,oCAAAA;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D;AAEO,gCAAgC,CAACG,OAAwBC;IAC9D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAM,CAACc,cAAcC,gBAAgB,OAAGlB,oCAAAA,EAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,mBAAevB,qBAAAA,EAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,eAAuDzB,gCAAAA,EAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,yBAAAA,EAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAIA,OAAO,MAAQJ,CAAAA,MAAMD,GAAAA,CAAE,CAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     sliderClassNames: function() {
         return _Slider.sliderClassNames;
     },
+    useSliderBase_unstable: function() {
+        return _Slider.useSliderBase_unstable;
+    },
     useSliderState_unstable: function() {
         return _Slider.useSliderState_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB;;;eAErBE,qBAAa;;;eADbD,wBAAgB;;;eAEhBE,+BAAuB;;;eACvBC,gCAAwB;;;eACxBC,0BAAkB;;;wBACb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './Slider';\nexport type {\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n  SliderBaseProps,\n  SliderBaseState,\n} from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":";;;;;;;;;;;IACEA;6BAAM;;;eACNC,6BAAqB;;;eAErBE,qBAAa;;;eADbD,wBAAgB;;IAKhBK;6CAAsB;;;eAHtBH,+BAAuB;;;eACvBC,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-slider",
-  "version": "9.5.16",
+  "version": "9.6.0",
   "description": "Fluent UI React Slider component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",