@mantine/core 7.0.0-alpha.9 → 7.0.0-beta.0

package/esm/components/ColorPicker/HueSlider/HueSlider.js

@@ -1,22 +1,71 @@
-import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 import { ColorSlider } from '../ColorSlider/ColorSlider.js';
 import { useProps } from '../../../core/MantineProvider/use-props/use-props.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 defaultProps = {};
 const HueSlider = forwardRef((props, ref) => {
-    const _a = useProps('HueSlider', defaultProps, props), { value, onChange, onChangeEnd, color } = _a, others = __rest(_a, ["value", "onChange", "onChangeEnd", "color"]);
-    return (React.createElement(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(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(4)} inset`,
-            },
-        ] })));
+  const _a = useProps(
+    "HueSlider",
+    defaultProps,
+    props
+  ), { value, onChange, onChangeEnd, color } = _a, others = __objRest(_a, ["value", "onChange", "onChangeEnd", "color"]);
+  return /* @__PURE__ */ React.createElement(
+    ColorSlider,
+    __spreadProps(__spreadValues({}, others), {
+      ref,
+      value,
+      onChange,
+      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(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(
+            4
+          )} inset`
+        }
+      ]
+    })
+  );
 });
-HueSlider.displayName = '@mantine/core/HueSlider';
+HueSlider.displayName = "@mantine/core/HueSlider";
 
 export { HueSlider };
 //# sourceMappingURL=HueSlider.js.map

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

@@ -1 +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":[],"mappings":";;;;;;AAIA,MAAM,YAAY,GAAgC,EAAE,CAAC;MAExC,SAAS,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG;IACjF,MAAM,KAAqD,QAAQ,CACjE,WAAW,EACX,YAAY,EACZ,KAAK,CACN,EAJK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,OAI1C,EAJ+C,MAAM,cAAhD,6CAAkD,CAIvD,CAAC;IAEF,QACE,oBAAC,WAAW,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,2BAA2B,GAAG,CAAC,CAAC,CAAC,iCAAiC,GAAG,CAC9E,CAAC,CACF,QAAQ;aACV;SACF,IACD,EACF;AACJ,CAAC,EAAE;AAEH,SAAS,CAAC,WAAW,GAAG,yBAAyB;;;;"}
+{"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":[],"mappings":"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"}

package/esm/components/ColorPicker/Saturation/Saturation.js

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import React, { useState, useRef, useEffect } from 'react';
 import { useMove, clampUseMovePosition } from '@mantine/hooks';
 import { Thumb } from '../Thumb/Thumb.js';
@@ -6,64 +5,147 @@ import { useColorPickerContext } from '../ColorPicker.context.js';
 import { convertHsvaTo } from '../converters/converters.js';
 import { Box } from '../../../core/Box/Box.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;
