@fluentui/react-color-picker 9.2.19 → 9.3.0

package/lib-commonjs/components/ColorPicker/{index.js → index.cjs}

@@ -18,6 +18,15 @@ _export(exports, {
     renderColorPicker_unstable: function() {
         return _renderColorPicker.renderColorPicker_unstable;
     },
+    useColorPickerBaseContextValues_unstable: function() {
+        return _useColorPickerContextValues.useColorPickerBaseContextValues_unstable;
+    },
+    useColorPickerBase_unstable: function() {
+        return _useColorPicker.useColorPickerBase_unstable;
+    },
+    useColorPickerContextValues: function() {
+        return _useColorPickerContextValues.useColorPickerContextValues;
+    },
     useColorPickerStyles_unstable: function() {
         return _useColorPickerStylesstyles.useColorPickerStyles_unstable;
     },
@@ -25,7 +34,8 @@ _export(exports, {
         return _useColorPicker.useColorPicker_unstable;
     }
 });
-const _ColorPicker = require("./ColorPicker");
-const _renderColorPicker = require("./renderColorPicker");
-const _useColorPicker = require("./useColorPicker");
-const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");
+const _ColorPicker = require("./ColorPicker.cjs");
+const _renderColorPicker = require("./renderColorPicker.cjs");
+const _useColorPicker = require("./useColorPicker.cjs");
+const _useColorPickerContextValues = require("./useColorPickerContextValues.cjs");
+const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles.cjs");

package/lib-commonjs/components/ColorPicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n  ColorPickerBaseProps,\n  ColorPickerBaseState,\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPickerBase_unstable, useColorPicker_unstable } from './useColorPicker';\nexport { useColorPickerBaseContextValues_unstable, useColorPickerContextValues } from './useColorPickerContextValues';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPicker_unstable","useColorPickerBaseContextValues_unstable","useColorPickerContextValues","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;yBAYU;eAArBM;;;eAHAL,6CAA0B;;;eAE1BG,qEAAwC;;;eADxCF,2CAA2B;;;eACeG,wDAA2B;;;eAC9CE,yDAA6B;;;eAFvBJ,uCAAuB;;;6BAVjC,mBAAgB;mCASD,yBAAsB;gCACI,sBAAmB;6CACF,mCAAgC;4CACjD,mCAAgC"}

package/lib-commonjs/components/ColorPicker/{renderColorPicker.js → renderColorPicker.cjs}

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "renderColorPicker_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _colorPicker = require("../../contexts/colorPicker");
+const _colorPicker = require("../../contexts/colorPicker.cjs");
 const renderColorPicker_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_colorPicker.ColorPickerProvider, {

package/lib-commonjs/components/ColorPicker/renderColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/renderColorPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorPickerBaseState, ColorPickerSlots } from './ColorPicker.types';\nimport type { ColorPickerContextValues } from '../../contexts/colorPicker';\nimport { ColorPickerProvider } from '../../contexts/colorPicker';\n\n/**\n * Render the final JSX of ColorPicker\n */\nexport const renderColorPicker_unstable = (\n  state: ColorPickerBaseState,\n  contextValues: ColorPickerContextValues,\n): JSXElement => {\n  assertSlots<ColorPickerSlots>(state);\n\n  return (\n    <ColorPickerProvider value={contextValues.colorPicker}>\n      <state.root>{state.root.children}</state.root>\n    </ColorPickerProvider>\n  );\n};\n"],"names":["assertSlots","ColorPickerProvider","renderColorPicker_unstable","state","contextValues","value","colorPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;6BAIpB,gCAA6B;AAK1D,mCAAmC,CACxCC,OACAC;QAEAJ,2BAAAA,EAA8BG;IAE9B,OAAA,WAAA,OACE,eAAA,EAACF,gCAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

package/lib-commonjs/components/ColorPicker/{useColorPicker.js → useColorPicker.cjs}

@@ -3,15 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useColorPicker_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorPickerBase_unstable: function() {
+        return useColorPickerBase_unstable;
+    },
+    useColorPicker_unstable: function() {
         return useColorPicker_unstable;
     }
 });
 const _reactutilities = require("@fluentui/react-utilities");
