@flodesk/grain 3.0.3 → 3.1.0

package/es/components/index.js

@@ -8,4 +8,5 @@ export { IconButton } from './icon-button';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
-export { Stack } from './stack';
+export { Stack } from './stack';
+export { Slider } from './slider';

package/es/components/slider.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["min", "max", "value", "step", "onChange"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import "core-js/modules/es.object.assign.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackHeight: 2px;\n  --sliderHeight: 12px;\n  --thumbSize: var(--sliderHeight);\n\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: var(--trackHeight);\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    background: linear-gradient(\n      90deg,\n      var(--grn-color-body) 0 var(--value),\n      var(--grn-color-fade2) var(--value) 100%\n    );\n    display: block;\n    position: absolute;\n    z-index: -1;\n    border-radius: 100px;\n  }\n"])));
+var trackStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: var(--sliderHeight);\n  cursor: pointer;\n  background: transparent;\n"])));
+var thumbStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  height: var(--thumbSize);\n  width: var(--thumbSize);\n  border-radius: 100px;\n  background: var(--grn-color-body);\n  cursor: pointer;\n"])));
+var InputWrapper = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  width: 100%;\n  margin: 0;\n  display: block;\n  background: transparent;\n\n  &::-webkit-slider-runnable-track {\n    ", "\n  }\n  &::-moz-range-track {\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n  }\n  &::-moz-range-thumb {\n    ", "\n  }\n"])), trackStyles, trackStyles, thumbStyles, thumbStyles);
+export var Slider = function Slider(_ref) {
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      value = _ref.value,
+      step = _ref.step,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var getPercentage = function getPercentage() {
+    return (value - min) / (max - min) * 100;
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    style: {
+      '--value': "".concat(getPercentage(), "%")
+    }
+  }, /*#__PURE__*/React.createElement(InputWrapper, Object.assign({
+    type: "range",
+    min: min,
+    max: max,
+    value: value,
+    step: step,
+    onChange: onChange
+  }, props)));
+};
+Slider.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",