@king-design/react 2.0.0-beta.0

package/components/colorpicker/panel.vdt.js

@@ -0,0 +1,166 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, createTextVNode as _$ct, map as _$ma } from 'intact-react';
+import { Row, Col } from '../grid';
+import { Slider } from '../slider';
+import { Input } from '../input';
+import { makePanelStyles, makeAlphaBgColor } from './styles';
+import { linkEvent } from 'intact';
+import { Mode } from './useInput';
+import { ColorpickerDrag as Drag } from './drag';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _$cn2,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      value = _this$get.value,
+      presets = _this$get.presets;
+
+  var classNameObj = (_classNameObj = {
+    'k-colorpicker-panel': true
+  }, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var _this$value = this.value,
+      hex = _this$value.hex.value,
+      hsv = _this$value.hsv.value,
+      rgb = _this$value.rgb.value,
+      hsl = _this$value.hsl.value,
+      changeHue = _this$value.changeHue,
+      changeAlpha = _this$value.changeAlpha,
+      setValue = _this$value.setValue;
+  var _this$pointer = this.pointer,
+      start = _this$pointer.start,
+      areaRef = _this$pointer.areaRef;
+  var _this$input = this.input,
+      onInputHex = _this$input.onInputHex,
+      mode = _this$input.mode,
+      changeMode = _this$input.changeMode,
+      changeColor = _this$input.changeColor,
+      onStart = _this$input.onStart,
+      onEnd = _this$input.onEnd,
+      dragging = _this$input.dragging,
+      setInputValue = _this$input.setInputValue;
+  var alpha = Math.round(rgb.a * 100);
+  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-colorpicker-white'), _$ce(2, 'div', null, 1, 'k-colorpicker-black'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-circle'), 2, 'k-colorpicker-pointer', {
+    'style': {
+      left: hsv.s * 100 + "%",
+      top: -hsv.v * 100 + 100 + "%"
+    }
+  })], 4, 'k-colorpicker-saturation', {
+    'style': {
+      backgroundColor: "hsl(" + hsv.h + ", 100%, 50%)"
+    },
+    'ev-mousedown': start
+  }, null, areaRef), _$ce(2, 'div', [_$ce(2, 'div', [_$cc(Slider, {
+    'className': 'k-colorpicker-hue',
+    'showInput': false,
+    'showEnd': false,
+    'step': 0,
+    'max': 360,
+    'value': hsv.h,
+    'ev-$change:value': changeHue,
+    'animate': !dragging.value
+  }), _$cc(Slider, {
+    'className': _$cn((_$cn2 = {
+      "k-colorpicker-alpha k-colorpicker-alpha-bg": true
+    }, _$cn2[makeAlphaBgColor(rgb)] = true, _$cn2)),
+    'showInput': false,
+    'showEnd': false,
+    'step': 0,
+    'max': 1,
+    'value': rgb.a,
+    'ev-$change:value': changeAlpha,
+    'animate': !dragging.value
+  })], 4, 'k-colorpicker-sliders'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-color', {
+    'style': {
+      backgroundColor: value
+    }
+  }), 2, 'k-colorpicker-color-wrapper k-colorpicker-alpha-bg')], 4, 'k-colorpicker-controls'), _$cc(Row, {
+    'gutter': '6',
+    'children': [_$cc(Col, {
+      'span': '8',
+      'children': [_$cc(Input, {
+        'fluid': true,
+        'size': 'small',
+        'frozenOnInput': true,
+        'className': 'k-colorpicker-input',
+        'value': hex,
+        'ev-input': onInputHex
+      }), _$ce(2, 'div', 'Hex', 16, 'k-colorpicker-text')]
+    }), function () {
+      var params;
+      var color;
+      var method;
+      var max;
+
+      if (mode.value === Mode.RGB) {
+        params = ['r', 'g', 'b'];
+        color = rgb;
+        method = _this._changeRgb;
+        max = 255;
+      } else {
+        params = ['h', 's', 'l'];
+        color = {
+          h: hsl.h,
+          s: hsl.s * 100,
+          l: hsl.l * 100
+        };
+        method = _this._changeHsv;
+        max = 100;
+      }
+
+      return _mapInstanceProperty(params).call(params, function (value) {
+        var v = Math.round(color[value]);
+        var realMax = value === 'h' ? 359 : max;
+        return _$cc(Col, {
+          'span': '4',
+          'children': [_$cc(Input, {
+            'fluid': true,
+            'size': 'small',
+            'value': v,
+            'className': 'k-colorpicker-input',
+            'ev-input': setInputValue.bind(null, value, realMax)
+          }), _$cc(Drag, {
+            'value': v,
+            'max': realMax,
+            'ev-$change:value': changeColor.bind(null, value),
+            'ev-click': changeMode,
+            'onStart': onStart,
+            'onEnd': onEnd,
+            'children': [value.toUpperCase(), _$ct('\n                            '), value === 's' || value === 'l' ? '%' : null]
+          })]
+        });
+      });
+    }(), _$cc(Col, {
+      'span': '4',
+      'children': [_$cc(Input, {
+        'fluid': true,
+        'size': 'small',
+        'value': alpha,
+        'className': 'k-colorpicker-input',
+        'ev-input': setInputValue.bind(null, 'a', 100)
+      }), _$cc(Drag, {
+        'value': alpha,
+        'max': 100,
+        'ev-$change:value': changeColor.bind(null, 'a'),
+        'onStart': onStart,
+        'onEnd': onEnd,
+        'children': 'A'
+      })]
+    })]
+  }), presets && presets.length ? _$ce(2, 'div', _$ma(presets, function ($value, $key) {
+    return _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-preset-color', {
+      'style': {
+        backgroundColor: $value
+      }
+    }), 2, 'k-colorpicker-preset-color-wrapper k-colorpicker-alpha-bg', {
+      'ev-click': linkEvent($value, setValue)
+    });
+  }, $this), 4, 'k-colorpicker-presets') : undefined], 0, _$cn(classNameObj));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/colorpicker/styles.d.ts

