@fluentui/react-color-picker 9.2.5 → 9.2.7

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-color-picker
 
-This log was last generated on Mon, 08 Sep 2025 12:42:16 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Oct 2025 12:00:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.7)
+
+Wed, 08 Oct 2025 12:00:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.6..@fluentui/react-color-picker_v9.2.7)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.9 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+
+## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.6)
+
+Thu, 02 Oct 2025 15:12:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.5..@fluentui/react-color-picker_v9.2.6)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
 ## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.5)
 
-Mon, 08 Sep 2025 12:42:16 GMT 
+Mon, 08 Sep 2025 12:51:36 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.4..@fluentui/react-color-picker_v9.2.5)
 
 ### Patches

package/lib/components/AlphaSlider/AlphaSlider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useAlphaSlider_unstable } from './useAlphaSlider';
 import { renderAlphaSlider_unstable } from './renderAlphaSlider';

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

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

package/lib/components/AlphaSlider/useAlphaSlider.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["import * 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,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"}
+{"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"}

package/lib/components/AlphaSlider/useAlphaSliderState.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["import * 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,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"}
+{"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":"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"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';

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

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

package/lib/components/ColorArea/ColorArea.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useColorArea_unstable } from './useColorArea';
 import { renderColorArea_unstable } from './renderColorArea';

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

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

