@mantine/core 7.0.0-alpha.2 → 7.0.0-alpha.21

package/esm/components/ColorInput/ColorInput.js

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import { useUncontrolled, useEyeDropper, useDidUpdate } from '@mantine/hooks';
+import { EyeDropperIcon } from './EyeDropperIcon.js';
+import classes from './ColorInput.module.css.js';
+import { useInputProps } from '../Input/use-input-props.js';
+import { ActionIcon } from '../ActionIcon/ActionIcon.js';
+import { convertHsvaTo } from '../ColorPicker/converters/converters.js';
+import { parseColor, isColorValid } from '../ColorPicker/converters/parsers.js';
+import { Input } from '../Input/Input.js';
+import { Popover } from '../Popover/Popover.js';
+import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
+import { ColorPicker } from '../ColorPicker/ColorPicker.js';
+import { InputBase } from '../InputBase/InputBase.js';
+import { factory } from '../../core/factory/factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.js';
+import { useResolvedStylesApi } from '../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.js';
+import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+import { getSize } 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 = {
+  size: "sm",
+  format: "hex",
+  fixOnBlur: true,
+  withPreview: true,
+  swatchesPerRow: 10,
+  withPicker: true,
+  popoverProps: { transitionProps: { transition: "fade", duration: 0 } },
+  withEyeDropper: true
+};
+const varsResolver = createVarsResolver((_, { size }) => ({
+  eyeDropperIcon: {
+    "--ci-eye-dropper-icon-size": getSize(size, "ci-eye-dropper-icon-size")
+  },
+  colorPreview: {
+    "--ci-preview-size": getSize(size, "ci-preview-size")
+  }
+}));
+const ColorInput = factory((_props, ref) => {
+  const props = useProps("ColorInput", defaultProps, _props);
+  const _a = useInputProps("ColorInput", defaultProps, _props), {
+    classNames,
+    styles,
+    unstyled,
+    disallowInput,
+    fixOnBlur,
+    popoverProps,
+    withPreview,
+    withEyeDropper,
+    eyeDropperIcon,
+    closeOnColorSwatchClick,
+    eyeDropperButtonProps,
+    value,
+    defaultValue,
+    onChange,
+    onChangeEnd,
+    onClick,
+    onFocus,
+    onBlur,
+    inputProps,
+    format,
+    wrapperProps,
+    readOnly,
+    withPicker,
+    swatches,
+    disabled,
+    leftSection,
+    rightSection,
+    swatchesPerRow
+  } = _a, others = __objRest(_a, [
+    "classNames",
+    "styles",
+    "unstyled",
+    "disallowInput",
+    "fixOnBlur",
+    "popoverProps",
+    "withPreview",
+    "withEyeDropper",
+    "eyeDropperIcon",
+    "closeOnColorSwatchClick",
+    "eyeDropperButtonProps",
+    "value",
+    "defaultValue",
+    "onChange",
+    "onChangeEnd",
+    "onClick",
+    "onFocus",
+    "onBlur",
+    "inputProps",
+    "format",
+    "wrapperProps",
+    "readOnly",
+    "withPicker",
+    "swatches",
+    "disabled",
+    "leftSection",
+    "rightSection",
+    "swatchesPerRow"
+  ]);
+  const getStyles = useStyles({
+    name: "ColorInput",
+    props,
+    classes,
+    classNames,
+    styles,
+    unstyled,
+    rootSelector: "wrapper",
+    vars: props.vars,
+    varsResolver
+  });
+  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+    classNames,
+    styles,
+    props
+  });
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const [lastValidValue, setLastValidValue] = useState("");
+  const [_value, setValue] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: "",
+    onChange
+  });
+  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
+  const eyeDropper = /* @__PURE__ */ React.createElement(
+    ActionIcon,
+    __spreadProps(__spreadValues(__spreadValues({}, eyeDropperButtonProps), getStyles("eyeDropperButton", {
+      className: eyeDropperButtonProps == null ? void 0 : eyeDropperButtonProps.className,
+      style: eyeDropperButtonProps == null ? void 0 : eyeDropperButtonProps.style
+    })), {
+      variant: "subtle",
+      color: "gray",
+      size: inputProps.size,
+      onClick: () => openEyeDropper().then((payload) => {
+        if (payload == null ? void 0 : payload.sRGBHex) {
+          const color = convertHsvaTo(format, parseColor(payload.sRGBHex));
+          setValue(color);
+          onChangeEnd == null ? void 0 : onChangeEnd(color);
+        }
+      }).catch(() => {
+      })
+    }),
+    eyeDropperIcon || /* @__PURE__ */ React.createElement(EyeDropperIcon, __spreadValues({}, getStyles("eyeDropperIcon")))
+  );
+  const handleInputFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+    setDropdownOpened(true);
+  };
+  const handleInputBlur = (event) => {
+    fixOnBlur && setValue(lastValidValue);
+    onBlur == null ? void 0 : onBlur(event);
+    setDropdownOpened(false);
+  };
+  const handleInputClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    setDropdownOpened(true);
+  };
+  useEffect(() => {
+    if (isColorValid(_value) || _value.trim() === "") {
+      setLastValidValue(_value);
+    }
+  }, [_value]);
+  useDidUpdate(() => {
+    if (isColorValid(_value)) {
+      setValue(convertHsvaTo(format, parseColor(_value)));
+    }
+  }, [format]);
+  return /* @__PURE__ */ React.createElement(
+    Input.Wrapper,
+    __spreadProps(__spreadValues({}, wrapperProps), {
+      classNames: resolvedClassNames,
+      styles: resolvedStyles,
+      __staticSelector: "ColorInput"
+    }),
+    /* @__PURE__ */ React.createElement(
+      Popover,
+      __spreadProps(__spreadValues({
+        __staticSelector: "ColorInput",
+        position: "bottom-start",
+        offset: 5
+      }, popoverProps), {
+        opened: dropdownOpened,
+        classNames: resolvedClassNames,
+        styles: resolvedStyles,
+        unstyled,
+        withRoles: false,
+        disabled: readOnly || withPicker === false && (!Array.isArray(swatches) || swatches.length === 0)
+      }),
+      /* @__PURE__ */ React.createElement(Popover.Target, null, /* @__PURE__ */ React.createElement(
+        Input,
+        __spreadProps(__spreadValues(__spreadValues({
+          autoComplete: "off"
+        }, others), inputProps), {
+          classNames: resolvedClassNames,
+          styles: resolvedStyles,
+          disabled,
+          ref,
+          __staticSelector: "ColorInput",
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur,
+          onClick: handleInputClick,
+          spellCheck: false,
+          value: _value,
+          onChange: (event) => {
+            const inputValue = event.currentTarget.value;
+            setValue(inputValue);
+            if (isColorValid(inputValue)) {
+              onChangeEnd == null ? void 0 : onChangeEnd(convertHsvaTo(format, parseColor(inputValue)));
+            }
+          },
+          leftSection: leftSection || (withPreview ? /* @__PURE__ */ React.createElement(
+            ColorSwatch,
+            __spreadValues({
+              color: isColorValid(_value) ? _value : "#fff",
+              size: "var(--ci-preview-size)"
+            }, getStyles("colorPreview"))
+          ) : null),
+          readOnly: disallowInput || readOnly,
+          pointer: disallowInput,
+          unstyled,
+          rightSection: rightSection || (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)
+        })
+      )),
+      /* @__PURE__ */ React.createElement(Popover.Dropdown, { onMouseDown: (event) => event.preventDefault(), p: inputProps.size }, /* @__PURE__ */ React.createElement(
+        ColorPicker,
+        {
+          __staticSelector: "ColorInput",
+          value: _value,
+          onChange: setValue,
+          onChangeEnd,
+          format,
+          swatches,
+          swatchesPerRow,
+          withPicker,
+          size: inputProps.size,
+          focusable: false,
+          unstyled,
+          styles: resolvedStyles,
+          classNames: resolvedClassNames,
+          onColorSwatchClick: () => closeOnColorSwatchClick && setDropdownOpened(false)
+        }
+      ))
+    )
+  );
+});
+ColorInput.classes = InputBase.classes;
+ColorInput.displayName = "@mantine/core/ColorInput";
+
+export { ColorInput };
+//# sourceMappingURL=ColorInput.js.map

