npm - @fluentui/react-color-picker - Versions diffs - 9.3.1 → 9.3.3 - Mend

@fluentui/react-color-picker 9.3.1 → 9.3.3

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

Files changed (129) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type {\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderState,\n} from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { createHslColor, createHslColorString } from '../../utils/createHslColor';\n\n/*\n Create the base state required to render unstyled ColorSlider.\n \n The returned state can be modified with hooks 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 useColorSliderBase_unstable = (\n props: ColorSliderBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderBaseState => {\n 'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = createHslColor(hsvColor);\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%)` : createHslColorString(hsvColor),\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: ColorSliderBaseState = {\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\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 const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n const { shape = shapeFromContext, ...baseProps } = props;\n\n const state: ColorSliderState = {\n ...useColorSliderBase_unstable(baseProps, ref),\n shape,\n };\n\n return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","createHslColor","createHslColorString","useColorSliderBase_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","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","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style","useColorSlider_unstable","shapeFromContext","shape","baseProps"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n getPartitionedNativeProps,\n getPercentInRange,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type {\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderState,\n} from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { createHslColor, createHslColorString } from '../../utils/createHslColor';\n\n/*\n Create the base state required to render unstyled ColorSlider.\n \n The returned state can be modified with hooks 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 useColorSliderBase_unstable = (\n props: ColorSliderBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderBaseState => {\n 'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\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 vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hslColor = createHslColor(color \|\| colorFromContext);\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: color \|\| colorFromContext,\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 = getPercentInRange(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({ ...currentColor, h: newValue }),\n saturation: () => createHsvColor({ ...currentColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...currentColor, 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%)` : createHslColorString(currentColor),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : createHslColorString({\n ...currentColor,\n ...(channel === 'saturation' ? { s: 1 } : { v: 1 }),\n a: 1,\n }),\n ...(channel !== 'hue' && {\n [colorSliderCSSVars.railColorLowVar]: createHslColorString({\n ...currentColor,\n ...(channel === 'saturation' ? { s: 0 } : { v: 0 }),\n a: 1,\n }),\n }),\n };\n\n const state: ColorSliderBaseState = {\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\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 const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n const { shape = shapeFromContext, ...baseProps } = props;\n\n const state: ColorSliderState = {\n ...useColorSliderBase_unstable(baseProps, ref),\n shape,\n };\n\n return state;\n};\n"],"names":["getPartitionedNativeProps","getPercentInRange","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","createHslColor","createHslColorString","useColorSliderBase_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hslColor","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","railColorVar","l","a","railColorLowVar","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style","useColorSlider_unstable","shapeFromContext","shape","baseProps"],"mappings":"AAAA;;;;;;;;;;;;QAmCaoB;;;QA8IA+D;;;;gCAvKN,4BAA4B;sCACA,6BAA0B;qCACb,kCAAkC;6BAO9B,gCAA6B;2BAClC,2BAAwB;gCACxC,gCAA6B;+BACG,+BAA4B;gCAGtC,gCAA6B;AAU3E,oCAAoC,CACzC9D,OACAC;IAEA,eAAe,2GAA2G;IAE1H,MAAM,EAAEC,GAAG,EAAE,OAAGf,uCAAAA;IAChB,MAAMgB,0BAAsBf,gDAAAA,EAAoCgB,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBlB,gDAAAA,EAAoCgB,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,kBAAc7B,yCAAAA,EAA0B;QAC5CqB;QACAS,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,KAAK,EACLI,UAAU,KAAK,EACfC,WAAWT,mBAAmB,EAC9BU,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGjB;IAEJ,MAAMkB,eAAWrB,8BAAAA,EAAeU,SAASD;IACzC,MAAM,CAACa,cAAcC,gBAAgB,GAAGrC,wCAAAA,EAA+B;QACrEsC,cAAcrB,MAAMsB,YAAY;QAChCC,OAAOhB,SAASD;QAChBkB,cAAc5B,4BAAAA;IAChB;IAEA,MAAML,MAAMoB,YAAY,QAAQrB,kBAAAA,GAAUE,cAAAA;IAE1C,MAAMiC,sBAA8C;QAClDC,SAAKhC,yBAAAA,EAAWyB,aAAaQ,CAAC;QAC9BC,gBAAYlC,yBAAAA,EAAWyB,aAAaU,CAAC,GAAG;QACxCC,WAAOpC,yBAAAA,EAAWyB,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,mBAAerC,4BAAAA,EAAcgB,SAASc;IAC5C,MAAMQ,eAAerD,qCAAAA,EAAkBoD,cAAc3C,cAAAA,EAAKE;IAE1D,MAAM2C,gBAAgBnB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,MAAMuB,YAAwDnD,oCAAAA,EAAiBoD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,QAAMjC,8BAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEQ,GAAGU;gBAAS;YACzDT,YAAY,QAAMnC,8BAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEU,GAAGQ,WAAW;gBAAI;YACtEP,OAAO,IAAMrC,kCAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEY,GAAGM,WAAW;gBAAI;QACnE;QACA,MAAMI,eAAW9C,4BAAAA,EAAcgB,SAAS6B;QAExCpB,gBAAgBqB;QAEhBP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBE;QAChBxB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,OAAO;YAChBM,MAAM;YACNN;YACA7B,OAAOkC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC1D,wCAAAA,CAAmB2D,kBAAkB,CAAC,EAAE/B,WAAW,WAAWX,QAAQ,QAAQ,WAAW;QAC1F,CAACjB,wCAAAA,CAAmB4D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAAChD,wCAAAA,CAAmB6D,aAAa,CAAC,EAChCnC,YAAY,QAAQ,CAAC,IAAI,EAAEqB,aAAa,YAAY,CAAC,OAAGlC,oCAAAA,EAAqBqB;QAC/E,CAAClC,wCAAAA,CAAmB8D,YAAY,CAAC,EAC/BpC,YAAY,QACR,CAAC,IAAI,EAAEO,SAASS,CAAC,CAAC,EAAE,EAAET,SAASW,CAAC,GAAG,IAAI,GAAG,EAAEX,SAAS8B,CAAC,GAAG,IAAI,EAAE,CAAC,OAChElD,oCAAAA,EAAqB;YACnB,GAAGqB,YAAY;YACf,GAAIR,YAAY,eAAe;gBAAEkB,GAAG;YAAE,IAAI;gBAAEE,GAAG;YAAE,CAAC;YAClDkB,GAAG;QACL;QACN,GAAItC,YAAY,SAAS;YACvB,CAAC1B,wCAAAA,CAAmBiE,eAAe,CAAC,MAAEpD,oCAAAA,EAAqB;gBACzD,GAAGqB,YAAY;gBACf,GAAIR,YAAY,eAAe;oBAAEkB,GAAG;gBAAE,IAAI;oBAAEE,GAAG;gBAAE,CAAC;gBAClDkB,GAAG;YACL;QACF,CAAC;IACH;IAEA,MAAM1B,QAA8B;QAClCV;QACAF;QACAwC,YAAY;YACVpC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMhC,oBAAAA,CAAKsE,MAAM,CAACtC,MAAM;YACtBuC,cAAc;gBACZC,MAAM;gBACN,GAAG9C,YAAYM,IAAI;YACrB;YACAyC,aAAa;QACf;QACAxC,OAAOjC,oBAAAA,CAAKsE,MAAM,CAACrC,OAAO;YACxBsC,cAAc;gBACZG,QAAI3E,qBAAAA,EAAM,WAAWmB,MAAMwD,EAAE;gBAC7BvD;gBACAwD,KAAKpE,cAAAA;gBACLqE,KAAKnE;gBACLoE,UAAU;gBACV,CAAC,mBAAmB,EAAE9C,WAAW,aAAa;gBAC9C,GAAGL,YAAYoD,OAAO;gBACtBlB,MAAM;YACR;YACAa,aAAa;QACf;QACAvC,MAAMlC,oBAAAA,CAAKsE,MAAM,CAACpC,MAAM;YAAEuC,aAAa;QAAM;QAC7CtC,OAAOnC,oBAAAA,CAAKsE,MAAM,CAACnC,OAAO;YAAEsC,aAAa;QAAM;IACjD;IAEA,aAAa;IACbhC,MAAMT,IAAI,CAAC+C,KAAK,GAAG;QACjB,GAAGlB,aAAa;QAChB,GAAGpB,MAAMT,IAAI,CAAC+C,KAAK;IACrB;IAEA,cAAc;IACdtC,MAAMR,KAAK,CAACe,KAAK,GAAGE;IACpBT,MAAMR,KAAK,CAACH,QAAQ,GAAGuB;IACvB,OAAOZ;AACT,EAAE;AAWK,gCAAgC,CACrCvB,OACAC;IAEA,MAAM8D,uBAAmB3E,gDAAAA,EAAoCgB,CAAAA,MAAOA,IAAI4D,KAAK;IAE7E,MAAM,EAAEA,QAAQD,gBAAgB,EAAE,GAAGE,WAAW,GAAGjE;IAEnD,MAAMuB,QAA0B;QAC9B,GAAGxB,4BAA4BkE,WAAWhE,IAAI;QAC9C+D;IACF;IAEA,OAAOzC;AACT,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorSliderClassNames: function() {
+    get colorSliderClassNames () {
         return colorSliderClassNames;
     },
-    useColorSliderStyles_unstable: function() {
+    get useColorSliderStyles_unstable () {
         return useColorSliderStyles_unstable;
     }
 });
@@ -25,7 +25,7 @@ const colorSliderClassNames = {
     thumb: 'fui-ColorSlider__thumb',
     input: 'fui-ColorSlider__input'
 };
-const hueBackground = `linear-gradient(${[
+const hueBackground = `linear-gradient(${/*#__PURE__*/ [
     `var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar})`,
     'red',
     'fuchsia',
@@ -35,6 +35,7 @@ const hueBackground = `linear-gradient(${[
     'yellow',
     'red'
 ].join(',')})`;
+const channelBackground = `linear-gradient(var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorLowVar}))`;
 /**
  * Styles for the root slot
  */ const useRootStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1j9hj9j", null, [
@@ -66,24 +67,15 @@ const useChannelStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bcmaq0h: "f1curpo1"
     },
     saturation: {
-        Bcmaq0h: [
-            "fdhcg5e",
-            "f1onqon0"
-        ]
+        Bcmaq0h: "f1vl4pgh"
     },
     value: {
-        Bcmaq0h: [
-            "f1r1ueul",
-            "fbtriqu"
-        ]
+        Bcmaq0h: "f1vl4pgh"
     }
 }, {
     d: [
         ".f1curpo1{background-image:linear-gradient(var(--fui-Slider--direction),red,fuchsia,blue,aqua,lime,yellow,red);}",
-        ".fdhcg5e{background-image:linear-gradient(to right, #808080, var(--fui-Slider__rail--color));}",
-        ".f1onqon0{background-image:linear-gradient(to left, #808080, var(--fui-Slider__rail--color));}",
-        ".f1r1ueul{background-image:linear-gradient(to right, #000, var(--fui-Slider__rail--color));}",
-        ".fbtriqu{background-image:linear-gradient(to left, #000, var(--fui-Slider__rail--color));}"
+        ".f1vl4pgh{background-image:linear-gradient(var(--fui-Slider--direction), var(--fui-Slider__rail--color), var(--fui-Slider__rail--color-low));}"
     ]
 });
 /**

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { colorSliderCSSVars } from \"./ColorSlider.constants.js\";\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n }\n});\n/\n Styles for the rail slot\n / const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/\n Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel \|\| 'hue'], shapeStyles[state.shape \|\| 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
1	+ {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { colorSliderCSSVars } from \"./ColorSlider.constants.js\";\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\nconst channelBackground = `linear-gradient(var(${colorSliderCSSVars.sliderDirectionVar}), var(${colorSliderCSSVars.railColorVar}), var(${colorSliderCSSVars.railColorLowVar}))`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: channelBackground\n },\n value: {\n backgroundImage: channelBackground\n }\n});\n/\n Styles for the rail slot\n / const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/\n Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel \|\| 'hue'], shapeStyles[state.shape \|\| 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","channelBackground","railColorVar","railColorLowVar","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorSliderClassNames: function() {
+    get colorSliderClassNames () {
         return colorSliderClassNames;
     },
-    useColorSliderStyles_unstable: function() {
+    get useColorSliderStyles_unstable () {
         return useColorSliderStyles_unstable;
     }
 });
@@ -36,6 +36,7 @@ const hueBackground = `linear-gradient(${[
     'yellow',
     'red'
 ].join(',')})`;
+const channelBackground = `linear-gradient(var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorLowVar}))`;
 /**
  * Styles for the root slot
  */ const useRootStyles = (0, _react.makeResetStyles)({
@@ -67,10 +68,10 @@ const useChannelStyles = (0, _react.makeStyles)({
         backgroundImage: hueBackground
     },
     saturation: {
-        backgroundImage: `linear-gradient(to right, #808080, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
+        backgroundImage: channelBackground
     },
     value: {
-        backgroundImage: `linear-gradient(to right, #000, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
+        backgroundImage: channelBackground
     }
 });
 /**

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","railColorVar","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\nconst channelBackground = `linear-gradient(var(${colorSliderCSSVars.sliderDirectionVar}), var(${colorSliderCSSVars.railColorVar}), var(${colorSliderCSSVars.railColorLowVar}))`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: channelBackground,\n },\n value: {\n backgroundImage: channelBackground,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","channelBackground","railColorVar","railColorLowVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"AAAA;;;;;;;;;;;;QAQaK;;;QAwLA8E;;;;uBA9L6C,iBAAiB;4BAEpD,wBAAwB;sCAEZ,6BAA0B;AAEtD,8BAAgE;IACrE7E,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAgB,CAAC,gBAAgB,EAAE;IACvC,CAAC,IAAI,EAAEN,wCAAAA,CAAmBO,kBAAkB,CAAC,CAAC,CAAC;IAC/C;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC;AACd,MAAMC,oBAAoB,CAAC,oBAAoB,EAAET,wCAAAA,CAAmBO,kBAAkB,CAAC,OAAO,EAAEP,wCAAAA,CAAmBU,YAAY,CAAC,OAAO,EAAEV,wCAAAA,CAAmBW,eAAe,CAAC,EAAE,CAAC;AAE/K;;CAEC,GACD,MAAMC,oBAAgBf,sBAAAA,EAAgB;IACpCgB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACjB,wCAAAA,CAAmBkB,YAAY,CAAC,EAAE;IACnC,CAAClB,wCAAAA,CAAmBmB,WAAW,CAAC,EAAE;IAClCC,WAAW;AACb;AAEA,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3B0B,YAAY;QACVC,UAAU;QACV,6GAA6G;QAC7GC,kBAAkB,CAAC,QAAQ,EAAExB,wCAAAA,CAAmBkB,YAAY,CAAC,KAAK,CAAC;QACnEO,qBAAqB,CAAC,YAAY,CAAC;IACrC;IAEAC,UAAU;QACRN,WAAW;QACX,6GAA6G;QAC7GI,kBAAkB,CAAC,YAAY,CAAC;QAChCC,qBAAqB,CAAC,QAAQ,EAAEzB,wCAAAA,CAAmBkB,YAAY,CAAC,KAAK,CAAC;IACxE;AACF;AAEA,MAAMS,uBAAmB/B,iBAAAA,EAAW;IAClCgC,KAAK;QACHC,iBAAiBvB;IACnB;IACAwB,YAAY;QACVD,iBAAiBpB;IACnB;IACAsB,OAAO;QACLF,iBAAiBpB;IACnB;AACF;AAEA;;CAEC,GACD,MAAMuB,oBAAgBpC,iBAAAA,EAAW;IAC/BO,MAAM;QACJ8B,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACfxB,UAAU;QACVyB,mBAAmB;QACnBC,cAAc;QACdC,cAAc;QACdC,cAAc1C,kBAAAA,CAAO2C,sBAAsB;QAC3C,YAAY;YACVC,SAAS;YACT9B,UAAU;QACZ;IACF;IAEAS,YAAY;QACVsB,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAE7C,wCAAAA,CAAmBmB,WAAW,CAAC,CAAC,CAAC;QAChD,YAAY;YACV2B,MAAM;YACNC,OAAO;YACPF,QAAQ,CAAC,IAAI,EAAE7C,wCAAAA,CAAmBmB,WAAW,CAAC,CAAC,CAAC;QAClD;IACF;IAEAO,UAAU;QACRkB,OAAO,CAAC,IAAI,EAAE5C,wCAAAA,CAAmBmB,WAAW,CAAC,CAAC,CAAC;QAC/C0B,QAAQ;QACR,YAAY;YACVD,OAAO,CAAC,IAAI,EAAE5C,wCAAAA,CAAmBmB,WAAW,CAAC,CAAC,CAAC;YAC/C6B,KAAK;YACLC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiBtD,iBAAAA,EAAW;IAChCQ,OAAO;QACL8B,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACfxB,UAAU;QACV+B,OAAO,CAAC,IAAI,EAAE5C,wCAAAA,CAAmBkB,YAAY,CAAC,CAAC,CAAC;QAChD2B,QAAQ,CAAC,IAAI,EAAE7C,wCAAAA,CAAmBkB,YAAY,CAAC,CAAC,CAAC;QACjDe,eAAe;QACfO,cAAc;QACdF,mBAAmB;QACnBa,cAAcpD,kBAAAA,CAAOqD,oBAAoB;QACzCC,QAAQ,GAAGtD,kBAAAA,CAAOuD,eAAe,CAAC,OAAO,EAAEvD,kBAAAA,CAAOwD,uBAAuB,EAAE;QAC3EC,WAAWzD,kBAAAA,CAAO0D,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAE1D,wCAAAA,CAAmB2D,aAAa,CAAC,CAAC,CAAC;QAC3D,YAAY;YACV9C,UAAU;YACV+C,OAAO;YACPT,cAAcpD,kBAAAA,CAAOqD,oBAAoB;YACzCS,WAAW;YACXlB,SAAS;YACTU,QAAQ,GAAGtD,kBAAAA,CAAO+D,gBAAgB,CAAC,OAAO,EAAE/D,kBAAAA,CAAOgE,uBAAuB,EAAE;QAC9E;IACF;IACAzC,YAAY;QACV0C,WAAW;QACXlB,MAAM,CAAC,IAAI,EAAE9C,wCAAAA,CAAmBiE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAvC,UAAU;QACRsC,WAAW;QACXf,QAAQ,CAAC,IAAI,EAAEjD,wCAAAA,CAAmBiE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA,MAAMC,qBAAiBtE,iBAAAA,EAAW;IAChCuE,SAAS;QACPhB,cAAcpD,kBAAAA,CAAOqE,kBAAkB;IACzC;IACAC,QAAQ;QACNlB,cAAcpD,kBAAAA,CAAOuE,gBAAgB;IACvC;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiB3E,iBAAAA,EAAW;IAChCS,OAAO;QACLmE,QAAQ;QACRC,SAAS;QACTvC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACfqC,SAAS;QACTC,QAAQ;QACR,CAAC,CAAC,kBAAkB,EAAE1E,sBAAsBG,KAAK,EAAE,CAAC,EAAE;YACpDiD,QAAQ,CAAC,UAAU,EAAEtD,kBAAAA,CAAO6E,iBAAiB,EAAE;YAC/CC,SAAS,GAAG9E,kBAAAA,CAAO+D,gBAAgB,CAAC,OAAO,EAAE/D,kBAAAA,CAAO2C,sBAAsB,EAAE;YAC5ES,cAAcpD,kBAAAA,CAAOqD,oBAAoB;QAC3C;IACF;IACA9B,YAAY;QACVuB,QAAQ,CAAC,IAAI,EAAE7C,wCAAAA,CAAmBkB,YAAY,CAAC,CAAC,CAAC;QACjD0B,OAAO;IACT;IACAlB,UAAU;QACRmB,QAAQ;QACRD,OAAO,CAAC,IAAI,EAAE5C,wCAAAA,CAAmBkB,YAAY,CAAC,CAAC,CAAC;QAChD,gBAAgB;QAChB4D,WAAW;IACb;AACF;AAKO,sCAAsC,CAACE;IAC5C,MAAMC,aAAarE;IACnB,MAAMsE,SAAS7D;IACf,MAAM8D,aAAanD;IACnB,MAAMoD,cAAclC;IACpB,MAAMmC,cAAcd;IACpB,MAAMe,cAAcpB;IACpB,MAAMqB,gBAAgB5D;IACtB,MAAM6D,aAAaR,MAAMtD,QAAQ;IAEjC,oDAAoD;IACpDsD,MAAM9E,IAAI,CAACuF,SAAS,GAAG3F,uBAAAA,EACrBG,sBAAsBC,IAAI,EAC1B+E,YACAO,aAAaN,OAAOxD,QAAQ,GAAGwD,OAAO5D,UAAU,EAChD0D,MAAM9E,IAAI,CAACuF,SAAS;IAGtB,oDAAoD;IACpDT,MAAM7E,IAAI,CAACsF,SAAS,OAAG3F,mBAAAA,EACrBG,sBAAsBE,IAAI,EAC1BgF,WAAWhF,IAAI,EACfoF,aAAa,CAACP,MAAMU,OAAO,IAAI,MAAM,EACrCJ,WAAW,CAACN,MAAMW,KAAK,IAAI,UAAU,EACrCH,aAAaL,WAAWzD,QAAQ,GAAGyD,WAAW7D,UAAU,EACxD0D,MAAM7E,IAAI,CAACsF,SAAS;IAGtB,oDAAoD;IACpDT,MAAM5E,KAAK,CAACqF,SAAS,OAAG3F,mBAAAA,EACtBG,sBAAsBG,KAAK,EAC3BgF,YAAYhF,KAAK,EACjBoF,aAAaJ,YAAY1D,QAAQ,GAAG0D,YAAY9D,UAAU,EAC1D0D,MAAM5E,KAAK,CAACqF,SAAS;IAGvB,oDAAoD;IACpDT,MAAM3E,KAAK,CAACoF,SAAS,OAAG3F,mBAAAA,EACtBG,sBAAsBI,KAAK,EAC3BgF,YAAYhF,KAAK,EACjBmF,aAAaH,YAAY3D,QAAQ,GAAG2D,YAAY/D,UAAU,EAC1D0D,MAAM3E,KAAK,CAACoF,SAAS;IAEvB,OAAOT;AACT,EAAE"}

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

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    ColorPickerProvider: function() {
+    get ColorPickerProvider () {
         return ColorPickerProvider;
     },
-    colorPickerContextDefaultValue: function() {
+    get colorPickerContextDefaultValue () {
         return colorPickerContextDefaultValue;
     },
-    useColorPickerContextValue_unstable: function() {
+    get useColorPickerContextValue_unstable () {
         return useColorPickerContextValue_unstable;
     }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n \n @internal\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","colorPickerContextDefaultValue","requestChange","color","undefined","shape","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA~~;;;;;;;;;;;;uBAqCaQ;;;kCAhBAN;;;uCAkBAQ;;;;sCApCqC~~,mCAAmC;AAkB9E,~~MAAMR~~,iCAA0D;IACrEC,eAAe;IACb,MAAM,GACR;IACAC,OAAOC;IACPC,OAAO;AACT,EAAE;AAMF,MAAMC,yBAAqBP,mCAAAA,EACzBK;AAGK,MAAMG,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,eACrDV,wCAAAA,EAAmBM,oBAAoB,CAACK,MAAMV,8BAA8B,GAAKS,SAASC,MAAM"}
1	+ {"version":3,"sources":["../../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n \n @internal\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","colorPickerContextDefaultValue","requestChange","color","undefined","shape","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;sCAGkD,mCAAmC;AAkB9E,MAAME,iCAA0D;IACrEC,eAAe;IACb,MAAM,GACR;IACAC,OAAOC;IACPC,OAAO;AACT,EAAE;AAMF,MAAMC,yBAAqBP,mCAAAA,EACzBK;AAGK,MAAMG,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,eACrDV,wCAAAA,EAAmBM,oBAAoB,CAACK,MAAMV,8BAA8B,GAAKS,SAASC,MAAM"}

package/lib-commonjs/index.cjs CHANGED Viewed

@@ -5,86 +5,86 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    AlphaSlider: function() {
+    get AlphaSlider () {
         return _AlphaSlider.AlphaSlider;
     },
-    ColorArea: function() {
+    get ColorArea () {
         return _ColorArea.ColorArea;
     },
-    ColorPicker: function() {
+    get ColorPicker () {
         return _ColorPicker.ColorPicker;
     },
-    ColorSlider: function() {
+    get ColorSlider () {
         return _ColorSlider.ColorSlider;
     },
-    alphaSliderClassNames: function() {
+    get alphaSliderClassNames () {
         return _AlphaSlider.alphaSliderClassNames;
     },
-    colorAreaClassNames: function() {
+    get colorAreaClassNames () {
         return _ColorArea.colorAreaClassNames;
     },
-    colorPickerClassNames: function() {
+    get colorPickerClassNames () {
         return _ColorPicker.colorPickerClassNames;
     },
-    colorSliderClassNames: function() {
+    get colorSliderClassNames () {
         return _ColorSlider.colorSliderClassNames;
     },
-    renderAlphaSlider_unstable: function() {
+    get renderAlphaSlider_unstable () {
         return _AlphaSlider.renderAlphaSlider_unstable;
     },
-    renderColorArea_unstable: function() {
+    get renderColorArea_unstable () {
         return _ColorArea.renderColorArea_unstable;
     },
-    renderColorPicker_unstable: function() {
+    get renderColorPicker_unstable () {
         return _ColorPicker.renderColorPicker_unstable;
     },
-    renderColorSlider_unstable: function() {
+    get renderColorSlider_unstable () {
         return _ColorSlider.renderColorSlider_unstable;
     },
-    useAlphaSliderBase_unstable: function() {
+    get useAlphaSliderBase_unstable () {
         return _AlphaSlider.useAlphaSliderBase_unstable;
     },
-    useAlphaSliderStyles_unstable: function() {
+    get useAlphaSliderStyles_unstable () {
         return _AlphaSlider.useAlphaSliderStyles_unstable;
     },
-    useAlphaSlider_unstable: function() {
+    get useAlphaSlider_unstable () {
         return _AlphaSlider.useAlphaSlider_unstable;
     },
-    useColorAreaBase_unstable: function() {
+    get useColorAreaBase_unstable () {
         return _ColorArea.useColorAreaBase_unstable;
     },
-    useColorAreaStyles_unstable: function() {
+    get useColorAreaStyles_unstable () {
         return _ColorArea.useColorAreaStyles_unstable;
     },
-    useColorArea_unstable: function() {
+    get useColorArea_unstable () {
         return _ColorArea.useColorArea_unstable;
     },
-    useColorPickerBase_unstable: function() {
+    get useColorPickerBase_unstable () {
         return _ColorPicker.useColorPickerBase_unstable;
     },
-    useColorPickerContextValue_unstable: function() {
+    get useColorPickerContextValue_unstable () {
         return _colorPicker.useColorPickerContextValue_unstable;
     },
-    useColorPickerContextValues: function() {
+    get useColorPickerContextValues () {
         return _ColorPicker.useColorPickerContextValues;
     },
-    useColorPickerStyles_unstable: function() {
+    get useColorPickerStyles_unstable () {
         return _ColorPicker.useColorPickerStyles_unstable;
     },
-    useColorPicker_unstable: function() {
+    get useColorPicker_unstable () {
         return _ColorPicker.useColorPicker_unstable;
     },
-    useColorSliderBase_unstable: function() {
+    get useColorSliderBase_unstable () {
         return _ColorSlider.useColorSliderBase_unstable;
     },
-    useColorSliderStyles_unstable: function() {
+    get useColorSliderStyles_unstable () {
         return _ColorSlider.useColorSliderStyles_unstable;
     },
-    useColorSlider_unstable: function() {
+    get useColorSlider_unstable () {
         return _ColorSlider.useColorSlider_unstable;
     }
 });

package/lib-commonjs/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type {\n ColorChannel,\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n} from './ColorSlider';\nexport {\n ColorSlider,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderBase_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './ColorSlider';\nexport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerBase_unstable,\n useColorPickerContextValues,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './ColorPicker';\nexport type {\n ColorAreaBaseProps,\n ColorAreaBaseState,\n ColorAreaProps,\n ColorAreaSlots,\n ColorAreaState,\n} from './ColorArea';\nexport {\n ColorArea,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaBase_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './ColorArea';\nexport type {\n AlphaSliderBaseProps,\n AlphaSliderBaseState,\n AlphaSliderProps,\n AlphaSliderSlots,\n AlphaSliderState,\n} from './AlphaSlider';\nexport {\n AlphaSlider,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderBase_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './AlphaSlider';\nexport type { ColorPickerContextValue, ColorPickerContextValues } from './contexts/colorPicker';\nexport { useColorPickerContextValue_unstable } from './contexts/colorPicker';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPickerContextValues","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaBase_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable","useColorPickerContextValue_unstable"],"mappings":";;;;;;;;;;;~~IAuDEmB~~;uCAAW;;~~aAfF~~;~~eAATN;;eAhBW;eAAXP~~;;;~~eAfAN~~,wBAAW;;;eA+CXoB,kCAAqB;;;eAfrBN,8BAAmB;;;eAhBnBP,kCAAqB;;;eAfrBN,kCAAqB~~;;;eA~~+CrBoB~~,uCAA0B~~;;;eAf1BN,mCAAwB;;;eAhBxBP,uCAA0B;;;eAf1BN,uCAA0B;;;eA+C1BoB,wCAA2B;;;eAC3BC,0CAA6B;;~~IAC7BC,uBAAuB;;;;~~eAjBvBR,oCAAyB;;;eACzBC,sCAA2B;;;eAC3BC,gCAAqB~~;;;eAlBrBT,wCAA2B~~;;~~uCAoCe~~;~~eAAnCgB~~;;;~~eAnCPf~~,wCAA2B;;;eAC3BC,0CAA6B;;~~IAC7BC~~,~~uBAAuB~~;;;~~IAlBvBT;uDAA2B;;;~~eAC3BC,0CAA6B;;;eAC7BC,oCAAuB;;;6BAClB,mBAAgB;6BAgBhB,mBAAgB;2BAehB,iBAAc;6BAed,mBAAgB;6BAE6B,4BAAyB"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type {\n ColorChannel,\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n} from './ColorSlider';\nexport {\n ColorSlider,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderBase_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './ColorSlider';\nexport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerBase_unstable,\n useColorPickerContextValues,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './ColorPicker';\nexport type {\n ColorAreaBaseProps,\n ColorAreaBaseState,\n ColorAreaProps,\n ColorAreaSlots,\n ColorAreaState,\n} from './ColorArea';\nexport {\n ColorArea,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaBase_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './ColorArea';\nexport type {\n AlphaSliderBaseProps,\n AlphaSliderBaseState,\n AlphaSliderProps,\n AlphaSliderSlots,\n AlphaSliderState,\n} from './AlphaSlider';\nexport {\n AlphaSlider,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderBase_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './AlphaSlider';\nexport type { ColorPickerContextValue, ColorPickerContextValues } from './contexts/colorPicker';\nexport { useColorPickerContextValue_unstable } from './contexts/colorPicker';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPickerContextValues","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaBase_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable","useColorPickerContextValue_unstable"],"mappings":";;;;;;;;;;;QAuDEmB;uCAAW;;QAfXN;mCAAS;;;eAhBTP,wBAAW;;;eAfXN,wBAAW;;;eA+CXoB,kCAAqB;;;eAfrBN,8BAAmB;;;eAhBnBP,kCAAqB;;;eAfrBN,kCAAqB;;QA+CrBoB;sDAA0B;;;eAf1BN,mCAAwB;;;eAhBxBP,uCAA0B;;;eAf1BN,uCAA0B;;;eA+C1BoB,wCAA2B;;;eAC3BC,0CAA6B;;QAC7BC;mDAAuB;;;eAjBvBR,oCAAyB;;;eACzBC,sCAA2B;;;eAC3BC,gCAAqB;;QAlBrBT;uDAA2B;;;eAoCpBgB,gDAAmC;;;eAnC1Cf,wCAA2B;;;eAC3BC,0CAA6B;;QAC7BC;mDAAuB;;;eAlBvBT,wCAA2B;;;eAC3BC,0CAA6B;;;eAC7BC,oCAAuB;;;6BAClB,mBAAgB;6BAgBhB,mBAAgB;2BAehB,iBAAc;6BAed,mBAAgB;6BAE6B,4BAAyB"}

package/lib-commonjs/types/color.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n h: number;\n s: number;\n v: number;\n a?: number;\n};\n\nexport type HslColor = {\n h: number;\n s: number;\n l: number;\n a?: number;\n};\n"],"names":[],"mappings":""}
1	+ {"version":3,"sources":["../../src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n h: number;\n s: number;\n v: number;\n a?: number;\n};\n\nexport type HslColor = {\n h: number;\n s: number;\n l: number;\n a?: number;\n};\n"],"names":[],"mappings":""}

package/lib-commonjs/utils/adjustChannel.cjs CHANGED Viewed

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    adjustChannel: function() {
+    get adjustChannel () {
         return adjustChannel;
     },
-    clampValue: function() {
+    get clampValue () {
         return clampValue;
     }
 });

package/lib-commonjs/utils/adjustChannel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/*\n Clamps a given value to the valid range for a specified color channel.\n \n @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n /\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n hue: T;\n saturation: T;\n value: T;\n};\n\n/\n Adjusts the specified color channel using the provided actions.\n \n @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n return actions[channel] ?? actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"~~;;;;;;;;;;;iBA8BgBQ;;;cAnBAH;;;;2BAV~~+B,iBAAc;gCACvC,4BAA4B;AAS3C,~~SAASA~~,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,kBAAAA,GAAUE,cAAAA;IAC1C,WAAOC,qBAAAA,EAAME,OAAON,cAAAA,EAAKE;AAC3B;AAgBO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;QACzEA;IAAP,~~OAAOA~~,~~CAAAA~~,mBAAAA,OAAO,CAACF,QAAAA,AAAQ,MAAA,QAAhBE,qBAAAA,KAAAA,IAAAA,mBAAoBA,QAAQC,GAAG;AACxC"}
1	+ {"version":3,"sources":["../../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/*\n Clamps a given value to the valid range for a specified color channel.\n \n @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n /\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n hue: T;\n saturation: T;\n value: T;\n};\n\n/\n Adjusts the specified color channel using the provided actions.\n \n @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n return actions[channel] ?? actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":";;;;;;;;;;;;;;;;;;2BAC+C,iBAAc;gCACvC,4BAA4B;AAS3C,SAASK,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,kBAAAA,GAAUE,cAAAA;IAC1C,WAAOC,qBAAAA,EAAME,OAAON,cAAAA,EAAKE;AAC3B;AAgBO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;QACzEA;IAAP,OAAA,CAAOA,mBAAAA,OAAO,CAACF,QAAAA,AAAQ,MAAA,QAAhBE,qBAAAA,KAAAA,IAAAA,mBAAoBA,QAAQC,GAAG;AACxC"}

package/lib-commonjs/utils/constants.cjs CHANGED Viewed

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    HUE_MAX: function() {
+    get HUE_MAX () {
         return HUE_MAX;
     },
-    INITIAL_COLOR: function() {
+    get INITIAL_COLOR () {
         return INITIAL_COLOR;
     },
-    INITIAL_COLOR_HSV: function() {
+    get INITIAL_COLOR_HSV () {
         return INITIAL_COLOR_HSV;
     },
-    MAX: function() {
+    get MAX () {
         return MAX;
     },
-    MIN: function() {
+    get MIN () {
         return MIN;
     }
 });

package/lib-commonjs/utils/constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/utils/constants.ts"],"sourcesContent":["export const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = { h: 0, s: 0, v: 1, a: 1 };\n"],"names":["MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","h","s","v","a"],"mappings":"~~;;;;;;;;;;;WAEaE;;;iBACAC;;;qBACAC;;;OAHAH;;;OADAD;;;;AAAN~~,MAAMA,MAAM,EAAE;AACd,MAAMC,MAAM,IAAI;AAChB,MAAMC,UAAU,IAAI;AACpB,MAAMC,gBAAgB,OAAO;AAC7B,MAAMC,oBAAoB;IAAEC,GAAG;IAAGC,GAAG;IAAGC,GAAG;IAAGC,GAAG;AAAE,EAAE"}
1	+ {"version":3,"sources":["../../src/utils/constants.ts"],"sourcesContent":["export const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = { h: 0, s: 0, v: 1, a: 1 };\n"],"names":["MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","h","s","v","a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAMA,MAAM,EAAE;AACd,MAAMC,MAAM,IAAI;AAChB,MAAMC,UAAU,IAAI;AACpB,MAAMC,gBAAgB,OAAO;AAC7B,MAAMC,oBAAoB;IAAEC,GAAG;IAAGC,GAAG;IAAGC,GAAG;IAAGC,GAAG;AAAE,EAAE"}

package/lib-commonjs/utils/createHslColor.cjs CHANGED Viewed

@@ -11,14 +11,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    createHslColor: function() {
+    get createHslColor () {
         return createHslColor;
     },
-    createHslColorString: function() {
+    get createHslColorString () {
         return createHslColorString;
     }
 });

package/lib-commonjs/utils/createHslColor.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/utils/createHslColor.ts"],"sourcesContent":["import type { HslColor, HsvColor } from '../types/color';\n\n/*\n \n * Creates an HSL color object from a given HSV color object.\n \n @param color - HSV color object to convert to HSL.\n * @returns HSL color object with the same hue and alpha values, and converted saturation and lightness values.\n /\nexport function createHslColor(color: Partial<HsvColor> = {}): HslColor {\n const { h = 0, s = 0, v = 0, a = 1 } = color;\n const l = v (1 - s / 2);\n const hslSaturation = l === 0 \|\| l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);\n\n return { h, s: hslSaturation, l, a };\n}\n\n/*\n Creates an HSL color string from a given HSV color object.\n \n @param color - HSV color object to convert to HSL string.\n * @returns - HSL color string in the format of \"hsla(h, s%, l%, a)\".\n /\nexport function createHslColorString(color: Partial<HsvColor> = {}): string {\n const hslColor = createHslColor(color);\n const saturation = Number((hslColor.s 100).toFixed(2));\n const lightness = Number((hslColor.l * 100).toFixed(2));\n\n return `hsla(${hslColor.h}, ${saturation}%, ${lightness}%, ${hslColor.a})`;\n}\n"],"names":["createHslColor","color","h","s","v","a","l","hslSaturation","Math","min","createHslColorString","hslColor","saturation","Number","toFixed","lightness"],"mappings":"AAEA;;;;;;CAMC,GACD~~;;;;;;;;;;;kBAAgBA~~;;;~~IAcAU,oBAAAA;;;;~~AAdT,SAASV,eAAeC,QAA2B,CAAC,CAAC;IAC1D,MAAM,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAE,GAAGJ;IACvC,MAAMK,IAAIF,IAAK,~~KAAID~~,KAAI,CAAA;IACvB,MAAMI,gBAAgBD,MAAM,KAAKA,MAAM,IAAI,IAAKF,CAAAA,KAAIE,CAAAA,GAAKE,KAAKC,GAAG,CAACH,GAAG,IAAIA;IAEzE,OAAO;QAAEJ;QAAGC,GAAGI;QAAeD;QAAGD;IAAE;AACrC;AAQO,8BAA8BJ,QAA2B,CAAC,CAAC;IAChE,MAAMU,WAAWX,eAAeC;IAChC,MAAMW,aAAaC,OAAQF,CAAAA,SAASR,CAAC,GAAG,GAAA,CAAE,CAAGW,OAAO,CAAC;IACrD,MAAMC,YAAYF,OAAQF,~~CAAAA~~,~~SAASL,~~CAAC,GAAG,GAAA,CAAE,CAAGQ,OAAO,CAAC;IAEpD,OAAO,CAAC,KAAK,EAAEH,SAAST,CAAC,CAAC,EAAE,EAAEU,WAAW,GAAG,EAAEG,UAAU,GAAG,EAAEJ,SAASN,CAAC,CAAC,CAAC,CAAC;AAC5E"}
1	+ {"version":3,"sources":["../../src/utils/createHslColor.ts"],"sourcesContent":["import type { HslColor, HsvColor } from '../types/color';\n\n/*\n \n * Creates an HSL color object from a given HSV color object.\n \n @param color - HSV color object to convert to HSL.\n * @returns HSL color object with the same hue and alpha values, and converted saturation and lightness values.\n /\nexport function createHslColor(color: Partial<HsvColor> = {}): HslColor {\n const { h = 0, s = 0, v = 0, a = 1 } = color;\n const l = v (1 - s / 2);\n const hslSaturation = l === 0 \|\| l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);\n\n return { h, s: hslSaturation, l, a };\n}\n\n/*\n Creates an HSL color string from a given HSV color object.\n \n @param color - HSV color object to convert to HSL string.\n * @returns - HSL color string in the format of \"hsla(h, s%, l%, a)\".\n /\nexport function createHslColorString(color: Partial<HsvColor> = {}): string {\n const hslColor = createHslColor(color);\n const saturation = Number((hslColor.s 100).toFixed(2));\n const lightness = Number((hslColor.l * 100).toFixed(2));\n\n return `hsla(${hslColor.h}, ${saturation}%, ${lightness}%, ${hslColor.a})`;\n}\n"],"names":["createHslColor","color","h","s","v","a","l","hslSaturation","Math","min","createHslColorString","hslColor","saturation","Number","toFixed","lightness"],"mappings":"AAEA;;;;;;CAMC,GACD;;;;;;;;;;;;;;;eAcgBU;;;AAdT,SAASV,eAAeC,QAA2B,CAAC,CAAC;IAC1D,MAAM,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAE,GAAGJ;IACvC,MAAMK,IAAIF,IAAK,CAAA,IAAID,KAAI,CAAA;IACvB,MAAMI,gBAAgBD,MAAM,KAAKA,MAAM,IAAI,IAAKF,CAAAA,KAAIE,CAAAA,GAAKE,KAAKC,GAAG,CAACH,GAAG,IAAIA;IAEzE,OAAO;QAAEJ;QAAGC,GAAGI;QAAeD;QAAGD;IAAE;AACrC;AAQO,8BAA8BJ,QAA2B,CAAC,CAAC;IAChE,MAAMU,WAAWX,eAAeC;IAChC,MAAMW,aAAaC,OAAQF,CAAAA,SAASR,CAAC,GAAG,GAAA,CAAE,CAAGW,OAAO,CAAC;IACrD,MAAMC,YAAYF,OAAQF,UAASL,CAAC,GAAG,GAAA,CAAE,CAAGQ,OAAO,CAAC;IAEpD,OAAO,CAAC,KAAK,EAAEH,SAAST,CAAC,CAAC,EAAE,EAAEU,WAAW,GAAG,EAAEG,UAAU,GAAG,EAAEJ,SAASN,CAAC,CAAC,CAAC,CAAC;AAC5E"}

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

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

package/lib-commonjs/utils/getCoordinates.cjs CHANGED Viewed

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getCoordinates: function() {
+    get getCoordinates () {
         return getCoordinates;
     },
-    roundTwoDecimal: function() {
+    get roundTwoDecimal () {
         return roundTwoDecimal;
     }
 });