@mantine/core 7.0.0-alpha.12 → 7.0.0-alpha.13

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

@@ -1 +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":[],"mappings":";;MAOa,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GACvD,iBAAiB,CAA0B,6CAA6C;;;;"}
+{"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":[],"mappings":";;AACY,MAAC,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,iBAAiB,CAAC,6CAA6C;;;;"}

package/esm/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import React, { useRef, useState } from 'react';
 import { useUncontrolled, useDidUpdate } from '@mantine/hooks';
 import { AlphaSlider } from './AlphaSlider/AlphaSlider.js';
@@ -17,99 +16,217 @@ import { Box } from '../../core/Box/Box.js';
 import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
 import { getSize, getSpacing } from '../../core/utils/get-size/get-size.js';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const defaultProps = {
-    swatchesPerRow: 7,
-    size: 'sm',
-    withPicker: true,
-    focusable: true,
-    __staticSelector: 'ColorPicker',
+  swatchesPerRow: 7,
+  size: "sm",
+  withPicker: true,
+  focusable: true,
+  __staticSelector: "ColorPicker"
 };
-const varsResolver = createVarsResolver((_, { size, fullWidth, swatchesPerRow }) => ({
+const varsResolver = createVarsResolver(
+  (_, { size, fullWidth, swatchesPerRow }) => ({
     wrapper: {
-        '--cp-preview-size': getSize(size, 'cp-preview-size'),
-        '--cp-width': fullWidth ? '100%' : getSize(size, 'cp-width'),
-        '--cp-body-spacing': getSpacing(size),
-        '--cp-swatch-size': `${100 / swatchesPerRow}%`,
-        '--cp-thumb-size': getSize(size, 'cp-thumb-size'),
-        '--cp-saturation-height': getSize(size, 'cp-saturation-height'),
-    },
-}));
+      "--cp-preview-size": getSize(size, "cp-preview-size"),
+      "--cp-width": fullWidth ? "100%" : getSize(size, "cp-width"),
+      "--cp-body-spacing": getSpacing(size),
+      "--cp-swatch-size": `${100 / swatchesPerRow}%`,
+      "--cp-thumb-size": getSize(size, "cp-thumb-size"),
+      "--cp-saturation-height": getSize(size, "cp-saturation-height")
+    }
+  })
+);
 const ColorPicker = factory((_props, ref) => {
-    const props = 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 = __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({
-        name: __staticSelector,
-        props,
-        classes,
-        className,
-        style,
-        classNames,
-        styles,
-        unstyled,
-        rootSelector: 'wrapper',
-        vars,
-        varsResolver,
-    });
-    const formatRef = useRef(format);
-    const valueRef = useRef();
-    const scrubTimeoutRef = useRef(-1);
-    const isScrubbingRef = useRef(false);
-    const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';
-    const [_value, setValue, controlled] = useUncontrolled({
-        value,
-        defaultValue,
-        finalValue: '#FFFFFF',
-        onChange,
+  const props = useProps("ColorPicker", defaultProps, _props);
+  const _a = props, {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    format,
+    value,
+    defaultValue,
+    onChange,
+    onChangeEnd,
+    withPicker,
+    size,
+    saturationLabel,
+    hueLabel,
+    alphaLabel,
+    focusable,
+    swatches,
+    swatchesPerRow,
+    fullWidth,
+    onColorSwatchClick,
+    __staticSelector
+  } = _a, others = __objRest(_a, [
+    "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({
+    name: __staticSelector,
+    props,
+    classes,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    rootSelector: "wrapper",
+    vars,
+    varsResolver
+  });
+  const formatRef = useRef(format);
+  const valueRef = useRef();
+  const scrubTimeoutRef = useRef(-1);
+  const isScrubbingRef = useRef(false);
+  const withAlpha = format === "hexa" || format === "rgba" || format === "hsla";
+  const [_value, setValue, controlled] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: "#FFFFFF",
+    onChange
+  });
+  const [parsed, setParsed] = useState(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 = __spreadValues(__spreadValues({}, current), color);
+      valueRef.current = convertHsvaTo(formatRef.current, next);
+      return next;
     });
-    const [parsed, setParsed] = useState(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 = convertHsvaTo(formatRef.current, next);
-            return next;
-        });
-        setValue(valueRef.current);
-    };
-    useDidUpdate(() => {
-        if (isColorValid(value) && !isScrubbingRef.current) {
-            setParsed(parseColor(value));
+    setValue(valueRef.current);
+  };
+  useDidUpdate(() => {
+    if (isColorValid(value) && !isScrubbingRef.current) {
+      setParsed(parseColor(value));
+    }
+  }, [value]);
+  useDidUpdate(() => {
+    formatRef.current = format;
+    setValue(convertHsvaTo(format, parsed));
+  }, [format]);
+  return /* @__PURE__ */ React.createElement(ColorPickerProvider, { value: { getStyles } }, /* @__PURE__ */ React.createElement(Box, __spreadValues(__spreadProps(__spreadValues({ ref }, getStyles("wrapper")), { size }), others), withPicker && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Saturation,
+    {
+      value: parsed,
+      onChange: handleChange,
+      onChangeEnd: ({ s, v }) => onChangeEnd == null ? void 0 : onChangeEnd(convertHsvaTo(formatRef.current, __spreadProps(__spreadValues({}, parsed), { s, v }))),
+      color: _value,
+      size,
+      focusable,
+      saturationLabel,
+      onScrubStart: startScrubbing,
+      onScrubEnd: stopScrubbing
+    }
+  ), /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("body")), /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("sliders")), /* @__PURE__ */ React.createElement(
+    HueSlider,
+    {
+      value: parsed.h,
+      onChange: (h) => handleChange({ h }),
+      onChangeEnd: (h) => onChangeEnd == null ? void 0 : onChangeEnd(convertHsvaTo(formatRef.current, __spreadProps(__spreadValues({}, parsed), { h }))),
+      size,
+      focusable,
+      "aria-label": hueLabel,
+      onScrubStart: startScrubbing,
+      onScrubEnd: stopScrubbing
+    }
+  ), withAlpha && /* @__PURE__ */ React.createElement(
+    AlphaSlider,
+    {
+      value: parsed.a,
+      onChange: (a) => handleChange({ a }),
+      onChangeEnd: (a) => {
+        onChangeEnd == null ? void 0 : onChangeEnd(convertHsvaTo(formatRef.current, __spreadProps(__spreadValues({}, parsed), { a })));
+      },
+      size,
+      color: convertHsvaTo("hex", parsed),
+      focusable,
+      "aria-label": alphaLabel,
+      onScrubStart: startScrubbing,
+      onScrubEnd: stopScrubbing
+    }
+  )), withAlpha && /* @__PURE__ */ React.createElement(ColorSwatch, __spreadValues({ color: _value, radius: "sm" }, getStyles("preview"))))), Array.isArray(swatches) && /* @__PURE__ */ React.createElement(
+    Swatches,
+    {
+      data: swatches,
+      swatchesPerRow,
+      focusable,
+      setValue,
+      onChangeEnd: (color) => {
+        const convertedColor = convertHsvaTo(format, parseColor(color));
+        onColorSwatchClick == null ? void 0 : onColorSwatchClick(convertedColor);
+        onChangeEnd == null ? void 0 : onChangeEnd(convertedColor);
+        if (!controlled) {
+          setParsed(parseColor(color));
         }
-    }, [value]);
-    useDidUpdate(() => {
-        formatRef.current = format;
-        setValue(convertHsvaTo(format, parsed));
-    }, [format]);
-    return (React.createElement(ColorPickerProvider, { value: { getStyles } },
-        React.createElement(Box, Object.assign({ ref: ref }, getStyles('wrapper'), { size: size }, others),
-            withPicker && (React.createElement(React.Fragment, null,
-                React.createElement(Saturation, { value: parsed, onChange: handleChange, onChangeEnd: ({ s, v }) => onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(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.createElement("div", Object.assign({}, getStyles('body')),
-                    React.createElement("div", Object.assign({}, getStyles('sliders')),
-                        React.createElement(HueSlider, { value: parsed.h, onChange: (h) => handleChange({ h }), onChangeEnd: (h) => onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(convertHsvaTo(formatRef.current, Object.assign(Object.assign({}, parsed), { h }))), size: size, focusable: focusable, "aria-label": hueLabel, onScrubStart: startScrubbing, onScrubEnd: stopScrubbing }),
-                        withAlpha && (React.createElement(AlphaSlider, { value: parsed.a, onChange: (a) => handleChange({ a }), onChangeEnd: (a) => {
-                                onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(convertHsvaTo(formatRef.current, Object.assign(Object.assign({}, parsed), { a })));
-                            }, size: size, color: convertHsvaTo('hex', parsed), focusable: focusable, "aria-label": alphaLabel, onScrubStart: startScrubbing, onScrubEnd: stopScrubbing }))),
-                    withAlpha && React.createElement(ColorSwatch, Object.assign({ color: _value, radius: "sm" }, getStyles('preview')))))),
-            Array.isArray(swatches) && (React.createElement(Swatches, { data: swatches, swatchesPerRow: swatchesPerRow, focusable: focusable, setValue: setValue, onChangeEnd: (color) => {
-                    const convertedColor = convertHsvaTo(format, parseColor(color));
-                    onColorSwatchClick === null || onColorSwatchClick === void 0 ? void 0 : onColorSwatchClick(convertedColor);
-                    onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(convertedColor);
-                    if (!controlled) {
-                        setParsed(parseColor(color));
-                    }
-                } })))));
+      }
+    }
+  )));
 });
