@mantine/core 6.0.11 → 7.0.0-alpha.11

package/cjs/components/Collapse/use-collapse.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var hooks = require('@mantine/hooks');
+
+function getAutoHeightDuration(height) {
+    if (!height || typeof height === 'string') {
+        return 0;
+    }
+    const constant = height / 36;
+    return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
+}
+function getElementHeight(el) {
+    return (el === null || el === void 0 ? void 0 : el.current) ? el.current.scrollHeight : 'auto';
+}
+const raf = typeof window !== 'undefined' && window.requestAnimationFrame;
+function useCollapse({ transitionDuration, transitionTimingFunction = 'ease', onTransitionEnd = () => { }, opened, }) {
+    const el = React.useRef(null);
+    const collapsedHeight = 0;
+    const collapsedStyles = {
+        display: 'none',
+        height: 0,
+        overflow: 'hidden',
+    };
+    const [styles, setStylesRaw] = React.useState(opened ? {} : collapsedStyles);
+    const setStyles = (newStyles) => {
+        reactDom.flushSync(() => setStylesRaw(newStyles));
+    };
+    const mergeStyles = (newStyles) => {
+        setStyles((oldStyles) => (Object.assign(Object.assign({}, oldStyles), newStyles)));
+    };
+    function getTransitionStyles(height) {
+        const _duration = transitionDuration || getAutoHeightDuration(height);
+        return {
+            transition: `height ${_duration}ms ${transitionTimingFunction}`,
+        };
+    }
+    hooks.useDidUpdate(() => {
+        if (typeof raf === 'function') {
+            if (opened) {
+                raf(() => {
+                    mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });
+                    raf(() => {
+                        const height = getElementHeight(el);
+                        mergeStyles(Object.assign(Object.assign({}, getTransitionStyles(height)), { height }));
+                    });
+                });
+            }
+            else {
+                raf(() => {
+                    const height = getElementHeight(el);
+                    mergeStyles(Object.assign(Object.assign({}, getTransitionStyles(height)), { willChange: 'height', height }));
+                    raf(() => mergeStyles({ height: collapsedHeight, overflow: 'hidden' }));
+                });
+            }
+        }
+    }, [opened]);
+    const handleTransitionEnd = (e) => {
+        if (e.target !== el.current || e.propertyName !== 'height') {
+            return;
+        }
+        if (opened) {
+            const height = getElementHeight(el);
+            if (height === styles.height) {
+                setStyles({});
+            }
+            else {
+                mergeStyles({ height });
+            }
+            onTransitionEnd();
+        }
+        else if (styles.height === collapsedHeight) {
+            setStyles(collapsedStyles);
+            onTransitionEnd();
+        }
+    };
+    function getCollapseProps(_a = {}) {
+        var { style = {}, refKey = 'ref' } = _a, rest = tslib.__rest(_a, ["style", "refKey"]);
+        const theirRef = rest[refKey];
+        return Object.assign(Object.assign({ 'aria-hidden': !opened }, rest), { [refKey]: hooks.mergeRefs(el, theirRef), onTransitionEnd: handleTransitionEnd, style: Object.assign(Object.assign({ boxSizing: 'border-box' }, style), styles) });
+    }
+    return getCollapseProps;
+}
+
+exports.getElementHeight = getElementHeight;
+exports.useCollapse = useCollapse;
+//# sourceMappingURL=use-collapse.js.map

package/cjs/components/Collapse/use-collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-collapse.js","sources":["../../../src/components/Collapse/use-collapse.ts"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate, mergeRefs } from '@mantine/hooks';\n\nfunction getAutoHeightDuration(height: number | string) {\n  if (!height || typeof height === 'string') {\n    return 0;\n  }\n  const constant = height / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(\n  el: React.RefObject<HTMLElement> | { current?: { scrollHeight: number } }\n) {\n  return el?.current ? el.current.scrollHeight : 'auto';\n}\n\nconst raf = typeof window !== 'undefined' && window.requestAnimationFrame;\n\ninterface UseCollapse {\n  opened: boolean;\n  transitionDuration?: number;\n  transitionTimingFunction?: string;\n  onTransitionEnd?: () => void;\n}\n\ninterface GetCollapseProps {\n  [key: string]: unknown;\n  style?: React.CSSProperties;\n  onTransitionEnd?: (e: TransitionEvent) => void;\n  refKey?: string;\n  ref?: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport function useCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd = () => {},\n  opened,\n}: UseCollapse): (props: GetCollapseProps) => Record<string, any> {\n  const el = useRef<HTMLElement | null>(null);\n  const collapsedHeight = 0;\n  const collapsedStyles = {\n    display: 'none',\n    height: 0,\n    overflow: 'hidden',\n  };\n  const [styles, setStylesRaw] = useState<React.CSSProperties>(opened ? {} : collapsedStyles);\n  const setStyles = (newStyles: {} | ((oldStyles: {}) => {})): void => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: {}): void => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  function getTransitionStyles(height: number | string): {\n    transition: string;\n  } {\n    const _duration = transitionDuration || getAutoHeightDuration(height);\n    return {\n      transition: `height ${_duration}ms ${transitionTimingFunction}`,\n    };\n  }\n\n  useDidUpdate(() => {\n    if (typeof raf === 'function') {\n      if (opened) {\n        raf(() => {\n          mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n          raf(() => {\n            const height = getElementHeight(el);\n            mergeStyles({ ...getTransitionStyles(height), height });\n          });\n        });\n      } else {\n        raf(() => {\n          const height = getElementHeight(el);\n          mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n          raf(() => mergeStyles({ height: collapsedHeight, overflow: 'hidden' }));\n        });\n      }\n    }\n  }, [opened]);\n\n  const handleTransitionEnd = (e: React.TransitionEvent): void => {\n    if (e.target !== el.current || e.propertyName !== 'height') {\n      return;\n    }\n\n    if (opened) {\n      const height = getElementHeight(el);\n\n      if (height === styles.height) {\n        setStyles({});\n      } else {\n        mergeStyles({ height });\n      }\n\n      onTransitionEnd();\n    } else if (styles.height === collapsedHeight) {\n      setStyles(collapsedStyles);\n      onTransitionEnd();\n    }\n  };\n\n  function getCollapseProps({ style = {}, refKey = 'ref', ...rest }: GetCollapseProps = {}) {\n    const theirRef: any = rest[refKey];\n    return {\n      'aria-hidden': !opened,\n      ...rest,\n      [refKey]: mergeRefs(el, theirRef),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...style, ...styles },\n    };\n  }\n\n  return getCollapseProps;\n}\n"],"names":["useRef","useState","flushSync","useDidUpdate","mergeRefs"],"mappings":"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"}

