@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/RadioGroup/RadioGroup.js

@@ -0,0 +1,118 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["disabled", "disabledText", "onSelect", "defaultValue", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import React from "react";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+/**
+ * A stateful collection of Radio buttons
+ */
+export var RadioGroup = /*#__PURE__*/function (_React$Component) {
+  function RadioGroup() {
+    var _this2$props$defaultV;
+    var _this2;
+    _classCallCheck(this, RadioGroup);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this2 = _callSuper(this, RadioGroup, [].concat(args));
+    _this2.state = {
+      selectedOption: (_this2$props$defaultV = _this2.props.defaultValue) !== null && _this2$props$defaultV !== void 0 ? _this2$props$defaultV : null
+    };
+    _this2.onSelect = function (_ref) {
+      var value = _ref.value;
+      // After state update, call back up the tree with the latest state
+      var update = function update() {
+        if (_this2.props.onSelect) {
+          _this2.props.onSelect(_this2.state.selectedOption);
+        }
+      };
+      if (_this2.props.deselectable) {
+        if (_this2.state.selectedOption === value) {
+          _this2.setState({
+            selectedOption: null
+          }, update);
+          return;
+        }
+      }
+      _this2.setState({
+        selectedOption: value
+      }, update);
+    };
+    return _this2;
+  }
+  _inherits(RadioGroup, _React$Component);
+  return _createClass(RadioGroup, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.defaultValue !== this.props.defaultValue) {
+        this.setState({
+          selectedOption: this.props.defaultValue
+        });
+      }
+    }
+  }, {
+    key: "renderRadioButtons",
+    value: function renderRadioButtons() {
+      var _this3 = this;
+      return React.Children.map(this.props.children, function (child) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          disabled: child.props.disabled !== undefined ? child.props.disabled : _this3.props.disabled,
+          onSelect: child.props.onSelect ? function (selected) {
+            var _child$props$onSelect, _child$props;
+            _this3.onSelect(selected);
+            (_child$props$onSelect = (_child$props = child.props).onSelect) === null || _child$props$onSelect === void 0 ? void 0 : _child$props$onSelect.call(_child$props, selected);
+          } : _this3.onSelect,
+          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.
+          selected: _this3.state.selectedOption === child.props.value
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        disabled = _this$props.disabled,
+        disabledText = _this$props.disabledText,
+        _onSelect = _this$props.onSelect,
+        _defaultValue = _this$props.defaultValue,
+        _children = _this$props.children,
+        rest = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(Flex, _extends({
+        flexDirection: "column"
+      }, rest), disabled && disabledText && /*#__PURE__*/React.createElement(Text, {
+        variant: "xs",
+        mb: 1,
+        color: "mono60"
+      }, disabledText), this.renderRadioButtons());
+    }
+  }]);
+}(React.Component);
+RadioGroup.displayName = "RadioGroup";
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/elements/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["React","Flex","Text","RadioGroup","_React$Component","_this2$props$defaultV","_this2","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","state","selectedOption","props","defaultValue","onSelect","_ref","value","update","deselectable","setState","_inherits","_createClass","key","componentDidUpdate","prevProps","renderRadioButtons","_this3","Children","map","children","child","cloneElement","disabled","undefined","selected","_child$props$onSelect","_child$props","call","render","_this$props","disabledText","_onSelect","_defaultValue","_children","rest","_objectWithoutProperties","_excluded","createElement","_extends","flexDirection","variant","mb","color","Component","displayName"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Text } from \"../Text\"\n\nexport interface RadioGroupProps<T> extends FlexProps {\n  /** Ability to deselect the selection */\n  deselectable?: boolean\n  /** Disable interactions */\n  disabled?: boolean\n  /** Text to display when disabled */\n  disabledText?: string\n  /** Callback when selected */\n  onSelect?: (selectedOption: T) => void\n  /** Default value of radio button */\n  defaultValue?: T\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps<T>>>\n    | React.ReactElement<RadioProps<T>>\n}\n\ninterface RadioGroupState<T> {\n  selectedOption: T | null\n}\n\n/**\n * A stateful collection of Radio buttons\n */\nexport class RadioGroup<T> extends React.Component<\n  RadioGroupProps<T>,\n  RadioGroupState<T>\n> {\n  state = {\n    selectedOption: this.props.defaultValue ?? null,\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState({\n        selectedOption: this.props.defaultValue!,\n      })\n    }\n  }\n\n  onSelect = ({ value }) => {\n    // After state update, call back up the tree with the latest state\n    const update = () => {\n      if (this.props.onSelect) {\n        this.props.onSelect(this.state.selectedOption!)\n      }\n    }\n\n    if (this.props.deselectable) {\n      if (this.state.selectedOption === value) {\n        this.setState(\n          {\n            selectedOption: null,\n          },\n          update\n        )\n        return\n      }\n    }\n\n    this.setState({ selectedOption: value }, update)\n  }\n\n  renderRadioButtons() {\n    return React.Children.map(\n      this.props.children,\n      (child: React.ReactElement<RadioProps<T>>) => {\n        return React.cloneElement(child, {\n          disabled:\n            child.props.disabled !== undefined\n              ? child.props.disabled\n              : this.props.disabled,\n          onSelect: child.props.onSelect\n            ? (selected) => {\n                this.onSelect(selected)\n                child.props.onSelect?.(selected)\n              }\n            : this.onSelect,\n          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.\n          selected: this.state.selectedOption === child.props.value,\n        })\n      }\n    )\n  }\n\n  render() {\n    const {\n      disabled,\n      disabledText,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onSelect: _onSelect,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultValue: _defaultValue,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      children: _children,\n      ...rest\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...rest}>\n        {disabled && disabledText && (\n          <Text variant=\"xs\" mb={1} color=\"mono60\">\n            {disabledText}\n          </Text>\n        )}\n\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/RadioGroup/RadioGroup.story.js