package/esm/components/ColorInput/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  Factory,\n  useResolvedStylesApi,\n  useProps,\n  useStyles,\n  createVarsResolver,\n  getSize,\n} from '../../core';\nimport { InputBase } from '../InputBase';\nimport {\n  __ColorPickerProps,\n  ColorPickerStylesNames,\n  ColorPicker,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { __BaseInputProps, Input, InputVariant, __InputStylesNames, useInputProps } from '../Input';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport { ActionIcon } from '../ActionIcon';\nimport { ColorSwatch } from '../ColorSwatch';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches, `false` by default */\n  disallowInput?: boolean;\n\n  /** Determines whether the input value should be reset to the last known valid value when the input loses focus, `true` by default */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the Popover component */\n  popoverProps?: PopoverProps;\n\n  /** Determines whether the preview color swatch should be displayed in the left section of the input, `true` by default */\n  withPreview?: boolean;\n\n  /** Determines whether eye dropper button should be displayed in the right section, `true` by default */\n  withEyeDropper?: boolean;\n\n  /** An icon that will replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** Determines whether the dropdown should be closed when one of the color swatches is clicked, `false` by default */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps: Partial<ColorInputProps> = {\n  size: 'sm',\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 10,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n};\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props, ref) => {\n  const props = useProps('ColorInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format,\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      size={inputProps.size}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format!, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format!, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        {...popoverProps}\n        opened={dropdownOpened}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            ref={ref}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format!, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown onMouseDown={(event) => event.preventDefault()} p={inputProps.size}>\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorInput/ColorInput.module.css.js

@@ -0,0 +1,4 @@
+var classes = {"eyeDropperIcon":"m-b077c2bc","colorPreview":"m-c5ccdcab"};
+
+export default classes;
+//# sourceMappingURL=ColorInput.module.css.js.map

package/esm/components/ColorInput/ColorInput.module.css.js.map

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

package/esm/components/ColorInput/EyeDropperIcon.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+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 __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 EyeDropperIcon(_a) {
+  var _b = _a, { style } = _b, others = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    __spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      style: __spreadValues({
+        width: "var(--ci-eye-dropper-icon-size)",
+        height: "var(--ci-eye-dropper-icon-size)"
+      }, style),
+      viewBox: "0 0 24 24",
+      strokeWidth: "1.5",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, others),
+    /* @__PURE__ */ React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M11 7l6 6" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z" })
+  );
+}
+
+export { EyeDropperIcon };
+//# sourceMappingURL=EyeDropperIcon.js.map

