npm - @fluentui/react-color-picker - Versions diffs - 9.2.15 → 9.2.16 - Mend

@fluentui/react-color-picker 9.2.15 → 9.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-color-picker
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:41 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.2.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.16)
+Thu, 23 Apr 2026 11:59:41 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.15..@fluentui/react-color-picker_v9.2.16)
+### Patches
+- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
 ## [9.2.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.15)
-Wed, 25 Feb 2026 13:28:23 GMT
+Wed, 25 Feb 2026 13:32:28 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.14..@fluentui/react-color-picker_v9.2.15)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -92,9 +92,10 @@ export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
  */
 declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
     /**
-     * @internal
      * 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;

package/lib/components/AlphaSlider/useAlphaSlider.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';
 import { useAlphaSliderState_unstable } from './useAlphaSliderState';
 import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport * 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":["~~React","~~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;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~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"}
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"}

package/lib/components/AlphaSlider/useAlphaSliderState.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { tinycolor } from '@ctrl/tinycolor';
 import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport * 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 'use no memo';\n\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 state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["~~React","~~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":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~SAAS,QAAQ,kBAAkB;AAC5C,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,gCAAgC;AAEnE,SAASC,mCAAmC,QAAQ,6BAA6B;AACjF,SAASC,GAAG,EAAEC,GAAG,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,oBAAoB,EAAEC,0BAA0B,EAAEC,kBAAkB,QAAQ,qBAAqB;AAC1G,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,MAAMC,+BAA+B,CAACC,OAAyBC;IACpE;QAUyDA;IARzD,MAAM,EAAEC,GAAG,EAAE,GAAGb;IAChB,MAAMc,sBAAsBZ,oCAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBf,oCAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAMU,WAAWJ,SAASD;IAC1B,MAAMM,WAAW5B,UAAU2B,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,GAAG7B,qBAAqB;QAC3D8B,cAAcpB,2BAA2Ba,eAAcR,sBAAAA,MAAMgB,YAAY,cAAlBhB,0CAAAA,oBAAoBiB,CAAC;QAC5ElB,OAAOJ,2BAA2Ba,cAAcE,qBAAAA,+BAAAA,SAAUO,CAAC;QAC3DC,cAAcxB,qBAAqB,KAAKc;IAC1C;IAEA,MAAMW,eAAenC,MAAM6B,cAActB,KAAKC;IAC9C,MAAM4B,eAAe3B,WAAW0B,cAAc5B,KAAKC;IAEnD,MAAM6B,gBAAgBtB,MAAMuB,KAAK,CAACf,QAAQ;IAE1C,MAAMgB,YAAwDrC,iBAAiBsC,CAAAA;QAC7E,MAAMC,WAAW/B,qBAAqBgC,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGpB;QAClE,MAAMqB,WAAWhC,eAAe;YAAE,GAAGa,QAAQ;YAAEO,GAAGQ,WAAW;QAAI;QACjEX,gBAAgBW;QAChBJ,0BAAAA,oCAAAA,cAAgBG;QAChBjB,qBAAAA,+BAAAA,SAAWiB,OAAO;YAAEM,MAAM;YAAUN;YAAOlB,OAAOuB;QAAS;IAC7D;IAEA,MAAME,kBAAkBnC,mBAAmBK,KAAKQ,UAAUD;IAE1D,MAAMwB,gBAAgB;QACpB,CAAC3C,mBAAmB4C,kBAAkB,CAAC,EAAEF;QACzC,CAAC1C,mBAAmB6C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC/B,mBAAmB8C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAExB,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,GAAG,EAAE3B,SAASM,CAAC,CAAC,CAAC,CAAC;QACnH,CAAC5B,mBAAmBkD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE5B,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,EAAE,CAAC;IACpG;IAEA,aAAa;IACbvC,MAAMyC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGjC,MAAMyC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd1C,MAAMuB,KAAK,CAACM,KAAK,GAAGT;IACpBpB,MAAMuB,KAAK,CAACf,QAAQ,GAAGgB;IAEvB,OAAOxB;AACT,EAAE"}
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 'use no memo';\n\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 state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["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":"AAAA;AAGA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,gCAAgC;AAEnE,SAASC,mCAAmC,QAAQ,6BAA6B;AACjF,SAASC,GAAG,EAAEC,GAAG,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,oBAAoB,EAAEC,0BAA0B,EAAEC,kBAAkB,QAAQ,qBAAqB;AAC1G,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,MAAMC,+BAA+B,CAACC,OAAyBC;IACpE;QAUyDA;IARzD,MAAM,EAAEC,GAAG,EAAE,GAAGb;IAChB,MAAMc,sBAAsBZ,oCAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBf,oCAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAMU,WAAWJ,SAASD;IAC1B,MAAMM,WAAW5B,UAAU2B,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,GAAG7B,qBAAqB;QAC3D8B,cAAcpB,2BAA2Ba,eAAcR,sBAAAA,MAAMgB,YAAY,cAAlBhB,0CAAAA,oBAAoBiB,CAAC;QAC5ElB,OAAOJ,2BAA2Ba,cAAcE,qBAAAA,+BAAAA,SAAUO,CAAC;QAC3DC,cAAcxB,qBAAqB,KAAKc;IAC1C;IAEA,MAAMW,eAAenC,MAAM6B,cAActB,KAAKC;IAC9C,MAAM4B,eAAe3B,WAAW0B,cAAc5B,KAAKC;IAEnD,MAAM6B,gBAAgBtB,MAAMuB,KAAK,CAACf,QAAQ;IAE1C,MAAMgB,YAAwDrC,iBAAiBsC,CAAAA;QAC7E,MAAMC,WAAW/B,qBAAqBgC,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGpB;QAClE,MAAMqB,WAAWhC,eAAe;YAAE,GAAGa,QAAQ;YAAEO,GAAGQ,WAAW;QAAI;QACjEX,gBAAgBW;QAChBJ,0BAAAA,oCAAAA,cAAgBG;QAChBjB,qBAAAA,+BAAAA,SAAWiB,OAAO;YAAEM,MAAM;YAAUN;YAAOlB,OAAOuB;QAAS;IAC7D;IAEA,MAAME,kBAAkBnC,mBAAmBK,KAAKQ,UAAUD;IAE1D,MAAMwB,gBAAgB;QACpB,CAAC3C,mBAAmB4C,kBAAkB,CAAC,EAAEF;QACzC,CAAC1C,mBAAmB6C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC/B,mBAAmB8C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAExB,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,GAAG,EAAE3B,SAASM,CAAC,CAAC,CAAC,CAAC;QACnH,CAAC5B,mBAAmBkD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE5B,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,EAAE,CAAC;IACpG;IAEA,aAAa;IACbvC,MAAMyC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGjC,MAAMyC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd1C,MAAMuB,KAAK,CAACM,KAAK,GAAGT;IACpBpB,MAAMuB,KAAK,CAACf,QAAQ,GAAGgB;IAEvB,OAAOxB;AACT,EAAE"}

package/lib/components/ColorArea/ColorArea.types.js CHANGED Viewed

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering ColorArea
+ */ export { };