package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ColorSlider = require('../ColorSlider/ColorSlider.js');
+var parsers = require('../converters/parsers.js');
+var useProps = require('../../../core/MantineProvider/use-props/use-props.js');
+var rem = require('../../../core/utils/units-converters/rem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {};
+const AlphaSlider = React.forwardRef((props, ref) => {
+    const _a = useProps.useProps('AlphaSlider', defaultProps, props), { value, onChange, onChangeEnd, color } = _a, others = tslib.__rest(_a, ["value", "onChange", "onChangeEnd", "color"]);
+    return (React__default.createElement(ColorSlider.ColorSlider, Object.assign({}, others, { ref: ref, value: value, onChange: (val) => onChange === null || onChange === void 0 ? void 0 : onChange(parsers.round(val, 2)), onChangeEnd: (val) => onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(parsers.round(val, 2)), maxValue: 1, round: false, "data-alpha": true, overlays: [
+            {
+                backgroundImage: 'linear-gradient(45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--_slider-checkers) 75%)',
+                backgroundSize: `${rem.rem(8)} ${rem.rem(8)}`,
+                backgroundPosition: `0 0, 0 ${rem.rem(4)}, ${rem.rem(4)} -${rem.rem(4)}, -${rem.rem(4)} 0`,
+            },
+            {
+                backgroundImage: `linear-gradient(90deg, transparent, ${color})`,
+            },
+            {
+                boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem.rem(4)} inset`,
+            },
+        ] })));
+});
+AlphaSlider.displayName = '@mantine/core/AlphaSlider';
+
+exports.AlphaSlider = AlphaSlider;
+//# sourceMappingURL=AlphaSlider.js.map

package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.js","sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useProps, rem } from '../../../core';\nimport { ColorSlider, __ColorSliderProps } from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends __ColorSliderProps {\n  color: string;\n}\n\nconst defaultProps: Partial<AlphaSliderProps> = {};\n\nexport const AlphaSlider = forwardRef<HTMLDivElement, AlphaSliderProps>((props, ref) => {\n  const { value, onChange, onChangeEnd, color, ...others } = useProps(\n    'AlphaSlider',\n    defaultProps,\n    props\n  );\n\n  return (\n    <ColorSlider\n      {...others}\n      ref={ref}\n      value={value}\n      onChange={(val) => onChange?.(round(val, 2))}\n      onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n      maxValue={1}\n      round={false}\n      data-alpha\n      overlays={[\n        {\n          backgroundImage:\n            'linear-gradient(45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--_slider-checkers) 75%)',\n          backgroundSize: `${rem(8)} ${rem(8)}`,\n          backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} -${rem(4)}, -${rem(4)} 0`,\n        },\n        {\n          backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n        },\n        {\n          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n            4\n          )} inset`,\n        },\n      ]}\n    />\n  );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\n"],"names":["forwardRef","useProps","React","ColorSlider","round","rem"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAY,GAA8B,EAAE,CAAC;MAEtC,WAAW,GAAGA,gBAAU,CAAmC,CAAC,KAAK,EAAE,GAAG;IACjF,MAAM,KAAqDC,iBAAQ,CACjE,aAAa,EACb,YAAY,EACZ,KAAK,CACN,EAJK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,OAI1C,EAJ+C,MAAM,oBAAhD,6CAAkD,CAIvD,CAAC;IAEF,QACEC,6BAACC,uBAAW,oBACN,MAAM,IACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,GAAG,KAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAGC,aAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAC5C,WAAW,EAAE,CAAC,GAAG,KAAK,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAGA,aAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAClD,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,KAAK,sBAEZ,QAAQ,EAAE;YACR;gBACE,eAAe,EACb,wSAAwS;gBAC1S,cAAc,EAAE,GAAGC,OAAG,CAAC,CAAC,CAAC,IAAIA,OAAG,CAAC,CAAC,CAAC,EAAE;gBACrC,kBAAkB,EAAE,UAAUA,OAAG,CAAC,CAAC,CAAC,KAAKA,OAAG,CAAC,CAAC,CAAC,KAAKA,OAAG,CAAC,CAAC,CAAC,MAAMA,OAAG,CAAC,CAAC,CAAC,IAAI;aAC3E;YACD;gBACE,eAAe,EAAE,uCAAuC,KAAK,GAAG;aACjE;YACD;gBACE,SAAS,EAAE,2BAA2BA,OAAG,CAAC,CAAC,CAAC,iCAAiCA,OAAG,CAC9E,CAAC,CACF,QAAQ;aACV;SACF,IACD,EACF;AACJ,CAAC,EAAE;AAEH,WAAW,CAAC,WAAW,GAAG,2BAA2B;;;;"}

package/cjs/components/ColorPicker/ColorPicker.context.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createSafeContext = require('../../core/utils/create-safe-context/create-safe-context.js');
+
+const [ColorPickerProvider, useColorPickerContext] = createSafeContext.createSafeContext('ColorPicker component was not found in tree');
+
+exports.ColorPickerProvider = ColorPickerProvider;
+exports.useColorPickerContext = useColorPickerContext;
+//# sourceMappingURL=ColorPicker.context.js.map

package/cjs/components/ColorPicker/ColorPicker.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.context.js","sources":["../../../src/components/ColorPicker/ColorPicker.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ColorPickerFactory } from './ColorPicker';\n\ninterface ColorPickerContextValue {\n  getStyles: GetStylesApi<ColorPickerFactory>;\n}\n\nexport const [ColorPickerProvider, useColorPickerContext] =\n  createSafeContext<ColorPickerContextValue>('ColorPicker component was not found in tree');\n"],"names":["createSafeContext"],"mappings":";;;;;;MAOa,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GACvDA,mCAAiB,CAA0B,6CAA6C;;;;;"}

package/cjs/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var AlphaSlider = require('./AlphaSlider/AlphaSlider.js');
+var HueSlider = require('./HueSlider/HueSlider.js');
+var Saturation = require('./Saturation/Saturation.js');
+var Swatches = require('./Swatches/Swatches.js');
+var ColorPicker_context = require('./ColorPicker.context.js');
+var ColorPicker_module = require('./ColorPicker.module.css.js');
+var parsers = require('./converters/parsers.js');
+var converters = require('./converters/converters.js');
+var ColorSwatch = require('../ColorSwatch/ColorSwatch.js');
+var factory = require('../../core/factory/factory.js');
+var useProps = require('../../core/MantineProvider/use-props/use-props.js');
+var useStyles = require('../../core/styles-api/use-styles/use-styles.js');
+var Box = require('../../core/Box/Box.js');
+var createVarsResolver = require('../../core/styles-api/create-vars-resolver/create-vars-resolver.js');
+var getSize = require('../../core/utils/get-size/get-size.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {
+    swatchesPerRow: 7,
+    size: 'sm',
+    withPicker: true,
+    focusable: true,
+    __staticSelector: 'ColorPicker',
+};
+const varsResolver = createVarsResolver.createVarsResolver((_, { size, fullWidth, swatchesPerRow }) => ({
+    wrapper: {
+        '--cp-preview-size': getSize.getSize(size, 'cp-preview-size'),
+        '--cp-width': fullWidth ? '100%' : getSize.getSize(size, 'cp-width'),
+        '--cp-body-spacing': getSize.getSpacing(size),
+        '--cp-swatch-size': `${100 / swatchesPerRow}%`,
+        '--cp-thumb-size': getSize.getSize(size, 'cp-thumb-size'),
+        '--cp-saturation-height': getSize.getSize(size, 'cp-saturation-height'),
+    },
+}));
+const ColorPicker = factory.factory((_props, ref) => {
+    const props = useProps.useProps('ColorPicker', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, format, value, defaultValue, onChange, onChangeEnd, withPicker, size, saturationLabel, hueLabel, alphaLabel, focusable, swatches, swatchesPerRow, fullWidth, onColorSwatchClick, __staticSelector } = props, others = tslib.__rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "format", "value", "defaultValue", "onChange", "onChangeEnd", "withPicker", "size", "saturationLabel", "hueLabel", "alphaLabel", "focusable", "swatches", "swatchesPerRow", "fullWidth", "onColorSwatchClick", "__staticSelector"]);
+    const getStyles = useStyles.useStyles({
+        name: __staticSelector,
+        props,
+        classes: ColorPicker_module['default'],
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        rootSelector: 'wrapper',
+        vars,
+        varsResolver,
+    });
+    const formatRef = React.useRef(format);
+    const valueRef = React.useRef();
+    const scrubTimeoutRef = React.useRef(-1);
+    const isScrubbingRef = React.useRef(false);
+    const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';
+    const [_value, setValue, controlled] = hooks.useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: '#FFFFFF',
+        onChange,
+    });
+    const [parsed, setParsed] = React.useState(parsers.parseColor(_value));
+    const startScrubbing = () => {
+        window.clearTimeout(scrubTimeoutRef.current);
+        isScrubbingRef.current = true;
+    };
+    const stopScrubbing = () => {
+        window.clearTimeout(scrubTimeoutRef.current);
+        scrubTimeoutRef.current = window.setTimeout(() => {
+            isScrubbingRef.current = false;
+        }, 200);
+    };
+    const handleChange = (color) => {
+        setParsed((current) => {
+            const next = Object.assign(Object.assign({}, current), color);
+            valueRef.current = converters.convertHsvaTo(formatRef.current, next);
+            return next;
+        });
+        setValue(valueRef.current);
+    };
+    hooks.useDidUpdate(() => {
+        if (parsers.isColorValid(value) && !isScrubbingRef.current) {
+            setParsed(parsers.parseColor(value));
+        }
+    }, [value]);
+    hooks.useDidUpdate(() => {
+        formatRef.current = format;
+        setValue(converters.convertHsvaTo(format, parsed));
+    }, [format]);
+    return (React__default.createElement(ColorPicker_context.ColorPickerProvider, { value: { getStyles } },
+        React__default.createElement(Box.Box, Object.assign({ ref: ref }, getStyles('wrapper'), { size: size }, others),
+            withPicker && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Saturation.Saturation, { value: parsed, onChange: handleChange, onChangeEnd: ({ s, v }) => onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, Object.assign(Object.assign({}, parsed), { s: s, v: v }))), color: _value, size: size, focusable: focusable, saturationLabel: saturationLabel, onScrubStart: startScrubbing, onScrubEnd: stopScrubbing }),
+                React__default.createElement("div", Object.assign({}, getStyles('body')),
+                    React__default.createElement("div", Object.assign({}, getStyles('sliders')),
+                        React__default.createElement(HueSlider.HueSlider, { value: parsed.h, onChange: (h) => handleChange({ h }), onChangeEnd: (h) => onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, Object.assign(Object.assign({}, parsed), { h }))), size: size, focusable: focusable, "aria-label": hueLabel, onScrubStart: startScrubbing, onScrubEnd: stopScrubbing }),
+                        withAlpha && (React__default.createElement(AlphaSlider.AlphaSlider, { value: parsed.a, onChange: (a) => handleChange({ a }), onChangeEnd: (a) => {
+                                onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(converters.convertHsvaTo(formatRef.current, Object.assign(Object.assign({}, parsed), { a })));
+                            }, size: size, color: converters.convertHsvaTo('hex', parsed), focusable: focusable, "aria-label": alphaLabel, onScrubStart: startScrubbing, onScrubEnd: stopScrubbing }))),
+                    withAlpha && React__default.createElement(ColorSwatch.ColorSwatch, Object.assign({ color: _value, radius: "sm" }, getStyles('preview')))))),
+            Array.isArray(swatches) && (React__default.createElement(Swatches.Swatches, { data: swatches, swatchesPerRow: swatchesPerRow, focusable: focusable, setValue: setValue, onChangeEnd: (color) => {
+                    const convertedColor = converters.convertHsvaTo(format, parsers.parseColor(color));
+                    onColorSwatchClick === null || onColorSwatchClick === void 0 ? void 0 : onColorSwatchClick(convertedColor);
+                    onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(convertedColor);
+                    if (!controlled) {
+                        setParsed(parsers.parseColor(color));
+                    }
+                } })))));
+});
+ColorPicker.displayName = '@mantine/core/ColorPicker';
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

package/cjs/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  MantineSize,\n  getSize,\n  getSpacing,\n  createVarsResolver,\n  Factory,\n} from '../../core';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorPickerProvider } from './ColorPicker.context';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerVariant = string;\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when color changes */\n  onChange?(value: string): void;\n\n  /** Called when user stops dragging or changes value with arrow keys */\n  onChangeEnd?(value: string): void;\n\n  /** Color format, `'hex'` by default */\n  format?: ColorFormat;\n\n  /** Determines whether color picker should be displayed, `true` by default */\n  withPicker?: boolean;\n\n  /** Color swatches */\n  swatches?: string[];\n\n  /** Number of swatches displayed in one row, `7` by default */\n  swatchesPerRow?: number;\n\n  /** Controls size of hue, alpha and saturation sliders, `'md'` by default */\n  size?: MantineSize | (string & {});\n}\n\nexport interface ColorPickerProps\n  extends BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** Determines whether component should take 100% width of its container, `false` by default */\n  fullWidth?: boolean;\n\n  /** Determines whether interactive elements should be focusable, `true` by default */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?(color: string): void;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n  variant: ColorPickerVariant;\n}>;\n\nconst defaultProps: Partial<ColorPickerProps> = {\n  swatchesPerRow: 7,\n  size: 'sm',\n  withPicker: true,\n  focusable: true,\n  __staticSelector: 'ColorPicker',\n};\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>(\n  (_, { size, fullWidth, swatchesPerRow }) => ({\n    wrapper: {\n      '--cp-preview-size': getSize(size, 'cp-preview-size'),\n      '--cp-width': fullWidth ? '100%' : getSize(size, 'cp-width'),\n      '--cp-body-spacing': getSpacing(size),\n      '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n      '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n      '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n    },\n  })\n);\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props, ref) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector!,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format);\n  const valueRef = useRef<string>();\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current!, next);\n      return next;\n    });\n\n    setValue(valueRef.current!);\n  };\n\n  useDidUpdate(() => {\n    if (isColorValid(value!) && !isScrubbingRef.current) {\n      setParsed(parseColor(value!));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format;\n    setValue(convertHsvaTo(format!, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerProvider value={{ getStyles }}>\n      <Box ref={ref} {...getStyles('wrapper')} size={size} {...others}>\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current!, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size!}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current!, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current!, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && <ColorSwatch color={_value} radius=\"sm\" {...getStyles('preview')} />}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format!, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerProvider>\n  );\n});\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":["createVarsResolver","getSize","getSpacing","factory","useProps","useStyles","classes","useRef","useUncontrolled","useState","parseColor","convertHsvaTo","useDidUpdate","isColorValid","React","ColorPickerProvider","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches"],"mappings":"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"}

package/cjs/components/ColorPicker/ColorPicker.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classes = {"wrapper":"mantine-RhoTzer","preview":"mantine-v16j2jS","body":"mantine-CUkJfqd","sliders":"mantine-bzrGvmu","thumb":"mantine-DJZAmcN","swatch":"mantine-mSFZEpu","swatches":"mantine-CPxyKG9","saturation":"mantine-TPZ71OH","saturationOverlay":"mantine-8lc2iAe","slider":"mantine-PKmOErI","sliderOverlay":"mantine-MQUCZVH"};
+
+exports.default = classes;
+//# sourceMappingURL=ColorPicker.module.css.js.map

package/cjs/components/ColorPicker/ColorPicker.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/cjs/components/ColorPicker/ColorSlider/ColorSlider.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var Thumb = require('../Thumb/Thumb.js');
+var ColorPicker_context = require('../ColorPicker.context.js');
+var MantineThemeProvider = require('../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js');
+var Box = require('../../../core/Box/Box.js');
+var rem = require('../../../core/utils/units-converters/rem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorSlider = React.forwardRef((props, ref) => {
+    const { className, onChange, onChangeEnd, maxValue, round, size = 'md', focusable = true, value, overlays, thumbColor = 'transparent', onScrubStart, onScrubEnd } = props, others = tslib.__rest(props, ["className", "onChange", "onChangeEnd", "maxValue", "round", "size", "focusable", "value", "overlays", "thumbColor", "onScrubStart", "onScrubEnd"]);
+    const { getStyles } = ColorPicker_context.useColorPickerContext();
+    const theme = MantineThemeProvider.useMantineTheme();
+    const [position, setPosition] = React.useState({ y: 0, x: value / maxValue });
+    const positionRef = React.useRef(position);
+    const getChangeValue = (val) => (round ? Math.round(val * maxValue) : val * maxValue);
+    const { ref: sliderRef } = hooks.useMove(({ x, y }) => {
+        positionRef.current = { x, y };
+        onChange === null || onChange === void 0 ? void 0 : onChange(getChangeValue(x));
+    }, {
+        onScrubEnd: () => {
+            const { x } = positionRef.current;
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(getChangeValue(x));
+            onScrubEnd === null || onScrubEnd === void 0 ? void 0 : onScrubEnd();
+        },
+        onScrubStart,
+    });
+    hooks.useDidUpdate(() => {
+        setPosition({ y: 0, x: value / maxValue });
+    }, [value]);
+    const handleArrow = (event, pos) => {
+        event.preventDefault();
+        const _position = hooks.clampUseMovePosition(pos);
+        onChange === null || onChange === void 0 ? void 0 : onChange(getChangeValue(_position.x));
+        onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(getChangeValue(_position.x));
+    };
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowRight': {
+                handleArrow(event, { x: position.x + 0.05, y: position.y });
+                break;
+            }
+            case 'ArrowLeft': {
+                handleArrow(event, { x: position.x - 0.05, y: position.y });
+                break;
+            }
+        }
+    };
+    const layers = overlays.map((overlay, index) => (React__default.createElement("div", Object.assign({}, getStyles('sliderOverlay'), { style: overlay, key: index }))));
+    return (React__default.createElement(Box.Box, Object.assign({}, others, { ref: hooks.useMergedRef(sliderRef, ref) }, getStyles('slider'), { role: "slider", "aria-valuenow": value, "aria-valuemax": maxValue, "aria-valuemin": 0, tabIndex: focusable ? 0 : -1, onKeyDown: handleKeyDown, "data-focus-ring": theme.focusRing }),
+        layers,
+        React__default.createElement(Thumb.Thumb, Object.assign({ position: position, size: size }, getStyles('thumb', { style: { top: rem.rem(1), background: thumbColor } })))));
+});
+ColorSlider.displayName = '@mantine/core/ColorSlider';
+
+exports.ColorSlider = ColorSlider;
+//# sourceMappingURL=ColorSlider.js.map

package/cjs/components/ColorPicker/ColorSlider/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useRef, useState, forwardRef } from 'react';\nimport {\n  UseMovePosition,\n  clampUseMovePosition,\n  useDidUpdate,\n  useMergedRef,\n  useMove,\n} from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize, useMantineTheme, rem } from '../../../core';\nimport { Thumb } from '../Thumb/Thumb';\nimport { useColorPickerContext } from '../ColorPicker.context';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n  value: number;\n  onChange?(value: number): void;\n  onChangeEnd?(value: number): void;\n  onScrubStart?(): void;\n  onScrubEnd?(): void;\n  size?: MantineSize | (string & {});\n  focusable?: boolean;\n}\n\nexport interface ColorSliderProps extends __ColorSliderProps {\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>((props, ref) => {\n  const {\n    className,\n    onChange,\n    onChangeEnd,\n    maxValue,\n    round,\n    size = 'md',\n    focusable = true,\n    value,\n    overlays,\n    thumbColor = 'transparent',\n    onScrubStart,\n    onScrubEnd,\n    ...others\n  } = props;\n\n  const { getStyles } = useColorPickerContext();\n\n  const theme = useMantineTheme();\n  const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n  const positionRef = useRef(position);\n  const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n  const { ref: sliderRef } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange?.(getChangeValue(x));\n    },\n    {\n      onScrubEnd: () => {\n        const { x } = positionRef.current;\n        onChangeEnd?.(getChangeValue(x));\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useDidUpdate(() => {\n    setPosition({ y: 0, x: value / maxValue });\n  }, [value]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange?.(getChangeValue(_position.x));\n    onChangeEnd?.(getChangeValue(_position.x));\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  const layers = overlays.map((overlay, index) => (\n    <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n  ));\n\n  return (\n    <Box\n      {...others}\n      ref={useMergedRef(sliderRef, ref)}\n      {...getStyles('slider')}\n      role=\"slider\"\n      aria-valuenow={value}\n      aria-valuemax={maxValue}\n      aria-valuemin={0}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      data-focus-ring={theme.focusRing}\n    >\n      {layers}\n\n      <Thumb\n        position={position}\n        size={size!}\n        {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n      />\n    </Box>\n  );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":["forwardRef","useColorPickerContext","useMantineTheme","useState","useRef","useMove","useDidUpdate","clampUseMovePosition","React","Box","useMergedRef","Thumb","rem"],"mappings":"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"}

package/cjs/components/ColorPicker/HueSlider/HueSlider.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ColorSlider = require('../ColorSlider/ColorSlider.js');
+var useProps = require('../../../core/MantineProvider/use-props/use-props.js');
+var rem = require('../../../core/utils/units-converters/rem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {};
+const HueSlider = React.forwardRef((props, ref) => {
+    const _a = useProps.useProps('HueSlider', defaultProps, props), { value, onChange, onChangeEnd, color } = _a, others = tslib.__rest(_a, ["value", "onChange", "onChangeEnd", "color"]);
+    return (React__default.createElement(ColorSlider.ColorSlider, Object.assign({}, others, { ref: ref, value: value, onChange: onChange, onChangeEnd: onChangeEnd, maxValue: 360, thumbColor: `hsl(${value}, 100%, 50%)`, round: true, "data-hue": true, overlays: [
+            {
+                backgroundImage: 'linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))',
+            },
+            {
+                boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem.rem(4)} inset`,
+            },
+        ] })));
+});
+HueSlider.displayName = '@mantine/core/HueSlider';
+
+exports.HueSlider = HueSlider;
+//# sourceMappingURL=HueSlider.js.map