package/esm/components/ColorInput/EyeDropperIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeDropperIcon.js","sources":["../../../src/components/ColorInput/EyeDropperIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport function EyeDropperIcon({ style, ...others }: React.ComponentPropsWithoutRef<'svg'>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        width: 'var(--ci-eye-dropper-icon-size)',\n        height: 'var(--ci-eye-dropper-icon-size)',\n        ...style,\n      }}\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...others}\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M11 7l6 6\" />\n      <path d=\"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z\" />\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/AlphaSlider/AlphaSlider.js

@@ -37,29 +37,38 @@ var __objRest = (source, exclude) => {
 };
 const defaultProps = {};
 const AlphaSlider = forwardRef((props, ref) => {
-  const _a = useProps("AlphaSlider", 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: (val) => onChange == null ? void 0 : onChange(round(val, 2)),
-    onChangeEnd: (val) => onChangeEnd == null ? void 0 : onChangeEnd(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(8)} ${rem(8)}`,
-        backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} -${rem(4)}, -${rem(4)} 0`
-      },
-      {
-        backgroundImage: `linear-gradient(90deg, transparent, ${color})`
-      },
-      {
-        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(
+    "AlphaSlider",
+    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: (val) => onChange == null ? void 0 : onChange(round(val, 2)),
+      onChangeEnd: (val) => onChangeEnd == null ? void 0 : onChangeEnd(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(8)} ${rem(8)}`,
+          backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} -${rem(4)}, -${rem(4)} 0`
+        },
+        {
+          backgroundImage: `linear-gradient(90deg, transparent, ${color})`
+        },
+        {
+          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(
+            4
+          )} inset`
+        }
+      ]
+    })
+  );
 });
 AlphaSlider.displayName = "@mantine/core/AlphaSlider";
 

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

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

package/esm/components/ColorPicker/ColorPicker.js

@@ -54,16 +54,18 @@ const defaultProps = {
   focusable: true,
   __staticSelector: "ColorPicker"
 };
-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")
-  }
-}));
+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")
+    }
+  })
+);
 const ColorPicker = factory((_props, ref) => {
   const props = useProps("ColorPicker", defaultProps, _props);
   const _a = props, {
@@ -165,61 +167,65 @@ const ColorPicker = factory((_props, ref) => {
     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));
+  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));
+        }
       }
     }
-  })));
+  )));
 });
+ColorPicker.classes = classes;
 ColorPicker.displayName = "@mantine/core/ColorPicker";
 
 export { ColorPicker };