package/lib/components/ColorArea/ColorArea.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent \| PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/*\n ColorArea Props\n /\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' \| 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n The current color of the ColorArea.\n /\n color?: HsvColor;\n\n /\n The starting value for an uncontrolled ColorArea.\n /\n defaultColor?: HsvColor;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/\n State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' \| 'shape'>;\n"],"names":[~~"React"~~],"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent \| PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/*\n ColorArea Props\n /\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' \| 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n The current color of the ColorArea.\n /\n color?: HsvColor;\n\n /\n The starting value for an uncontrolled ColorArea.\n /\n defaultColor?: HsvColor;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/\n State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' \| 'shape'>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAAgH"}

package/lib/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useColorPicker_unstable } from './useColorPicker';
 import { renderColorPicker_unstable } from './renderColorPicker';
 import { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';
-import { useColorPickerContextValues } from '../../contexts/colorPicker';
+import { useColorPickerContextValues } from './useColorPickerContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ColorPicker component

package/lib/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from '~~../../contexts/colorPicker~~';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","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,~~6BAA6B~~;~~AACzE~~,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQT,wBAAwBO,OAAOC;IAC7C,MAAME,gBAAgBP,4BAA4BM;IAElDP,8BAA8BO;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from './useColorPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","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,gCAAgC;AAC5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQT,wBAAwBO,OAAOC;IAC7C,MAAME,gBAAgBP,4BAA4BM;IAElDP,8BAA8BO;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/ColorPicker/ColorPicker.types.js CHANGED Viewed

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering ColorPicker
+ */ export { };

package/lib/components/ColorPicker/ColorPicker.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":[~~"React"~~],"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":[],"mappings":"AAkCA;;CAEC,GACD,WAA0F"}

