@fluentui/react-color-picker 0.0.0-nightly-20250319-0406.1

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

@@ -0,0 +1,31 @@
+"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, {
+    ColorPicker: function() {
+        return _ColorPicker.ColorPicker;
+    },
+    colorPickerClassNames: function() {
+        return _useColorPickerStylesstyles.colorPickerClassNames;
+    },
+    renderColorPicker_unstable: function() {
+        return _renderColorPicker.renderColorPicker_unstable;
+    },
+    useColorPickerStyles_unstable: function() {
+        return _useColorPickerStylesstyles.useColorPickerStyles_unstable;
+    },
+    useColorPicker_unstable: function() {
+        return _useColorPicker.useColorPicker_unstable;
+    }
+});
+const _ColorPicker = require("./ColorPicker");
+const _renderColorPicker = require("./renderColorPicker");
+const _useColorPicker = require("./useColorPicker");
+const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderColorPicker_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderColorPicker_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _colorPicker = require("../../contexts/colorPicker");
+const renderColorPicker_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_colorPicker.ColorPickerProvider, {
+        value: contextValues.colorPicker,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+            children: state.root.children
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/renderColorPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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"}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useColorPicker_unstable", {
+    enumerable: true,
+    get: function() {
+        return useColorPicker_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const useColorPicker_unstable = (props, ref)=>{
+    const { color, onColorChange, shape, ...rest } = props;
+    const requestChange = (0, _reactutilities.useEventCallback)((event, data)=>{
+        onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(event, {
+            type: 'change',
+            event,
+            color: data.color
+        });
+    });
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        color,
+        requestChange,
+        shape
+    };
+};

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

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

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

@@ -0,0 +1,50 @@
+"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 colorPickerClassNames = {
+    root: 'fui-ColorPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "f7e3wsx"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        [
+            ".f7e3wsx{gap:var(--spacingVerticalXS);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+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.js.map

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ColorSlider", {
+    enumerable: true,
+    get: function() {
+        return ColorSlider;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useColorSlider = require("./useColorSlider");
+const _renderColorSlider = require("./renderColorSlider");
+const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ColorSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useColorSlider.useColorSlider_unstable)(props, ref);
+    (0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorSliderStyles_unstable')(state);
+    return (0, _renderColorSlider.renderColorSlider_unstable)(state);
+});
+ColorSlider.displayName = 'ColorSlider';

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

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

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

@@ -0,0 +1,34 @@
+"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, {
+    ColorSlider: function() {
+        return _ColorSlider.ColorSlider;
+    },
+    colorSliderCSSVars: function() {
+        return _useColorSliderStylesstyles.colorSliderCSSVars;
+    },
+    colorSliderClassNames: function() {
+        return _useColorSliderStylesstyles.colorSliderClassNames;
+    },
+    renderColorSlider_unstable: function() {
+        return _renderColorSlider.renderColorSlider_unstable;
+    },
+    useColorSliderStyles_unstable: function() {
+        return _useColorSliderStylesstyles.useColorSliderStyles_unstable;
+    },
+    useColorSlider_unstable: function() {
+        return _useColorSlider.useColorSlider_unstable;
+    }
+});
+const _ColorSlider = require("./ColorSlider");
+const _renderColorSlider = require("./renderColorSlider");
+const _useColorSlider = require("./useColorSlider");
+const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderColorSlider_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderColorSlider_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderColorSlider_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.rail, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.thumb, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/renderColorSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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"}

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

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useColorSlider_unstable", {
+    enumerable: true,
+    get: function() {
+        return useColorSlider_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _tinycolor = require("@ctrl/tinycolor");
+const _reactutilities = require("@fluentui/react-utilities");
+const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _colorPicker = require("../../contexts/colorPicker");
+const _constants = require("../../utils/constants");
+const _getPercent = require("../../utils/getPercent");
+const _createHsvColor = require("../../utils/createHsvColor");
+const _adjustChannel = require("../../utils/adjustChannel");
+const useColorSlider_unstable = (props, ref)=>{
+    'use no memo';
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
+    const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
+    const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'onChange',
+            'color'
+        ]
+    });
+    const { color, channel = 'hue', onChange = onChangeFromContext, shape = shapeFromContext, vertical, root, input, rail, thumb } = props;
+    const hsvColor = color || colorFromContext;
+    const hslColor = (0, _tinycolor.tinycolor)(hsvColor).toHsl();
+    const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
+        defaultState: props.defaultColor,
+        state: hsvColor,
+        initialState: _constants.INITIAL_COLOR_HSV
+    });
+    const MAX = channel === 'hue' ? _constants.HUE_MAX : _constants.MAX;
+    const valueChannelActions = {
+        hue: (0, _adjustChannel.clampValue)(currentColor.h),
+        saturation: (0, _adjustChannel.clampValue)(currentColor.s * 100),
+        value: (0, _adjustChannel.clampValue)(currentColor.v * 100)
+    };
+    const clampedValue = (0, _adjustChannel.adjustChannel)(channel, valueChannelActions);
+    const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, MAX);
+    const inputOnChange = input === null || input === void 0 ? void 0 : input.onChange;
+    const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
+        const newValue = Number(event.target.value);
+        const colorActions = {
+            hue: ()=>(0, _createHsvColor.createHsvColor)({
+                    ...hsvColor,
+                    h: newValue
+                }),
+            saturation: ()=>(0, _createHsvColor.createHsvColor)({
+                    ...hsvColor,
+                    s: newValue / 100
+                }),
+            value: ()=>(0, _createHsvColor.createHsvColor)({
+                    ...hsvColor,
+                    v: newValue / 100
+                })
+        };
+        const newColor = (0, _adjustChannel.adjustChannel)(channel, colorActions)();
+        setCurrentColor(newColor);
+        inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(event);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+            type: 'change',
+            event,
+            color: newColor
+        });
+    });
+    const rootVariables = {
+        [_useColorSliderStylesstyles.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
+        [_useColorSliderStylesstyles.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
+        [_useColorSliderStylesstyles.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _tinycolor.tinycolor)(hsvColor).toRgbString(),
+        [_useColorSliderStylesstyles.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h} 100%, 50%)`
+    };
+    const state = {
+        shape,
+        vertical,
+        channel,
+        components: {
+            input: 'input',
+            rail: 'div',
+            root: 'div',
+            thumb: 'div'
+        },
+        root: _reactutilities.slot.always(root, {
+            defaultProps: {
+                role: 'group',
+                ...nativeProps.root
+            },
+            elementType: 'div'
+        }),
+        input: _reactutilities.slot.always(input, {
+            defaultProps: {
+                id: (0, _reactutilities.useId)('slider-', props.id),
+                ref,
+                min: _constants.MIN,
+                max: MAX,
+                tabIndex: 0,
+                ['aria-orientation']: vertical ? 'vertical' : 'horizontal',
+                ...nativeProps.primary,
+                type: 'range'
+            },
+            elementType: 'input'
+        }),
+        rail: _reactutilities.slot.always(rail, {
+            elementType: 'div'
+        }),
+        thumb: _reactutilities.slot.always(thumb, {
+            elementType: 'div'
+        })
+    };
+    // Root props
+    state.root.style = {
+        ...rootVariables,
+        ...state.root.style
+    };
+    // Input Props
+    state.input.value = clampedValue;
+    state.input.onChange = _onChange;
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n  getPartitionedNativeProps,\n  useId,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n  props: ColorSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n  'use no memo';\n\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    color,\n    channel = 'hue',\n    onChange = onChangeFromContext,\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const hsvColor = color || colorFromContext;\n  const hslColor = tinycolor(hsvColor).toHsl();\n\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: hsvColor,\n    initialState: INITIAL_COLOR_HSV,\n  });\n\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n  const valueChannelActions: ChannelActions<number> = {\n    hue: clampValue(currentColor.h),\n    saturation: clampValue(currentColor.s * 100),\n    value: clampValue(currentColor.v * 100),\n  };\n\n  const clampedValue = adjustChannel(channel, valueChannelActions);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = input?.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = Number(event.target.value);\n    const colorActions: ChannelActions<() => HsvColor> = {\n      hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n      saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n      value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n    };\n    const newColor = adjustChannel(channel, colorActions)();\n\n    setCurrentColor(newColor);\n\n    inputOnChange?.(event);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const rootVariables = {\n    [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n    [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [colorSliderCSSVars.thumbColorVar]:\n      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n    [colorSliderCSSVars.railColorVar]:\n      channel === 'hue'\n        ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n        : `hsl(${hslColor.h} 100%, 50%)`,\n  };\n\n  const state: ColorSliderState = {\n    shape,\n    vertical,\n    channel,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: {\n        role: 'group',\n        ...nativeProps.root,\n      },\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        min: MIN,\n        max: MAX,\n        tabIndex: 0,\n        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = _onChange;\n  return state;\n};\n"],"names":["useColorSlider_unstable","props","ref","dir","useFluent","onChangeFromContext","useColorPickerContextValue_unstable","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","tinycolor","toHsl","currentColor","setCurrentColor","useControllableState","defaultState","defaultColor","state","initialState","INITIAL_COLOR_HSV","MAX","HUE_MAX","COLOR_MAX","valueChannelActions","hue","clampValue","h","saturation","s","value","v","clampedValue","adjustChannel","valuePercent","getPercent","MIN","inputOnChange","_onChange","useEventCallback","event","newValue","Number","target","colorActions","createHsvColor","newColor","type","rootVariables","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","slot","always","defaultProps","role","elementType","id","useId","min","max","tabIndex","primary","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}