@flodesk/grain 5.7.0 → 5.8.0

package/es/components/index.js

@@ -9,6 +9,7 @@ export { Tab, TabGroup } from './tab';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
+export { Select } from './select';
 export { Stack } from './stack';
 export { Slider } from './slider';
 export { Spinner } from './spinner';

package/es/components/select.js

@@ -0,0 +1,121 @@
+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";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
+var _excluded = ["children"],
+    _excluded2 = ["children", "isSelected", "isActive"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.map.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, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Icon, Box, Text } from '.';
+import { IconCheck, IconChevronDown } from '../icons';
+import { Listbox } from '@headlessui/react';
+import { getColor, getRadius, getShadow } from '../utilities';
+var Options = styled(Listbox.Options)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px;\n  margin: 0;\n  position: absolute;\n  background: white;\n  box-shadow: ", ";\n  border-radius: ", ";\n  max-height: 468px;\n  min-width: 160px;\n  max-width: 240px;\n  overflow: auto;\n\n  &:focus {\n    outline: none;\n  }\n"])), getShadow('m'), getRadius('s'));
+var SelectButtonWrapper = styled(Listbox.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 var(--grn-fieldXPadding);\n  min-height: var(--grn-textBoxHeight-m);\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  max-width: 100%;\n  text-align: left;\n"])), getColor('fade1'), getRadius('s'));
+
+var SelectButton = function SelectButton(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(SelectButtonWrapper, props, /*#__PURE__*/React.createElement(Text, {
+    hasEllipsis: true,
+    weight: "medium"
+  }, children), /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
+  }));
+};
+
+var MenuItemWrapper = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: 8px;\n  align-items: center;\n  list-style: none;\n  padding: 0 1rem;\n  min-height: var(--grn-textBoxHeight-m);\n  cursor: pointer;\n  border-radius: ", ";\n"])), getRadius('s'));
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      isSelected = _ref2.isSelected,
+      isActive = _ref2.isActive,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
+    ref: ref,
+    isActive: isActive,
+    style: {
+      background: isActive ? getColor('overlay') : undefined
+    }
+  }, props), /*#__PURE__*/React.createElement(Text, {
+    hasEllipsis: true
+  }, children), isSelected && /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "auto"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconCheck, null)
+  })));
+});
+export var Select = function Select(_ref3) {
+  var options = _ref3.options,
+      defaultOption = _ref3.defaultOption,
+      onChange = _ref3.onChange;
+
+  var _useState = useState(defaultOption || options[0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOption = _useState2[0],
+      setSelectedOption = _useState2[1];
+
+  var handleChange = function handleChange(option) {
+    setSelectedOption(option);
+    onChange && onChange(option);
+  };
+
+  return /*#__PURE__*/React.createElement(Listbox, {
+    value: selectedOption,
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Options, null, options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(Listbox.Option, {
+      key: index,
+      value: option,
+      as: React.Fragment
+    }, function (_ref4) {
+      var active = _ref4.active,
+          selected = _ref4.selected;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        isSelected: selected,
+        isActive: active
+      }, option.content);
+    });
+  })));
+};
+Select.propTypes = {
+  options: PropTypes.array,
+  defaultOption: PropTypes.object,
+  onChange: PropTypes.func
+};

package/es/components/slider.js

@@ -6,7 +6,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import "core-js/modules/es.object.assign.js";
 
