@zendeskgarden/react-colorpickers 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/styled/common/StyledRange.js

@@ -0,0 +1,160 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { Range } from '@zendeskgarden/react-forms';
+import styled from 'styled-components';
+import { stripUnit } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_range';
+const thumbStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-ms-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-thumb {
+      ${styles}
+    }
+  `;
+};
+const trackStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-track {
+      ${styles}
+    }
+
+    &${modifier}::-ms-track {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-runnable-track {
+      ${styles}
+    }
+  `;
+};
+const trackLowerStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-progress {
+      ${styles}
+    }
+
+    &${modifier}::-ms-fill-lower {
+      ${styles}
+    }
+  `;
+};
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const thumbBackgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const thumbBorderColor = getColor({
+    theme,
+    variable: 'border.default',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const thumbActiveBackgroundColor = thumbBackgroundColor;
+  const thumbActiveBorderColor = getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const thumbFocusBorderColor = thumbActiveBorderColor;
+  const thumbHoverBackgroundColor = getColor({
+    theme,
+    variable: 'background.subtle'
+  });
+  const thumbHoverBorderColor = thumbActiveBorderColor;
+  return `
+    ${trackStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+      border-color: ${thumbBorderColor};
+      background-color: ${thumbBackgroundColor};
+    `)}
+
+    ${trackLowerStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+        border-color: ${thumbHoverBorderColor};
+        background-color: ${thumbHoverBackgroundColor};
+      `, ':hover')}
+
+    ${thumbStyles(`
+        background-color: ${thumbBackgroundColor};
+        border-color: ${thumbFocusBorderColor};
+      `, ':focus-visible')}
+
+    ${thumbStyles(`
+        border-color: ${thumbActiveBorderColor};
+        background-color: ${thumbActiveBackgroundColor}
+      `, ':active')}
+  `;
+};
+const getThumbSize = props => props.theme.space.base * (props.$isOpaque ? 6 : 4);
+const getTrackHeight = props => props.theme.space.base * (props.$isOpaque ? 6 : 3);
+const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
+const sizeStyles = props => {
+  const thumbSize = getThumbSize(props);
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  const thumbMargin = (trackHeight - thumbSize) / 2;
+  const trackOffset = props.theme.space.base * (props.$isOpaque ? -2 : -1);
+  const height = props.$isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
+  return `
+    /* stylelint-disable-next-line declaration-no-important */
+    margin-top: 0 !important;
+    height: ${height}px; /* [1] */
+    box-sizing: content-box; /* [2] */
+    border-radius: ${props.$isOpaque && props.theme.borderRadii.md};
+
+    ${trackStyles(`
+      margin: ${trackMargin}px ${trackOffset}px;
+      height: ${trackHeight}px;
+    `)}
+
+    ${thumbStyles(`
+      margin: ${thumbMargin}px 0;
+      border-width: ${props.theme.borderWidths.sm};
+      height: ${thumbSize}px;
+      width: ${thumbSize}px;
+    `)};
+  `;
+};
+const StyledRange = styled(Range).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  hasLowerTrack: false
+}).withConfig({
+  displayName: "StyledRange",
+  componentId: "sc-ug3wi9-0"
+})(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
+    border-radius: 0;
+  `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRange.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };

package/dist/esm/utils/conversion.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+function hslToHsv(h, s, l) {
+  let saturation = s;
+  saturation *= (l < 50 ? l : 100 - l) / 100;
+  const v = l + saturation;
+  return {
+    h,
+    s: v === 0 ? 0 : 2 * saturation / v * 100,
+    v
+  };
+}
+function hsvToHsl(h, s, v) {
+  let saturation = s;
+  let value = v;
+  saturation /= 100;
+  value /= 100;
+  let l = (2 - saturation) * value;
+  let sl = saturation * value;
+  sl /= l <= 1 ? l : 2 - l;
+  sl = sl || 0;
+  l /= 2;
+  return {
+    h,
+    s: sl * 100,
+    l: l * 100
+  };
+}
+
+export { hslToHsv, hsvToHsl };

package/dist/esm/utils/saturation.js

@@ -0,0 +1,64 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const getSaturationLightness = (element, x, y, rtl) => {
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  let left = x - (element.getBoundingClientRect().left + window.pageXOffset);
+  let top = y - (element.getBoundingClientRect().top + window.pageYOffset);
+  if (left < 0) {
+    left = 0;
+  } else if (left > width) {
+    left = width;
+  }
+  if (top < 0) {
+    top = 0;
+  } else if (top > height) {
+    top = height;
+  }
+  if (rtl) {
+    left = width - left;
+  }
+  const saturation = left / width;
+  const bright = 1 - top / height;
+  return {
+    saturation,
+    bright
+  };
+};
+function getNextHsv(e, hue, container, rtl) {
+  const {
+    saturation,
+    bright
+  } = getSaturationLightness(container, e.pageX, e.pageY, rtl);
+  return {
+    h: hue,
+    s: saturation,
+    v: bright
+  };
+}
+const getThumbPosition = (x, y, rtl, container) => {
+  if (container.current) {
+    const {
+      saturation,
+      bright
+    } = getSaturationLightness(container.current, x, y, rtl);
+    const topFromMouse = (1 - bright) * 100;
+    const leftFromMouse = rtl ? 100 - saturation * 100 : saturation * 100;
+    return {
+      topFromMouse,
+      leftFromMouse
+    };
+  }
+  return {
+    topFromMouse: 0,
+    leftFromMouse: 0
+  };
+};
+
+export { getNextHsv, getThumbPosition };

package/dist/esm/utils/validation.js

@@ -0,0 +1,12 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const isValidHex = hexString => {
+  const regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/iu;
+  return regEx.test(hexString);
+};
+
+export { isValidHex };