package/lib/components/ColorArea/useColorArea.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { tinycolor } from '@ctrl/tinycolor';
 import { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';
@@ -48,7 +49,7 @@ import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker'
         setColor(newColor);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, {
             type: 'change',
-            event: event,
+            event,
             color: newColor
         });
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n  const { targetDocument } = useFluent();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const xRef = React.useRef<HTMLInputElement>(null);\n  const yRef = React.useRef<HTMLInputElement>(null);\n  const focusWithinRef = useFocusWithin();\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\n  const {\n    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n    shape = shapeFromContext,\n    // Slots\n    inputX,\n    inputY,\n    thumb,\n    color,\n    ...rest\n  } = props;\n\n  const [hsvColor, setColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n  const saturation = Math.round(hsvColor.s * 100);\n  const value = Math.round(hsvColor.v * 100);\n\n  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n  const requestColorChange = useEventCallback((event: PointerEvent) => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    const coordinates = getCoordinates(rootRef.current, event);\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: coordinates.x,\n      v: coordinates.y,\n    };\n\n    setColor(newColor);\n    onChange?.(event, {\n      type: 'change',\n      event: event,\n      color: newColor,\n    });\n  });\n\n  const handleDocumentPointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      requestColorChange(event);\n    },\n    [requestColorChange],\n  );\n\n  const handleDocumentPointerUp = useEventCallback(() => {\n    targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n  });\n\n  const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    requestColorChange(event.nativeEvent);\n\n    targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n    targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n  });\n\n  const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const targetValue = Number(event.target.value) / 100;\n    const newColor: HsvColor = {\n      ...hsvColor,\n      ...(event.target === xRef.current && { s: targetValue }),\n      ...(event.target === yRef.current && { v: targetValue }),\n    };\n\n    setColor(newColor);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    let deltaX = 0;\n    let deltaY = 0;\n    let axis: 'x' | 'y' = 'x';\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = 1;\n\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = -1;\n\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = -1;\n\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = 1;\n\n        break;\n    }\n\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n      v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n    };\n\n    setColor(newColor);\n    setActiveAxis(axis);\n\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const rootVariables = {\n    [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n    [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n    [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n    [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n  };\n  const state: ColorAreaState = {\n    shape,\n    components: {\n      inputX: 'input',\n      inputY: 'input',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    inputX: slot.always(inputX, {\n      defaultProps: {\n        id: useId('sliderX-'),\n        type: 'range',\n        ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n      },\n      elementType: 'input',\n    }),\n    inputY: slot.always(inputY, {\n      defaultProps: {\n        id: useId('sliderY-'),\n        type: 'range',\n        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n      },\n      elementType: 'input',\n    }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n  state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n  state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n  state.root.style = {\n    ...state.root.style,\n    ...rootVariables,\n  };\n\n  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n  state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n  state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n  state.inputX.value = saturation;\n  state.inputY.value = value;\n\n  return state;\n};\n"],"names":["React","tinycolor","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","useColorArea_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","toRgbString","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n  const { targetDocument } = useFluent();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const xRef = React.useRef<HTMLInputElement>(null);\n  const yRef = React.useRef<HTMLInputElement>(null);\n  const focusWithinRef = useFocusWithin();\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\n  const {\n    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n    shape = shapeFromContext,\n    // Slots\n    inputX,\n    inputY,\n    thumb,\n    color,\n    ...rest\n  } = props;\n\n  const [hsvColor, setColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n  const saturation = Math.round(hsvColor.s * 100);\n  const value = Math.round(hsvColor.v * 100);\n\n  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n  const requestColorChange = useEventCallback((event: PointerEvent) => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    const coordinates = getCoordinates(rootRef.current, event);\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: coordinates.x,\n      v: coordinates.y,\n    };\n\n    setColor(newColor);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const handleDocumentPointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      requestColorChange(event);\n    },\n    [requestColorChange],\n  );\n\n  const handleDocumentPointerUp = useEventCallback(() => {\n    targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n  });\n\n  const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    requestColorChange(event.nativeEvent);\n\n    targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n    targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n  });\n\n  const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const targetValue = Number(event.target.value) / 100;\n    const newColor: HsvColor = {\n      ...hsvColor,\n      ...(event.target === xRef.current && { s: targetValue }),\n      ...(event.target === yRef.current && { v: targetValue }),\n    };\n\n    setColor(newColor);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    let deltaX = 0;\n    let deltaY = 0;\n    let axis: 'x' | 'y' = 'x';\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = 1;\n\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = -1;\n\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = -1;\n\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = 1;\n\n        break;\n    }\n\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n      v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n    };\n\n    setColor(newColor);\n    setActiveAxis(axis);\n\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const rootVariables = {\n    [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n    [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n    [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n    [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n  };\n  const state: ColorAreaState = {\n    shape,\n    components: {\n      inputX: 'input',\n      inputY: 'input',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    inputX: slot.always(inputX, {\n      defaultProps: {\n        id: useId('sliderX-'),\n        type: 'range',\n        ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n      },\n      elementType: 'input',\n    }),\n    inputY: slot.always(inputY, {\n      defaultProps: {\n        id: useId('sliderY-'),\n        type: 'range',\n        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n      },\n      elementType: 'input',\n    }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n  state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n  state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n  state.root.style = {\n    ...state.root.style,\n    ...rootVariables,\n  };\n\n  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n  state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n  state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n  state.inputX.value = saturation;\n  state.inputY.value = value;\n\n  return state;\n};\n"],"names":["React","tinycolor","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","useColorArea_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","toRgbString","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown"],"mappings":"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"}

package/lib/components/ColorArea/useColorAreaStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n    root: 'fui-ColorArea',\n    thumb: 'fui-ColorArea__thumb',\n    inputX: 'fui-ColorArea__inputX',\n    inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n    areaXProgressVar: `--fui-AreaX--progress`,\n    areaYProgressVar: `--fui-AreaY--progress`,\n    thumbColorVar: `--fui-Area__thumb--color`,\n    mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n    forcedColorAdjust: 'none',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'start',\n    justifyItems: 'start',\n    [thumbSizeVar]: '20px',\n    minWidth: '300px',\n    minHeight: '300px',\n    boxSizing: 'border-box',\n    marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        position: 'absolute',\n        width: `var(${thumbSizeVar})`,\n        height: `var(${thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n        transform: 'translate(-50%, 50%)',\n        left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    focusIndicator: createFocusOutlineStyle({\n        selector: 'focus-within',\n        style: {\n            outlineWidth: tokens.strokeWidthThick,\n            ...shorthands.borderWidth(tokens.strokeWidthThick),\n            outlineRadius: tokens.borderRadiusCircular\n        }\n    })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        overflow: 'hidden',\n        position: 'absolute',\n        pointerEvents: 'none',\n        top: 0,\n        left: 0,\n        opacity: 0,\n        padding: '0',\n        margin: '0',\n        width: '100%',\n        height: '100%'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);\n    state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n    state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n    state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n    root: 'fui-ColorArea',\n    thumb: 'fui-ColorArea__thumb',\n    inputX: 'fui-ColorArea__inputX',\n    inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n    areaXProgressVar: `--fui-AreaX--progress`,\n    areaYProgressVar: `--fui-AreaY--progress`,\n    thumbColorVar: `--fui-Area__thumb--color`,\n    mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n    forcedColorAdjust: 'none',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'start',\n    justifyItems: 'start',\n    [thumbSizeVar]: '20px',\n    minWidth: '300px',\n    minHeight: '300px',\n    boxSizing: 'border-box',\n    marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        position: 'absolute',\n        width: `var(${thumbSizeVar})`,\n        height: `var(${thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n        transform: 'translate(-50%, 50%)',\n        left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    focusIndicator: createFocusOutlineStyle({\n        selector: 'focus-within',\n        style: {\n            outlineWidth: tokens.strokeWidthThick,\n            ...shorthands.borderWidth(tokens.strokeWidthThick),\n            outlineRadius: tokens.borderRadiusCircular\n        }\n    })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        overflow: 'hidden',\n        position: 'absolute',\n        pointerEvents: 'none',\n        top: 0,\n        left: 0,\n        opacity: 0,\n        padding: '0',\n        margin: '0',\n        width: '100%',\n        height: '100%'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);\n    state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n    state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n    state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';

package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}

package/lib/components/ColorPicker/ColorPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useColorPicker_unstable } from './useColorPicker';
 import { renderColorPicker_unstable } from './renderColorPicker';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import * 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,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"}
+{"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"}

package/lib/components/ColorPicker/useColorPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["import * 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,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"}
+{"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"}

package/lib/components/ColorPicker/useColorPickerStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const colorPickerClassNames = {

package/lib/components/ColorPicker/useColorPickerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n    root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacingVerticalXS\n    }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n    root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacingVerticalXS\n    }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const colorPickerClassNames = {

package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/ColorSlider/ColorSlider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useColorSlider_unstable } from './useColorSlider';
 import { renderColorSlider_unstable } from './renderColorSlider';

package/lib/components/ColorSlider/ColorSlider.js.map

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

package/lib/components/ColorSlider/useColorSlider.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["import * 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":"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"}
+{"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":"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"}

package/lib/components/ColorSlider/useColorSliderStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const colorSliderClassNames = {