package/cjs/components/ColorPicker/HueSlider/HueSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.js","sources":["../../../../src/components/ColorPicker/HueSlider/HueSlider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useProps, rem } from '../../../core';\nimport { ColorSlider, __ColorSliderProps } from '../ColorSlider/ColorSlider';\n\nconst defaultProps: Partial<__ColorSliderProps> = {};\n\nexport const HueSlider = forwardRef<HTMLDivElement, __ColorSliderProps>((props, ref) => {\n  const { value, onChange, onChangeEnd, color, ...others } = useProps(\n    'HueSlider',\n    defaultProps,\n    props\n  );\n\n  return (\n    <ColorSlider\n      {...others}\n      ref={ref}\n      value={value}\n      onChange={onChange}\n      onChangeEnd={onChangeEnd}\n      maxValue={360}\n      thumbColor={`hsl(${value}, 100%, 50%)`}\n      round\n      data-hue\n      overlays={[\n        {\n          backgroundImage:\n            'linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))',\n        },\n        {\n          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n            4\n          )} inset`,\n        },\n      ]}\n    />\n  );\n});\n\nHueSlider.displayName = '@mantine/core/HueSlider';\n"],"names":["forwardRef","useProps","React","ColorSlider","rem"],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,YAAY,GAAgC,EAAE,CAAC;MAExC,SAAS,GAAGA,gBAAU,CAAqC,CAAC,KAAK,EAAE,GAAG;IACjF,MAAM,KAAqDC,iBAAQ,CACjE,WAAW,EACX,YAAY,EACZ,KAAK,CACN,EAJK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,OAI1C,EAJ+C,MAAM,oBAAhD,6CAAkD,CAIvD,CAAC;IAEF,QACEC,6BAACC,uBAAW,oBACN,MAAM,IACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,OAAO,KAAK,cAAc,EACtC,KAAK,0BAEL,QAAQ,EAAE;YACR;gBACE,eAAe,EACb,sJAAsJ;aACzJ;YACD;gBACE,SAAS,EAAE,2BAA2BC,OAAG,CAAC,CAAC,CAAC,iCAAiCA,OAAG,CAC9E,CAAC,CACF,QAAQ;aACV;SACF,IACD,EACF;AACJ,CAAC,EAAE;AAEH,SAAS,CAAC,WAAW,GAAG,yBAAyB;;;;"}

package/cjs/components/ColorPicker/Saturation/Saturation.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var Thumb = require('../Thumb/Thumb.js');
+var ColorPicker_context = require('../ColorPicker.context.js');
+var converters = require('../converters/converters.js');
+var Box = require('../../../core/Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Saturation(_a) {
+    var { className, onChange, onChangeEnd, value, saturationLabel, focusable = true, size, color, onScrubStart, onScrubEnd } = _a, others = tslib.__rest(_a, ["className", "onChange", "onChangeEnd", "value", "saturationLabel", "focusable", "size", "color", "onScrubStart", "onScrubEnd"]);
+    const { getStyles } = ColorPicker_context.useColorPickerContext();
+    const [position, setPosition] = React.useState({ x: value.s / 100, y: 1 - value.v / 100 });
+    const positionRef = React.useRef(position);
+    const { ref } = hooks.useMove(({ x, y }) => {
+        positionRef.current = { x, y };
+        onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });
+    }, {
+        onScrubEnd: () => {
+            const { x, y } = positionRef.current;
+            onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });
+            onScrubEnd === null || onScrubEnd === void 0 ? void 0 : onScrubEnd();
+        },
+        onScrubStart,
+    });
+    React.useEffect(() => {
+        setPosition({ x: value.s / 100, y: 1 - value.v / 100 });
+    }, [value.s, value.v]);
+    const handleArrow = (event, pos) => {
+        event.preventDefault();
+        const _position = hooks.clampUseMovePosition(pos);
+        onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });
+        onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });
+    };
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowUp': {
+                handleArrow(event, { y: position.y - 0.05, x: position.x });
+                break;
+            }
+            case 'ArrowDown': {
+                handleArrow(event, { y: position.y + 0.05, x: position.x });
+                break;
+            }
+            case 'ArrowRight': {
+                handleArrow(event, { x: position.x + 0.05, y: position.y });
+                break;
+            }
+            case 'ArrowLeft': {
+                handleArrow(event, { x: position.x - 0.05, y: position.y });
+                break;
+            }
+        }
+    };
+    return (React__default.createElement(Box.Box, Object.assign({}, getStyles('saturation'), { ref: ref }, others, { role: "slider", "aria-label": saturationLabel, "aria-valuenow": position.x, "aria-valuetext": converters.convertHsvaTo('rgba', value), tabIndex: focusable ? 0 : -1, onKeyDown: handleKeyDown }),
+        React__default.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
+            style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },
+        }))),
+        React__default.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
+            style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },
+        }))),
+        React__default.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
+            style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },
+        }))),
+        React__default.createElement(Thumb.Thumb, Object.assign({ position: position, size: size }, getStyles('thumb', { style: { backgroundColor: color } })))));
+}
+Saturation.displayName = '@mantine/core/Saturation';
+
+exports.Saturation = Saturation;
+//# sourceMappingURL=Saturation.js.map

package/cjs/components/ColorPicker/Saturation/Saturation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { UseMovePosition, clampUseMovePosition, useMove } from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize } from '../../../core';\nimport { HsvaColor } from '../ColorPicker.types';\nimport { convertHsvaTo } from '../converters';\nimport { Thumb } from '../Thumb/Thumb';\nimport { useColorPickerContext } from '../ColorPicker.context';\n\nexport interface SaturationProps extends ElementProps<'div', 'onChange'> {\n  value: HsvaColor;\n  onChange(color: Partial<HsvaColor>): void;\n  onChangeEnd(color: Partial<HsvaColor>): void;\n  onScrubStart?(): void;\n  onScrubEnd?(): void;\n  saturationLabel?: string;\n  size: MantineSize | (string & {});\n  color: string;\n  focusable?: boolean;\n}\n\nexport function Saturation({\n  className,\n  onChange,\n  onChangeEnd,\n  value,\n  saturationLabel,\n  focusable = true,\n  size,\n  color,\n  onScrubStart,\n  onScrubEnd,\n  ...others\n}: SaturationProps) {\n  const { getStyles } = useColorPickerContext();\n\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n  const positionRef = useRef(position);\n\n  const { ref } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n    },\n    {\n      onScrubEnd: () => {\n        const { x, y } = positionRef.current;\n        onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useEffect(() => {\n    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n  }, [value.s, value.v]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n    onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowUp': {\n        handleArrow(event, { y: position.y - 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowDown': {\n        handleArrow(event, { y: position.y + 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...getStyles('saturation')}\n      ref={ref as any}\n      {...others}\n      role=\"slider\"\n      aria-label={saturationLabel}\n      aria-valuenow={position.x}\n      aria-valuetext={convertHsvaTo('rgba', value)}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },\n        })}\n      />\n\n      <Thumb\n        position={position}\n        size={size}\n        {...getStyles('thumb', { style: { backgroundColor: color } })}\n      />\n    </Box>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":["useColorPickerContext","useState","useRef","useMove","useEffect","clampUseMovePosition","React","Box","convertHsvaTo","Thumb"],"mappings":"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"}

package/cjs/components/ColorPicker/Swatches/Swatches.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ColorPicker_context = require('../ColorPicker.context.js');
+var ColorSwatch = require('../../ColorSwatch/ColorSwatch.js');
+var Box = require('../../../core/Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Swatches = React.forwardRef((_a, ref) => {
+    var { className, datatype, setValue, onChangeEnd, size, focusable, data, swatchesPerRow } = _a, others = tslib.__rest(_a, ["className", "datatype", "setValue", "onChangeEnd", "size", "focusable", "data", "swatchesPerRow"]);
+    const { getStyles } = ColorPicker_context.useColorPickerContext();
+    const colors = data.map((color, index) => (React__default.createElement(ColorSwatch.ColorSwatch, Object.assign({}, getStyles('swatch'), { component: "button", type: "button", color: color, key: index, radius: "sm", onClick: () => {
+            setValue(color);
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(color);
+        }, "aria-label": color, tabIndex: focusable ? 0 : -1, "data-swatch": true }))));
+    return (React__default.createElement(Box.Box, Object.assign({}, getStyles('swatches'), { ref: ref }, others), colors));
+});
+Swatches.displayName = '@mantine/core/Swatches';
+
+exports.Swatches = Swatches;
+//# sourceMappingURL=Swatches.js.map

package/cjs/components/ColorPicker/Swatches/Swatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.js","sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, ElementProps } from '../../../core';\nimport { ColorSwatch } from '../../ColorSwatch';\nimport { useColorPickerContext } from '../ColorPicker.context';\n\nexport interface SwatchesProps extends ElementProps<'div'> {\n  size?: string | number;\n  data: string[];\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  onChangeEnd?: (color: string) => void;\n  setValue(value: string): void;\n}\n\nexport const Swatches = forwardRef<HTMLDivElement, SwatchesProps>(\n  (\n    {\n      className,\n      datatype,\n      setValue,\n      onChangeEnd,\n      size,\n      focusable,\n      data,\n      swatchesPerRow,\n      ...others\n    },\n    ref\n  ) => {\n    const { getStyles } = useColorPickerContext();\n\n    const colors = data.map((color, index) => (\n      <ColorSwatch\n        {...getStyles('swatch')}\n        component=\"button\"\n        type=\"button\"\n        color={color}\n        key={index}\n        radius=\"sm\"\n        onClick={() => {\n          setValue(color);\n          onChangeEnd?.(color);\n        }}\n        aria-label={color}\n        tabIndex={focusable ? 0 : -1}\n        data-swatch\n      />\n    ));\n\n    return (\n      <Box {...getStyles('swatches')} ref={ref} {...others}>\n        {colors}\n      </Box>\n    );\n  }\n);\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":["forwardRef","useColorPickerContext","React","ColorSwatch","Box"],"mappings":";;;;;;;;;;;;;;MAca,QAAQ,GAAGA,gBAAU,CAChC,CACE,EAUC,EACD,GAAG;QAXH,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,cAAc,OAEf,EADI,MAAM,oBATX,mGAUC,CADU;IAIX,MAAM,EAAE,SAAS,EAAE,GAAGC,yCAAqB,EAAE,CAAC;IAE9C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACnCC,6BAACC,uBAAW,oBACN,SAAS,CAAC,QAAQ,CAAC,IACvB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAE;YACP,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,CAAC,CAAC;SACtB,gBACW,KAAK,EACjB,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,yBAE5B,CACH,CAAC,CAAC;IAEH,QACED,6BAACE,OAAG,oBAAK,SAAS,CAAC,UAAU,CAAC,IAAE,GAAG,EAAE,GAAG,IAAM,MAAM,GACjD,MAAM,CACH,EACN;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/cjs/components/ColorPicker/Thumb/Thumb.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ColorPicker_context = require('../ColorPicker.context.js');
+var Box = require('../../../core/Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Thumb = React.forwardRef((_a, ref) => {
+    var { className, style, size, position } = _a, others = tslib.__rest(_a, ["className", "style", "size", "position"]);
+    const { getStyles } = ColorPicker_context.useColorPickerContext();
+    return (React__default.createElement(Box.Box, Object.assign({ ref: ref }, getStyles('thumb', { style }), { __vars: {
+            '--_thumb-y-offset': `${position.y * 100}%`,
+            '--_thumb-x-offset': `${position.x * 100}%`,
+        } }, others)));
+});
+Thumb.displayName = '@mantine/core/ColorPickerThumb';
+
+exports.Thumb = Thumb;
+//# sourceMappingURL=Thumb.js.map