+};
 function Saturation(_a) {
-    var { className, onChange, onChangeEnd, value, saturationLabel, focusable = true, size, color, onScrubStart, onScrubEnd } = _a, others = __rest(_a, ["className", "onChange", "onChangeEnd", "value", "saturationLabel", "focusable", "size", "color", "onScrubStart", "onScrubEnd"]);
-    const { getStyles } = useColorPickerContext();
-    const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });
-    const positionRef = useRef(position);
-    const { ref } = 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,
-    });
-    useEffect(() => {
-        setPosition({ x: value.s / 100, y: 1 - value.v / 100 });
-    }, [value.s, value.v]);
-    const handleArrow = (event, pos) => {
-        event.preventDefault();
-        const _position = 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.createElement(Box, Object.assign({}, getStyles('saturation'), { ref: ref }, others, { role: "slider", "aria-label": saturationLabel, "aria-valuenow": position.x, "aria-valuetext": convertHsvaTo('rgba', value), tabIndex: focusable ? 0 : -1, onKeyDown: handleKeyDown }),
-        React.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
-            style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },
-        }))),
-        React.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
-            style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },
-        }))),
-        React.createElement("div", Object.assign({}, getStyles('saturationOverlay', {
-            style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },
-        }))),
-        React.createElement(Thumb, Object.assign({ position: position, size: size }, getStyles('thumb', { style: { backgroundColor: color } })))));
+  var _b = _a, {
+    className,
+    onChange,
+    onChangeEnd,
+    value,
+    saturationLabel,
+    focusable = true,
+    size,
+    color,
+    onScrubStart,
+    onScrubEnd
+  } = _b, others = __objRest(_b, [
+    "className",
+    "onChange",
+    "onChangeEnd",
+    "value",
+    "saturationLabel",
+    "focusable",
+    "size",
+    "color",
+    "onScrubStart",
+    "onScrubEnd"
+  ]);
+  const { getStyles } = useColorPickerContext();
+  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });
+  const positionRef = useRef(position);
+  const { ref } = 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 ? void 0 : onScrubEnd();
+      },
+      onScrubStart
+    }
+  );
+  useEffect(() => {
+    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });
+  }, [value.s, value.v]);
+  const handleArrow = (event, pos) => {
+    event.preventDefault();
+    const _position = 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 /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("saturation")), {
+      ref
+    }), others), {
+      role: "slider",
+      "aria-label": saturationLabel,
+      "aria-valuenow": position.x,
+      "aria-valuetext": convertHsvaTo("rgba", value),
+      tabIndex: focusable ? 0 : -1,
+      onKeyDown: handleKeyDown
+    }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({}, getStyles("saturationOverlay", {
+        style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` }
+      }))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({}, getStyles("saturationOverlay", {
+        style: { backgroundImage: "linear-gradient(90deg, #fff, transparent)" }
+      }))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({}, getStyles("saturationOverlay", {
+        style: { backgroundImage: "linear-gradient(0deg, #000, transparent)" }
+      }))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Thumb,
+      __spreadValues({
+        position,
+        size
+      }, getStyles("thumb", { style: { backgroundColor: color } }))
+    )
+  );
 }
-Saturation.displayName = '@mantine/core/Saturation';
+Saturation.displayName = "@mantine/core/Saturation";
 
 export { Saturation };
 //# sourceMappingURL=Saturation.js.map

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

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

package/esm/components/ColorPicker/Swatches/Swatches.js

@@ -1,19 +1,82 @@
-import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useColorPickerContext } from '../ColorPicker.context.js';
 import { ColorSwatch } from '../../ColorSwatch/ColorSwatch.js';
 import { Box } from '../../../core/Box/Box.js';
 
-const Swatches = forwardRef((_a, ref) => {
-    var { className, datatype, setValue, onChangeEnd, size, focusable, data, swatchesPerRow } = _a, others = __rest(_a, ["className", "datatype", "setValue", "onChangeEnd", "size", "focusable", "data", "swatchesPerRow"]);
+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 Swatches = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      datatype,
+      setValue,
+      onChangeEnd,
+      size,
+      focusable,
+      data,
+      swatchesPerRow
+    } = _b, others = __objRest(_b, [
+      "className",
+      "datatype",
+      "setValue",
+      "onChangeEnd",
+      "size",
+      "focusable",
+      "data",
+      "swatchesPerRow"
+    ]);
     const { getStyles } = useColorPickerContext();
-    const colors = data.map((color, index) => (React.createElement(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.createElement(Box, Object.assign({}, getStyles('swatches'), { ref: ref }, others), colors));
-});
-Swatches.displayName = '@mantine/core/Swatches';
+    const colors = data.map((color, index) => /* @__PURE__ */ React.createElement(
+      ColorSwatch,
+      __spreadProps(__spreadValues({}, getStyles("swatch")), {
+        component: "button",
+        type: "button",
+        color,
+        key: index,
+        radius: "sm",
+        onClick: () => {
+          setValue(color);
+          onChangeEnd == null ? void 0 : onChangeEnd(color);
+        },
+        "aria-label": color,
+        tabIndex: focusable ? 0 : -1,
+        "data-swatch": true
+      })
+    ));
+    return /* @__PURE__ */ React.createElement(Box, __spreadValues(__spreadProps(__spreadValues({}, getStyles("swatches")), { ref }), others), colors);
+  }
+);
+Swatches.displayName = "@mantine/core/Swatches";
 
 export { Swatches };
 //# sourceMappingURL=Swatches.js.map

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

@@ -1 +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":[],"mappings":";;;;;;MAca,QAAQ,GAAG,UAAU,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,cATX,mGAUC,CADU;IAIX,MAAM,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE9C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACnC,oBAAC,WAAW,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,QACE,oBAAC,GAAG,oBAAK,SAAS,CAAC,UAAU,CAAC,IAAE,GAAG,EAAE,GAAG,IAAM,MAAM,GACjD,MAAM,CACH,EACN;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
+{"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":[],"mappings":"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"}

package/esm/components/ColorPicker/Thumb/Thumb.js

@@ -1,17 +1,56 @@
-import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useColorPickerContext } from '../ColorPicker.context.js';
 import { Box } from '../../../core/Box/Box.js';
 
-const Thumb = forwardRef((_a, ref) => {
-    var { className, style, size, position } = _a, others = __rest(_a, ["className", "style", "size", "position"]);
+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 Thumb = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, style, size, position } = _b, others = __objRest(_b, ["className", "style", "size", "position"]);
     const { getStyles } = useColorPickerContext();
-    return (React.createElement(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';
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, getStyles("thumb", { style })), {
+        __vars: {
+          "--_thumb-y-offset": `${position.y * 100}%`,
+          "--_thumb-x-offset": `${position.x * 100}%`
+        }
+      }), others)
+    );
+  }
+);
+Thumb.displayName = "@mantine/core/ColorPickerThumb";
 
 export { Thumb };
 //# sourceMappingURL=Thumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Thumb.js","sources":["../../../../src/components/ColorPicker/Thumb/Thumb.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, MantineSize } from '../../../core';\nimport { useColorPickerContext } from '../ColorPicker.context';\n\nexport interface ThumbProps extends React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n  position: { x: number; y: number };\n  size: MantineSize | (string & {});\n}\n\nexport const Thumb = forwardRef<HTMLDivElement, ThumbProps>(\n  ({ className, style, size, position, ...others }, ref) => {\n    const { getStyles } = useColorPickerContext();\n    return (\n      <Box\n        ref={ref}\n        {...getStyles('thumb', { style })}\n        __vars={{\n          '--_thumb-y-offset': `${position.y * 100}%`,\n          '--_thumb-x-offset': `${position.x * 100}%`,\n        }}\n        {...others}\n      />\n    );\n  }\n);\n\nThumb.displayName = '@mantine/core/ColorPickerThumb';\n"],"names":[],"mappings":";;;;;MAUa,KAAK,GAAG,UAAU,CAC7B,CAAC,EAA+C,EAAE,GAAG;QAApD,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,OAAa,EAAR,MAAM,cAA7C,0CAA+C,CAAF;IAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C,QACE,oBAAC,GAAG,kBACF,GAAG,EAAE,GAAG,IACJ,SAAS,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,IACjC,MAAM,EAAE;YACN,mBAAmB,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG;YAC3C,mBAAmB,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG;SAC5C,IACG,MAAM,EACV,EACF;AACJ,CAAC,EACD;AAEF,KAAK,CAAC,WAAW,GAAG,gCAAgC;;;;"}
+{"version":3,"file":"Thumb.js","sources":["../../../../src/components/ColorPicker/Thumb/Thumb.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, MantineSize } from '../../../core';\nimport { useColorPickerContext } from '../ColorPicker.context';\n\nexport interface ThumbProps extends React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n  position: { x: number; y: number };\n  size: MantineSize | (string & {});\n}\n\nexport const Thumb = forwardRef<HTMLDivElement, ThumbProps>(\n  ({ className, style, size, position, ...others }, ref) => {\n    const { getStyles } = useColorPickerContext();\n    return (\n      <Box\n        ref={ref}\n        {...getStyles('thumb', { style })}\n        __vars={{\n          '--_thumb-y-offset': `${position.y * 100}%`,\n          '--_thumb-x-offset': `${position.x * 100}%`,\n        }}\n        {...others}\n      />\n    );\n  }\n);\n\nThumb.displayName = '@mantine/core/ColorPickerThumb';\n"],"names":[],"mappings":"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"}