package/lib/components/ColorPicker/useColorPicker.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
 /**
  * Create the state required to render ColorPicker.

package/lib/components/ColorPicker/useColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n shape,\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,gBAAmDR,iBAAiB,CAACS,OAAOC;QAChFL,0BAAAA,oCAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n shape,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,gBAAmDR,iBAAiB,CAACS,OAAOC;QAChFL,0BAAAA,oCAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}

package/lib/components/ColorPicker/useColorPickerContextValues.js ADDED Viewed

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+export const useColorPickerContextValues = (state)=>{
+    const { color, shape, requestChange } = state;
+    const colorPicker = React.useMemo(()=>({
+            requestChange,
+            color,
+            shape
+        }), [
+        requestChange,
+        color,
+        shape
+    ]);
+    return {
+        colorPicker
+    };
+};

package/lib/components/ColorPicker/useColorPickerContextValues.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/ColorPicker/useColorPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';\nimport type { ColorPickerState } from './ColorPicker.types';\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape,\n }),\n [requestChange, color, shape],\n );\n\n return { colorPicker };\n};\n"],"names":["React","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,MAAMI,cAAcN,MAAMO,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAF;YACAC;QACF,CAAA,GACA;QAACC;QAAeF;QAAOC;KAAM;IAG/B,OAAO;QAAEE;IAAY;AACvB,EAAE"}

package/lib/components/ColorSlider/ColorSlider.types.js CHANGED Viewed

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering ColorSlider
+ */ export { };

package/lib/components/ColorSlider/ColorSlider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":[~~"React"~~],"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":[],"mappings":"AAsDA;;CAEC,GACD,WAC2D"}