-const useColorPicker_unstable = (props, ref)=>{
-    const { color, onColorChange, shape, ...rest } = props;
+const useColorPickerBase_unstable = (props, ref)=>{
+    const { color, onColorChange, ...rest } = props;
     const requestChange = (0, _reactutilities.useEventCallback)((event, data)=>{
         onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(event, {
             type: 'change',
@@ -30,7 +38,13 @@ const useColorPicker_unstable = (props, ref)=>{
             elementType: 'div'
         }),
         color,
-        requestChange,
+        requestChange
+    };
+};
+const useColorPicker_unstable = (props, ref)=>{
+    const { shape, ...baseProps } = props;
+    return {
+        ...useColorPickerBase_unstable(baseProps, ref),
         shape
     };
 };

package/lib-commonjs/components/ColorPicker/useColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n  ColorPickerBaseProps,\n  ColorPickerBaseState,\n  ColorPickerProps,\n  ColorPickerState,\n} 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 useColorPickerBase_unstable = (\n  props: ColorPickerBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): ColorPickerBaseState => {\n  const { color, onColorChange, ...rest } = props;\n\n  const requestChange: ColorPickerBaseState['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  };\n};\n\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n  const { shape, ...baseProps } = props;\n\n  return {\n    ...useColorPickerBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","useColorPickerBase_unstable","props","ref","color","onColorChange","rest","requestChange","event","data","type","components","root","always","elementType","useColorPicker_unstable","shape","baseProps"],"mappings":"AAAA;;;;;;;;;;;;IAmBaG,2BAAAA;;;2BA8BAc;;;;gCA9CoD,4BAA4B;AAgBtF,oCAAoC,CACzCb,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGC,MAAM,GAAGJ;IAE1C,MAAMK,oBAAuDP,gCAAAA,EAAiB,CAACQ,OAAOC;QACpFJ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG,OAAO;YACrBE,MAAM;YACNF;YACAJ,OAAOK,KAAKL,KAAK;QACnB;IACF;IAEA,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGG,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBV;QACAG;IACF;AACF,EAAE;AAEK,MAAMQ,0BAA0B,CAACb,OAAyBC;IAC/D,MAAM,EAAEa,KAAK,EAAE,GAAGC,WAAW,GAAGf;IAEhC,OAAO;QACL,GAAGD,4BAA4BgB,WAAWd,IAAI;QAC9Ca;IACF;AACF,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.cjs

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

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';\nimport type { ColorPickerBaseState, ColorPickerState } from './ColorPicker.types';\n\nexport const useColorPickerBaseContextValues_unstable = (state: ColorPickerBaseState): ColorPickerContextValues => {\n  const { color, requestChange } = state;\n\n  const colorPicker = React.useMemo<ColorPickerContextValue>(\n    () => ({\n      requestChange,\n      color,\n      shape: undefined,\n    }),\n    [requestChange, color],\n  );\n\n  return { colorPicker };\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n  const { color, shape, requestChange } = state;\n\n  const colorPicker = React.useMemo<ColorPickerContextValue>(\n    () => ({\n      requestChange,\n      color,\n      shape,\n    }),\n    [requestChange, color, shape],\n  );\n\n  return { colorPicker };\n};\n"],"names":["React","useColorPickerBaseContextValues_unstable","state","color","requestChange","colorPicker","useMemo","shape","undefined","useColorPickerContextValues"],"mappings":"AAAA;;;;;;;;;;;;IAMaC,wCAAAA;;;+BAeAQ;eAAAA;;;;iEAnBU,QAAQ;AAIxB,iDAAiD,CAACP;IACvD,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGF;IAEjC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI,OAAOC;SACT,CAAA,EACA;QAACJ;QAAeD;KAAM;IAGxB,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,oCAAoC,CAACH;IAC1C,MAAM,EAAEC,KAAK,EAAEI,KAAK,EAAEH,aAAa,EAAE,GAAGF;IAExC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI;SACF,CAAA,EACA;QAACH;QAAeD;QAAOI;KAAM;IAG/B,OAAO;QAAEF;IAAY;AACvB,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"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    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;iCAcY;eAA7BU;;;uBAhBwB,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ColorSlider/{ColorSlider.js → ColorSlider.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ColorSlider", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useColorSlider = require("./useColorSlider");
-const _renderColorSlider = require("./renderColorSlider");
-const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
+const _useColorSlider = require("./useColorSlider.cjs");
+const _renderColorSlider = require("./renderColorSlider.cjs");
+const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorSlider.useColorSlider_unstable)(props, ref);

package/lib-commonjs/components/ColorSlider/{ColorSlider.js.map → ColorSlider.cjs.map}

@@ -1 +1 @@
-{"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;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;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;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/ColorSlider/ColorSlider.constants.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "colorSliderCSSVars", {
+    enumerable: true,
+    get: function() {
+        return colorSliderCSSVars;
+    }
+});
+const colorSliderCSSVars = {
+    sliderDirectionVar: `--fui-Slider--direction`,
+    sliderProgressVar: `--fui-Slider--progress`,
+    thumbColorVar: `--fui-Slider__thumb--color`,
+    railColorVar: `--fui-Slider__rail--color`,
+    thumbSizeVar: `--fui-Slider__thumb--size`,
+    railSizeVar: `--fui-Slider__rail--size`
+};

package/lib-commonjs/components/ColorSlider/ColorSlider.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.constants.ts"],"sourcesContent":["export const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n"],"names":["colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar"],"mappings":";;;;+BAAaA;;;;;;AAAN,2BAA2B;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE"}

package/lib-commonjs/components/ColorSlider/{ColorSlider.types.js.map → ColorSlider.types.cjs.map}

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

package/lib-commonjs/components/ColorSlider/{index.js → index.cjs}

@@ -13,7 +13,7 @@ _export(exports, {
         return _ColorSlider.ColorSlider;
     },
     colorSliderCSSVars: function() {
-        return _useColorSliderStylesstyles.colorSliderCSSVars;
+        return _ColorSliderconstants.colorSliderCSSVars;
     },
     colorSliderClassNames: function() {
         return _useColorSliderStylesstyles.colorSliderClassNames;
@@ -21,6 +21,9 @@ _export(exports, {
     renderColorSlider_unstable: function() {
         return _renderColorSlider.renderColorSlider_unstable;
     },
+    useColorSliderBase_unstable: function() {
+        return _useColorSlider.useColorSliderBase_unstable;
+    },
     useColorSliderStyles_unstable: function() {
         return _useColorSliderStylesstyles.useColorSliderStyles_unstable;
     },
@@ -28,7 +31,8 @@ _export(exports, {
         return _useColorSlider.useColorSlider_unstable;
     }
 });
-const _ColorSlider = require("./ColorSlider");
-const _renderColorSlider = require("./renderColorSlider");
-const _useColorSlider = require("./useColorSlider");
-const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
+const _ColorSlider = require("./ColorSlider.cjs");
+const _renderColorSlider = require("./renderColorSlider.cjs");
+const _useColorSlider = require("./useColorSlider.cjs");
+const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles.cjs");
+const _ColorSliderconstants = require("./ColorSlider.constants.cjs");

package/lib-commonjs/components/ColorSlider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type {\n  ColorChannel,\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSliderBase_unstable, useColorSlider_unstable } from './useColorSlider';\nexport { colorSliderClassNames, useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nexport { colorSliderCSSVars } from './ColorSlider.constants';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSlider_unstable","colorSliderClassNames","useColorSliderStyles_unstable","colorSliderCSSVars"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;IAaXM;uDAAkB;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BAXjC,mBAAgB;mCAUD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}

package/lib-commonjs/components/ColorSlider/renderColorSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/renderColorSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSliderBaseState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderBaseState): JSXElement => {\n  assertSlots<ColorSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

package/lib-commonjs/components/ColorSlider/{useColorSlider.js → useColorSlider.cjs}

@@ -3,27 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useColorSlider_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorSliderBase_unstable: function() {
+        return useColorSliderBase_unstable;
+    },
+    useColorSlider_unstable: function() {
         return useColorSlider_unstable;
     }
 });
-const _tinycolor = require("@ctrl/tinycolor");
 const _reactutilities = require("@fluentui/react-utilities");
-const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
+const _ColorSliderconstants = require("./ColorSlider.constants.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _colorPicker = require("../../contexts/colorPicker");
-const _constants = require("../../utils/constants");
-const _getPercent = require("../../utils/getPercent");
-const _createHsvColor = require("../../utils/createHsvColor");
-const _adjustChannel = require("../../utils/adjustChannel");
-const useColorSlider_unstable = (props, ref)=>{
+const _colorPicker = require("../../contexts/colorPicker.cjs");
+const _constants = require("../../utils/constants.cjs");
+const _getPercent = require("../../utils/getPercent.cjs");
+const _createHsvColor = require("../../utils/createHsvColor.cjs");
+const _adjustChannel = require("../../utils/adjustChannel.cjs");
+const _createHslColor = require("../../utils/createHslColor.cjs");
+const useColorSliderBase_unstable = (props, ref)=>{
     'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
-    const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'input',
@@ -32,9 +39,9 @@ const useColorSlider_unstable = (props, ref)=>{
             'color'
         ]
     });
-    const { color, channel = 'hue', onChange = onChangeFromContext, shape = shapeFromContext, vertical, root, input, rail, thumb } = props;
+    const { color, channel = 'hue', onChange = onChangeFromContext, vertical, root, input, rail, thumb } = props;
     const hsvColor = color || colorFromContext;
-    const hslColor = (0, _tinycolor.tinycolor)(hsvColor).toHsl();
+    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
     const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultColor,
         state: hsvColor,
@@ -75,13 +82,12 @@ const useColorSlider_unstable = (props, ref)=>{
         });
     });
     const rootVariables = {
-        [_useColorSliderStylesstyles.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
-        [_useColorSliderStylesstyles.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-        [_useColorSliderStylesstyles.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _tinycolor.tinycolor)(hsvColor).toRgbString(),
-        [_useColorSliderStylesstyles.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h} 100%, 50%)`
+        [_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
+        [_ColorSliderconstants.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
+        [_ColorSliderconstants.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _createHslColor.createHslColorString)(hsvColor),
+        [_ColorSliderconstants.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h}, 100%, 50%)`
     };
     const state = {
-        shape,
         vertical,
         channel,
         components: {
@@ -127,3 +133,12 @@ const useColorSlider_unstable = (props, ref)=>{
     state.input.onChange = _onChange;
     return state;
 };
+const useColorSlider_unstable = (props, ref)=>{
+    const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { shape = shapeFromContext, ...baseProps } = props;
+    const state = {
+        ...useColorSliderBase_unstable(baseProps, ref),
+        shape
+    };
+    return state;
+};

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

@@ -0,0 +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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"}

package/lib-commonjs/components/ColorSlider/{useColorSliderStyles.styles.js → useColorSliderStyles.styles.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    colorSliderCSSVars: function() {
-        return colorSliderCSSVars;
-    },
     colorSliderClassNames: function() {
         return colorSliderClassNames;
     },
@@ -21,22 +18,15 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
+const _ColorSliderconstants = require("./ColorSlider.constants.cjs");
 const colorSliderClassNames = {
     root: 'fui-ColorSlider',
     rail: 'fui-ColorSlider__rail',
     thumb: 'fui-ColorSlider__thumb',
     input: 'fui-ColorSlider__input'
 };
-const colorSliderCSSVars = {
-    sliderDirectionVar: `--fui-Slider--direction`,
-    sliderProgressVar: `--fui-Slider--progress`,
-    thumbColorVar: `--fui-Slider__thumb--color`,
-    railColorVar: `--fui-Slider__rail--color`,
-    thumbSizeVar: `--fui-Slider__thumb--size`,
-    railSizeVar: `--fui-Slider__rail--size`
-};
 const hueBackground = `linear-gradient(${[
-    `var(${colorSliderCSSVars.sliderDirectionVar})`,
+    `var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar})`,
     'red',
     'fuchsia',
     'blue',

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

@@ -0,0 +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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"}

package/lib-commonjs/components/ColorSlider/{useColorSliderStyles.styles.raw.js → useColorSliderStyles.styles.raw.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    colorSliderCSSVars: function() {
-        return colorSliderCSSVars;
-    },
     colorSliderClassNames: function() {
         return colorSliderClassNames;
     },
@@ -22,22 +19,15 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _ColorSliderconstants = require("./ColorSlider.constants.cjs");
 const colorSliderClassNames = {
     root: 'fui-ColorSlider',
     rail: 'fui-ColorSlider__rail',
     thumb: 'fui-ColorSlider__thumb',
     input: 'fui-ColorSlider__input'
 };
-const colorSliderCSSVars = {
-    sliderDirectionVar: `--fui-Slider--direction`,
-    sliderProgressVar: `--fui-Slider--progress`,
-    thumbColorVar: `--fui-Slider__thumb--color`,
-    railColorVar: `--fui-Slider__rail--color`,
-    thumbSizeVar: `--fui-Slider__thumb--size`,
-    railSizeVar: `--fui-Slider__rail--size`
-};
 const hueBackground = `linear-gradient(${[
-    `var(${colorSliderCSSVars.sliderDirectionVar})`,
+    `var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar})`,
     'red',
     'fuchsia',
     'blue',
@@ -54,22 +44,22 @@ const hueBackground = `linear-gradient(${[
     touchAction: 'none',
     alignItems: 'center',
     justifyItems: 'center',
-    [colorSliderCSSVars.thumbSizeVar]: '20px',
-    [colorSliderCSSVars.railSizeVar]: '20px',
+    [_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar]: '20px',
+    [_ColorSliderconstants.colorSliderCSSVars.railSizeVar]: '20px',
     minHeight: '32px'
 });
 const useStyles = (0, _react.makeStyles)({
     horizontal: {
         minWidth: '200px',
         // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
-        gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,
+        gridTemplateRows: `1fr var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar}) 1fr`,
         gridTemplateColumns: `1fr 100% 1fr`
     },
     vertical: {
         minHeight: '280px',
         // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
         gridTemplateRows: `1fr 100% 1fr`,
-        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`
+        gridTemplateColumns: `1fr var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar}) 1fr`
     }
 });
 const useChannelStyles = (0, _react.makeStyles)({
@@ -77,10 +67,10 @@ const useChannelStyles = (0, _react.makeStyles)({
         backgroundImage: hueBackground
     },
     saturation: {
-        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`
+        backgroundImage: `linear-gradient(to right, #808080, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
     },
     value: {
-        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`
+        backgroundImage: `linear-gradient(to right, #000, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
     }
 });
 /**
@@ -104,18 +94,18 @@ const useChannelStyles = (0, _react.makeStyles)({
     },
     horizontal: {
         width: '100%',
-        height: `var(${colorSliderCSSVars.railSizeVar})`,
+        height: `var(${_ColorSliderconstants.colorSliderCSSVars.railSizeVar})`,
         '::before': {
             left: '-1px',
             right: '-1px',
-            height: `var(${colorSliderCSSVars.railSizeVar})`
+            height: `var(${_ColorSliderconstants.colorSliderCSSVars.railSizeVar})`
         }
     },
     vertical: {
-        width: `var(${colorSliderCSSVars.railSizeVar})`,
+        width: `var(${_ColorSliderconstants.colorSliderCSSVars.railSizeVar})`,
         height: '100%',
         '::before': {
-            width: `var(${colorSliderCSSVars.railSizeVar})`,
+            width: `var(${_ColorSliderconstants.colorSliderCSSVars.railSizeVar})`,
             top: '-1px',
             bottom: '1px'
         }
@@ -130,15 +120,15 @@ const useChannelStyles = (0, _react.makeStyles)({
         gridColumnStart: '2',
         gridColumnEnd: '2',
         position: 'absolute',
-        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
-        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        width: `var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar})`,
+        height: `var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar})`,
         pointerEvents: 'none',
         outlineStyle: 'none',
         forcedColorAdjust: 'none',
         borderRadius: _reacttheme.tokens.borderRadiusCircular,
         border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
         boxShadow: _reacttheme.tokens.shadow4,
-        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
+        backgroundColor: `var(${_ColorSliderconstants.colorSliderCSSVars.thumbColorVar})`,
         '::before': {
             position: 'absolute',
             inset: '0px',
@@ -150,11 +140,11 @@ const useChannelStyles = (0, _react.makeStyles)({
     },
     horizontal: {
         transform: 'translateX(-50%)',
-        left: `var(${colorSliderCSSVars.sliderProgressVar})`
+        left: `var(${_ColorSliderconstants.colorSliderCSSVars.sliderProgressVar})`
     },
     vertical: {
         transform: 'translateY(50%)',
-        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`
+        bottom: `var(${_ColorSliderconstants.colorSliderCSSVars.sliderProgressVar})`
     }
 });
 const useShapeStyles = (0, _react.makeStyles)({
@@ -184,12 +174,12 @@ const useShapeStyles = (0, _react.makeStyles)({
         }
     },
     horizontal: {
-        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        height: `var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar})`,
         width: '100%'
     },
     vertical: {
         height: '100%',
-        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        width: `var(${_ColorSliderconstants.colorSliderCSSVars.thumbSizeVar})`,
         'writing-mode': 'vertical-lr',
         direction: 'rtl'
     }