@mantine/core 5.0.0-alpha.2 → 5.0.0-alpha.22

package/cjs/components/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport { extractSystemStyles, DefaultProps, useMantineDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be collapsed */\n  children: React.ReactNode;\n\n  /** Opened state */\n  in: boolean;\n\n  /** Called each time transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Transition timing function */\n  transitionTimingFunction?: string;\n\n  /** Should opacity be animated */\n  animateOpacity?: boolean;\n}\n\nconst defaultProps: Partial<CollapseProps> = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n};\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n  const {\n    children,\n    in: opened,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    animateOpacity,\n    ...others\n  } = useMantineDefaultProps('Collapse', defaultProps, props);\n\n  const reduceMotion = useReducedMotion();\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const getCollapseProps = useCollapse({\n    opened,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n  });\n\n  if (duration === 0) {\n    return opened ? <Box {...rest}>{children}</Box> : null;\n  }\n\n  return (\n    <Box {...getCollapseProps({ style, ref, ...rest, ...systemStyles })}>\n      <div\n        style={{\n          opacity: opened || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n        }}\n      >\n        {children}\n      </div>\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"names":["forwardRef","useMantineDefaultProps","useReducedMotion","extractSystemStyles","useCollapse","React","Box"],"mappings":";;;;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAMF,MAAM,YAAY,GAAG;AACrB,EAAE,kBAAkB,EAAE,GAAG;AACzB,EAAE,wBAAwB,EAAE,MAAM;AAClC,EAAE,cAAc,EAAE,IAAI;AACtB,CAAC,CAAC;AACU,MAAC,QAAQ,GAAGA,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACnD,EAAE,MAAM,EAAE,GAAGC,6BAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACtE,IAAI,QAAQ;AACZ,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,IAAI,eAAe;AACnB,IAAI,cAAc;AAClB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,OAAO;AACX,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAGC,sBAAgB,EAAE,CAAC;AAC1C,EAAE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,kBAAkB,CAAC;AACzD,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAGC,0BAAmB,CAAC,MAAM,CAAC,CAAC;AAC7D,EAAE,MAAM,gBAAgB,GAAGC,uBAAW,CAAC;AACvC,IAAI,MAAM;AACV,IAAI,kBAAkB,EAAE,QAAQ;AAChC,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,IAAI,QAAQ,KAAK,CAAC,EAAE;AACtB,IAAI,OAAO,MAAM,mBAAmBC,cAAK,CAAC,aAAa,CAACC,OAAG,EAAE,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC;AACxG,GAAG;AACH,EAAE,uBAAuBD,cAAK,CAAC,aAAa,CAACC,OAAG,EAAE,cAAc,CAAC,EAAE,EAAE,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACvM,IAAI,KAAK,EAAE;AACX,MAAM,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC;AAChD,MAAM,UAAU,EAAE,cAAc,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAC,GAAG,MAAM;AAC/F,KAAK;AACL,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AAChB,CAAC,EAAE;AACH,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
+{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport {\n  extractSystemStyles,\n  DefaultProps,\n  useComponentDefaultProps,\n  useMantineTheme,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be collapsed */\n  children: React.ReactNode;\n\n  /** Opened state */\n  in: boolean;\n\n  /** Called each time transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Transition timing function */\n  transitionTimingFunction?: string;\n\n  /** Should opacity be animated */\n  animateOpacity?: boolean;\n}\n\nconst defaultProps: Partial<CollapseProps> = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n};\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n  const {\n    children,\n    in: opened,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    animateOpacity,\n    ...others\n  } = useComponentDefaultProps('Collapse', defaultProps, props);\n  const theme = useMantineTheme();\n\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const getCollapseProps = useCollapse({\n    opened,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n  });\n\n  if (duration === 0) {\n    return opened ? <Box {...rest}>{children}</Box> : null;\n  }\n\n  return (\n    <Box {...getCollapseProps({ style, ref, ...rest, ...systemStyles })}>\n      <div\n        style={{\n          opacity: opened || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n        }}\n      >\n        {children}\n      </div>\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"names":["forwardRef","useComponentDefaultProps","useMantineTheme","useReducedMotion","extractSystemStyles","useCollapse","React","Box"],"mappings":"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"}

package/cjs/components/ColorInput/ColorInput.js

@@ -9,9 +9,8 @@ var ColorPicker = require('../ColorPicker/ColorPicker.js');
 var useInputProps = require('../Input/use-input-props.js');
 var parsers = require('../ColorPicker/converters/parsers.js');
 var converters = require('../ColorPicker/converters/converters.js');
-var InputWrapper = require('../InputWrapper/InputWrapper.js');
-var Popover = require('../Popover/Popover.js');
 var Input = require('../Input/Input.js');
+var Popover = require('../Popover/Popover.js');
 var ColorSwatch = require('../ColorSwatch/ColorSwatch.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
@@ -128,7 +127,6 @@ const ColorInput = React.forwardRef((props, ref) => {
     value,
     defaultValue,
     finalValue: "",
-    rule: (val) => typeof val === "string",
     onChange
   });
   const handleInputFocus = (event) => {
@@ -150,7 +148,7 @@ const ColorInput = React.forwardRef((props, ref) => {
       setValue(converters.convertHsvaTo(format, parsers.parseColor(_value)));
     }
   }, [format]);
-  return /* @__PURE__ */ React__default.createElement(InputWrapper.InputWrapper, __spreadProps(__spreadValues({}, wrapperProps), {
+  return /* @__PURE__ */ React__default.createElement(Input.Input.Wrapper, __spreadProps(__spreadValues({}, wrapperProps), {
     __staticSelector: "ColorInput"
   }), /* @__PURE__ */ React__default.createElement(Popover.Popover, {
     __staticSelector: "ColorInput",

package/cjs/components/ColorInput/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, getDefaultZIndex, MantineShadow, useMantineTheme } from '@mantine/styles';\nimport { InputWrapper, InputWrapperBaseProps, InputWrapperStylesNames } from '../InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames, useInputProps } from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popover, PopoverStylesNames } from '../Popover';\nimport { MantineTransition } from '../Transition';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | PopoverStylesNames;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputBaseProps,\n    ColorPickerBaseProps,\n    DefaultProps<ColorInputStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'defaultValue' | 'value'> {\n  /** Disallow free input */\n  disallowInput?: boolean;\n\n  /** call onChange with last valid value onBlur */\n  fixOnBlur?: boolean;\n\n  /** Dropdown element z-index */\n  dropdownZIndex?: number;\n\n  /** Display swatch with color preview on the left side of input */\n  withPreview?: boolean;\n\n  /** Dropdown transition name or object */\n  transition?: MantineTransition;\n\n  /** Dropdown appear/disappear transition duration in ms */\n  transitionDuration?: number;\n\n  /** Dropdown transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\n\n  /** Dropdown box-shadow, key of theme.shadows */\n  shadow?: MantineShadow;\n}\n\nconst SWATCH_SIZES = {\n  xs: 16,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 36,\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  transition: 'pop-top-left',\n  dropdownZIndex: getDefaultZIndex('popover'),\n  transitionDuration: 0,\n  withinPortal: true,\n  shadow: 'md',\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (props: ColorInputProps, ref) => {\n    const {\n      wrapperProps,\n      inputProps,\n      format,\n      onChange,\n      onFocus,\n      onBlur,\n      value,\n      defaultValue,\n      disallowInput,\n      fixOnBlur,\n      withPreview,\n      swatchesPerRow,\n      withPicker,\n      icon,\n      transition,\n      dropdownZIndex,\n      transitionDuration,\n      transitionTimingFunction,\n      withinPortal,\n      swatches,\n      shadow,\n      classNames,\n      styles,\n      unstyled,\n      ...others\n    } = useInputProps('ColorInput', defaultProps, props);\n\n    const theme = useMantineTheme();\n    const [dropdownOpened, setDropdownOpened] = useState(false);\n    const [lastValidValue, setLastValidValue] = useState('');\n    const [_value, setValue] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: '',\n      rule: (val) => typeof val === 'string',\n      onChange,\n    });\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onFocus === 'function' && onFocus(event);\n      setDropdownOpened(true);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onBlur === 'function' && onBlur(event);\n      setDropdownOpened(false);\n      fixOnBlur && setValue(lastValidValue);\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      <InputWrapper {...wrapperProps} __staticSelector=\"ColorInput\">\n        <Popover\n          __staticSelector=\"ColorInput\"\n          position=\"bottom-start\"\n          offset={5}\n          zIndex={dropdownZIndex}\n          withinPortal={withinPortal}\n          transitionDuration={transitionDuration}\n          transition={transition}\n          opened={dropdownOpened}\n          shadow={shadow}\n          classNames={classNames}\n          styles={styles}\n          unstyled={unstyled}\n        >\n          <Popover.Target>\n            <div>\n              <Input<'input'>\n                {...others}\n                {...inputProps}\n                ref={ref}\n                __staticSelector=\"ColorInput\"\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                spellCheck={false}\n                value={_value}\n                onChange={(event) => setValue(event.currentTarget.value)}\n                autoComplete=\"nope\"\n                icon={\n                  icon ||\n                  (withPreview ? (\n                    <ColorSwatch\n                      color={isColorValid(_value) ? _value : '#fff'}\n                      size={theme.fn.size({ size: inputProps.size, sizes: SWATCH_SIZES })}\n                    />\n                  ) : null)\n                }\n                readOnly={disallowInput}\n                sx={{ cursor: disallowInput ? 'pointer' : undefined }}\n                unstyled={unstyled}\n                classNames={classNames}\n                styles={styles}\n              />\n            </div>\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              format={format}\n              swatches={swatches}\n              swatchesPerRow={swatchesPerRow}\n              withPicker={withPicker}\n              size={inputProps.size}\n              focusable={false}\n              unstyled={unstyled}\n              styles={styles}\n              classNames={classNames}\n            />\n          </Popover.Dropdown>\n        </Popover>\n      </InputWrapper>\n    );\n  }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":["getDefaultZIndex","forwardRef","useInputProps","styles","useMantineTheme","useState","useUncontrolled","useEffect","isColorValid","useDidUpdate","convertHsvaTo","parseColor","React","InputWrapper","Popover","Input","ColorSwatch","ColorPicker"],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, getDefaultZIndex, MantineShadow, useMantineTheme } from '@mantine/styles';\nimport {\n  InputWrapperBaseProps,\n  InputWrapperStylesNames,\n  Input,\n  InputSharedProps,\n  InputStylesNames,\n  useInputProps,\n} from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popover, PopoverStylesNames } from '../Popover';\nimport { MantineTransition } from '../Transition';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | PopoverStylesNames;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputSharedProps,\n    ColorPickerBaseProps,\n    DefaultProps<ColorInputStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'defaultValue' | 'value'> {\n  /** Disallow free input */\n  disallowInput?: boolean;\n\n  /** call onChange with last valid value onBlur */\n  fixOnBlur?: boolean;\n\n  /** Dropdown element z-index */\n  dropdownZIndex?: number;\n\n  /** Display swatch with color preview on the left side of input */\n  withPreview?: boolean;\n\n  /** Dropdown transition name or object */\n  transition?: MantineTransition;\n\n  /** Dropdown appear/disappear transition duration in ms */\n  transitionDuration?: number;\n\n  /** Dropdown transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\n\n  /** Dropdown box-shadow, key of theme.shadows */\n  shadow?: MantineShadow;\n}\n\nconst SWATCH_SIZES = {\n  xs: 16,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 36,\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  transition: 'pop-top-left',\n  dropdownZIndex: getDefaultZIndex('popover'),\n  transitionDuration: 0,\n  withinPortal: true,\n  shadow: 'md',\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (props: ColorInputProps, ref) => {\n    const {\n      wrapperProps,\n      inputProps,\n      format,\n      onChange,\n      onFocus,\n      onBlur,\n      value,\n      defaultValue,\n      disallowInput,\n      fixOnBlur,\n      withPreview,\n      swatchesPerRow,\n      withPicker,\n      icon,\n      transition,\n      dropdownZIndex,\n      transitionDuration,\n      transitionTimingFunction,\n      withinPortal,\n      swatches,\n      shadow,\n      classNames,\n      styles,\n      unstyled,\n      ...others\n    } = useInputProps('ColorInput', defaultProps, props);\n\n    const theme = useMantineTheme();\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 handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onFocus === 'function' && onFocus(event);\n      setDropdownOpened(true);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onBlur === 'function' && onBlur(event);\n      setDropdownOpened(false);\n      fixOnBlur && setValue(lastValidValue);\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 {...wrapperProps} __staticSelector=\"ColorInput\">\n        <Popover\n          __staticSelector=\"ColorInput\"\n          position=\"bottom-start\"\n          offset={5}\n          zIndex={dropdownZIndex}\n          withinPortal={withinPortal}\n          transitionDuration={transitionDuration}\n          transition={transition}\n          opened={dropdownOpened}\n          shadow={shadow}\n          classNames={classNames}\n          styles={styles}\n          unstyled={unstyled}\n        >\n          <Popover.Target>\n            <div>\n              <Input<'input'>\n                {...others}\n                {...inputProps}\n                ref={ref}\n                __staticSelector=\"ColorInput\"\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                spellCheck={false}\n                value={_value}\n                onChange={(event) => setValue(event.currentTarget.value)}\n                autoComplete=\"nope\"\n                icon={\n                  icon ||\n                  (withPreview ? (\n                    <ColorSwatch\n                      color={isColorValid(_value) ? _value : '#fff'}\n                      size={theme.fn.size({ size: inputProps.size, sizes: SWATCH_SIZES })}\n                    />\n                  ) : null)\n                }\n                readOnly={disallowInput}\n                sx={{ cursor: disallowInput ? 'pointer' : undefined }}\n                unstyled={unstyled}\n                classNames={classNames}\n                styles={styles}\n              />\n            </div>\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              format={format}\n              swatches={swatches}\n              swatchesPerRow={swatchesPerRow}\n              withPicker={withPicker}\n              size={inputProps.size}\n              focusable={false}\n              unstyled={unstyled}\n              styles={styles}\n              classNames={classNames}\n            />\n          </Popover.Dropdown>\n        </Popover>\n      </Input.Wrapper>\n    );\n  }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":["getDefaultZIndex","forwardRef","useInputProps","styles","useMantineTheme","useState","useUncontrolled","useEffect","isColorValid","useDidUpdate","convertHsvaTo","parseColor","React","Input","Popover","ColorSwatch","ColorPicker"],"mappings":"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"}

package/cjs/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('@mantine/hooks');
-var utils = require('@mantine/utils');
 var styles = require('@mantine/styles');
 var ColorSwatch = require('../ColorSwatch/ColorSwatch.js');
 var HueSlider = require('./HueSlider/HueSlider.js');
@@ -63,7 +62,7 @@ const defaultProps = {
   __staticSelector: "ColorPicker"
 };
 const ColorPicker = React.forwardRef((props, ref) => {
-  const _a = styles.useMantineDefaultProps("ColorPicker", defaultProps, props), {
+  const _a = styles.useComponentDefaultProps("ColorPicker", defaultProps, props), {
     value,
     defaultValue,
     onChange,
@@ -80,7 +79,8 @@ const ColorPicker = React.forwardRef((props, ref) => {
     alphaLabel,
     className,
     styles: styles$1,
-    classNames
+    classNames,
+    unstyled
   } = _a, others = __objRest(_a, [
     "value",
     "defaultValue",
@@ -98,14 +98,15 @@ const ColorPicker = React.forwardRef((props, ref) => {
     "alphaLabel",
     "className",
     "styles",
-    "classNames"
+    "classNames",
+    "unstyled"
   ]);
-  const { classes, cx, theme } = ColorPicker_styles['default']({ size, fullWidth }, { classNames, styles: styles$1, name: __staticSelector });
+  const { classes, cx, theme } = ColorPicker_styles['default']({ size, fullWidth }, { classNames, styles: styles$1, name: __staticSelector, unstyled });
   const formatRef = React.useRef(format);
   const valueRef = React.useRef(null);
   const updateRef = React.useRef(true);
   const withAlpha = format === "rgba" || format === "hsla";
-  const [_value, setValue] = utils.useUncontrolled({
+  const [_value, setValue] = hooks.useUncontrolled({
     value,
     defaultValue,
     finalValue: "#FFFFFF",

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { useUncontrolled } from '@mantine/utils';\nimport { DefaultProps, MantineSize, Selectors, useMantineDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n  | Selectors<typeof useStyles>\n  | ColorSliderStylesNames\n  | SwatchesStylesNames\n  | SaturationStylesNames\n  | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when color changes */\n  onChange?(color: string): void;\n\n  /** Color format */\n  format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\n\n  /** Set to false to display swatches only */\n  withPicker?: boolean;\n\n  /** Predefined colors */\n  swatches?: string[];\n\n  /** Number of swatches displayed in one row */\n  swatchesPerRow?: number;\n\n  /** Predefined component size */\n  size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n  extends DefaultProps<ColorPickerStylesNames>,\n    ColorPickerBaseProps,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  /** Force picker to take 100% width of its container */\n  fullWidth?: boolean;\n\n  /** Should interactive elements be focusable */\n  focusable?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\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\nconst SWATCH_SIZES = {\n  xs: 26,\n  sm: 34,\n  md: 42,\n  lg: 50,\n  xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n  swatchesPerRow: 10,\n  size: 'sm',\n  withPicker: true,\n  focusable: true,\n  __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (props: ColorPickerProps, ref) => {\n    const {\n      value,\n      defaultValue,\n      onChange,\n      format,\n      swatches,\n      swatchesPerRow,\n      size,\n      withPicker,\n      fullWidth,\n      focusable,\n      __staticSelector,\n      saturationLabel,\n      hueLabel,\n      alphaLabel,\n      className,\n      styles,\n      classNames,\n      ...others\n    } = useMantineDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { size, fullWidth },\n      { classNames, styles, name: __staticSelector }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const updateRef = useRef(true);\n    const withAlpha = format === 'rgba' || format === 'hsla';\n\n    const [_value, setValue] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: '#FFFFFF',\n      onChange,\n    });\n\n    const [parsed, setParsed] = useState(parseColor(_value));\n\n    const handleChange = (color: Partial<HsvaColor>) => {\n      updateRef.current = false;\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      // Does not work any other way\n      setTimeout(() => {\n        updateRef.current = true;\n      }, 0);\n    };\n\n    useDidUpdate(() => {\n      if (isColorValid(value) && updateRef.current) {\n        setParsed(parseColor(value));\n        updateRef.current = true;\n      }\n    }, [value]);\n\n    useDidUpdate(() => {\n      formatRef.current = format;\n      setValue(convertHsvaTo(format, parsed));\n    }, [format]);\n\n    return (\n      <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              color={_value}\n              styles={styles}\n              classNames={classNames}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              __staticSelector={__staticSelector}\n            />\n\n            <div className={classes.body}>\n              <div className={classes.sliders}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  size={size}\n                  styles={styles}\n                  classNames={classNames}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  __staticSelector={__staticSelector}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    style={{ marginTop: 6 }}\n                    styles={styles}\n                    classNames={classNames}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    __staticSelector={__staticSelector}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n                  className={classes.preview}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            onSelect={handleChange}\n            style={{ marginTop: 5 }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\n          />\n        )}\n      </Box>\n    );\n  }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":["forwardRef","useMantineDefaultProps","styles","useStyles","useRef","useUncontrolled","useState","parseColor","convertHsvaTo","useDidUpdate","isColorValid","React","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAaF,MAAM,YAAY,GAAG;AACrB,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;AACrB,EAAE,cAAc,EAAE,EAAE;AACpB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,UAAU,EAAE,IAAI;AAClB,EAAE,SAAS,EAAE,IAAI;AACjB,EAAE,gBAAgB,EAAE,aAAa;AACjC,CAAC,CAAC;AACU,MAAC,WAAW,GAAGA,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACtD,EAAE,MAAM,EAAE,GAAGC,6BAAsB,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACzE,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,IAAI;AACR,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;AACb,YAAIC,QAAM;AACV,IAAI,UAAU;AACd,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,iBAAiB;AACrB,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAGC,6BAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,UAAED,QAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAChH,EAAE,MAAM,SAAS,GAAGE,YAAM,CAAC,MAAM,CAAC,CAAC;AACnC,EAAE,MAAM,QAAQ,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAChC,EAAE,MAAM,SAAS,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AACjC,EAAE,MAAM,SAAS,GAAG,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC;AAC3D,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAGC,qBAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,QAAQ;AACZ,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,CAACC,kBAAU,CAAC,MAAM,CAAC,CAAC,CAAC;AAC3D,EAAE,MAAM,YAAY,GAAG,CAAC,KAAK,KAAK;AAClC,IAAI,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC9B,IAAI,SAAS,CAAC,CAAC,OAAO,KAAK;AAC3B,MAAM,MAAM,IAAI,GAAG,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;AACtE,MAAM,QAAQ,CAAC,OAAO,GAAGC,wBAAa,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAChE,MAAM,OAAO,IAAI,CAAC;AAClB,KAAK,CAAC,CAAC;AACP,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC/B,IAAI,UAAU,CAAC,MAAM;AACrB,MAAM,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AAC/B,KAAK,EAAE,CAAC,CAAC,CAAC;AACV,GAAG,CAAC;AACJ,EAAEC,kBAAY,CAAC,MAAM;AACrB,IAAI,IAAIC,oBAAY,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,OAAO,EAAE;AAClD,MAAM,SAAS,CAACH,kBAAU,CAAC,KAAK,CAAC,CAAC,CAAC;AACnC,MAAM,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AAC/B,KAAK;AACL,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAEE,kBAAY,CAAC,MAAM;AACrB,IAAI,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;AAC/B,IAAI,QAAQ,CAACD,wBAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAC5C,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,uBAAuBG,cAAK,CAAC,aAAa,CAACC,OAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC;AAC7C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,oBAAoBD,cAAK,CAAC,aAAa,CAACA,cAAK,CAAC,QAAQ,EAAE,IAAI,kBAAkBA,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AACtI,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,QAAQ,EAAE,YAAY;AAC1B,IAAI,KAAK,EAAE,MAAM;AACjB,YAAIX,QAAM;AACV,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,GAAG,CAAC,kBAAkBS,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,IAAI;AAC3B,GAAG,kBAAkBA,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,GAAG,kBAAkBA,cAAK,CAAC,aAAa,CAACG,mBAAS,EAAE;AACpD,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC;AACnB,IAAI,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;AACxC,IAAI,IAAI;AACR,YAAIZ,QAAM;AACV,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,YAAY,EAAE,QAAQ;AAC1B,IAAI,gBAAgB;AACpB,GAAG,CAAC,EAAE,SAAS,oBAAoBS,cAAK,CAAC,aAAa,CAACI,uBAAW,EAAE;AACpE,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC;AACnB,IAAI,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;AACxC,IAAI,IAAI;AACR,IAAI,KAAK,EAAEP,wBAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACvC,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3B,YAAIN,QAAM;AACV,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC,EAAE,SAAS,oBAAoBS,cAAK,CAAC,aAAa,CAACK,uBAAW,EAAE;AACrE,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACtD,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoBL,cAAK,CAAC,aAAa,CAACM,iBAAQ,EAAE;AACjF,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,QAAQ,EAAE,YAAY;AAC1B,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3B,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,UAAU;AACd,YAAIf,QAAM;AACV,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,WAAW,CAAC,WAAW,GAAG,2BAA2B;;;;"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n  | Selectors<typeof useStyles>\n  | ColorSliderStylesNames\n  | SwatchesStylesNames\n  | SaturationStylesNames\n  | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when color changes */\n  onChange?(color: string): void;\n\n  /** Color format */\n  format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\n\n  /** Set to false to display swatches only */\n  withPicker?: boolean;\n\n  /** Predefined colors */\n  swatches?: string[];\n\n  /** Number of swatches displayed in one row */\n  swatchesPerRow?: number;\n\n  /** Predefined component size */\n  size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n  extends DefaultProps<ColorPickerStylesNames>,\n    ColorPickerBaseProps,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  /** Force picker to take 100% width of its container */\n  fullWidth?: boolean;\n\n  /** Should interactive elements be focusable */\n  focusable?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\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\nconst SWATCH_SIZES = {\n  xs: 26,\n  sm: 34,\n  md: 42,\n  lg: 50,\n  xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n  swatchesPerRow: 10,\n  size: 'sm',\n  withPicker: true,\n  focusable: true,\n  __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (props: ColorPickerProps, ref) => {\n    const {\n      value,\n      defaultValue,\n      onChange,\n      format,\n      swatches,\n      swatchesPerRow,\n      size,\n      withPicker,\n      fullWidth,\n      focusable,\n      __staticSelector,\n      saturationLabel,\n      hueLabel,\n      alphaLabel,\n      className,\n      styles,\n      classNames,\n      unstyled,\n      ...others\n    } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { size, fullWidth },\n      { classNames, styles, name: __staticSelector, unstyled }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const updateRef = useRef(true);\n    const withAlpha = format === 'rgba' || format === 'hsla';\n\n    const [_value, setValue] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: '#FFFFFF',\n      onChange,\n    });\n\n    const [parsed, setParsed] = useState(parseColor(_value));\n\n    const handleChange = (color: Partial<HsvaColor>) => {\n      updateRef.current = false;\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      // Does not work any other way\n      setTimeout(() => {\n        updateRef.current = true;\n      }, 0);\n    };\n\n    useDidUpdate(() => {\n      if (isColorValid(value) && updateRef.current) {\n        setParsed(parseColor(value));\n        updateRef.current = true;\n      }\n    }, [value]);\n\n    useDidUpdate(() => {\n      formatRef.current = format;\n      setValue(convertHsvaTo(format, parsed));\n    }, [format]);\n\n    return (\n      <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              color={_value}\n              styles={styles}\n              classNames={classNames}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              __staticSelector={__staticSelector}\n            />\n\n            <div className={classes.body}>\n              <div className={classes.sliders}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  size={size}\n                  styles={styles}\n                  classNames={classNames}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  __staticSelector={__staticSelector}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    style={{ marginTop: 6 }}\n                    styles={styles}\n                    classNames={classNames}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    __staticSelector={__staticSelector}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n                  className={classes.preview}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            onSelect={handleChange}\n            style={{ marginTop: 5 }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\n          />\n        )}\n      </Box>\n    );\n  }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","useRef","useUncontrolled","useState","parseColor","convertHsvaTo","useDidUpdate","isColorValid","React","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches"],"mappings":"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"}

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

@@ -56,7 +56,8 @@ const ColorSlider = React.forwardRef((_a, ref) => {
     overlays,
     classNames,
     styles,
-    className
+    className,
+    unstyled
   } = _b, others = __objRest(_b, [
     "value",
     "onChange",
@@ -69,9 +70,10 @@ const ColorSlider = React.forwardRef((_a, ref) => {
     "overlays",
     "classNames",
     "styles",
-    "className"
+    "className",
+    "unstyled"
   ]);
-  const { classes, cx } = ColorSlider_styles['default']({ size }, { classNames, styles, name: __staticSelector });
+  const { classes, cx } = ColorSlider_styles['default']({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = React.useState({ y: 0, x: value / maxValue });
   const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
   const { ref: sliderRef } = hooks.useMove(({ x }) => onChange(getChangeValue(x)));
@@ -84,7 +86,7 @@ const ColorSlider = React.forwardRef((_a, ref) => {
     onChange(getChangeValue(_position.x));
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowRight": {
         handleArrow(event, { x: position.x + 0.05, y: position.y });
         break;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  useMove,\n  clampUseMovePosition,\n  useDidUpdate,\n  UseMovePosition,\n  useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n  | ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n  extends DefaultProps<ColorSliderStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  value: number;\n  onChange(value: number): void;\n  size?: MantineSize;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n  (\n    {\n      value,\n      onChange,\n      maxValue,\n      round,\n      size = 'md',\n      thumbColor = 'transparent',\n      __staticSelector = 'ColorSlider',\n      focusable = true,\n      overlays,\n      classNames,\n      styles,\n      className,\n      ...others\n    }: ColorSliderProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n    const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n    const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n    const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\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    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (event.nativeEvent.code) {\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 className={classes.sliderOverlay} style={overlay} key={index} />\n    ));\n\n    return (\n      <Box\n        {...others}\n        ref={useMergedRef(sliderRef, ref)}\n        className={cx(classes.slider, className)}\n        role=\"slider\"\n        aria-valuenow={value}\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        tabIndex={focusable ? 0 : -1}\n        onKeyDown={handleKeyDown}\n      >\n        {layers}\n\n        <Thumb\n          __staticSelector={__staticSelector}\n          classNames={classNames}\n          styles={styles}\n          position={position}\n          style={{ top: 1, backgroundColor: thumbColor }}\n          className={classes.sliderThumb}\n          size={size}\n        />\n      </Box>\n    );\n  }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":["forwardRef","useStyles","useState","useMove","useDidUpdate","clampUseMovePosition","React","Box","useMergedRef","Thumb"],"mappings":"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"}
+{"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  useMove,\n  clampUseMovePosition,\n  useDidUpdate,\n  UseMovePosition,\n  useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n  | ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n  extends DefaultProps<ColorSliderStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  value: number;\n  onChange(value: number): void;\n  size?: MantineSize;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n  (\n    {\n      value,\n      onChange,\n      maxValue,\n      round,\n      size = 'md',\n      thumbColor = 'transparent',\n      __staticSelector = 'ColorSlider',\n      focusable = true,\n      overlays,\n      classNames,\n      styles,\n      className,\n      unstyled,\n      ...others\n    }: ColorSliderProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles(\n      { size },\n      { classNames, styles, name: __staticSelector, unstyled }\n    );\n    const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n    const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n    const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\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    };\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 className={classes.sliderOverlay} style={overlay} key={index} />\n    ));\n\n    return (\n      <Box\n        {...others}\n        ref={useMergedRef(sliderRef, ref)}\n        className={cx(classes.slider, className)}\n        role=\"slider\"\n        aria-valuenow={value}\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        tabIndex={focusable ? 0 : -1}\n        onKeyDown={handleKeyDown}\n      >\n        {layers}\n\n        <Thumb\n          __staticSelector={__staticSelector}\n          classNames={classNames}\n          styles={styles}\n          position={position}\n          style={{ top: 1, backgroundColor: thumbColor }}\n          className={classes.sliderThumb}\n          size={size}\n        />\n      </Box>\n    );\n  }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":["forwardRef","useStyles","useState","useMove","useDidUpdate","clampUseMovePosition","React","Box","useMergedRef","Thumb"],"mappings":"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"}

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

@@ -5,36 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 var Thumb_styles = require('../Thumb/Thumb.styles.js');
 
-var useStyles = styles.createStyles((theme, { size }, getRef) => {
-  const sliderThumb = { ref: getRef("sliderThumb") };
-  return {
-    sliderThumb,
-    slider: {
-      position: "relative",
-      height: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) + 2,
-      boxSizing: "border-box",
-      marginLeft: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
-      marginRight: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
-      outline: 0,
-      [`&:focus .${sliderThumb.ref}`]: {
-        outline: "none",
-        boxShadow: theme.focusRing === "always" || theme.focusRing === "auto" ? `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}` : void 0
-      },
-      [`&:focus:not(:focus-visible) .${sliderThumb.ref}`]: {
-        boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
-      }
+var useStyles = styles.createStyles((theme, { size }, getRef) => ({
+  sliderThumb: {
+    ref: getRef("sliderThumb")
+  },
+  slider: {
+    position: "relative",
+    height: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) + 2,
+    boxSizing: "border-box",
+    marginLeft: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
+    marginRight: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
+    outline: 0,
+    [`&:focus .${getRef("sliderThumb")}`]: {
+      outline: "none",
+      boxShadow: theme.focusRing === "always" || theme.focusRing === "auto" ? `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}` : void 0
     },
-    sliderOverlay: {
-      position: "absolute",
-      boxSizing: "border-box",
-      top: 0,
-      bottom: 0,
-      left: -theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1,
-      right: -theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1,
-      borderRadius: 1e3
+    [`&:focus:not(:focus-visible) .${getRef("sliderThumb")}`]: {
+      boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
     }
-  };
-});
+  },
+  sliderOverlay: {
+    position: "absolute",
+    boxSizing: "border-box",
+    top: 0,
+    bottom: 0,
+    left: -theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1,
+    right: -theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1,
+    borderRadius: 1e3
+  }
+}));
 
 exports.default = useStyles;
 //# sourceMappingURL=ColorSlider.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.styles.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts"],"sourcesContent":["import { createStyles, MantineSize } from '@mantine/styles';\n\nimport { THUMB_SIZES } from '../Thumb/Thumb.styles';\n\ninterface ColorSliderStyles {\n  size: MantineSize;\n}\n\nexport default createStyles((theme, { size }: ColorSliderStyles, getRef) => {\n  const sliderThumb = { ref: getRef('sliderThumb') } as const;\n\n  return {\n    sliderThumb,\n\n    slider: {\n      position: 'relative',\n      height: theme.fn.size({ size, sizes: THUMB_SIZES }) + 2,\n      boxSizing: 'border-box',\n      marginLeft: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n      marginRight: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n      outline: 0,\n\n      [`&:focus .${sliderThumb.ref}`]: {\n        outline: 'none',\n        boxShadow:\n          theme.focusRing === 'always' || theme.focusRing === 'auto'\n            ? `0 0 0 2px ${\n                theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n              }, 0 0 0 4px ${\n                theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]\n              }`\n            : undefined,\n      },\n\n      [`&:focus:not(:focus-visible) .${sliderThumb.ref}`]: {\n        boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,\n      },\n    },\n\n    sliderOverlay: {\n      position: 'absolute',\n      boxSizing: 'border-box',\n      top: 0,\n      bottom: 0,\n      left: -theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1,\n      right: -theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1,\n      borderRadius: 1000,\n    },\n  };\n});\n"],"names":["createStyles","THUMB_SIZES"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,KAAK;AACzD,EAAE,MAAM,WAAW,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;AACrD,EAAE,OAAO;AACT,IAAI,WAAW;AACf,IAAI,MAAM,EAAE;AACZ,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEC,wBAAW,EAAE,CAAC,GAAG,CAAC;AAC7D,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC;AACjE,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC;AAClE,MAAM,OAAO,EAAE,CAAC;AAChB,MAAM,CAAC,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG;AACvC,QAAQ,OAAO,EAAE,MAAM;AACvB,QAAQ,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,MAAM,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AAC9P,OAAO;AACP,MAAM,CAAC,CAAC,6BAA6B,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG;AAC3D,QAAQ,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAC9F,OAAO;AACP,KAAK;AACL,IAAI,aAAa,EAAE;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AAChE,MAAM,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AACjE,MAAM,YAAY,EAAE,GAAG;AACvB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"ColorSlider.styles.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.styles.ts"],"sourcesContent":["import { createStyles, MantineSize } from '@mantine/styles';\n\nimport { THUMB_SIZES } from '../Thumb/Thumb.styles';\n\ninterface ColorSliderStyles {\n  size: MantineSize;\n}\n\nexport default createStyles((theme, { size }: ColorSliderStyles, getRef) => ({\n  sliderThumb: {\n    ref: getRef('sliderThumb'),\n  },\n\n  slider: {\n    position: 'relative',\n    height: theme.fn.size({ size, sizes: THUMB_SIZES }) + 2,\n    boxSizing: 'border-box',\n    marginLeft: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n    marginRight: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n    outline: 0,\n\n    [`&:focus .${getRef('sliderThumb')}`]: {\n      outline: 'none',\n      boxShadow:\n        theme.focusRing === 'always' || theme.focusRing === 'auto'\n          ? `0 0 0 2px ${\n              theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n            }, 0 0 0 4px ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`\n          : undefined,\n    },\n\n    [`&:focus:not(:focus-visible) .${getRef('sliderThumb')}`]: {\n      boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,\n    },\n  },\n\n  sliderOverlay: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    bottom: 0,\n    left: -theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1,\n    right: -theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1,\n    borderRadius: 1000,\n  },\n}));\n"],"names":["createStyles","THUMB_SIZES"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,MAAM;AAC1D,EAAE,WAAW,EAAE;AACf,IAAI,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEC,wBAAW,EAAE,CAAC,GAAG,CAAC;AAC3D,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC;AAC/D,IAAI,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC;AAChE,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;AAC3C,MAAM,OAAO,EAAE,MAAM;AACrB,MAAM,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,MAAM,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AAC5P,KAAK;AACL,IAAI,CAAC,CAAC,6BAA6B,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;AAC/D,MAAM,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAC5F,KAAK;AACL,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AAC9D,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AAC/D,IAAI,YAAY,EAAE,GAAG;AACrB,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

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

@@ -21,9 +21,10 @@ function Saturation({
   color,
   saturationLabel,
   classNames,
-  styles
+  styles,
+  unstyled
 }) {
-  const { classes } = Saturation_styles['default']({ size }, { classNames, styles, name: __staticSelector });
+  const { classes } = Saturation_styles['default']({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = React.useState({ x: value.s / 100, y: 1 - value.v / 100 });
   const { ref } = hooks.useMove(({ x, y }) => {
     onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });
@@ -37,7 +38,7 @@ function Saturation({
     onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowUp": {
         handleArrow(event, { y: position.y - 0.05, x: position.x });
         break;

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

@@ -1 +1 @@
-{"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'saturationOverlay' | 'saturationThumb'>\n  | ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n  value: HsvaColor;\n  onChange(color: Partial<HsvaColor>): void;\n  saturationLabel?: string;\n  size: MantineSize;\n  color: string;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Saturation({\n  value,\n  onChange,\n  focusable = true,\n  __staticSelector = 'saturation',\n  size,\n  color,\n  saturationLabel,\n  classNames,\n  styles,\n}: SaturationProps) {\n  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n  const { ref } = useMove(({ x, y }) => {\n    onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\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  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.nativeEvent.code) {\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    <div\n      className={classes.saturation}\n      ref={ref}\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        className={classes.saturationOverlay}\n        style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n      />\n\n      <Thumb\n        __staticSelector={__staticSelector}\n        classNames={classNames}\n        styles={styles}\n        position={position}\n        className={classes.saturationThumb}\n        style={{ backgroundColor: color }}\n        size={size}\n      />\n    </div>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":["useStyles","useState","useMove","useEffect","clampUseMovePosition","React","convertHsvaTo","Thumb"],"mappings":";;;;;;;;;;;;;;AAKO,SAAS,UAAU,CAAC;AAC3B,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,SAAS,GAAG,IAAI;AAClB,EAAE,gBAAgB,GAAG,YAAY;AACjC,EAAE,IAAI;AACN,EAAE,KAAK;AACP,EAAE,eAAe;AACjB,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,GAAGA,4BAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAC1F,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACvF,EAAE,MAAM,EAAE,GAAG,EAAE,GAAGC,aAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK;AACxC,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AACvE,GAAG,CAAC,CAAC;AACL,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AAC5D,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK;AACtC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,MAAM,SAAS,GAAGC,0BAAoB,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3F,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,QAAQ,KAAK,CAAC,WAAW,CAAC,IAAI;AAClC,MAAM,KAAK,SAAS,EAAE;AACtB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,YAAY,EAAE;AACzB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,OAAO,CAAC,UAAU;AACjC,IAAI,GAAG;AACP,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,YAAY,EAAE,eAAe;AACjC,IAAI,eAAe,EAAE,QAAQ,CAAC,CAAC;AAC/B,IAAI,gBAAgB,EAAEC,wBAAa,CAAC,MAAM,EAAE,KAAK,CAAC;AAClD,IAAI,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAChC,IAAI,SAAS,EAAE,aAAa;AAC5B,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE;AAC5D,GAAG,CAAC,kBAAkBA,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,2CAA2C,EAAE;AAC3E,GAAG,CAAC,kBAAkBA,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,0CAA0C,EAAE;AAC1E,GAAG,CAAC,kBAAkBA,cAAK,CAAC,aAAa,CAACE,WAAK,EAAE;AACjD,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,SAAS,EAAE,OAAO,CAAC,eAAe;AACtC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE;AACrC,IAAI,IAAI;AACR,GAAG,CAAC,CAAC,CAAC;AACN,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}
+{"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'saturationOverlay' | 'saturationThumb'>\n  | ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n  value: HsvaColor;\n  onChange(color: Partial<HsvaColor>): void;\n  saturationLabel?: string;\n  size: MantineSize;\n  color: string;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Saturation({\n  value,\n  onChange,\n  focusable = true,\n  __staticSelector = 'saturation',\n  size,\n  color,\n  saturationLabel,\n  classNames,\n  styles,\n  unstyled,\n}: SaturationProps) {\n  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n  const { ref } = useMove(({ x, y }) => {\n    onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\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  };\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    <div\n      className={classes.saturation}\n      ref={ref}\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        className={classes.saturationOverlay}\n        style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n      />\n\n      <Thumb\n        __staticSelector={__staticSelector}\n        classNames={classNames}\n        styles={styles}\n        position={position}\n        className={classes.saturationThumb}\n        style={{ backgroundColor: color }}\n        size={size}\n      />\n    </div>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":["useStyles","useState","useMove","useEffect","clampUseMovePosition","React","convertHsvaTo","Thumb"],"mappings":"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"}

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

@@ -5,6 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 var Thumb_styles = require('../Thumb/Thumb.styles.js');
 
+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;
+};
 const SATURATION_HEIGHTS = {
   xs: 100,
   sm: 110,
@@ -12,37 +28,30 @@ const SATURATION_HEIGHTS = {
   lg: 140,
   xl: 160
 };
-var useStyles = styles.createStyles((theme, { size }, getRef) => {
-  const position = -theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1;
-  const saturationThumb = { ref: getRef("saturationThumb") };
-  return {
-    saturationThumb,
-    saturation: {
-      boxSizing: "border-box",
-      position: "relative",
-      height: theme.fn.size({ size, sizes: SATURATION_HEIGHTS }),
-      borderRadius: theme.radius.sm,
-      margin: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
-      WebkitTapHighlightColor: "transparent",
-      [`&:focus .${saturationThumb.ref}`]: {
-        outline: "none",
-        boxShadow: `0 0 0 1px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}`
-      },
-      [`&:focus:not(:focus-visible) .${saturationThumb.ref}`]: {
-        boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
-      }
+var useStyles = styles.createStyles((theme, { size }, getRef) => ({
+  saturationThumb: {
+    ref: getRef("saturationThumb")
+  },
+  saturation: {
+    boxSizing: "border-box",
+    position: "relative",
+    height: theme.fn.size({ size, sizes: SATURATION_HEIGHTS }),
+    borderRadius: theme.radius.sm,
+    margin: theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2,
+    WebkitTapHighlightColor: "transparent",
+    [`&:focus .${getRef("saturationThumb")}`]: {
+      outline: "none",
+      boxShadow: `0 0 0 1px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}`
     },
-    saturationOverlay: {
-      position: "absolute",
-      boxSizing: "border-box",
-      borderRadius: theme.radius.sm,
-      top: position,
-      left: position,
-      right: position,
-      bottom: position
+    [`&:focus:not(:focus-visible) .${getRef("saturationThumb")}`]: {
+      boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
     }
-  };
-});
+  },
+  saturationOverlay: __spreadValues({
+    boxSizing: "border-box",
+    borderRadius: theme.radius.sm
+  }, theme.fn.cover(-theme.fn.size({ size, sizes: Thumb_styles.THUMB_SIZES }) / 2 - 1))
+}));
 
 exports.default = useStyles;
 //# sourceMappingURL=Saturation.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Saturation.styles.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.styles.ts"],"sourcesContent":["import { createStyles, MantineSize } from '@mantine/styles';\nimport { THUMB_SIZES } from '../Thumb/Thumb.styles';\n\ninterface SaturationStyles {\n  size: MantineSize;\n}\n\nconst SATURATION_HEIGHTS = {\n  xs: 100,\n  sm: 110,\n  md: 120,\n  lg: 140,\n  xl: 160,\n};\n\nexport default createStyles((theme, { size }: SaturationStyles, getRef) => {\n  const position = -theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1;\n  const saturationThumb = { ref: getRef('saturationThumb') } as const;\n\n  return {\n    saturationThumb,\n\n    saturation: {\n      boxSizing: 'border-box',\n      position: 'relative',\n      height: theme.fn.size({ size, sizes: SATURATION_HEIGHTS }),\n      borderRadius: theme.radius.sm,\n      margin: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n      WebkitTapHighlightColor: 'transparent',\n\n      [`&:focus .${saturationThumb.ref}`]: {\n        outline: 'none',\n        boxShadow: `0 0 0 1px ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n        }, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`,\n      },\n\n      [`&:focus:not(:focus-visible) .${saturationThumb.ref}`]: {\n        boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,\n      },\n    },\n\n    saturationOverlay: {\n      position: 'absolute',\n      boxSizing: 'border-box',\n      borderRadius: theme.radius.sm,\n      top: position,\n      left: position,\n      right: position,\n      bottom: position,\n    },\n  };\n});\n"],"names":["createStyles","THUMB_SIZES"],"mappings":";;;;;;;AAEA,MAAM,kBAAkB,GAAG;AAC3B,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,CAAC,CAAC;AACF,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,KAAK;AACzD,EAAE,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEC,wBAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACxE,EAAE,MAAM,eAAe,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC;AAC7D,EAAE,OAAO;AACT,IAAI,eAAe;AACnB,IAAI,UAAU,EAAE;AAChB,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC;AAChE,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,wBAAW,EAAE,CAAC,GAAG,CAAC;AAC7D,MAAM,uBAAuB,EAAE,aAAa;AAC5C,MAAM,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG;AAC3C,QAAQ,OAAO,EAAE,MAAM;AACvB,QAAQ,SAAS,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACxL,OAAO;AACP,MAAM,CAAC,CAAC,6BAA6B,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG;AAC/D,QAAQ,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAC9F,OAAO;AACP,KAAK;AACL,IAAI,iBAAiB,EAAE;AACvB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,GAAG,EAAE,QAAQ;AACnB,MAAM,IAAI,EAAE,QAAQ;AACpB,MAAM,KAAK,EAAE,QAAQ;AACrB,MAAM,MAAM,EAAE,QAAQ;AACtB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"Saturation.styles.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.styles.ts"],"sourcesContent":["import { createStyles, MantineSize } from '@mantine/styles';\nimport { THUMB_SIZES } from '../Thumb/Thumb.styles';\n\ninterface SaturationStyles {\n  size: MantineSize;\n}\n\nconst SATURATION_HEIGHTS = {\n  xs: 100,\n  sm: 110,\n  md: 120,\n  lg: 140,\n  xl: 160,\n};\n\nexport default createStyles((theme, { size }: SaturationStyles, getRef) => ({\n  saturationThumb: {\n    ref: getRef('saturationThumb'),\n  },\n\n  saturation: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    height: theme.fn.size({ size, sizes: SATURATION_HEIGHTS }),\n    borderRadius: theme.radius.sm,\n    margin: theme.fn.size({ size, sizes: THUMB_SIZES }) / 2,\n    WebkitTapHighlightColor: 'transparent',\n\n    [`&:focus .${getRef('saturationThumb')}`]: {\n      outline: 'none',\n      boxShadow: `0 0 0 1px ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n      }, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`,\n    },\n\n    [`&:focus:not(:focus-visible) .${getRef('saturationThumb')}`]: {\n      boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,\n    },\n  },\n\n  saturationOverlay: {\n    boxSizing: 'border-box',\n    borderRadius: theme.radius.sm,\n    ...theme.fn.cover(-theme.fn.size({ size, sizes: THUMB_SIZES }) / 2 - 1),\n  },\n}));\n"],"names":["createStyles","THUMB_SIZES"],"mappings":"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"}

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

@@ -47,7 +47,8 @@ function Swatches(_a) {
     focusable = true,
     classNames,
     styles,
-    __staticSelector = "color-picker"
+    __staticSelector = "color-picker",
+    unstyled
   } = _b, others = __objRest(_b, [
     "data",
     "onSelect",
@@ -55,9 +56,10 @@ function Swatches(_a) {
     "focusable",
     "classNames",
     "styles",
-    "__staticSelector"
+    "__staticSelector",
+    "unstyled"
   ]);
-  const { classes } = Swatches_styles['default']({ swatchesPerRow }, { classNames, styles, name: __staticSelector });
+  const { classes } = Swatches_styles['default']({ swatchesPerRow }, { classNames, styles, name: __staticSelector, unstyled });
   const colors = data.map((color, index) => /* @__PURE__ */ React__default.createElement(ColorSwatch.ColorSwatch, {
     className: classes.swatch,
     component: "button",