@fluentui/react-color-picker 9.2.18 → 9.3.0

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

@@ -1,21 +1,14 @@
 'use client';
 
-import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, __resetStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { colorSliderCSSVars } from "./ColorSlider.constants.js";
 export const colorSliderClassNames = {
   root: 'fui-ColorSlider',
   rail: 'fui-ColorSlider__rail',
   thumb: 'fui-ColorSlider__thumb',
   input: 'fui-ColorSlider__input'
 };
-export 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(${ /*#__PURE__*/[`var(${colorSliderCSSVars.sliderDirectionVar})`, 'red', 'fuchsia', 'blue', 'aqua', 'lime', 'yellow', 'red'].join(',')})`;
 /**
  * Styles for the root slot

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","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"],"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n    root: 'fui-ColorSlider',\n    rail: 'fui-ColorSlider__rail',\n    thumb: 'fui-ColorSlider__thumb',\n    input: 'fui-ColorSlider__input'\n};\nexport 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};\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"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"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,20 +1,13 @@
 'use client';
-import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, makeResetStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { colorSliderCSSVars } from "./ColorSlider.constants.js";
 export const colorSliderClassNames = {
     root: 'fui-ColorSlider',
     rail: 'fui-ColorSlider__rail',
     thumb: 'fui-ColorSlider__thumb',
     input: 'fui-ColorSlider__input'
 };
-export 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})`,
     'red',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nexport 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\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","railColorVar","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib/contexts/colorPicker.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from "@fluentui/react-context-selector";
 export const colorPickerContextDefaultValue = {
     requestChange: ()=>{
     /*noop*/ },

package/lib/index.js

@@ -1,4 +1,5 @@
-export { ColorSlider, colorSliderClassNames, renderColorSlider_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from './ColorSlider';
-export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerStyles_unstable, useColorPicker_unstable } from './ColorPicker';
-export { ColorArea, colorAreaClassNames, renderColorArea_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from './ColorArea';
-export { AlphaSlider, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from './AlphaSlider';
+export { ColorSlider, colorSliderClassNames, renderColorSlider_unstable, useColorSliderBase_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from "./ColorSlider.js";
+export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerBase_unstable, useColorPickerContextValues, useColorPickerStyles_unstable, useColorPicker_unstable } from "./ColorPicker.js";
+export { ColorArea, colorAreaClassNames, renderColorArea_unstable, useColorAreaBase_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from "./ColorArea.js";
+export { AlphaSlider, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderBase_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from "./AlphaSlider.js";
+export { useColorPickerContextValue_unstable } from "./contexts/colorPicker.js";

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { ColorSliderProps, ColorSliderSlots, ColorSliderState } from './ColorSlider';\nexport {\n  ColorSlider,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './ColorSlider';\nexport type { ColorPickerProps, ColorPickerSlots, ColorPickerState } from './ColorPicker';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './ColorPicker';\nexport type { ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea';\nexport {\n  ColorArea,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './ColorArea';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider';\nexport {\n  AlphaSlider,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './AlphaSlider';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAErB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type {\n  ColorChannel,\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n} from './ColorSlider';\nexport {\n  ColorSlider,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderBase_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './ColorSlider';\nexport type {\n  ColorPickerBaseProps,\n  ColorPickerBaseState,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './ColorPicker';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerBase_unstable,\n  useColorPickerContextValues,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './ColorPicker';\nexport type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './ColorArea';\nexport {\n  ColorArea,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaBase_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './ColorArea';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider';\nexport {\n  AlphaSlider,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderBase_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './AlphaSlider';\nexport type { ColorPickerContextValue, ColorPickerContextValues } from './contexts/colorPicker';\nexport { useColorPickerContextValue_unstable } from './contexts/colorPicker';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPickerContextValues","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaBase_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable","useColorPickerContextValue_unstable"],"mappings":"AAQA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,mBAAgB;AAQvB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,mBAAgB;AAQvB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,yBAAyB,EACzBC,2BAA2B,EAC3BC,qBAAqB,QAChB,iBAAc;AAQrB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,mBAAgB;AAEvB,SAASC,mCAAmC,QAAQ,4BAAyB"}

package/lib/types/color.js.map

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

package/lib/utils/adjustChannel.js

@@ -1,5 +1,5 @@
-import { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';
-import { clamp } from '@fluentui/react-utilities';
+import { MIN, HUE_MAX, MAX as COLOR_MAX } from "./constants.js";
+import { clamp } from "@fluentui/react-utilities";
 /**
  * Clamps a given value to the valid range for a specified color channel.
  *

package/lib/utils/adjustChannel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,cAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}
+{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,iBAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}

package/lib/utils/constants.js

@@ -1,6 +1,10 @@
-import { tinycolor } from '@ctrl/tinycolor';
 export const MIN = 0;
 export const MAX = 100;
 export const HUE_MAX = 360;
 export const INITIAL_COLOR = '#FFF';
-export const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();
+export const INITIAL_COLOR_HSV = {
+    h: 0,
+    s: 0,
+    v: 1,
+    a: 1
+};

package/lib/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["import { tinycolor } from '@ctrl/tinycolor';\n\nexport const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();\n"],"names":["tinycolor","MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","toHsv"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAE5C,OAAO,MAAMC,MAAM,EAAE;AACrB,OAAO,MAAMC,MAAM,IAAI;AACvB,OAAO,MAAMC,UAAU,IAAI;AAC3B,OAAO,MAAMC,gBAAgB,OAAO;AACpC,OAAO,MAAMC,oBAAoBL,UAAUI,eAAeE,KAAK,GAAG"}
+{"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["export const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = { h: 0, s: 0, v: 1, a: 1 };\n"],"names":["MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","h","s","v","a"],"mappings":"AAAA,OAAO,MAAMA,MAAM,EAAE;AACrB,OAAO,MAAMC,MAAM,IAAI;AACvB,OAAO,MAAMC,UAAU,IAAI;AAC3B,OAAO,MAAMC,gBAAgB,OAAO;AACpC,OAAO,MAAMC,oBAAoB;IAAEC,GAAG;IAAGC,GAAG;IAAGC,GAAG;IAAGC,GAAG;AAAE,EAAE"}

package/lib/utils/createHslColor.js

@@ -0,0 +1,28 @@
+/**
+ *
+ * Creates an HSL color object from a given HSV color object.
+ *
+ * @param color - HSV color object to convert to HSL.
+ * @returns HSL color object with the same hue and alpha values, and converted saturation and lightness values.
+ */ export function createHslColor(color = {}) {
+    const { h = 0, s = 0, v = 0, a = 1 } = color;
+    const l = v * (1 - s / 2);
+    const hslSaturation = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+    return {
+        h,
+        s: hslSaturation,
+        l,
+        a
+    };
+}
+/**
+ * Creates an HSL color string from a given HSV color object.
+ *
+ * @param color - HSV color object to convert to HSL string.
+ * @returns - HSL color string in the format of "hsla(h, s%, l%, a)".
+ */ export function createHslColorString(color = {}) {
+    const hslColor = createHslColor(color);
+    const saturation = Number((hslColor.s * 100).toFixed(2));
+    const lightness = Number((hslColor.l * 100).toFixed(2));
+    return `hsla(${hslColor.h}, ${saturation}%, ${lightness}%, ${hslColor.a})`;
+}

package/lib/utils/createHslColor.js.map

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

package/lib/utils/getCoordinates.js

@@ -1,4 +1,4 @@
-import { clamp } from '@fluentui/react-utilities';
+import { clamp } from "@fluentui/react-utilities";
 /**
  * Calculates the normalized coordinates of a mouse event relative to a given HTML element.
  *

package/lib-commonjs/{AlphaSlider.js → AlphaSlider.cjs}

@@ -21,6 +21,9 @@ _export(exports, {
     renderAlphaSlider_unstable: function() {
         return _index.renderAlphaSlider_unstable;
     },
+    useAlphaSliderBase_unstable: function() {
+        return _index.useAlphaSliderBase_unstable;
+    },
     useAlphaSliderStyles_unstable: function() {
         return _index.useAlphaSliderStyles_unstable;
     },
@@ -28,4 +31,4 @@ _export(exports, {
         return _index.useAlphaSlider_unstable;
     }
 });
-const _index = require("./components/AlphaSlider/index");
+const _index = require("./components/AlphaSlider/index.cjs");

package/lib-commonjs/AlphaSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './components/AlphaSlider/index';\nexport {\n  AlphaSlider,\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderBase_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,yBAAkB;;;eAClBC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,kCAA2B;;;eAC3BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}

package/lib-commonjs/{ColorArea.js → ColorArea.cjs}

@@ -21,6 +21,9 @@ _export(exports, {
     renderColorArea_unstable: function() {
         return _index.renderColorArea_unstable;
     },
+    useColorAreaBase_unstable: function() {
+        return _index.useColorAreaBase_unstable;
+    },
     useColorAreaStyles_unstable: function() {
         return _index.useColorAreaStyles_unstable;
     },
@@ -28,4 +31,4 @@ _export(exports, {
         return _index.useColorArea_unstable;
     }
 });
-const _index = require("./components/ColorArea/index");
+const _index = require("./components/ColorArea/index.cjs");

package/lib-commonjs/ColorArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n  ColorArea,\n  colorAreaCSSVars,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaBase_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaBase_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"mappings":";;;;;;;;;;;;eASEA,gBAAS;;;eACTC,uBAAgB;;;eAChBC,0BAAmB;;;eACnBC,+BAAwB;;;eACxBC,gCAAyB;;;eACzBC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAChB,kCAA+B"}

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

@@ -18,6 +18,15 @@ _export(exports, {
     renderColorPicker_unstable: function() {
         return _index.renderColorPicker_unstable;
     },
+    useColorPickerBaseContextValues_unstable: function() {
+        return _index.useColorPickerBaseContextValues_unstable;
+    },
+    useColorPickerBase_unstable: function() {
+        return _index.useColorPickerBase_unstable;
+    },
+    useColorPickerContextValues: function() {
+        return _index.useColorPickerContextValues;
+    },
     useColorPickerStyles_unstable: function() {
         return _index.useColorPickerStyles_unstable;
     },
@@ -25,4 +34,4 @@ _export(exports, {
         return _index.useColorPicker_unstable;
     }
 });
-const _index = require("./components/ColorPicker/index");
+const _index = require("./components/ColorPicker/index.cjs");

package/lib-commonjs/ColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n  ColorPickerBaseProps,\n  ColorPickerBaseState,\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerBaseContextValues_unstable,\n  useColorPickerBase_unstable,\n  useColorPickerContextValues,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerBaseContextValues_unstable","useColorPickerBase_unstable","useColorPickerContextValues","useColorPickerStyles_unstable","useColorPicker_unstable"],"mappings":";;;;;;;;;;;IASEA;iCAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,+CAAwC;;;eACxCC,kCAA2B;;;eAC3BC,kCAA2B;;;eAC3BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}

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

@@ -21,6 +21,9 @@ _export(exports, {
     renderColorSlider_unstable: function() {
         return _index.renderColorSlider_unstable;
     },
+    useColorSliderBase_unstable: function() {
+        return _index.useColorSliderBase_unstable;
+    },
     useColorSliderStyles_unstable: function() {
         return _index.useColorSliderStyles_unstable;
     },
@@ -28,4 +31,4 @@ _export(exports, {
         return _index.useColorSlider_unstable;
     }
 });
-const _index = require("./components/ColorSlider/index");
+const _index = require("./components/ColorSlider/index.cjs");

package/lib-commonjs/ColorSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n  ColorChannel,\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n  ColorSlider,\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderBase_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"mappings":";;;;;;;;;;;;eAUEA,kBAAW;;;eACXC,yBAAkB;;;eAClBC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,kCAA2B;;;eAC3BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}

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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "AlphaSlider", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useAlphaSlider = require("./useAlphaSlider");
-const _renderAlphaSlider = require("./renderAlphaSlider");
-const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");
+const _useAlphaSlider = require("./useAlphaSlider.cjs");
+const _renderAlphaSlider = require("./renderAlphaSlider.cjs");
+const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const AlphaSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useAlphaSlider.useAlphaSlider_unstable)(props, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;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/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;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/AlphaSlider/AlphaSlider.constants.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "alphaSliderCSSVars", {
+    enumerable: true,
+    get: function() {
+        return alphaSliderCSSVars;
+    }
+});
+const alphaSliderCSSVars = {
+    sliderDirectionVar: `--fui-AlphaSlider--direction`,
+    sliderProgressVar: `--fui-AlphaSlider--progress`,
+    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
+    railColorVar: `--fui-AlphaSlider__rail--color`
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export 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"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":";;;;;;;;;;AAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}

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

@@ -1,5 +1,5 @@
 /**
- * State used in rendering AlphaSlider
+ * State used in rendering unstyled AlphaSlider
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WAEgE"}
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * AlphaSlider Base Props\n */\nexport type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n\n/**\n * State used in rendering unstyled AlphaSlider\n */\nexport type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAmE"}

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

@@ -13,7 +13,7 @@ _export(exports, {
         return _AlphaSlider.AlphaSlider;
     },
     alphaSliderCSSVars: function() {
-        return _useAlphaSliderStylesstyles.alphaSliderCSSVars;
+        return _AlphaSliderconstants.alphaSliderCSSVars;
     },
     alphaSliderClassNames: function() {
         return _useAlphaSliderStylesstyles.alphaSliderClassNames;
@@ -21,6 +21,9 @@ _export(exports, {
     renderAlphaSlider_unstable: function() {
         return _renderAlphaSlider.renderAlphaSlider_unstable;
     },
+    useAlphaSliderBase_unstable: function() {
+        return _useAlphaSlider.useAlphaSliderBase_unstable;
+    },
     useAlphaSliderStyles_unstable: function() {
         return _useAlphaSliderStylesstyles.useAlphaSliderStyles_unstable;
     },
@@ -28,7 +31,8 @@ _export(exports, {
         return _useAlphaSlider.useAlphaSlider_unstable;
     }
 });
-const _AlphaSlider = require("./AlphaSlider");
-const _renderAlphaSlider = require("./renderAlphaSlider");
-const _useAlphaSlider = require("./useAlphaSlider");
-const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");
+const _AlphaSlider = require("./AlphaSlider.cjs");
+const _renderAlphaSlider = require("./renderAlphaSlider.cjs");
+const _useAlphaSlider = require("./useAlphaSlider.cjs");
+const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles.cjs");
+const _AlphaSliderconstants = require("./AlphaSlider.constants.cjs");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSliderBase_unstable, useAlphaSlider_unstable } from './useAlphaSlider';\nexport { alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nexport { alphaSliderCSSVars } from './AlphaSlider.constants';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSlider_unstable","alphaSliderClassNames","useAlphaSliderStyles_unstable","alphaSliderCSSVars"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;IAWXM;uDAAkB;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BATjC,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}

package/lib-commonjs/components/AlphaSlider/renderAlphaSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/renderAlphaSlider.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 { AlphaSliderBaseState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderBaseState): JSXElement => {\n  assertSlots<AlphaSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlphaSlider_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/AlphaSlider/{useAlphaSlider.js → useAlphaSlider.cjs}

@@ -3,17 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useAlphaSlider_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, {
+    useAlphaSliderBase_unstable: function() {
+        return useAlphaSliderBase_unstable;
+    },
+    useAlphaSlider_unstable: function() {
         return useAlphaSlider_unstable;
     }
 });
 const _reactutilities = require("@fluentui/react-utilities");
-const _useAlphaSliderState = require("./useAlphaSliderState");
-const _colorPicker = require("../../contexts/colorPicker");
+const _useAlphaSliderState = require("./useAlphaSliderState.cjs");
+const _colorPicker = require("../../contexts/colorPicker.cjs");
 const useAlphaSlider_unstable = (props, ref)=>{
     const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { shape = shapeFromContext, ...baseProps } = props;
+    return {
+        ...useAlphaSliderBase_unstable(baseProps, ref),
+        shape
+    };
+};
+const useAlphaSliderBase_unstable = (props, ref)=>{
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'input',
@@ -22,9 +37,8 @@ const useAlphaSlider_unstable = (props, ref)=>{
             'color'
         ]
     });
-    const { shape = shapeFromContext, vertical, root, input, rail, thumb } = props;
+    const { vertical, root, input, rail, thumb } = props;
     const state = {
-        shape,
         vertical,
         components: {
             input: 'input',

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  return {\n    ...useAlphaSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n\nexport const useAlphaSliderBase_unstable = (\n  props: AlphaSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderBaseState = {\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","baseProps","useAlphaSliderBase_unstable","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;;;;;;;;IAmCaY,2BAAAA;;;2BAbAP;;;;gCAnB0C,4BAA4B;qCAOtC,2BAAwB;6BACjB,gCAA6B;AAW1E,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEK,oCAAoC,CACzCJ,OACAC;IAEA,MAAMM,cAAcb,6CAAAA,EAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,oBAAAA,CAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,oBAAAA,CAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIzB,qBAAAA,EAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,GAAGM,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,oBAAAA,CAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,oBAAAA,CAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEAtB,iDAAAA,EAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}