@fluentui/react-color-picker 9.1.3 → 9.2.1

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

@@ -0,0 +1,75 @@
+"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, {
+    alphaSliderCSSVars: function() {
+        return alphaSliderCSSVars;
+    },
+    alphaSliderClassNames: function() {
+        return alphaSliderClassNames;
+    },
+    useAlphaSliderStyles_unstable: function() {
+        return useAlphaSliderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
+const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
+const alphaSliderClassNames = {
+    root: 'fui-AlphaSlider',
+    rail: 'fui-AlphaSlider__rail',
+    thumb: 'fui-AlphaSlider__thumb',
+    input: 'fui-AlphaSlider__input'
+};
+const alphaSliderCSSVars = {
+    sliderDirectionVar: `--fui-AlphaSlider--direction`,
+    sliderProgressVar: `--fui-AlphaSlider--progress`,
+    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
+    railColorVar: `--fui-AlphaSlider__rail--color`
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    rail: {
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        '::before': {
+            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    }
+});
+const useAlphaSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const thumbStyles = useThumbStyles();
+    state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
+    state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    (0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
+    return state;
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["ColorArea","React","forwardRef","props","ref","state","useColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","renderColorArea_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;8BAEe;iCACG;0CACG;qCAEA;AAKrC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAE3CG,IAAAA,qDAAAA,EAA4BF;IAC5BG,IAAAA,gDAAAA,EAA4B,+BAA+BH;IAE3D,OAAOI,IAAAA,yCAAAA,EAAyBJ;AAClC;AAEAL,UAAUU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;8BAEO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAE9B,kCAAkC;AAKvE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,uCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

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

package/lib-commonjs/components/ColorArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type { ColorAreaOnColorChangeData, ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorArea_unstable } from './useColorArea';\nexport { colorAreaCSSVars, colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,SAAS;eAATA,oBAAS;;IAITC,gBAAgB;eAAhBA,0CAAgB;;IAAEC,mBAAmB;eAAnBA,6CAAmB;;IAFrCC,wBAAwB;eAAxBA,yCAAwB;;IAEeC,2BAA2B;eAA3BA,qDAA2B;;IADlEC,qBAAqB;eAArBA,mCAAqB;;;2BAHJ;iCAEe;8BACH;0CAC6C"}
+{"version":3,"sources":["../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type { ColorAreaOnColorChangeData, ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorArea_unstable } from './useColorArea';\nexport { colorAreaCSSVars, colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\n"],"names":["ColorArea","renderColorArea_unstable","useColorArea_unstable","colorAreaCSSVars","colorAreaClassNames","useColorAreaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAITG,0CAAgB;;;eAAEC,6CAAmB;;;eAFrCH,yCAAwB;;;eAEeI,qDAA2B;;;eADlEH,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CAC4B,8BAA8B"}

package/lib-commonjs/components/ColorArea/renderColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ColorAreaState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaState) => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["renderColorArea_unstable","state","assertSlots","_jsx","root","_jsxs","thumb","inputX","inputY"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,2BAA2B,CAACC;IACvCC,IAAAA,2BAAAA,EAA4BD;IAE5B,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACJ,MAAMK,KAAK,EAAA;;8BACVH,IAAAA,eAAA,EAACF,MAAMM,MAAM,EAAA,CAAA;8BACbJ,IAAAA,eAAA,EAACF,MAAMO,MAAM,EAAA,CAAA;;;;AAIrB"}
+{"version":3,"sources":["../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ColorAreaState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaState) => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACD,MAAME,KAAK,EAAA;;kCACV,eAAA,EAACF,MAAMG,MAAM,EAAA,CAAA;kCACb,eAAA,EAACH,MAAMI,MAAM,EAAA,CAAA;;;;AAIrB,EAAE"}

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

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

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

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

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

@@ -0,0 +1,126 @@
+"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, {
+    colorAreaCSSVars: function() {
+        return colorAreaCSSVars;
+    },
+    colorAreaClassNames: function() {
+        return colorAreaClassNames;
+    },
+    useColorAreaStyles_unstable: function() {
+        return useColorAreaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const colorAreaClassNames = {
+    root: 'fui-ColorArea',
+    thumb: 'fui-ColorArea__thumb',
+    inputX: 'fui-ColorArea__inputX',
+    inputY: 'fui-ColorArea__inputY'
+};
+const colorAreaCSSVars = {
+    areaXProgressVar: `--fui-AreaX--progress`,
+    areaYProgressVar: `--fui-AreaY--progress`,
+    thumbColorVar: `--fui-Area__thumb--color`,
+    mainColorVar: `--fui-Area--main-color`
+};
+// Internal CSS variables
+const thumbSizeVar = `--fui-Slider__thumb--size`;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeResetStyles)({
+    position: 'relative',
+    border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,
+    forcedColorAdjust: 'none',
+    display: 'inline-grid',
+    touchAction: 'none',
+    alignItems: 'start',
+    justifyItems: 'start',
+    [thumbSizeVar]: '20px',
+    minWidth: '300px',
+    minHeight: '300px',
+    boxSizing: 'border-box',
+    marginBottom: _reacttheme.tokens.spacingVerticalSNudge
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        position: 'absolute',
+        width: `var(${thumbSizeVar})`,
+        height: `var(${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(${colorAreaCSSVars.thumbColorVar})`,
+        transform: 'translate(-50%, 50%)',
+        left: `var(${colorAreaCSSVars.areaXProgressVar})`,
+        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
+        '::before': {
+            position: 'absolute',
+            inset: '0px',
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorNeutralBackground1}`
+        }
+    },
+    focusIndicator: (0, _reacttabster.createFocusOutlineStyle)({
+        selector: 'focus-within',
+        style: {
+            outlineWidth: _reacttheme.tokens.strokeWidthThick,
+            ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick),
+            outlineRadius: _reacttheme.tokens.borderRadiusCircular
+        }
+    })
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = (0, _react.makeStyles)({
+    input: {
+        overflow: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none',
+        top: 0,
+        left: 0,
+        opacity: 0,
+        padding: '0',
+        margin: '0',
+        width: '100%',
+        height: '100%'
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    }
+});
+const useColorAreaStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const shapeStyles = useShapeStyles();
+    state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
+    state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
+    state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
+    state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":";;;;;;;;;;;IAaaW,gBAAAA;;;IAPAL,mBAAAA;;;+BAuGA+D;;;;uBA7GyD,iBAAiB;4BAEhE,wBAAwB;8BACP,0BAA0B;AAG3D,4BAA4D;IACjE9D,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEK,yBAAyB;IAC9BE,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE;AAEF,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,oBAAgBjB,sBAAAA,EAAgB;IACpCkB,UAAU;IACVC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,mBAAmB,EAAE;IACjDC,YAAY,CAAC,iGAAiG,EAAEV,iBAAiBI,YAAY,CAAC,CAAC,CAAC;IAChJO,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACV,aAAa,EAAE;IAChBW,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,cAAc1B,kBAAAA,CAAO2B,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,qBAAiB/B,iBAAAA,EAAW;IAChCO,OAAO;QACLU,UAAU;QACVe,OAAO,CAAC,IAAI,EAAEjB,aAAa,CAAC,CAAC;QAC7BkB,QAAQ,CAAC,IAAI,EAAElB,aAAa,CAAC,CAAC;QAC9BmB,eAAe;QACfC,cAAc;QACdd,mBAAmB;QACnBe,cAAcjC,kBAAAA,CAAOkC,oBAAoB;QACzCnB,QAAQ,GAAGf,kBAAAA,CAAOmC,eAAe,CAAC,OAAO,EAAEnC,kBAAAA,CAAOoC,uBAAuB,EAAE;QAC3EC,WAAWrC,kBAAAA,CAAOsC,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAEhC,iBAAiBG,aAAa,CAAC,CAAC,CAAC;QACzD8B,WAAW;QACXC,MAAM,CAAC,IAAI,EAAElC,iBAAiBC,gBAAgB,CAAC,CAAC,CAAC;QACjDkC,QAAQ,CAAC,IAAI,EAAEnC,iBAAiBE,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;YACVK,UAAU;YACV6B,OAAO;YACPV,cAAcjC,kBAAAA,CAAOkC,oBAAoB;YACzCT,WAAW;YACXmB,SAAS;YACT7B,QAAQ,GAAGf,kBAAAA,CAAO6C,gBAAgB,CAAC,OAAO,EAAE7C,kBAAAA,CAAO8C,uBAAuB,EAAE;QAC9E;IACF;IACAC,gBAAgB9C,yCAAAA,EAAwB;QACtC+C,UAAU;QACVC,OAAO;YACLC,cAAclD,kBAAAA,CAAO6C,gBAAgB;YACrC,GAAG9C,iBAAAA,CAAWoD,WAAW,CAACnD,kBAAAA,CAAO6C,gBAAgB,CAAC;YAClDO,eAAepD,kBAAAA,CAAOkC,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMmB,qBAAiBxD,iBAAAA,EAAW;IAChCyD,OAAO;QACLC,UAAU;QACVzC,UAAU;QACViB,eAAe;QACfyB,KAAK;QACLf,MAAM;QACNgB,SAAS;QACTC,SAAS;QACTC,QAAQ;QACR9B,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAM8B,qBAAiB/D,iBAAAA,EAAW;IAChCgE,SAAS;QACP5B,cAAcjC,kBAAAA,CAAO8D,kBAAkB;IACzC;IACAC,QAAQ;QACN9B,cAAcjC,kBAAAA,CAAOgE,gBAAgB;IACvC;AACF;AAKO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,aAAatD;IACnB,MAAMuD,cAAcxC;IACpB,MAAMyC,cAAchB;IACpB,MAAMiB,cAAcV;IAEpBM,MAAM/D,IAAI,CAACoE,SAAS,GAAGzE,uBAAAA,EACrBI,oBAAoBC,IAAI,EACxBgE,YACAG,WAAW,CAACJ,MAAMM,KAAK,IAAI,UAAU,EACrCN,MAAM/D,IAAI,CAACoE,SAAS;IAGtBL,MAAM9D,KAAK,CAACmE,SAAS,OAAGzE,mBAAAA,EACtBI,oBAAoBE,KAAK,EACzBgE,YAAYhE,KAAK,EACjBgE,YAAYrB,cAAc,EAC1BmB,MAAM9D,KAAK,CAACmE,SAAS;IAGvBL,MAAM7D,MAAM,CAACkE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBG,MAAM,EAAEgE,YAAYf,KAAK,EAAEY,MAAM7D,MAAM,CAACkE,SAAS;IAE3GL,MAAM5D,MAAM,CAACiE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBI,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAC3G,OAAOL;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from '../../contexts/colorPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n  const state = useColorPicker_unstable(props, ref);\n  const contextValues = useColorPickerContextValues(state);\n\n  useColorPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n  return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["ColorPicker","React","forwardRef","props","ref","state","useColorPicker_unstable","contextValues","useColorPickerContextValues","useColorPickerStyles_unstable","useCustomStyleHook_unstable","renderColorPicker_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCAEiB;mCACG;4CACG;6BAEF;qCACA;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAC7C,MAAMG,gBAAgBC,IAAAA,wCAAAA,EAA4BH;IAElDI,IAAAA,yDAAAA,EAA8BJ;IAC9BK,IAAAA,gDAAAA,EAA4B,iCAAiCL;IAE7D,OAAOM,IAAAA,6CAAAA,EAA2BN,OAAOE;AAC3C;AAEAP,YAAYY,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from '../../contexts/colorPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n  const state = useColorPicker_unstable(props, ref);\n  const contextValues = useColorPickerContextValues(state);\n\n  useColorPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n  return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAYaM;;;;;;;iEAZU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;6BAElC,6BAA6B;qCAC7B,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wCAAAA,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPicker_unstable } from './useColorPicker';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IASXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BARJ;mCAOe;gCACH;4CAC6B"}
+{"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPicker_unstable } from './useColorPicker';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPicker_unstable","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eASXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BARJ,gBAAgB;mCAOD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

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

@@ -1 +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 { ColorPickerState, 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 = (state: ColorPickerState, contextValues: ColorPickerContextValues) => {\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":["renderColorPicker_unstable","state","contextValues","assertSlots","_jsx","ColorPickerProvider","value","colorPicker","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;6BAGQ;AAK7B,MAAMA,6BAA6B,CAACC,OAAyBC;IAClEC,IAAAA,2BAAAA,EAA8BF;IAE9B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,gCAAAA,EAAAA;QAAoBC,OAAOJ,cAAcK,WAAW;kBACnD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA;sBAAEP,MAAMO,IAAI,CAACC,QAAQ;;;AAGtC"}
+{"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 { ColorPickerState, 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 = (state: ColorPickerState, contextValues: ColorPickerContextValues) => {\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":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;6BAGpB,6BAA6B;AAK1D,mCAAmC,CAACC,OAAyBC;QAClEJ,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.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n    root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacingVerticalXS\n    }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["colorPickerClassNames","useColorPickerStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IAcIC,6BAA6B;eAA7BA;;;uBAhBwB;AAElC,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AASX,MAAMV,gCAAiCW,CAAAA;IAC9C;IACA,MAAMC,SAASV;IACfS,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,sBAAsBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACjG,OAAOF;AACX"}
+{"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n    root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacingVerticalXS\n    }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAEaG,qBAAqB;;;IAcjBU,6BAA6B;;;;uBAhBL,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,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,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/ColorPicker/useColorPickerStyles.styles.raw.js

@@ -0,0 +1,38 @@
+"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, {
+    colorPickerClassNames: function() {
+        return colorPickerClassNames;
+    },
+    useColorPickerStyles_unstable: function() {
+        return useColorPickerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const colorPickerClassNames = {
+    root: 'fui-ColorPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingVerticalXS
+    }
+});
+const useColorPickerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAKaG,qBAAAA;;;IAkBAO,6BAAAA;;;;uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n  const state = useColorSlider_unstable(props, ref);\n\n  useColorSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n  return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["ColorSlider","React","forwardRef","props","ref","state","useColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","renderColorSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCAEiB;mCACG;4CACG;qCAEF;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n  const state = useColorSlider_unstable(props, ref);\n\n  useColorSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n  return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,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.types.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type { ColorSliderProps, ColorSliderSlots, ColorSliderState, SliderOnChangeData } from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSlider_unstable } from './useColorSlider';\nexport {\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  useColorSliderStyles_unstable,\n} from './useColorSliderStyles.styles';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAKlBC,kBAAkB;eAAlBA,8CAAkB;;IAClBC,qBAAqB;eAArBA,iDAAqB;;IAJdC,0BAA0B;eAA1BA,6CAA0B;;IAKjCC,6BAA6B;eAA7BA,yDAA6B;;IAJtBC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAKjC"}
+{"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type { ColorSliderProps, ColorSliderSlots, ColorSliderState, SliderOnChangeData } from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSlider_unstable } from './useColorSlider';\nexport {\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  useColorSliderStyles_unstable,\n} from './useColorSliderStyles.styles';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSlider_unstable","colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,8CAAkB;;;eAClBC,iDAAqB;;;eAJdH,6CAA0B;;;eAKjCI,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CAKpD,gCAAgC"}

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

@@ -1 +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 { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState) => {\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":["renderColorSlider_unstable","state","assertSlots","_jsxs","root","_jsx","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,KAAK,EAAA,CAAA;0BACZD,IAAAA,eAAA,EAACJ,MAAMM,IAAI,EAAA,CAAA;0BACXF,IAAAA,eAAA,EAACJ,MAAMO,KAAK,EAAA,CAAA;;;AAGlB"}
+{"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 { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState) => {\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,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"}