@@ -23,7 +23,8 @@ import { css } from '@emotion/react';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackHeight: 2px;\n  --sliderHeight: 16px;\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-content) 0 var(--value),\n      var(--grn-color-fade2) var(--value) 100%\n    );\n    display: block;\n    position: absolute;\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-content);\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);
+var thumbFocusStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--grn-color-selection);\n"])));
+var InputWrapper = styled.input(_templateObject5 || (_templateObject5 = _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\n  &::-moz-range-track {\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n  }\n\n  &::-moz-range-thumb {\n    ", "\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    ", "\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    ", "\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), trackStyles, trackStyles, thumbStyles, thumbStyles, thumbFocusStyles, thumbFocusStyles);
 export var Slider = function Slider(_ref) {
   var _ref$min = _ref.min,
       min = _ref$min === void 0 ? 0 : _ref$min,

package/es/components/switch.js

@@ -6,7 +6,7 @@ import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 var _excluded = ["isDisabled", "isActive", "label", "id", "onChange"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 
 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; }
 
@@ -22,18 +22,14 @@ var knobSizePx = 16;
 var trackOffset = 2;
 var trackWidth = 40;
 var trackHeight = knobSizePx + trackOffset * 2;
-var trackInactiveColor = getColor('grey3');
-var trackActiveColor = getColor('content');
-var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n\n  &:checked ~ .Track {\n    background-color: ", ";\n\n    .Knob {\n      transform: translateX(", "px);\n    }\n  }\n"])), function (p) {
-  return p.disabled ? getColor('backgroundDisabled') : trackActiveColor;
-}, trackWidth - knobSizePx - trackOffset * 2);
-var Track = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", "px;\n  width: ", "px;\n  display: block;\n  position: relative;\n  border-radius: 1000px;\n  transition: ", ";\n  cursor: pointer;\n  background-color: ", ";\n"])), trackHeight, trackWidth, getTransition('xFast'), function (p) {
-  return p.isDisabled ? getColor('backgroundDisabled') : trackInactiveColor;
-});
-var Knob = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 100%;\n  background-color: ", ";\n  display: block;\n  transition: ", ";\n"])), trackOffset, trackOffset, knobSizePx, knobSizePx, function (p) {
-  return p.isDisabled ? getColor('contentDisabled') : 'white';
-}, getTransition('xFast'));
-var Wrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n"])));
+var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackInactiveColor: ", ";\n  --trackActiveColor: ", ";\n  --knobColor: ", ";\n\n  appearance: none;\n  height: ", "px;\n  width: ", "px;\n  display: block;\n  border-radius: 1000px;\n  transition: background-color ", ";\n  cursor: pointer;\n  margin: 0;\n  position: relative;\n  background-color: var(--trackInactiveColor);\n\n  &:checked {\n    background-color: var(--trackActiveColor);\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 100%;\n    background-color: var(--knobColor);\n    display: block;\n    transition: transform ", ";\n    pointer-events: none;\n  }\n\n  &:checked:after {\n    transform: translateX(", "px);\n  }\n"])), function (p) {
+  return getColor(p.disabled ? 'backgroundDisabled' : 'grey3');
+}, function (p) {
+  return getColor(p.disabled ? 'backgroundDisabled' : 'content');
+}, function (p) {
+  return p.disabled ? getColor('contentDisabled') : 'white';
+}, trackHeight, trackWidth, getTransition('xFast'), trackOffset, trackOffset, knobSizePx, knobSizePx, getTransition('xFast'), trackWidth - knobSizePx - trackOffset * 2);
+var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n"])));
 export var Switch = function Switch(_ref) {
   var isDisabled = _ref.isDisabled,
       isActive = _ref.isActive,
@@ -48,14 +44,7 @@ export var Switch = function Switch(_ref) {
     id: id,
     checked: isActive,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Track, {
-    htmlFor: id,
-    className: "Track",
-    isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(Knob, {
-    className: "Knob",
-    isDisabled: isDisabled
-  })), label && /*#__PURE__*/React.createElement("label", {
+  }), label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label));
 };

package/es/components/text-input.js

@@ -44,7 +44,7 @@ import { css } from '@emotion/react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
 import { transitions } from '../foundational';
-var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n  --grn-fieldXPadding: 12px;\n"])));
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n"])));
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
 var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), variables);

package/es/styles/base.css

@@ -2,8 +2,8 @@
 @import './components-variables.css';
 
 :root {
-  --grn-letterSpacing-fixed: 1.3px;
-  --grn-letterSpacing-relative: 0.07em;
+  --grn-letterSpacing-fixed: 1px;
+  --grn-letterSpacing-relative: 0.06em;
   --grn-letterSpacing-global: calc(var(--grn-letterSpacing-fixed) - var(--grn-letterSpacing-relative));
 
   --grn-lineHeight-fixed: 7px;

package/es/styles/components-variables.css

@@ -2,4 +2,5 @@
   --grn-textBoxHeight-s: 28px;
   --grn-textBoxHeight-m: 40px;
   --grn-clearButtonHeight-m: 36px;
+  --grn-fieldXPadding: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@headlessui/react": "^1.6.6",
     "core-js": "^3.22.8",
     "prop-types": "^15.8.1"
   },