package/lib/components/ColorSlider/useColorSlider.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { tinycolor } from '@ctrl/tinycolor';
 import { getPartitionedNativeProps, useId, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import { colorSliderCSSVars } from './useColorSliderStyles.styles';

package/lib/components/ColorSlider/useColorSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\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 // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["~~React","~~tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~SAAS,QAAQ,kBAAkB;AAC5C,SACEC,yBAAyB,EACzBC,KAAK,EACLC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,mCAAmC,QAAQ,6BAA6B;AACjF,SAASC,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,wBAAwB;AACvE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,UAAU,EAAuBC,aAAa,QAAQ,4BAA4B;AAE3F,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA;IAEA,MAAM,EAAEC,GAAG,EAAE,GAAGd;IAChB,MAAMe,sBAAsBd,oCAAoCe,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBjB,oCAAoCe,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,mBAAmBnB,oCAAoCe,CAAAA,MAAOA,IAAIK,KAAK;IAC7E,MAAMC,cAAc7B,0BAA0B;QAC5CmB;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJL,KAAK,EACLM,UAAU,KAAK,EACfC,WAAWX,mBAAmB,EAC9BM,QAAQD,gBAAgB,EACxBO,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IAEJ,MAAMoB,WAAWb,SAASD;IAC1B,MAAMe,WAAWzC,UAAUwC,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,GAAGxC,qBAA+B;QACrEyC,cAAczB,MAAM0B,YAAY;QAChCC,OAAOP;QACPQ,cAAc9B;IAChB;IAEA,MAAMN,MAAMqB,YAAY,QAAQtB,UAAUE;IAE1C,MAAMoC,sBAA8C;QAClDC,KAAKlC,WAAW2B,aAAaQ,CAAC;QAC9BC,YAAYpC,WAAW2B,aAAaU,CAAC,GAAG;QACxCC,OAAOtC,WAAW2B,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,eAAevC,cAAcgB,SAASgB;IAC5C,MAAMQ,eAAe3C,WAAW0C,cAAc9C,KAAKE;IAEnD,MAAM8C,gBAAgBrB,kBAAAA,4BAAAA,MAAOH,QAAQ;IAErC,MAAMyB,YAAwDtD,iBAAiBuD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,IAAMnC,eAAe;oBAAE,GAAGyB,QAAQ;oBAAEW,GAAGU;gBAAS;YACrDT,YAAY,IAAMrC,eAAe;oBAAE,GAAGyB,QAAQ;oBAAEa,GAAGQ,WAAW;gBAAI;YAClEP,OAAO,IAAMvC,eAAe;oBAAE,GAAGyB,QAAQ;oBAAEe,GAAGM,WAAW;gBAAI;QAC/D;QACA,MAAMI,WAAWhD,cAAcgB,SAAS+B;QAExCpB,gBAAgBqB;QAEhBP,0BAAAA,oCAAAA,cAAgBE;QAChB1B,qBAAAA,+BAAAA,SAAW0B,OAAO;YAChBM,MAAM;YACNN;YACAjC,OAAOsC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC7D,mBAAmB8D,kBAAkB,CAAC,EAAEjC,WAAW,WAAWb,QAAQ,QAAQ,WAAW;QAC1F,CAAChB,mBAAmB+D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAACnD,mBAAmBgE,aAAa,CAAC,EAChCrC,YAAY,QAAQ,CAAC,IAAI,EAAEuB,aAAa,YAAY,CAAC,GAAGxD,UAAUwC,UAAU+B,WAAW;QACzF,CAACjE,mBAAmBkE,YAAY,CAAC,EAC/BvC,YAAY,QACR,CAAC,IAAI,EAAEQ,SAASU,CAAC,CAAC,CAAC,EAAEV,SAASY,CAAC,GAAG,IAAI,GAAG,EAAEZ,SAASgC,CAAC,GAAG,IAAI,EAAE,CAAC,GAC/D,CAAC,IAAI,EAAEhC,SAASU,CAAC,CAAC,WAAW,CAAC;IACtC;IAEA,MAAMJ,QAA0B;QAC9BlB;QACAM;QACAF;QACAyC,YAAY;YACVrC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMjC,KAAKwE,MAAM,CAACvC,MAAM;YACtBwC,cAAc;gBACZC,MAAM;gBACN,GAAG/C,YAAYM,IAAI;YACrB;YACA0C,aAAa;QACf;QACAzC,OAAOlC,KAAKwE,MAAM,CAACtC,OAAO;YACxBuC,cAAc;gBACZG,IAAI7E,MAAM,WAAWkB,MAAM2D,EAAE;gBAC7B1D;gBACA2D,KAAKtE;gBACLuE,KAAKrE;gBACLsE,UAAU;gBACV,CAAC,mBAAmB,EAAE/C,WAAW,aAAa;gBAC9C,GAAGL,YAAYqD,OAAO;gBACtBjB,MAAM;YACR;YACAY,aAAa;QACf;QACAxC,MAAMnC,KAAKwE,MAAM,CAACrC,MAAM;YAAEwC,aAAa;QAAM;QAC7CvC,OAAOpC,KAAKwE,MAAM,CAACpC,OAAO;YAAEuC,aAAa;QAAM;IACjD;IAEA,aAAa;IACb/B,MAAMX,IAAI,CAACgD,KAAK,GAAG;QACjB,GAAGjB,aAAa;QAChB,GAAGpB,MAAMX,IAAI,CAACgD,KAAK;IACrB;IAEA,cAAc;IACdrC,MAAMV,KAAK,CAACiB,KAAK,GAAGE;IACpBT,MAAMV,KAAK,CAACH,QAAQ,GAAGyB;IACvB,OAAOZ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\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 // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}

package/lib/contexts/colorPicker.js CHANGED Viewed

@@ -1,18 +1,5 @@
 'use client';
-import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-export const useColorPickerContextValues = (state)=>{
-    const { color, shape, requestChange } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const colorPicker = {
-        requestChange,
-        color,
-        shape
-    };
-    return {
-        colorPicker
-    };
-};
 export const colorPickerContextDefaultValue = {
     requestChange: ()=>{
     /*noop*/ },

package/lib/contexts/colorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ~~ColorPickerState,~~ ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n @internal\n * Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const colorPicker: ColorPickerContextValue = {\n requestChange,\n color,\n shape,\n };\n\n return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["~~React","~~createContext","useContextSelector","~~useColorPickerContextValues~~","~~state~~","color","~~shape~~","~~requestChange~~","~~colorPicker","colorPickerContextDefaultValue","undefined","~~colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;~~AAiBrF~~,OAAO,MAAMC,~~8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEF,OAAO,MAAMC,~~iCAA0D;~~IACrEF~~,eAAe;IACb,MAAM,GACR;~~IACAF~~,~~OAAOK~~;~~IACPJ~~,OAAO;AACT,EAAE;AAMF,~~MAAMK~~,~~qBAAqBV~~,~~cACzBS~~;AAGF,OAAO,~~MAAME~~,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAE/D,OAAO,MAAMC,sCAAsC,CAAIC,~~WACrDb~~,~~mBAAmBS~~,oBAAoB,CAACK,~~MAAMP~~,8BAA8B,~~GAAKM~~,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n \n @internal\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","colorPickerContextDefaultValue","requestChange","color","undefined","shape","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;AAGA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAkBrF,OAAO,MAAMC,iCAA0D;IACrEC,eAAe;IACb,MAAM,GACR;IACAC,OAAOC;IACPC,OAAO;AACT,EAAE;AAMF,MAAMC,qBAAqBP,cACzBK;AAGF,OAAO,MAAMG,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAE/D,OAAO,MAAMC,sCAAsC,CAAIC,WACrDV,mBAAmBM,oBAAoB,CAACK,MAAMV,8BAA8B,GAAKS,SAASC,MAAM"}

package/lib/utils/createHsvColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD,OAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}
1	+ {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import type { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD,OAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.js CHANGED Viewed

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useAlphaSlider_unstable", {
         return useAlphaSlider_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _useAlphaSliderState = require("./useAlphaSliderState");
 const _colorPicker = require("../../contexts/colorPicker");

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport * 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":["~~React","~~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;;;;;+~~BAiBaM;;;;;;;iEAfU~~,~~QAAQ;gCACwB,~~4BAA4B;qCAEtC,wBAAwB;6BACjB,6BAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,~~cAAcX~~,~~6CAAAA~~,EAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,~~EACR~~,~~AACAC~~,~~IAAI~~,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIvB,qBAAAA,EAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEApB,iDAAAA,EAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}
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;;;;;+BAiBaK;;;;;;gCAd0C,4BAA4B;qCAEtC,wBAAwB;6BACjB,6BAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,kBAAcX,yCAAAA,EAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIvB,qBAAAA,EAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEApB,iDAAAA,EAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js CHANGED Viewed

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useAlphaSliderState_unstable", {
         return useAlphaSliderState_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _tinycolor = require("@ctrl/tinycolor");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport * 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 'use no memo';\n\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 state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["~~React","~~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":"AAAA;;;;;+~~BAcagB;;;;;;;iEAZU~~,~~QAAQ;2BACL,~~kBAAkB;gCACkB,4BAA4B;qCAC1C,kCAAkC;4CAC/C,gCAAgC;6BAEf,6BAA6B;2BACxD,wBAAwB;4BACtB,yBAAyB;kCACiC,qBAAqB;gCAC3E,6BAA6B;AAErD,qCAAqC,CAACC,OAAyBC;IACpE;QAUyDA;IARzD,MAAM,EAAEC,GAAG,EAAE,~~GAAGb~~,~~2CAAAA~~;IAChB,MAAMc,~~0BAAsBZ~~,~~gDAAAA~~,EAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBf,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAMU,WAAWJ,SAASD;IAC1B,MAAMM,eAAW5B,oBAAAA,EAAU2B,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,OAAG7B,oCAAAA,EAAqB;QAC3D8B,kBAAcpB,4CAAAA,EAA2Ba,cAAAA,CAAcR,sBAAAA,MAAMgB,YAAAA,AAAY,MAAA,QAAlBhB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBiB,CAAC;QAC5ElB,WAAOJ,4CAAAA,EAA2Ba,cAAcE,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUO,CAAC;QAC3DC,kBAAcxB,sCAAAA,EAAqB,KAAKc;IAC1C;IAEA,MAAMW,mBAAenC,qBAAAA,EAAM6B,cAActB,cAAAA,EAAKC,cAAAA;IAC9C,MAAM4B,mBAAe3B,sBAAAA,EAAW0B,cAAc5B,cAAAA,EAAKC,cAAAA;IAEnD,MAAM6B,gBAAgBtB,MAAMuB,KAAK,CAACf,QAAQ;IAE1C,MAAMgB,gBAAwDrC,gCAAAA,EAAiBsC,CAAAA;QAC7E,MAAMC,eAAW/B,sCAAAA,EAAqBgC,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGpB;QAClE,MAAMqB,eAAWhC,8BAAAA,EAAe;YAAE,GAAGa,QAAQ;YAAEO,GAAGQ,WAAW;QAAI;QACjEX,gBAAgBW;QAChBJ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG;QAChBjB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWiB,OAAO;YAAEM,MAAM;YAAUN;YAAOlB,OAAOuB;QAAS;IAC7D;IAEA,MAAME,sBAAkBnC,oCAAAA,EAAmBK,KAAKQ,UAAUD;IAE1D,MAAMwB,gBAAgB;QACpB,CAAC3C,8CAAAA,CAAmB4C,kBAAkB,CAAC,EAAEF;QACzC,CAAC1C,8CAAAA,CAAmB6C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC/B,8CAAAA,CAAmB8C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAExB,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,GAAG,EAAE3B,SAASM,CAAC,CAAC,CAAC,CAAC;QACnH,CAAC5B,8CAAAA,CAAmBkD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE5B,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,EAAE,CAAC;IACpG;IAEA,aAAa;IACbvC,MAAMyC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGjC,MAAMyC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd1C,MAAMuB,KAAK,CAACM,KAAK,GAAGT;IACpBpB,MAAMuB,KAAK,CAACf,QAAQ,GAAGgB;IAEvB,OAAOxB;AACT,EAAE"}
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 'use no memo';\n\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 state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["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-commonjs/components/ColorArea/ColorArea.types.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering ColorArea
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/ColorArea/ColorArea.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent \| PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/*\n ColorArea Props\n /\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' \| 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n The current color of the ColorArea.\n /\n color?: HsvColor;\n\n /\n The starting value for an uncontrolled ColorArea.\n /\n defaultColor?: HsvColor;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/\n State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' \| 'shape'>;\n"],"names":[~~"React"~~],"mappings":"~~;;;;;iEAAuB~~,~~QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent \| PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/*\n ColorArea Props\n /\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' \| 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n The current color of the ColorArea.\n /\n color?: HsvColor;\n\n /\n The starting value for an uncontrolled ColorArea.\n /\n defaultColor?: HsvColor;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/\n State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' \| 'shape'>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAAgH"}

package/lib-commonjs/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -14,11 +14,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useColorPicker = require("./useColorPicker");
 const _renderColorPicker = require("./renderColorPicker");
 const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");
-const _colorPicker = require("../../contexts/colorPicker");
+const _useColorPickerContextValues = require("./useColorPickerContextValues");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorPicker.useColorPicker_unstable)(props, ref);
-    const contextValues = (0, _colorPicker.useColorPickerContextValues)(state);
+    const contextValues = (0, _useColorPickerContextValues.useColorPickerContextValues)(state);
     (0, _useColorPickerStylesstyles.useColorPickerStyles_unstable)(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorPickerStyles_unstable')(state);
     return (0, _renderColorPicker.renderColorPicker_unstable)(state, contextValues);

package/lib-commonjs/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from '~~../../contexts/colorPicker~~';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;~~6BAElC~~,~~6BAA6B~~;~~qCAC7B~~,kCAAkC;AAKvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,~~wCAAAA~~,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from './useColorPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;6CAElC,gCAAgC;qCAChC,kCAAkC;AAKvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wDAAAA,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib-commonjs/components/ColorPicker/ColorPicker.types.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering ColorPicker
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/ColorPicker/ColorPicker.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":[~~"React"~~],"mappings":"~~;;;;;iEAAuB~~,~~QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":[],"mappings":"AAkCA;;CAEC,GACD,WAA0F"}

package/lib-commonjs/components/ColorPicker/useColorPicker.js CHANGED Viewed

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useColorPicker_unstable", {
         return useColorPicker_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useColorPicker_unstable = (props, ref)=>{
     const { color, onColorChange, shape, ...rest } = props;

package/lib-commonjs/components/ColorPicker/useColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n shape,\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":"AAAA;;;;;+~~BAcaI;;;;;;;iEAZU~~,~~QAAQ;gCACkC,~~4BAA4B;AAWtF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,oBAAmDR,gCAAAA,EAAiB,CAACS,OAAOC;QAChFL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n shape,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAcaG;;;;;;gCAXoD,4BAA4B;AAWtF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,oBAAmDR,gCAAAA,EAAiB,CAACS,OAAOC;QAChFL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.js ADDED Viewed

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useColorPickerContextValues", {
+    enumerable: true,
+    get: function() {
+        return useColorPickerContextValues;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const useColorPickerContextValues = (state)=>{
+    const { color, shape, requestChange } = state;
+    const colorPicker = _react.useMemo(()=>({
+            requestChange,
+            color,
+            shape
+        }), [
+        requestChange,
+        color,
+        shape
+    ]);
+    return {
+        colorPicker
+    };
+};

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/ColorPicker/useColorPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';\nimport type { ColorPickerState } from './ColorPicker.types';\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape,\n }),\n [requestChange, color, shape],\n );\n\n return { colorPicker };\n};\n"],"names":["React","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,MAAMI,cAAcN,OAAMO,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAF;YACAC;SACF,CAAA,EACA;QAACC;QAAeF;QAAOC;KAAM;IAG/B,OAAO;QAAEE;IAAY;AACvB,EAAE"}

package/lib-commonjs/components/ColorSlider/ColorSlider.types.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering ColorSlider
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/ColorSlider/ColorSlider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":[~~"React"~~],"mappings":"~~;;;;;iEAAuB~~,~~QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":[],"mappings":"AAsDA;;CAEC,GACD,WAC2D"}

package/lib-commonjs/components/ColorSlider/useColorSlider.js CHANGED Viewed

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useColorSlider_unstable", {
         return useColorSlider_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _tinycolor = require("@ctrl/tinycolor");
 const _reactutilities = require("@fluentui/react-utilities");
 const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");

package/lib-commonjs/components/ColorSlider/useColorSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\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 // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["~~React","~~tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"AAAA;;;;;+BA+~~BaoB;;;;;;;iEA7BU~~,~~QAAQ;2BACL,~~kBAAkB;gCAOrC,4BAA4B;4CACA,gCAAgC;qCACnB,kCAAkC;6BAE9B,6BAA6B;2BAClC,wBAAwB;4BAC5C,yBAAyB;gCACrB,6BAA6B;+BACG,4BAA4B;AAapF,gCAAgC,CACrCC,OACAC;IAEA;IAEA,MAAM,EAAEC,GAAG,EAAE,~~OAAGd~~,~~uCAAAA~~;IAChB,MAAMe,0BAAsBd,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBjB,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,uBAAmBnB,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIK,KAAK;IAC7E,MAAMC,kBAAc7B,yCAAAA,EAA0B;QAC5CmB;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJL,KAAK,EACLM,UAAU,KAAK,EACfC,WAAWX,mBAAmB,EAC9BM,QAAQD,gBAAgB,EACxBO,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IAEJ,MAAMoB,WAAWb,SAASD;IAC1B,MAAMe,eAAWzC,oBAAAA,EAAUwC,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,OAAGxC,oCAAAA,EAA+B;QACrEyC,cAAczB,MAAM0B,YAAY;QAChCC,OAAOP;QACPQ,cAAc9B,4BAAAA;IAChB;IAEA,MAAMN,MAAMqB,YAAY,QAAQtB,kBAAAA,GAAUE,cAAAA;IAE1C,MAAMoC,sBAA8C;QAClDC,SAAKlC,yBAAAA,EAAW2B,aAAaQ,CAAC;QAC9BC,gBAAYpC,yBAAAA,EAAW2B,aAAaU,CAAC,GAAG;QACxCC,OAAOtC,6BAAAA,EAAW2B,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,mBAAevC,4BAAAA,EAAcgB,SAASgB;IAC5C,MAAMQ,~~eAAe3C~~,~~0BAAAA~~,EAAW0C,cAAc9C,cAAAA,EAAKE;IAEnD,MAAM8C,gBAAgBrB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,MAAMyB,gBAAwDtD,gCAAAA,EAAiBuD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,QAAMnC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEW,GAAGU;gBAAS;YACrDT,YAAY,QAAMrC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEa,GAAGQ,WAAW;gBAAI;YAClEP,OAAO,QAAMvC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEe,GAAGM,WAAW;gBAAI;QAC/D;QACA,MAAMI,~~WAAWhD~~,~~gCAAAA~~,EAAcgB,SAAS+B;QAExCpB,gBAAgBqB;QAEhBP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBE;QAChB1B,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW0B,OAAO;YAChBM,MAAM;YACNN;YACAjC,OAAOsC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC7D,8CAAAA,CAAmB8D,kBAAkB,CAAC,EAAEjC,WAAW,WAAWb,QAAQ,QAAQ,WAAW;QAC1F,CAAChB,8CAAAA,CAAmB+D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAACnD,8CAAAA,CAAmBgE,aAAa,CAAC,EAChCrC,YAAY,QAAQ,CAAC,IAAI,EAAEuB,aAAa,YAAY,CAAC,OAAGxD,oBAAAA,EAAUwC,UAAU+B,WAAW;QACzF,CAACjE,8CAAAA,CAAmBkE,YAAY,CAAC,EAC/BvC,YAAY,QACR,CAAC,IAAI,EAAEQ,SAASU,CAAC,CAAC,CAAC,EAAEV,SAASY,CAAC,GAAG,IAAI,GAAG,EAAEZ,SAASgC,CAAC,GAAG,IAAI,EAAE,CAAC,GAC/D,CAAC,IAAI,EAAEhC,SAASU,CAAC,CAAC,WAAW,CAAC;IACtC;IAEA,MAAMJ,QAA0B;QAC9BlB;QACAM;QACAF;QACAyC,YAAY;YACVrC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMjC,oBAAAA,CAAKwE,MAAM,CAACvC,MAAM;YACtBwC,cAAc;gBACZC,MAAM;gBACN,GAAG/C,YAAYM,IAAI;YACrB;YACA0C,aAAa;QACf;QACAzC,OAAOlC,oBAAAA,CAAKwE,MAAM,CAACtC,OAAO;YACxBuC,cAAc;gBACZG,QAAI7E,qBAAAA,EAAM,WAAWkB,MAAM2D,EAAE;gBAC7B1D;gBACA2D,KAAKtE,cAAAA;gBACLuE,KAAKrE;gBACLsE,UAAU;gBACV,CAAC,mBAAmB,EAAE/C,WAAW,aAAa;gBAC9C,GAAGL,YAAYqD,OAAO;gBACtBjB,MAAM;YACR;YACAY,aAAa;QACf;QACAxC,MAAMnC,oBAAAA,CAAKwE,MAAM,CAACrC,MAAM;YAAEwC,aAAa;QAAM;QAC7CvC,OAAOpC,oBAAAA,CAAKwE,MAAM,CAACpC,OAAO;YAAEuC,aAAa;QAAM;IACjD;IAEA,aAAa;IACb/B,MAAMX,IAAI,CAACgD,KAAK,GAAG;QACjB,GAAGjB,aAAa;QAChB,GAAGpB,MAAMX,IAAI,CAACgD,KAAK;IACrB;IAEA,cAAc;IACdrC,MAAMV,KAAK,CAACiB,KAAK,GAAGE;IACpBT,MAAMV,KAAK,CAACH,QAAQ,GAAGyB;IACvB,OAAOZ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\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 // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}

package/lib-commonjs/contexts/colorPicker.js CHANGED Viewed

@@ -18,26 +18,9 @@ _export(exports, {
     },
     useColorPickerContextValue_unstable: function() {
         return useColorPickerContextValue_unstable;
-    },
-    useColorPickerContextValues: function() {
-        return useColorPickerContextValues;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const useColorPickerContextValues = (state)=>{
-    const { color, shape, requestChange } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const colorPicker = {
-        requestChange,
-        color,
-        shape
-    };
-    return {
-        colorPicker
-    };
-};
 const colorPickerContextDefaultValue = {
     requestChange: ()=>{
     /*noop*/ },

package/lib-commonjs/contexts/colorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ~~ColorPickerState,~~ ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n @internal\n * Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const colorPicker: ColorPickerContextValue = {\n requestChange,\n color,\n shape,\n };\n\n return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["~~React","~~createContext","useContextSelector","~~useColorPickerContextValues~~","~~state~~","color","~~shape~~","~~requestChange~~","~~colorPicker","colorPickerContextDefaultValue","undefined","~~colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;~~uBAiDaY~~;;;~~kCAhBAH~~;;;~~uCAkBAK;;;+BA/BAX;;;;;iEAlBU~~,~~QAAQ;sCACmB,~~mCAAmC;~~AAiB9E~~,~~MAAMA~~,~~8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,MAAMC,~~iCAA0D;~~IACrEF~~,eAAe;IACb,MAAM,GACR;~~IACAF~~,~~OAAOK~~;~~IACPJ~~,OAAO;AACT,EAAE;AAMF,~~MAAMK~~,~~yBAAqBV~~,mCAAAA,~~EACzBS~~;AAGK,~~MAAME~~,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,~~eACrDb~~,wCAAAA,~~EAAmBS~~,oBAAoB,CAACK,~~MAAMP~~,8BAA8B,~~GAAKM~~,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n \n @internal\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","colorPickerContextDefaultValue","requestChange","color","undefined","shape","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;uBAqCaQ;;;kCAhBAN;;;uCAkBAQ;;;;sCApCqC,mCAAmC;AAkB9E,MAAMR,iCAA0D;IACrEC,eAAe;IACb,MAAM,GACR;IACAC,OAAOC;IACPC,OAAO;AACT,EAAE;AAMF,MAAMC,yBAAqBP,mCAAAA,EACzBK;AAGK,MAAMG,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,eACrDV,wCAAAA,EAAmBM,oBAAoB,CAACK,MAAMV,8BAA8B,GAAKS,SAASC,MAAM"}

package/lib-commonjs/utils/createHsvColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD;;;;;;;;;;AAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}
1	+ {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import type { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD;;;;;;;;;;AAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-color-picker",
-  "version": "9.2.15",
+  "version": "9.2.16",
   "description": "ColorPicker component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,12 +19,12 @@
   "license": "MIT",
   "dependencies": {
     "@ctrl/tinycolor": "^3.3.4",
-    "@fluentui/react-context-selector": "^9.2.15",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.14",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },