@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/esm/controls/Range.stories.js

@@ -0,0 +1,83 @@
+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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 React, { useState } from 'react';
+import { RangeControl } from './Range';
+export default {
+  title: 'Controls/Range',
+  component: RangeControl
+};
+
+var Template = function Template(_ref) {
+  var initialValue = _ref.initialValue,
+      step = _ref.step,
+      max = _ref.max;
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RangeControl, {
+    name: "range",
+    value: value,
+    onChange: function onChange(newVal) {
+      return setValue(newVal);
+    },
+    min: 0,
+    max: max,
+    step: step
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+export var Basic = function Basic() {
+  return Template({
+    initialValue: 10,
+    max: 20,
+    step: 2
+  });
+};
+export var Zero = function Zero() {
+  return Template({
+    initialValue: 0,
+    max: 20,
+    step: 2
+  });
+};
+export var Decimals = function Decimals() {
+  return Template({
+    step: 0.000000000002,
+    initialValue: 1989.123123123123,
+    max: 2000
+  });
+};
+export var BigMaxValue = function BigMaxValue() {
+  return Template({
+    step: 1000,
+    initialValue: 15,
+    max: 10000000000
+  });
+};
+export var Undefined = function Undefined() {
+  return Template({});
+};

package/dist/esm/controls/Text.js

@@ -0,0 +1,72 @@
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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.function.name.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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import React, { useCallback, useState } from 'react';
+import { styled } from '@storybook/theming';
+import { Form } from '../form';
+import { getControlId, getControlSetterButtonId } from './helpers';
+var Wrapper = styled.label({
+  display: 'flex'
+});
+export var TextControl = function TextControl(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur;
+
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceVisible = _useState2[0],
+      setForceVisible = _useState2[1];
+
+  var onForceVisible = useCallback(function () {
+    onChange('');
+    setForceVisible(true);
+  }, [setForceVisible]);
+
+  if (value === undefined) {
+    return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
+      onClick: onForceVisible
+    }, "Set string");
+  }
+
+  var isValid = typeof value === 'string';
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Form.Textarea, {
+    id: getControlId(name),
+    onChange: handleChange,
+    size: "flex",
+    placeholder: "Edit string...",
+    autoFocus: forceVisible,
+    valid: isValid ? null : 'error',
+    name: name,
+    value: isValid ? value : '',
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+};
+TextControl.displayName = "TextControl";

package/dist/esm/controls/Text.stories.js

@@ -0,0 +1,54 @@
+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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 React, { useState } from 'react';
+import { TextControl } from './Text';
+export default {
+  title: 'Controls/Text',
+  component: TextControl
+};
+
+var Template = function Template(initialValue) {
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextControl, {
+    name: "Text",
+    value: value,
+    onChange: function onChange(newVal) {
+      return setValue(newVal);
+    }
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+export var Basic = function Basic() {
+  return Template('Hello text');
+};
+export var Empty = function Empty() {
+  return Template('');
+};
+export var Undefined = function Undefined() {
+  return Template(undefined);
+};

package/dist/esm/controls/helpers.js

@@ -0,0 +1,22 @@
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.regexp.exec.js";
+
+/**
+ * Adds `control` prefix to make ID attribute more specific.
+ * Removes spaces because spaces are not allowed in ID attributes
+ * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
+ * @example getControlId('my prop name') -> 'control-my-prop-name'
+ */
+export var getControlId = function getControlId(value) {
+  return "control-".concat(value.replace(/\s+/g, '-'));
+};
+/**
+ * Adds `set` prefix to make ID attribute more specific.
+ * Removes spaces because spaces are not allowed in ID attributes
+ * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
+ * @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
+ */
+
+export var getControlSetterButtonId = function getControlSetterButtonId(value) {
+  return "set-".concat(value.replace(/\s+/g, '-'));
+};

package/dist/esm/controls/index.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+import React, { Suspense } from 'react';
+export * from './types';
+export * from './Boolean';
+var LazyColorControl = /*#__PURE__*/React.lazy(function () {
+  return import('./Color');
+});
+export var ColorControl = function ColorControl(props) {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(LazyColorControl, props));
+};
+ColorControl.displayName = "ColorControl";
+export * from './Date';
+export * from './Number';
+export * from './options';
+export * from './Object';
+export * from './Range';
+export * from './Text';
+export * from './Files';

package/dist/esm/controls/options/Checkbox.js

@@ -0,0 +1,123 @@
+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" && Symbol.iterator in Object(iter)) 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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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.function.name.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.splice.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
+import { selectedKeys, selectedValues } from './helpers';
+import { getControlId } from '../helpers';
+var Wrapper = styled.div(function (_ref) {
+  var isInline = _ref.isInline;
+  return isInline ? {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    label: {
+      display: 'inline-flex',
+      marginRight: 15
+    }
+  } : {
+    label: {
+      display: 'flex'
+    }
+  };
+});
+var Text = styled.span({});
+var Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+  '&:last-child': {
+    marginBottom: 0
+  },
+  input: {
+    margin: 0,
+    marginRight: 6
+  }
+});
+export var CheckboxControl = function CheckboxControl(_ref2) {
+  var name = _ref2.name,
+      options = _ref2.options,
+      value = _ref2.value,
+      onChange = _ref2.onChange,
+      isInline = _ref2.isInline;
+
+  if (!options) {
+    logger.warn("Checkbox with no options: ".concat(name));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
+  }
+
+  var initial = selectedKeys(value, options);
+
+  var _useState = useState(initial),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var handleChange = function handleChange(e) {
+    var option = e.target.value;
+
+    var updated = _toConsumableArray(selected);
+
+    if (updated !== null && updated !== void 0 && updated.includes(option)) {
+      updated.splice(updated.indexOf(option), 1);
+    } else {
+      updated.push(option);
+    }
+
+    onChange(selectedValues(updated, options));
+    setSelected(updated);
+  };
+
+  var controlId = getControlId(name);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    isInline: isInline
+  }, Object.keys(options).map(function (key, index) {
+    var id = "".concat(controlId, "-").concat(index);
+    return /*#__PURE__*/React.createElement(Label, {
+      key: id,
+      htmlFor: id
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      id: id,
+      name: id,
+      value: key,
+      onChange: handleChange,
+      checked: selected === null || selected === void 0 ? void 0 : selected.includes(key)
+    }), /*#__PURE__*/React.createElement(Text, null, key));
+  }));
+};
+CheckboxControl.displayName = "CheckboxControl";

package/dist/esm/controls/options/Options.js

@@ -0,0 +1,70 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import React from 'react';
+import dedent from 'ts-dedent';
+import { once } from '@storybook/client-logger';
+import { CheckboxControl } from './Checkbox';
+import { RadioControl } from './Radio';
+import { SelectControl } from './Select';
+
+/**
+ * Options can accept `options` in two formats:
+ * - array: ['a', 'b', 'c'] OR
+ * - object: { a: 1, b: 2, c: 3 } (deprecated)
+ *
+ * We always normalize to the more generalized object format and ONLY handle
+ * the object format in the underlying control implementations.
+ *
+ * While non-primitive values are deprecated, they might still not be valid
+ * object keys, so the resulting object is a Label -> Value mapping.
+ */
+var normalizeOptions = function normalizeOptions(options, labels) {
+  if (Array.isArray(options)) {
+    return options.reduce(function (acc, item) {
+      acc[(labels === null || labels === void 0 ? void 0 : labels[item]) || String(item)] = item;
+      return acc;
+    }, {});
+  }
+
+  return options;
+};
+
+var Controls = {
+  check: CheckboxControl,
+  'inline-check': CheckboxControl,
+  radio: RadioControl,
+  'inline-radio': RadioControl,
+  select: SelectControl,
+  'multi-select': SelectControl
+};
+export var OptionsControl = function OptionsControl(props) {
+  var _props$type = props.type,
+      type = _props$type === void 0 ? 'select' : _props$type,
+      options = props.options,
+      labels = props.labels,
+      argType = props.argType;
+  var normalized = Object.assign({}, props, {
+    options: normalizeOptions(options || argType.options, labels),
+    isInline: type.includes('inline'),
+    isMulti: type.includes('multi')
+  });
+
+  if (options) {
+    once.warn(dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.\n\n      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions\n    "]))));
+  }
+
+  var Control = Controls[type];
+
+  if (Control) {
+    return /*#__PURE__*/React.createElement(Control, normalized);
+  }
+
+  throw new Error("Unknown options type: ".concat(type));
+};

package/dist/esm/controls/options/Options.stories.js

@@ -0,0 +1,126 @@
+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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 React, { useState } from 'react';
+import { OptionsControl } from './Options';
+export default {
+  title: 'Controls/Options',
+  component: OptionsControl
+};
+var arrayOptions = ['Bat', 'Cat', 'Rat'];
+var objectOptions = {
+  A: {
+    id: 'Aardvark'
+  },
+  B: {
+    id: 'Bat'
+  },
+  C: {
+    id: 'Cat'
+  }
+};
+
+var rawOptionsHelper = function rawOptionsHelper(options, type, isMulti, initial) {
+  var _useState = useState(isMulti ? [initial] : initial),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionsControl, {
+    name: "options",
+    options: options,
+    value: value,
+    type: type,
+    onChange: function onChange(newVal) {
+      return setValue(newVal);
+    }
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+var optionsHelper = function optionsHelper(options, type, isMulti) {
+  return rawOptionsHelper(options, type, isMulti, Array.isArray(options) ? options[1] : options.B);
+}; // Check
+
+
+export var ArrayCheck = function ArrayCheck() {
+  return optionsHelper(arrayOptions, 'check', true);
+};
+export var ArrayInlineCheck = function ArrayInlineCheck() {
+  return optionsHelper(arrayOptions, 'inline-check', true);
+};
+export var ObjectCheck = function ObjectCheck() {
+  return optionsHelper(objectOptions, 'check', true);
+};
+export var ObjectInlineCheck = function ObjectInlineCheck() {
+  return optionsHelper(objectOptions, 'inline-check', true);
+};
+export var ArrayCheckUndefined = function ArrayCheckUndefined() {
+  return rawOptionsHelper(arrayOptions, 'check', false, undefined);
+};
+export var ObjectCheckUndefined = function ObjectCheckUndefined() {
+  return rawOptionsHelper(objectOptions, 'check', false, undefined);
+}; // Radio
+
+export var ArrayRadio = function ArrayRadio() {
+  return optionsHelper(arrayOptions, 'radio', false);
+};
+export var ArrayInlineRadio = function ArrayInlineRadio() {
+  return optionsHelper(arrayOptions, 'inline-radio', false);
+};
+export var ObjectRadio = function ObjectRadio() {
+  return optionsHelper(objectOptions, 'radio', false);
+};
+export var ObjectInlineRadio = function ObjectInlineRadio() {
+  return optionsHelper(objectOptions, 'inline-radio', false);
+};
+export var ArrayRadioUndefined = function ArrayRadioUndefined() {
+  return rawOptionsHelper(arrayOptions, 'radio', false, undefined);
+};
+export var ObjectRadioUndefined = function ObjectRadioUndefined() {
+  return rawOptionsHelper(objectOptions, 'radio', false, undefined);
+}; // Select
+
+export var ArraySelect = function ArraySelect() {
+  return optionsHelper(arrayOptions, 'select', false);
+};
+export var ArrayMultiSelect = function ArrayMultiSelect() {
+  return optionsHelper(arrayOptions, 'multi-select', true);
+};
+export var ObjectSelect = function ObjectSelect() {
+  return optionsHelper(objectOptions, 'select', false);
+};
+export var ObjectMultiSelect = function ObjectMultiSelect() {
+  return optionsHelper(objectOptions, 'multi-select', true);
+};
+export var ArraySelectUndefined = function ArraySelectUndefined() {
+  return rawOptionsHelper(arrayOptions, 'select', false, undefined);
+};
+export var ObjectSelectUndefined = function ObjectSelectUndefined() {
+  return rawOptionsHelper(objectOptions, 'select', false, undefined);
+};
+export var ArrayMultiSelectUndefined = function ArrayMultiSelectUndefined() {
+  return rawOptionsHelper(arrayOptions, 'multi-select', false, undefined);
+};
+export var ObjectMultiSelectUndefined = function ObjectMultiSelectUndefined() {
+  return rawOptionsHelper(objectOptions, 'multi-select', false, undefined);
+};

package/dist/esm/controls/options/Radio.js

@@ -0,0 +1,77 @@
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
+import { selectedKey } from './helpers';
+import { getControlId } from '../helpers';
+var Wrapper = styled.div(function (_ref) {
+  var isInline = _ref.isInline;
+  return isInline ? {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    label: {
+      display: 'inline-flex',
+      marginRight: 15
+    }
+  } : {
+    label: {
+      display: 'flex'
+    }
+  };
+});
+var Fieldset = styled.fieldset({
+  border: 0,
+  padding: 0,
+  margin: 0
+});
+var Text = styled.span({});
+var Label = styled.label({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+  '&:last-child': {
+    marginBottom: 0
+  },
+  input: {
+    margin: 0,
+    marginRight: 6
+  }
+});
+export var RadioControl = function RadioControl(_ref2) {
+  var name = _ref2.name,
+      options = _ref2.options,
+      value = _ref2.value,
+      _onChange = _ref2.onChange,
+      isInline = _ref2.isInline;
+
+  if (!options) {
+    logger.warn("Radio with no options: ".concat(name));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
+  }
+
+  var selection = selectedKey(value, options);
+  var controlId = getControlId(name);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    isInline: isInline
+  }, Object.keys(options).map(function (key, index) {
+    var id = "".concat(controlId, "-").concat(index);
+    return /*#__PURE__*/React.createElement(Label, {
+      key: id,
+      htmlFor: id
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      id: id,
+      name: id,
+      value: key,
+      onChange: function onChange(e) {
+        return _onChange(options[e.currentTarget.value]);
+      },
+      checked: key === selection
+    }), /*#__PURE__*/React.createElement(Text, null, key));
+  }));
+};
+RadioControl.displayName = "RadioControl";