@fluentui/react-color-picker 9.2.18 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-color-picker
 
-This log was last generated on Wed, 24 Jun 2026 11:03:29 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:03 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.3.0)
+
+Tue, 11 Aug 2026 17:16:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.19..@fluentui/react-color-picker_v9.3.0)
+
+### Minor changes
+
+- feat(react-color-picker): expose headless base APIs ([PR #36517](https://github.com/microsoft/fluentui/pull/36517) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+### Patches
+
+- fix: use valid HSL syntax for color slider styles ([PR #36555](https://github.com/microsoft/fluentui/pull/36555) by dmytrokirpa@microsoft.com)
+- refactor: Replace the tinycolor dependency with internal utilities. ([PR #36548](https://github.com/microsoft/fluentui/pull/36548) by dmytrokirpa@microsoft.com)
+- fix: Move shared color picker CSS variables from style modules to constants files. ([PR #36552](https://github.com/microsoft/fluentui/pull/36552) by dmytrokirpa@microsoft.com)
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+
+## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.19)
+
+Tue, 04 Aug 2026 10:12:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.18..@fluentui/react-color-picker_v9.2.19)
+
+### Patches
+
+- Pin @ctrl/tinycolor version to prevent yarn modern duplication ([PR #35747](https://github.com/microsoft/fluentui/pull/35747) by vgenaev@gmail.com)
+
 ## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.18)
 
-Wed, 24 Jun 2026 11:03:29 GMT 
+Wed, 24 Jun 2026 11:09:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.17..@fluentui/react-color-picker_v9.2.18)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,342 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * AlphaSlider component
+ */
+export declare const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
+
+/**
+ * AlphaSlider Base Props
+ */
+export declare type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;
+
+/**
+ * State used in rendering unstyled AlphaSlider
+ */
+export declare type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;
+
+export declare const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
+
+/**
+ * AlphaSlider Props
+ */
+export declare type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {
+    /**
+     * The `transparency` property determines how the alpha channel is interpreted.
+     * - When `false`, the alpha channel represents the opacity of the color.
+     * - When `true`, the alpha channel represents the transparency of the color.
+     * For example, a 30% transparent color has 70% opacity.
+     *
+     * @defaultvalue false
+     */
+    transparency?: boolean;
+};
+
+export declare type AlphaSliderSlots = ColorSliderSlots;
+
+/**
+ * State used in rendering AlphaSlider
+ */
+export declare type AlphaSliderState = ComponentState<AlphaSliderSlots> & Pick<AlphaSliderProps, 'vertical'> & Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;
+
+/**
+ * ColorArea component
+ */
+export declare const ColorArea: ForwardRefComponent<ColorAreaProps>;
+
+/**
+ * ColorArea Base Props
+ */
+export declare type ColorAreaBaseProps = Omit<ColorAreaProps, 'shape'>;
+
+/**
+ * ColorArea Base State
+ */
+export declare type ColorAreaBaseState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color'>;
+
+export declare const colorAreaClassNames: SlotClassNames<ColorAreaSlots>;
+
+declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | PointerEvent> & {
+    color: HsvColor;
+};
+
+/**
+ * ColorArea Props
+ */
+export declare type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> & Pick<ColorPickerProps, 'shape'> & {
+    /**
+     * The current color of the ColorArea.
+     */
+    color?: HsvColor;
+    /**
+     * The starting value for an uncontrolled ColorArea.
+     */
+    defaultColor?: HsvColor;
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: EventHandler<ColorAreaOnColorChangeData>;
+};
+
+export declare type ColorAreaSlots = {
+    root: NonNullable<Slot<'div'>>;
+    thumb?: NonNullable<Slot<'div'>>;
+    inputX?: NonNullable<Slot<'input'>>;
+    inputY?: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering ColorArea
+ */
+export declare type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;
+
+export declare type ColorChannel = 'hue' | 'saturation' | 'value';
+
+/**
+ * ColorPicker component
+ */
+export declare const ColorPicker: ForwardRefComponent<ColorPickerProps>;
+
+/** ColorPicker Base Props */
+export declare type ColorPickerBaseProps = Omit<ColorPickerProps, 'shape'>;
+
+/** State used in rendering unstyled ColorPicker */
+export declare type ColorPickerBaseState = Omit<ColorPickerState, 'shape'>;
+
+export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
+
+/**
+ * The context through which individual color controls communicate with the picker.
+ */
+export declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
+    /**
+     * Callback used by Sliders to request a change on it's selected value
+     * Should be used to get value of color channel
+     *
+     * @internal
+     */
+    requestChange: (event: React_2.ChangeEvent<HTMLInputElement>, data: {
+        color: HsvColor;
+    }) => void;
+};
+
+export declare type ColorPickerContextValues = {
+    colorPicker: ColorPickerContextValue;
+};
+
+declare type ColorPickerOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
+    color: HsvColor;
+};
+
+/**
+ * ColorPicker Props
+ */
+export declare type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {
+    /**
+     * Selected color.
+     */
+    color?: HsvColor;
+    /**
+     * Callback for when the user changes the color.
+     */
+    onColorChange?: EventHandler<ColorPickerOnChangeData>;
+    /**
+     * ColorPicker shape
+     * @defaultvalue 'rounded'
+     */
+    shape?: 'rounded' | 'square';
+};
+
+export declare type ColorPickerSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering ColorPicker
+ */
+export declare type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;
+
+/**
+ * ColorSlider component
+ */
+export declare const ColorSlider: ForwardRefComponent<ColorSliderProps>;
+
+export declare type ColorSliderBaseProps = Omit<ColorSliderProps, 'shape'>;
+
+export declare type ColorSliderBaseState = Omit<ColorSliderState, 'shape'>;
+
+export declare const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
+
+/**
+ * ColorSlider Props
+ */
+export declare type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | 'color'> & Pick<ColorPickerProps, 'shape'> & {
+    /**
+     * Color channel of the Slider.
+     * @default `hue`
+     */
+    channel?: ColorChannel;
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: EventHandler<SliderOnChangeData>;
+    /**
+     * Render the Slider in a vertical orientation, smallest value on the bottom.
+     * @default `false`
+     */
+    vertical?: boolean;
+    /**
+     * Color of the ColorPicker
+     */
+    color?: HsvColor;
+    /**
+     * The starting color for an uncontrolled ColorSlider.
+     */
+    defaultColor?: HsvColor;
+};
+
+export declare type ColorSliderSlots = {
+    root: NonNullable<Slot<'div'>>;
+    rail: NonNullable<Slot<'div'>>;
+    thumb: NonNullable<Slot<'div'>>;
+    input: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering ColorSlider
+ */
+export declare type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;
+
+declare type HsvColor = {
+    h: number;
+    s: number;
+    v: number;
+    a?: number;
+};
+
+/**
+ * Render the final JSX of AlphaSlider
+ */
+export declare const renderAlphaSlider_unstable: (state: AlphaSliderBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of ColorArea
+ */
+export declare const renderColorArea_unstable: (state: ColorAreaBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of ColorPicker
+ */
+export declare const renderColorPicker_unstable: (state: ColorPickerBaseState, contextValues: ColorPickerContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of ColorSlider
+ */
+export declare const renderColorSlider_unstable: (state: ColorSliderBaseState) => JSXElement;
+
+declare type SliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
+    color: HsvColor;
+};
+
+/**
+ * Create the state required to render AlphaSlider.
+ *
+ * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,
+ * before being passed to renderAlphaSlider_unstable.
+ *
+ * @param props - props from this instance of AlphaSlider
+ * @param ref - reference to root HTMLInputElement of AlphaSlider
+ */
+export declare const useAlphaSlider_unstable: (props: AlphaSliderProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderState;
+
+export declare const useAlphaSliderBase_unstable: (props: AlphaSliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderBaseState;
+
+/**
+ * Apply styling to the AlphaSlider slots based on the state
+ */
+export declare const useAlphaSliderStyles_unstable: (state: AlphaSliderState) => AlphaSliderState;
+
+/**
+ * Create the state required to render ColorArea.
+ *
+ * The returned state can be modified with hooks such as useColorAreaStyles_unstable,
+ * before being passed to renderColorArea_unstable.
+ *
+ * @param props - props from this instance of ColorArea
+ * @param ref - reference to root HTMLDivElement of ColorArea
+ */
+export declare const useColorArea_unstable: (props: ColorAreaProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaState;
+
+/**
+ * Create the state required to render unstyled ColorArea.
+ *
+ * The returned state can be modified with hooks before being passed to renderColorArea_unstable.
+ *
+ * @param props - props from this instance of ColorArea
+ * @param ref - reference to root HTMLDivElement of ColorArea
+ */
+export declare const useColorAreaBase_unstable: (props: ColorAreaBaseProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaBaseState;
+
+/**
+ * Apply styling to the ColorArea slots based on the state
+ */
+export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => ColorAreaState;
+
+export declare const useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
+
+/**
+ * Create the state required to render ColorPicker.
+ *
+ * The returned state can be modified with hooks such as useColorPickerStyles_unstable,
+ * before being passed to renderColorPicker_unstable.
+ *
+ * @param props - props from this instance of ColorPicker
+ * @param ref - reference to root HTMLDivElement of ColorPicker
+ */
+export declare const useColorPickerBase_unstable: (props: ColorPickerBaseProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerBaseState;
+
+export declare const useColorPickerContextValue_unstable: <T>(selector: ContextSelector<ColorPickerContextValue, T>) => T;
+
+export declare const useColorPickerContextValues: (state: ColorPickerState) => ColorPickerContextValues;
+
+/**
+ * Apply styling to the ColorPicker slots based on the state
+ */
+export declare const useColorPickerStyles_unstable: (state: ColorPickerState) => ColorPickerState;
+
+/**
+ * Create the state required to render ColorSlider.
+ *
+ * The returned state can be modified with hooks such as useColorSliderStyles_unstable,
+ * before being passed to renderColorSlider_unstable.
+ *
+ * @param props - props from this instance of ColorSlider
+ * @param ref - reference to root HTMLInputElement of ColorSlider
+ */
+export declare const useColorSlider_unstable: (props: ColorSliderProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderState;
+
+/**
+ * Create the base state required to render unstyled ColorSlider.
+ *
+ * The returned state can be modified with hooks before being passed to renderColorSlider_unstable.
+ *
+ * @param props - props from this instance of ColorSlider
+ * @param ref - reference to root HTMLInputElement of ColorSlider
+ */
+export declare const useColorSliderBase_unstable: (props: ColorSliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderBaseState;
+
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */
+export declare const useColorSliderStyles_unstable: (state: ColorSliderState) => ColorSliderState;
+
+export { }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { EventData } from '@fluentui/react-utilities';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -13,6 +14,16 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
 
+/**
+ * AlphaSlider Base Props
+ */
+export declare type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;
+
+/**
+ * State used in rendering unstyled AlphaSlider
+ */
+export declare type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;
+
 export declare const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
 
 /**
@@ -42,6 +53,16 @@ export declare type AlphaSliderState = ComponentState<AlphaSliderSlots> & Pick<A
  */
 export declare const ColorArea: ForwardRefComponent<ColorAreaProps>;
 
+/**
+ * ColorArea Base Props
+ */
+export declare type ColorAreaBaseProps = Omit<ColorAreaProps, 'shape'>;
+
+/**
+ * ColorArea Base State
+ */
+export declare type ColorAreaBaseState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color'>;
+
 export declare const colorAreaClassNames: SlotClassNames<ColorAreaSlots>;
 
 declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | PointerEvent> & {
@@ -78,19 +99,25 @@ export declare type ColorAreaSlots = {
  */
 export declare type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;
 
-declare type ColorChannel = 'hue' | 'saturation' | 'value';
+export declare type ColorChannel = 'hue' | 'saturation' | 'value';
 
 /**
  * ColorPicker component
  */
 export declare const ColorPicker: ForwardRefComponent<ColorPickerProps>;
 
+/** ColorPicker Base Props */
+export declare type ColorPickerBaseProps = Omit<ColorPickerProps, 'shape'>;
+
+/** State used in rendering unstyled ColorPicker */
+export declare type ColorPickerBaseState = Omit<ColorPickerState, 'shape'>;
+
 export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
 
 /**
  * The context through which individual color controls communicate with the picker.
  */
-declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
+export declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
     /**
      * Callback used by Sliders to request a change on it's selected value
      * Should be used to get value of color channel
@@ -102,7 +129,7 @@ declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'>
     }) => void;
 };
 
-declare type ColorPickerContextValues = {
+export declare type ColorPickerContextValues = {
     colorPicker: ColorPickerContextValue;
 };
 
@@ -143,6 +170,10 @@ export declare type ColorPickerState = ComponentState<ColorPickerSlots> & ColorP
  */
 export declare const ColorSlider: ForwardRefComponent<ColorSliderProps>;
 
+export declare type ColorSliderBaseProps = Omit<ColorSliderProps, 'shape'>;
+
+export declare type ColorSliderBaseState = Omit<ColorSliderState, 'shape'>;
+
 export declare const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
 
 /**
@@ -195,22 +226,22 @@ declare type HsvColor = {
 /**
  * Render the final JSX of AlphaSlider
  */
-export declare const renderAlphaSlider_unstable: (state: AlphaSliderState) => JSXElement;
+export declare const renderAlphaSlider_unstable: (state: AlphaSliderBaseState) => JSXElement;
 
 /**
  * Render the final JSX of ColorArea
  */
-export declare const renderColorArea_unstable: (state: ColorAreaState) => JSXElement;
+export declare const renderColorArea_unstable: (state: ColorAreaBaseState) => JSXElement;
 
 /**
  * Render the final JSX of ColorPicker
  */
-export declare const renderColorPicker_unstable: (state: ColorPickerState, contextValues: ColorPickerContextValues) => JSXElement;
+export declare const renderColorPicker_unstable: (state: ColorPickerBaseState, contextValues: ColorPickerContextValues) => JSXElement;
 
 /**
  * Render the final JSX of ColorSlider
  */
-export declare const renderColorSlider_unstable: (state: ColorSliderState) => JSXElement;
+export declare const renderColorSlider_unstable: (state: ColorSliderBaseState) => JSXElement;
 
 declare type SliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
     color: HsvColor;
@@ -227,6 +258,8 @@ declare type SliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLIn
  */
 export declare const useAlphaSlider_unstable: (props: AlphaSliderProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderState;
 
+export declare const useAlphaSliderBase_unstable: (props: AlphaSliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderBaseState;
+
 /**
  * Apply styling to the AlphaSlider slots based on the state
  */
@@ -243,11 +276,23 @@ export declare const useAlphaSliderStyles_unstable: (state: AlphaSliderState) =>
  */
 export declare const useColorArea_unstable: (props: ColorAreaProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaState;
 
+/**
+ * Create the state required to render unstyled ColorArea.
+ *
+ * The returned state can be modified with hooks before being passed to renderColorArea_unstable.
+ *
+ * @param props - props from this instance of ColorArea
+ * @param ref - reference to root HTMLDivElement of ColorArea
+ */
+export declare const useColorAreaBase_unstable: (props: ColorAreaBaseProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaBaseState;
+
 /**
  * Apply styling to the ColorArea slots based on the state
  */
 export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => ColorAreaState;
 
+export declare const useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
+
 /**
  * Create the state required to render ColorPicker.
  *
@@ -257,7 +302,11 @@ export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => Col
  * @param props - props from this instance of ColorPicker
  * @param ref - reference to root HTMLDivElement of ColorPicker
  */
-export declare const useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
+export declare const useColorPickerBase_unstable: (props: ColorPickerBaseProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerBaseState;
+
+export declare const useColorPickerContextValue_unstable: <T>(selector: ContextSelector<ColorPickerContextValue, T>) => T;
+
+export declare const useColorPickerContextValues: (state: ColorPickerState) => ColorPickerContextValues;
 
 /**
  * Apply styling to the ColorPicker slots based on the state
@@ -275,6 +324,16 @@ export declare const useColorPickerStyles_unstable: (state: ColorPickerState) =>
  */
 export declare const useColorSlider_unstable: (props: ColorSliderProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderState;
 
+/**
+ * Create the base state required to render unstyled ColorSlider.
+ *
+ * The returned state can be modified with hooks before being passed to renderColorSlider_unstable.
+ *
+ * @param props - props from this instance of ColorSlider
+ * @param ref - reference to root HTMLInputElement of ColorSlider
+ */
+export declare const useColorSliderBase_unstable: (props: ColorSliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderBaseState;
+
 /**
  * Apply styling to the ColorSlider slots based on the state
  */

package/lib/AlphaSlider.js

@@ -1 +1 @@
-export { AlphaSlider, alphaSliderCSSVars, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from './components/AlphaSlider/index';
+export { AlphaSlider, alphaSliderCSSVars, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderBase_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from "./components/AlphaSlider/index.js";

package/lib/AlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './components/AlphaSlider/index';\nexport {\n  AlphaSlider,\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './components/AlphaSlider/index';\nexport {\n  AlphaSlider,\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderBase_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,oCAAiC"}

package/lib/ColorArea.js

@@ -1 +1 @@
-export { ColorArea, colorAreaCSSVars, colorAreaClassNames, renderColorArea_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from './components/ColorArea/index';
+export { ColorArea, colorAreaCSSVars, colorAreaClassNames, renderColorArea_unstable, useColorAreaBase_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from "./components/ColorArea/index.js";

package/lib/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n  ColorArea,\n  colorAreaCSSVars,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"mappings":"AAMA,SACEA,SAAS,EACTC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
+{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n  ColorArea,\n  colorAreaCSSVars,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaBase_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaBase_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"mappings":"AAQA,SACEA,SAAS,EACTC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,yBAAyB,EACzBC,2BAA2B,EAC3BC,qBAAqB,QAChB,kCAA+B"}

package/lib/ColorPicker.js

@@ -1 +1 @@
-export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerStyles_unstable, useColorPicker_unstable } from './components/ColorPicker/index';
+export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerBaseContextValues_unstable, useColorPickerBase_unstable, useColorPickerContextValues, useColorPickerStyles_unstable, useColorPicker_unstable } from "./components/ColorPicker/index.js";

package/lib/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"mappings":"AAMA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n  ColorPickerBaseProps,\n  ColorPickerBaseState,\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerBaseContextValues_unstable,\n  useColorPickerBase_unstable,\n  useColorPickerContextValues,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerBaseContextValues_unstable","useColorPickerBase_unstable","useColorPickerContextValues","useColorPickerStyles_unstable","useColorPicker_unstable"],"mappings":"AAQA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,wCAAwC,EACxCC,2BAA2B,EAC3BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,oCAAiC"}

package/lib/ColorSlider.js

@@ -1 +1 @@
-export { ColorSlider, colorSliderCSSVars, colorSliderClassNames, renderColorSlider_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from './components/ColorSlider/index';
+export { ColorSlider, colorSliderCSSVars, colorSliderClassNames, renderColorSlider_unstable, useColorSliderBase_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from "./components/ColorSlider/index.js";

package/lib/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n  ColorSlider,\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"mappings":"AAMA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n  ColorChannel,\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n  ColorSlider,\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderBase_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"mappings":"AASA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,oCAAiC"}

package/lib/components/AlphaSlider/AlphaSlider.constants.js

@@ -0,0 +1,6 @@
+export const alphaSliderCSSVars = {
+    sliderDirectionVar: `--fui-AlphaSlider--direction`,
+    sliderProgressVar: `--fui-AlphaSlider--progress`,
+    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
+    railColorVar: `--fui-AlphaSlider__rail--color`
+};

package/lib/components/AlphaSlider/AlphaSlider.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":"AAAA,OAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}

package/lib/components/AlphaSlider/AlphaSlider.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useAlphaSlider_unstable } from './useAlphaSlider';
-import { renderAlphaSlider_unstable } from './renderAlphaSlider';
-import { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useAlphaSlider_unstable } from "./useAlphaSlider.js";
+import { renderAlphaSlider_unstable } from "./renderAlphaSlider.js";
+import { useAlphaSliderStyles_unstable } from "./useAlphaSliderStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * AlphaSlider component
  */ export const AlphaSlider = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/AlphaSlider/AlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/AlphaSlider/AlphaSlider.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering AlphaSlider
+ * State used in rendering unstyled AlphaSlider
  */ export { };