@fluentui/react-color-picker 9.2.18 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # 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 Thu, 09 Jul 2026 17:34:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+Thu, 09 Jul 2026 17:34:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.18..@fluentui/react-color-picker_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+### Changes
+
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-context-selector to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-tabster to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
 ## [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,283 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+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>;
+
+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>;
+
+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'>;
+
+declare type ColorChannel = 'hue' | 'saturation' | 'value';
+
+/**
+ * ColorPicker component
+ */
+export declare const ColorPicker: ForwardRefComponent<ColorPickerProps>;
+
+export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
+
+/**
+ * The context through which individual color controls communicate with the picker.
+ */
+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;
+};
+
+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 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: AlphaSliderState) => JSXElement;
+
+/**
+ * Render the final JSX of ColorArea
+ */
+export declare const renderColorArea_unstable: (state: ColorAreaState) => JSXElement;
+
+/**
+ * Render the final JSX of ColorPicker
+ */
+export declare const renderColorPicker_unstable: (state: ColorPickerState, contextValues: ColorPickerContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of ColorSlider
+ */
+export declare const renderColorSlider_unstable: (state: ColorSliderState) => 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;
+
+/**
+ * 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;
+
+/**
+ * Apply styling to the ColorArea slots based on the state
+ */
+export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => ColorAreaState;
+
+/**
+ * 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 useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
+
+/**
+ * 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;
+
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */
+export declare const useColorSliderStyles_unstable: (state: ColorSliderState) => ColorSliderState;
+
+export { }

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, 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 { 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,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, 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  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,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, 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  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,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, 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  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,oCAAiC"}

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/index.js

@@ -1,4 +1,4 @@
-export { AlphaSlider } from './AlphaSlider';
-export { renderAlphaSlider_unstable } from './renderAlphaSlider';
-export { useAlphaSlider_unstable } from './useAlphaSlider';
-export { alphaSliderCSSVars, alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';
+export { AlphaSlider } from "./AlphaSlider.js";
+export { renderAlphaSlider_unstable } from "./renderAlphaSlider.js";
+export { useAlphaSlider_unstable } from "./useAlphaSlider.js";
+export { alphaSliderCSSVars, alphaSliderClassNames, useAlphaSliderStyles_unstable } from "./useAlphaSliderStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSlider_unstable } from './useAlphaSlider';\nexport {\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  useAlphaSliderStyles_unstable,\n} from './useAlphaSliderStyles.styles';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSlider_unstable","alphaSliderCSSVars","alphaSliderClassNames","useAlphaSliderStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SACEC,kBAAkB,EAClBC,qBAAqB,EACrBC,6BAA6B,QACxB,gCAAgC"}
+{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSlider_unstable } from './useAlphaSlider';\nexport {\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  useAlphaSliderStyles_unstable,\n} from './useAlphaSliderStyles.styles';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSlider_unstable","alphaSliderCSSVars","alphaSliderClassNames","useAlphaSliderStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SACEC,kBAAkB,EAClBC,qBAAqB,EACrBC,6BAA6B,QACxB,mCAAgC"}

package/lib/components/AlphaSlider/renderAlphaSlider.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of AlphaSlider
  */ export const renderAlphaSlider_unstable = (state)=>{

package/lib/components/AlphaSlider/useAlphaSlider.js

@@ -1,7 +1,7 @@
 'use client';
-import { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';
-import { useAlphaSliderState_unstable } from './useAlphaSliderState';
-import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';
+import { getPartitionedNativeProps, useId, slot } from "@fluentui/react-utilities";
+import { useAlphaSliderState_unstable } from "./useAlphaSliderState.js";
+import { useColorPickerContextValue_unstable } from "../../contexts/colorPicker.js";
 /**
  * Create the state required to render AlphaSlider.
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type { AlphaSliderProps, AlphaSliderState } from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderState = {\n    shape,\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      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAEnF,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,mCAAmC,QAAQ,6BAA6B;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,mBAAmBJ,oCAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,cAAcX,0BAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,KAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,KAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIvB,MAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,KAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,KAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEApB,6BAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type { AlphaSliderProps, AlphaSliderState } from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderState = {\n    shape,\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      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAEnF,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,mCAAmC,QAAQ,gCAA6B;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,mBAAmBJ,oCAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,cAAcX,0BAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,KAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,KAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIvB,MAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,KAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,KAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEApB,6BAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}

package/lib/components/AlphaSlider/useAlphaSliderState.js

@@ -1,13 +1,13 @@
 'use client';
-import { tinycolor } from '@ctrl/tinycolor';
-import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';
-import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';
-import { MIN, MAX } from '../../utils/constants';
-import { getPercent } from '../../utils/getPercent';
-import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';
-import { createHsvColor } from '../../utils/createHsvColor';
+import { tinycolor } from "@ctrl/tinycolor";
+import { clamp, useControllableState, useEventCallback } from "@fluentui/react-utilities";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { alphaSliderCSSVars } from "./useAlphaSliderStyles.styles.js";
+import { useColorPickerContextValue_unstable } from "../../contexts/colorPicker.js";
+import { MIN, MAX } from "../../utils/constants.js";
+import { getPercent } from "../../utils/getPercent.js";
+import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from "./alphaSliderUtils.js";
+import { createHsvColor } from "../../utils/createHsvColor.js";
 export const useAlphaSliderState_unstable = (state, props)=>{
     var _props_defaultColor;
     const { dir } = useFluent();

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n  const hsvColor = color || colorFromContext;\n  const hslColor = tinycolor(hsvColor).toHsl();\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n    state: calculateTransparencyValue(transparency, hsvColor?.a),\n    initialState: adjustToTransparency(100, transparency),\n  });\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = state.input.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = adjustToTransparency(Number(event.target.value), transparency);\n    const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n    setCurrentValue(newValue);\n    inputOnChange?.(event);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n  const rootVariables = {\n    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n    [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,\n    [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n  };\n\n  // Root props\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.value = clampedValue;\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.onChange = _onChange;\n\n  return state;\n};\n"],"names":["tinycolor","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","toHsl","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n  const hsvColor = color || colorFromContext;\n  const hslColor = tinycolor(hsvColor).toHsl();\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n    state: calculateTransparencyValue(transparency, hsvColor?.a),\n    initialState: adjustToTransparency(100, transparency),\n  });\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = state.input.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = adjustToTransparency(Number(event.target.value), transparency);\n    const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n    setCurrentValue(newValue);\n    inputOnChange?.(event);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n  const rootVariables = {\n    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n    [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,\n    [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n  };\n\n  // Root props\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.value = clampedValue;\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.onChange = _onChange;\n\n  return state;\n};\n"],"names":["tinycolor","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","toHsl","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';
+import { __styles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { useColorSliderStyles_unstable } from "../ColorSlider/useColorSliderStyles.styles.js";
 const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
 export const alphaSliderClassNames = {
   root: 'fui-AlphaSlider',

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n    root: 'fui-AlphaSlider',\n    rail: 'fui-AlphaSlider__rail',\n    thumb: 'fui-AlphaSlider__thumb',\n    input: 'fui-AlphaSlider__input'\n};\nexport 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/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rail: {\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        '::before': {\n            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    }\n});\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const thumbStyles = useThumbStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    useColorSliderStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,6BAA6B,QAAQ,4CAA4C;AAC1F,MAAMC,qBAAqB,GAAG,sFAAsF;AACpH,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE,uBAAuB;EAC7BC,KAAK,EAAE,wBAAwB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,kBAAkB,EAAE,8BAA8B;EAClDC,iBAAiB,EAAE,6BAA6B;EAChDC,aAAa,EAAE,iCAAiC;EAChDC,YAAY,EAAE;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGf,QAAA;EAAAO,IAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGpC,QAAA;EAAAQ,KAAA;IAAA6B,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAG,OAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMU,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;EAC1B,MAAMgC,WAAW,GAAGX,cAAc,CAAC,CAAC;EACpC;EACAS,KAAK,CAACvC,IAAI,CAAC0C,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEuC,KAAK,CAACvC,IAAI,CAAC0C,SAAS,CAAC;EACrF;EACAH,KAAK,CAACpC,KAAK,CAACuC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACI,KAAK,EAAEoC,KAAK,CAACpC,KAAK,CAACuC,SAAS,CAAC;EACxF;EACAH,KAAK,CAACtC,IAAI,CAACyC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACE,IAAI,EAAEuC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAACyC,SAAS,CAAC;EAClG;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K7C,6BAA6B,CAAC0C,KAAK,CAAC;EACpC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { useColorSliderStyles_unstable } from \"../ColorSlider/useColorSliderStyles.styles.js\";\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n    root: 'fui-AlphaSlider',\n    rail: 'fui-AlphaSlider__rail',\n    thumb: 'fui-AlphaSlider__thumb',\n    input: 'fui-AlphaSlider__input'\n};\nexport 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/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rail: {\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        '::before': {\n            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    }\n});\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const thumbStyles = useThumbStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    useColorSliderStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,6BAA6B,QAAQ,+CAA+C;AAC7F,MAAMC,qBAAqB,GAAG,sFAAsF;AACpH,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE,uBAAuB;EAC7BC,KAAK,EAAE,wBAAwB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,kBAAkB,EAAE,8BAA8B;EAClDC,iBAAiB,EAAE,6BAA6B;EAChDC,aAAa,EAAE,iCAAiC;EAChDC,YAAY,EAAE;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGf,QAAA;EAAAO,IAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGpC,QAAA;EAAAQ,KAAA;IAAA6B,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAG,OAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMU,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;EAC1B,MAAMgC,WAAW,GAAGX,cAAc,CAAC,CAAC;EACpC;EACAS,KAAK,CAACvC,IAAI,CAAC0C,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEuC,KAAK,CAACvC,IAAI,CAAC0C,SAAS,CAAC;EACrF;EACAH,KAAK,CAACpC,KAAK,CAACuC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACI,KAAK,EAAEoC,KAAK,CAACpC,KAAK,CAACuC,SAAS,CAAC;EACxF;EACAH,KAAK,CAACtC,IAAI,CAACyC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACE,IAAI,EAAEuC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAACyC,SAAS,CAAC;EAClG;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K7C,6BAA6B,CAAC0C,KAAK,CAAC;EACpC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { useColorSliderStyles_unstable } from "../ColorSlider/useColorSliderStyles.styles.js";
 const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
 export const alphaSliderClassNames = {
     root: 'fui-AlphaSlider',

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,6CAA6C;AAG3F,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYf,WAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,OAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,iBAAiBnB,WAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,OAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,gCAAgC,CAACC;IAC5C,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpB,oDAAoD;IACpDS,MAAMtB,IAAI,CAACyB,SAAS,GAAG9B,aAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpF,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvF,oDAAoD;IACpDH,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,gDAA6C;AAG3F,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYf,WAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,OAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,iBAAiBnB,WAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,OAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,gCAAgC,CAACC;IAC5C,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpB,oDAAoD;IACpDS,MAAMtB,IAAI,CAACyB,SAAS,GAAG9B,aAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpF,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvF,oDAAoD;IACpDH,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

package/lib/components/ColorArea/ColorArea.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useColorArea_unstable } from './useColorArea';
-import { renderColorArea_unstable } from './renderColorArea';
-import { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useColorArea_unstable } from "./useColorArea.js";
+import { renderColorArea_unstable } from "./renderColorArea.js";
+import { useColorAreaStyles_unstable } from "./useColorAreaStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ColorArea component
  */ export const ColorArea = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/ColorArea/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAC5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,iCAA8B;AAE1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAC5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}