@@ -0,0 +1,204 @@
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { fn } from "@storybook/test";
+import React, { useState } from "react";
+import { Spacer } from "../Spacer";
+import { Button } from "../Button";
+import { Radio } from "../Radio/Radio";
+import { RadioGroup } from "./RadioGroup";
+import { Join } from "../Join";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: RadioGroup,
+  title: "Components/RadioGroup",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A group of radio button inputs with support for default values and deselection."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 0.5
+      })
+    }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value,
+        label: value
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic radio group with multiple options."
+      }
+    }
+  }
+};
+export var WithDefaultValue = {
+  args: {
+    defaultValue: "Aural",
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 0.5
+      })
+    }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value,
+        label: value
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio group with a pre-selected default value."
+      }
+    }
+  }
+};
+export var Deselectable = {
+  args: {
+    deselectable: true,
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 0.5
+      })
+    }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value,
+        label: value
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio group that allows deselecting the current selection."
+      }
+    }
+  }
+};
+export var Disabled = {
+  args: {
+    disabled: true,
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 0.5
+      })
+    }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value,
+        label: value
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled radio group that cannot be interacted with."
+      }
+    }
+  }
+};
+export var DisabledWithText = {
+  args: {
+    disabled: true,
+    disabledText: "Reason for disabled",
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 0.5
+      })
+    }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value,
+        label: value
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled radio group with explanatory text."
+      }
+    }
+  }
+};
+export var InteractiveDefault = {
+  render: function render() {
+    var _useState = useState("PICKUP"),
+      _useState2 = _slicedToArray(_useState, 2),
+      defaultValue = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      mb: 2,
+      onClick: function onClick() {
+        setValue(defaultValue === "PICKUP" ? "SHIP" : "PICKUP");
+      }
+    }, "Toggle default value: ", defaultValue), /*#__PURE__*/React.createElement(RadioGroup, {
+      defaultValue: defaultValue,
+      onSelect: fn()
+    }, /*#__PURE__*/React.createElement(Radio, {
+      value: "SHIP",
+      label: "Provide shipping address"
+    }), /*#__PURE__*/React.createElement(Spacer, {
+      y: 0.5
+    }), /*#__PURE__*/React.createElement(Radio, {
+      value: "PICKUP",
+      label: "Arrange for pickup"
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive example with dynamically changing default value."
+      }
+    }
+  }
+};
+export var BooleanValues = {
+  args: {
+    defaultValue: false,
+    onSelect: fn(),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio, {
+      value: true,
+      label: "Yes"
+    }), /*#__PURE__*/React.createElement(Spacer, {
+      y: 0.5
+    }), /*#__PURE__*/React.createElement(Radio, {
+      value: false,
+      label: "No"
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio group with boolean values instead of strings."
+      }
+    }
+  }
+};
+//# sourceMappingURL=RadioGroup.story.js.map

package/dist/esm/elements/RadioGroup/RadioGroup.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.story.js","names":["fn","React","useState","Spacer","Button","Radio","RadioGroup","Join","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","onSelect","children","createElement","separator","y","map","value","key","label","story","WithDefaultValue","defaultValue","Deselectable","deselectable","Disabled","disabled","DisabledWithText","disabledText","InteractiveDefault","render","_useState","_useState2","_slicedToArray","setValue","Fragment","mb","onClick","BooleanValues"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { Spacer } from \"../Spacer\"\nimport { Button } from \"../Button\"\nimport { Radio } from \"../Radio/Radio\"\nimport { RadioGroup } from \"./RadioGroup\"\nimport { Join } from \"../Join\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: RadioGroup,\n  title: \"Components/RadioGroup\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A group of radio button inputs with support for default values and deselection.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    onSelect: fn(),\n    children: (\n      <Join separator={<Spacer y={0.5} />}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return <Radio key={value} value={value} label={value} />\n          }\n        )}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic radio group with multiple options.\",\n      },\n    },\n  },\n}\n\nexport const WithDefaultValue = {\n  args: {\n    defaultValue: \"Aural\",\n    onSelect: fn(),\n    children: (\n      <Join separator={<Spacer y={0.5} />}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return <Radio key={value} value={value} label={value} />\n          }\n        )}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio group with a pre-selected default value.\",\n      },\n    },\n  },\n}\n\nexport const Deselectable = {\n  args: {\n    deselectable: true,\n    onSelect: fn(),\n    children: (\n      <Join separator={<Spacer y={0.5} />}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return <Radio key={value} value={value} label={value} />\n          }\n        )}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio group that allows deselecting the current selection.\",\n      },\n    },\n  },\n}\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n    onSelect: fn(),\n    children: (\n      <Join separator={<Spacer y={0.5} />}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return <Radio key={value} value={value} label={value} />\n          }\n        )}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled radio group that cannot be interacted with.\",\n      },\n    },\n  },\n}\n\nexport const DisabledWithText = {\n  args: {\n    disabled: true,\n    disabledText: \"Reason for disabled\",\n    onSelect: fn(),\n    children: (\n      <Join separator={<Spacer y={0.5} />}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return <Radio key={value} value={value} label={value} />\n          }\n        )}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled radio group with explanatory text.\",\n      },\n    },\n  },\n}\n\nexport const InteractiveDefault = {\n  render: () => {\n    const [defaultValue, setValue] = useState(\"PICKUP\")\n\n    return (\n      <>\n        <Button\n          mb={2}\n          onClick={() => {\n            setValue(defaultValue === \"PICKUP\" ? \"SHIP\" : \"PICKUP\")\n          }}\n        >\n          Toggle default value: {defaultValue}\n        </Button>\n        <RadioGroup defaultValue={defaultValue} onSelect={fn()}>\n          <Radio value=\"SHIP\" label=\"Provide shipping address\" />\n          <Spacer y={0.5} />\n          <Radio value=\"PICKUP\" label=\"Arrange for pickup\" />\n        </RadioGroup>\n      </>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Interactive example with dynamically changing default value.\",\n      },\n    },\n  },\n}\n\nexport const BooleanValues = {\n  args: {\n    defaultValue: false,\n    onSelect: fn(),\n    children: (\n      <>\n        <Radio value={true} label=\"Yes\" />\n        <Spacer y={0.5} />\n        <Radio value={false} label=\"No\" />\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio group with boolean values instead of strings.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export * from "./RadioGroup";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/RadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/RadioGroup/index.tsx"],"sourcesContent":["export * from \"./RadioGroup\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Range/Range.js

@@ -0,0 +1,135 @@
+var _excluded = ["ariaLabels", "min", "max", "step", "value", "onChange"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import { themeGet } from "@styled-system/theme-get";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { useUpdateEffect } from "../../utils";
+import { remapValue } from "../../utils/remapValue";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+export var RANGE_HANDLE_SIZE = 24;
+export var Range = function Range(_ref) {
+  var ariaLabels = _ref.ariaLabels,
+    min = _ref.min,
+    max = _ref.max,
+    step = _ref.step,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [0, max] : _ref$value,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var minRef = useRef(null);
+  var maxRef = useRef(null);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    values = _useState2[0],
+    setValues = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    maxWidth = _useState4[0],
+    setMaxWidth = _useState4[1];
+  var handleMinChange = function handleMinChange(_ref2) {
+    var value = _ref2.target.valueAsNumber;
+    if (value > values[1] - step) return;
+    setValues([value, values[1]]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([value, values[1]]);
+  };
+  var handleMaxChange = function handleMaxChange(_ref3) {
+    var value = _ref3.target.valueAsNumber;
+    if (value < values[0] + step) return;
+    setValues([values[0], value]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([values[0], value]);
+  };
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      if (!maxRef.current) return;
+      setMaxWidth(maxRef.current.offsetWidth);
+    };
+    requestAnimationFrame(handleResize);
+    window.addEventListener("resize", handleResize, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // Sync local state with value prop
+  useUpdateEffect(function () {
+    setValues(value);
+  }, _toConsumableArray(value));
+  var selectionRectangle = "rect(0, ".concat(remapValue(values[1], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px, 2px, ").concat(remapValue(values[0], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px)");
+  var maxRectangle = "rect(0, ".concat(maxWidth, "px, ").concat(RANGE_HANDLE_SIZE, "px, ").concat(remapValue(values[1], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px)");
+  return /*#__PURE__*/React.createElement(Track, rest, /*#__PURE__*/React.createElement(Selection, {
+    style: {
+      clip: selectionRectangle
+    }
+  }), /*#__PURE__*/React.createElement(Slider, {
+    ref: minRef,
+    min: min,
+    max: max,
+    step: step,
+    onInput: handleMinChange,
+    value: values[0],
+    "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[0]
+  }), /*#__PURE__*/React.createElement(Slider, {
+    ref: maxRef,
+    min: min,
+    max: max,
+    step: step,
+    onInput: handleMaxChange,
+    value: values[1],
+    style: {
+      clip: maxRectangle
+    },
+    "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[1]
+  }));
+};
+Range.displayName = "Range";
+var Track = styled(Flex).withConfig({
+  displayName: "Range__Track",
+  componentId: "sc-si9a6m-0"
+})(["align-items:center;position:relative;height:", "px;&:before{content:\"\";display:block;position:absolute;height:2px;left:0;right:0;top:50%;margin-top:-1px;background-color:", ";}"], RANGE_HANDLE_SIZE, themeGet("colors.mono30"));
+var Selection = styled(Box).withConfig({
+  displayName: "Range__Selection",
+  componentId: "sc-si9a6m-1"
+})(["position:absolute;height:2px;left:0;right:0;top:50%;margin-top:-1px;background-color:", ";"], themeGet("colors.brand"));
+var railStyles = css(["width:100%;height:", "px;"], RANGE_HANDLE_SIZE);
+var handleStyles = css(["user-select:none;cursor:grab;width:", "px;height:", "px;background-color:", ";border-radius:50%;border:1px solid ", ";box-shadow:", ";"], RANGE_HANDLE_SIZE, RANGE_HANDLE_SIZE, themeGet("colors.mono0"), themeGet("colors.mono10"), themeGet("effects.flatShadow"));
+var Slider = styled.input.withConfig({
+  displayName: "Range__Slider",
+  componentId: "sc-si9a6m-2"
+})(["appearance:none;background:transparent;position:relative;margin:0;width:100%;position:absolute;top:0;left:0;&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}&::-webkit-slider-thumb{-webkit-appearance:none;", "}&::-moz-range-thumb{", "}&:active{&::-webkit-slider-thumb{box-shadow:none;background-color:", ";}&::-moz-range-thumb{box-shadow:none;background-color:", ";}}"], railStyles, railStyles, handleStyles, handleStyles, themeGet("colors.mono5"), themeGet("colors.mono5"));
+Slider.defaultProps = {
+  type: "range"
+};
+//# sourceMappingURL=Range.js.map

package/dist/esm/elements/Range/Range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.js","names":["themeGet","React","useEffect","useRef","useState","styled","css","useUpdateEffect","remapValue","Box","Flex","RANGE_HANDLE_SIZE","Range","_ref","ariaLabels","min","max","step","_ref$value","value","onChange","rest","_objectWithoutProperties","_excluded","minRef","maxRef","_useState","_useState2","_slicedToArray","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","target","valueAsNumber","handleMaxChange","_ref3","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","_toConsumableArray","selectionRectangle","concat","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","withConfig","componentId","railStyles","handleStyles","input","defaultProps","type"],"sources":["../../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<React.PropsWithChildren<RangeProps>> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.mono30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.mono0\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  box-shadow: ${themeGet(\"effects.flatShadow\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}