-ColorPicker.displayName = '@mantine/core/ColorPicker';
+ColorPicker.classes = classes;
+ColorPicker.displayName = "@mantine/core/ColorPicker";
 
 export { ColorPicker };
 //# sourceMappingURL=ColorPicker.js.map

package/esm/components/ColorPicker/ColorPicker.js.map

@@ -1 +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":[],"mappings":"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"}
+{"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.classes = classes;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/ColorSlider/ColorSlider.js

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef } from 'react';
 import { useMove, useDidUpdate, useMergedRef, clampUseMovePosition } from '@mantine/hooks';
 import { Thumb } from '../Thumb/Thumb.js';
@@ -7,51 +6,130 @@ import { useMantineTheme } from '../../../core/MantineProvider/MantineThemeProvi
 import { Box } from '../../../core/Box/Box.js';
 import { rem } from '../../../core/utils/units-converters/rem.js';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const ColorSlider = forwardRef((props, ref) => {
-    const { className, onChange, onChangeEnd, maxValue, round, size = 'md', focusable = true, value, overlays, thumbColor = 'transparent', onScrubStart, onScrubEnd } = props, others = __rest(props, ["className", "onChange", "onChangeEnd", "maxValue", "round", "size", "focusable", "value", "overlays", "thumbColor", "onScrubStart", "onScrubEnd"]);
-    const { getStyles } = useColorPickerContext();
-    const theme = useMantineTheme();
-    const [position, setPosition] = useState({ y: 0, x: value / maxValue });
-    const positionRef = useRef(position);
-    const getChangeValue = (val) => (round ? Math.round(val * maxValue) : val * maxValue);
-    const { ref: sliderRef } = 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,
-    });
-    useDidUpdate(() => {
-        setPosition({ y: 0, x: value / maxValue });
-    }, [value]);
-    const handleArrow = (event, pos) => {
-        event.preventDefault();
-        const _position = 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.createElement("div", Object.assign({}, getStyles('sliderOverlay'), { style: overlay, key: index }))));
-    return (React.createElement(Box, Object.assign({}, others, { ref: 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.createElement(Thumb, Object.assign({ position: position, size: size }, getStyles('thumb', { style: { top: rem(1), background: thumbColor } })))));
+  const _a = props, {
+    className,
+    onChange,
+    onChangeEnd,
+    maxValue,
+    round,
+    size = "md",
+    focusable = true,
+    value,
+    overlays,
+    thumbColor = "transparent",
+    onScrubStart,
+    onScrubEnd
+  } = _a, others = __objRest(_a, [
+    "className",
+    "onChange",
+    "onChangeEnd",
+    "maxValue",
+    "round",
+    "size",
+    "focusable",
+    "value",
+    "overlays",
+    "thumbColor",
+    "onScrubStart",
+    "onScrubEnd"
+  ]);
+  const { getStyles } = useColorPickerContext();
+  const theme = useMantineTheme();
+  const [position, setPosition] = useState({ y: 0, x: value / maxValue });
+  const positionRef = useRef(position);
+  const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
+  const { ref: sliderRef } = useMove(
+    ({ x, y }) => {
+      positionRef.current = { x, y };
+      onChange == null ? void 0 : onChange(getChangeValue(x));
+    },
+    {
+      onScrubEnd: () => {
+        const { x } = positionRef.current;
+        onChangeEnd == null ? void 0 : onChangeEnd(getChangeValue(x));
+        onScrubEnd == null ? void 0 : onScrubEnd();
+      },
+      onScrubStart
+    }
+  );
+  useDidUpdate(() => {
+    setPosition({ y: 0, x: value / maxValue });
+  }, [value]);
+  const handleArrow = (event, pos) => {
+    event.preventDefault();
+    const _position = clampUseMovePosition(pos);
+    onChange == null ? void 0 : onChange(getChangeValue(_position.x));
+    onChangeEnd == null ? 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) => /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getStyles("sliderOverlay")), { style: overlay, key: index })));
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, others), {
+      ref: 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,
+    /* @__PURE__ */ React.createElement(
+      Thumb,
+      __spreadValues({
+        position,
+        size
+      }, getStyles("thumb", { style: { top: rem(1), background: thumbColor } }))
+    )
+  );
 });
-ColorSlider.displayName = '@mantine/core/ColorSlider';
+ColorSlider.displayName = "@mantine/core/ColorSlider";
 
 export { ColorSlider };
 //# sourceMappingURL=ColorSlider.js.map

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

@@ -1 +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":[],"mappings":"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"}
+{"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":[],"mappings":"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"}