@@ -0,0 +1,8 @@
+import '../../styles/global';
+import { ColorFormats } from 'tinycolor2';
+export declare function makeStyles(): string;
+export declare function makePanelStyles(): string;
+export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA): string;
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/styles.js

@@ -0,0 +1,135 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  get height() {
+    return theme.default.height;
+  },
+
+  width: '100px',
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  cursor: 'pointer',
+  bgColor: '#fff',
+  padding: '4px',
+
+  get innerBorderRadius() {
+    return theme.borderRadius;
+  },
+
+  // size
+  large: {
+    get height() {
+      return theme.large.height;
+    },
+
+    width: '120px'
+  },
+  small: {
+    get height() {
+      return theme.small.height;
+    },
+
+    width: '70px'
+  },
+  mini: {
+    get height() {
+      return theme.mini.height;
+    },
+
+    width: '50px',
+    padding: '2px'
+  },
+  // panel
+  panel: {
+    padding: '10px',
+    width: '220px',
+    fontSize: '11px',
+    saturationHeight: '150px',
+    circle: {
+      width: '4px',
+      boxShadow: '0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(167, 41, 41, 0.4)'
+    },
+    gutter: '4px'
+  },
+  slider: {
+    height: '10px',
+    borderRadius: '0',
+    cursor: 'default',
+    thumb: {
+      width: '4px',
+      height: '8px',
+      border: 'none',
+      borderRadius: '1px',
+      boxShadow: 'rgba(0, 0, 0, .6) 0 0 2px',
+      hover: {
+        transform: 'none',
+        cursor: 'default',
+        bgColor: '#fff'
+      }
+    }
+  },
+  color: {
+    width: '24px',
+    height: '24px',
+    borderRadius: '3px',
+    boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25)'
+  },
+  input: {
+    height: '20px',
+    padding: '0 3px',
+    textPadding: '3px 0'
+  },
+  presets: {
+    delimiter: "1px solid #eee",
+    width: '16px',
+    height: '16px',
+    borderRadius: '3px',
+    boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, .15)'
+  },
+  // disabled
+  disabled: {
+    get bgColor() {
+      return theme.color.disabledBg;
+    },
+
+    get borderColor() {
+      return theme.color.disabledBorder;
+    },
+
+    cursor: 'not-allowed'
+  }
+};
+var colorpicker;
+setDefault(function () {
+  colorpicker = deepDefaults(theme, {
+    colorpicker: defaults
+  }).colorpicker;
+});
+var _sizes = ['large', 'small', 'mini'];
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.k-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
+    var styles = colorpicker[size];
+    return /*#__PURE__*/css("&.k-", size, "{.k-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
+  }), "&.k-disabled{.k-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
+}
+export function makePanelStyles() {
+  return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.k-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.k-colorpicker-white,.k-colorpicker-black{position:absolute;width:100%;height:100%;}.k-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.k-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.k-colorpicker-pointer{position:absolute;}.k-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.k-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.k-colorpicker-sliders{flex:1;.k-slider{margin-bottom:", colorpicker.panel.gutter, ";}.k-slider-track-wrapper,.k-slider-track{height:", colorpicker.slider.height, ";}.k-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.k-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.k-slider-bar{background:transparent;}.k-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.k-colorpicker-hue{.k-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.k-colorpicker-alpha{background-size:contain;}.k-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.k-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.k-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.k-colorpicker-input.k-small{.k-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.k-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.k-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.k-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.k-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.k-colorpicker-drag{cursor:ew-resize;user-select:none;}");
+}
+export function makeAlphaBgColor(_ref) {
+  var r = _ref.r,
+      g = _ref.g,
+      b = _ref.b;
+  return /*#__PURE__*/css(".k-slider-track-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
+}
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useDrag.d.ts

@@ -0,0 +1,6 @@
+export declare function useDrag(): {
+    start: (e: MouseEvent) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useDrag.js

@@ -0,0 +1,42 @@
+import { useInstance } from 'intact-react';
+import { useDraggable } from '../../hooks/useDraggable';
+export function useDrag() {
+  var instance = useInstance();
+  var mousedown = false;
+  var mousemove = false;
+  var x;
+
+  var _useDraggable = useDraggable({
+    onStart: function onStart(e) {
+      mousedown = true;
+      x = e.clientX;
+      instance.get('onStart')();
+    },
+    onMove: function onMove(e) {
+      mousemove = true;
+
+      var _instance$get = instance.get(),
+          value = _instance$get.value,
+          max = _instance$get.max;
+
+      var deltaX = e.clientX - x;
+      var newValue = value + deltaX;
+      x = e.clientX;
+      instance.set('value', Math.min(max, Math.max(0, newValue)));
+    },
+    onEnd: function onEnd(e) {
+      if (instance.$unmounted) return;
+      if (mousedown && !mousemove) instance.trigger('click');
+      mousedown = false;
+      mousemove = false;
+      instance.get('onEnd')();
+    }
+  }),
+      start = _useDraggable.start;
+
+  return {
+    start: start
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useInput.d.ts

@@ -0,0 +1,19 @@
+import { ColorFormats } from 'tinycolor2';
+import { State } from '../../hooks/useState';
+export declare enum Mode {
+    RGB = 0,
+    HSL = 1
+}
+export declare function useInput(hsv: State<ColorFormats.HSVA | null>, rgb: State<ColorFormats.RGBA | null>, hsl: State<ColorFormats.HSLA | null>): {
+    onInputHex: (e: InputEvent) => void;
+    mode: State<Mode>;
+    changeMode: () => void;
+    changeColor: (type: string, v: number) => void;
+    onStart: () => void;
+    onEnd: () => void;
+    dragging: State<boolean>;
+    setInputValue: (type: string, maxValue: number, e: InputEvent) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useInput.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _Number$isNaN from "@babel/runtime-corejs3/core-js/number/is-nan";
+import { useInstance } from 'intact-react';
+import tinycolor from 'tinycolor2';
+import { useState } from '../../hooks/useState';
+export var Mode;
+
+(function (Mode) {
+  Mode[Mode["RGB"] = 0] = "RGB";
+  Mode[Mode["HSL"] = 1] = "HSL";
+})(Mode || (Mode = {}));
+
+export function useInput(hsv, rgb, hsl) {
+  var instance = useInstance();
+  var mode = useState(Mode.RGB);
+  var dragging = useState(false);
+
+  function onInputHex(e) {
+    var _context;
+
+    var hex = _trimInstanceProperty(_context = e.target.value).call(_context);
+
+    var color = tinycolor(hex);
+
+    if (color.isValid()) {
+      hsv.set(color.toHsv());
+    }
+  }
+
+  function changeMode() {
+    mode.set(mode.value === Mode.RGB ? Mode.HSL : Mode.RGB);
+  }
+
+  function changeColor(type, v) {
+    var _extends2;
+
+    var isRgb = mode.value === Mode.RGB;
+    var color = isRgb ? rgb.value : hsl.value;
+
+    if (!isRgb && type !== 'h' || type === 'a') {
+      v = v / 100;
+    }
+
+    if (color[type] === v) return;
+    hsv.set(tinycolor(_extends({}, color, (_extends2 = {}, _extends2[type] = v, _extends2))).toHsv());
+  }
+
+  function setInputValue(type, maxValue, e) {
+    var _context2;
+
+    var value = parseInt(_trimInstanceProperty(_context2 = e.target.value).call(_context2), 10);
+    if (_Number$isNaN(value)) return;
+    value = Math.min(Math.max(0, value), maxValue);
+    changeColor(type, value);
+  }
+
+  function onStart() {
+    dragging.set(true);
+  }
+
+  function onEnd() {
+    dragging.set(false);
+  }
+
+  return {
+    onInputHex: onInputHex,
+    mode: mode,
+    changeMode: changeMode,
+    changeColor: changeColor,
+    onStart: onStart,
+    onEnd: onEnd,
+    dragging: dragging,
+    setInputValue: setInputValue
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/colorpicker/usePointer.d.ts

@@ -0,0 +1,9 @@
+import { ColorFormats } from 'tinycolor2';
+import { State } from '../../hooks/useState';
+export declare function usePointer(hsv: State<ColorFormats.HSVA | null>, format: State<string | null>): {
+    start: (e: MouseEvent) => void;
+    areaRef: import('intact-react').RefObject<HTMLDivElement>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/usePointer.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, createRef } from 'intact-react';
+import { useDraggable } from '../../hooks/useDraggable';
+import tinycolor from 'tinycolor2';
+import { isNumber } from 'intact-shared';
+window.tinycolor = tinycolor;
+export function usePointer(hsv, format) {
+  var instance = useInstance();
+  var areaRef = createRef();
+
+  var _useDraggable = useDraggable({
+    onStart: function onStart(e) {
+      handleChange(e);
+    },
+    onMove: function onMove(e) {
+      handleChange(e);
+    }
+  }),
+      start = _useDraggable.start; // @reference: https://github.com/casesandberg/react-color/blob/master/src/helpers/saturation.js
+
+
+  function handleChange(e) {
+    var _areaRef$value$getBou = areaRef.value.getBoundingClientRect(),
+        width = _areaRef$value$getBou.width,
+        height = _areaRef$value$getBou.height,
+        _left = _areaRef$value$getBou.left,
+        _top = _areaRef$value$getBou.top;
+
+    var x = isNumber(e.pageX) ? e.pageX : e.touches[0].pageX;
+    var y = isNumber(e.pageY) ? e.pageY : e.touches[0].pageY;
+    var left = x - _left - window.pageXOffset;
+    var top = y - _top - window.pageYOffset;
+    left = Math.max(Math.min(width, left), 0);
+    top = Math.max(Math.min(height, top), 0);
+    var saturation = left / width;
+    var bright = -top / height + 1;
+    hsv.set(_extends({}, hsv.value, {
+      s: saturation,
+      v: bright
+    })); // const value = tinycolor(hsv.value!).toString(format.value as 'rgb');
+    // // console.log()
+    // // const tinyValue = tinycolor(value);
+    // // console.log(hsv, value, tinycolor(hsv).toHsv(), getFormat(), tinyValue.toHsv());
+    // instance.set({value});
+  }
+
+  return {
+    start: start,
+    areaRef: areaRef
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useValue.d.ts

@@ -0,0 +1,14 @@
+import { ColorFormats } from 'tinycolor2';
+export declare function useValue(): {
+    format: import("../../hooks/useState").State<string | null>;
+    hex: import("../../hooks/useState").State<string | null>;
+    rgb: import("../../hooks/useState").State<ColorFormats.RGBA | null>;
+    hsv: import("../../hooks/useState").State<ColorFormats.HSVA | null>;
+    hsl: import("../../hooks/useState").State<ColorFormats.HSLA | null>;
+    changeHue: (arg: number) => void;
+    changeAlpha: (arg: number) => void;
+    setValue: (v: string) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/useValue.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance } from 'intact-react';
+import tinycolor from 'tinycolor2';
+import { useState, watchState } from '../../hooks/useState';
+import { throttle } from '../utils';
+export function useValue() {
+  var instance = useInstance();
+  var hsv = useState(null);
+  var hsl = useState(null);
+  var format = useState(null);
+  var rgb = useState(null);
+  var hex = useState(null);
+  instance.on('$receive:value', function (v) {
+    var color = tinycolor(instance.get('value'));
+    format.set(color.getFormat());
+    hsv.set(color.toHsv());
+  });
+  watchState(hsv, function (hsv) {
+    var color = tinycolor(hsv);
+    rgb.set(color.toRgb());
+    hex.set(color.toHex());
+    hsl.set(color.toHsl()); // if alpha less than 1, use rgba format
+
+    var _format = hsv.a < 1 ? 'rgb' : format.value;
+
+    instance.set('value', color.toString(_format));
+  });
+
+  function changeHue(v) {
+    hsv.set(_extends({}, hsv.value, {
+      h: v
+    }));
+  }
+
+  function changeAlpha(v) {
+    format.set('rgb');
+    hsv.set(_extends({}, hsv.value, {
+      a: v
+    }));
+  }
+
+  function setValue(v) {
+    hsv.set(tinycolor(v).toHsv());
+  }
+
+  return {
+    format: format,
+    hex: hex,
+    rgb: rgb,
+    hsv: hsv,
+    hsl: hsl,
+    changeHue: throttle(changeHue, 50),
+    changeAlpha: throttle(changeAlpha, 50),
+    setValue: setValue
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/context.d.ts

@@ -0,0 +1,14 @@
+import { Component, ComponentConstructor } from 'intact-react';
+export interface ProviderProps<T> {
+    value?: T;
+}
+declare type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
+declare type ConsumerConstructor = ComponentConstructor<Component<{}>>;
+export declare function createContext<T = any>(defaultValue?: T): {
+    Provider: ProviderConstructor<T>;
+    Consumer: ConsumerConstructor;
+};
+export {};
+
+
+export {normalize} from 'intact-react';