@webiny/ui 0.0.0-mt-1

package/Button/Button.js

@@ -0,0 +1,139 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["disabled", "icon", "onClick", "small", "label", "ripple", "className"];
+import * as React from "react";
+import * as R from "@rmwc/button";
+import { Fab } from "@rmwc/fab";
+import { Icon } from "../Icon/Icon";
+import classNames from "classnames";
+
+/**
+ * Shows a default button, used typically when action is not of high priority.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ButtonDefault = function ButtonDefault(props) {
+  var disabled = props.disabled,
+      onClick = props.onClick,
+      children = props.children,
+      small = props.small,
+      _props$ripple = props.ripple,
+      ripple = _props$ripple === void 0 ? true : _props$ripple,
+      _props$className = props.className,
+      className = _props$className === void 0 ? "" : _props$className,
+      style = props.style;
+  return /*#__PURE__*/React.createElement(R.Button, {
+    style: style,
+    disabled: disabled,
+    dense: small,
+    onClick: onClick,
+    ripple: ripple,
+    className: classNames("webiny-ui-button", className),
+    "data-testid": props["data-testid"]
+  }, children);
+};
+/**
+ * Shows primary button, eg. for submitting forms.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+
+export var ButtonPrimary = function ButtonPrimary(props) {
+  var disabled = props.disabled,
+      onClick = props.onClick,
+      children = props.children,
+      _props$small = props.small,
+      small = _props$small === void 0 ? false : _props$small,
+      _props$flat = props.flat,
+      flat = _props$flat === void 0 ? false : _props$flat,
+      _props$ripple2 = props.ripple,
+      ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
+      _props$style = props.style,
+      style = _props$style === void 0 ? null : _props$style,
+      _props$className2 = props.className,
+      className = _props$className2 === void 0 ? null : _props$className2;
+  return /*#__PURE__*/React.createElement(R.Button, {
+    raised: !flat,
+    dense: small,
+    disabled: disabled,
+    unelevated: flat,
+    ripple: ripple,
+    onClick: onClick,
+    style: style,
+    className: classNames("webiny-ui-button webiny-ui-button--primary", className),
+    "data-testid": props["data-testid"]
+  }, children);
+};
+/**
+ * Shows a secondary button - eg. for doing a reset on a form.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+
+export var ButtonSecondary = function ButtonSecondary(props) {
+  var disabled = props.disabled,
+      onClick = props.onClick,
+      children = props.children,
+      _props$small2 = props.small,
+      small = _props$small2 === void 0 ? false : _props$small2,
+      _props$ripple3 = props.ripple,
+      ripple = _props$ripple3 === void 0 ? true : _props$ripple3,
+      _props$className3 = props.className,
+      className = _props$className3 === void 0 ? null : _props$className3,
+      _props$style2 = props.style,
+      style = _props$style2 === void 0 ? null : _props$style2;
+  return /*#__PURE__*/React.createElement(R.Button, {
+    disabled: disabled,
+    outlined: true,
+    dense: small,
+    ripple: ripple,
+    onClick: onClick,
+    style: style,
+    className: classNames("webiny-ui-button webiny-ui-button--secondary", className),
+    "data-testid": props["data-testid"]
+  }, children);
+};
+
+/**
+ * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ButtonFloating = function ButtonFloating(props) {
+  var disabled = props.disabled,
+      icon = props.icon,
+      onClick = props.onClick,
+      _props$small3 = props.small,
+      small = _props$small3 === void 0 ? false : _props$small3,
+      _props$label = props.label,
+      label = _props$label === void 0 ? false : _props$label,
+      _props$ripple4 = props.ripple,
+      ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
+      _props$className4 = props.className,
+      className = _props$className4 === void 0 ? null : _props$className4,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(Fab, Object.assign({
+    "data-testid": props["data-testid"],
+    disabled: disabled,
+    mini: small,
+    onClick: onClick,
+    label: label,
+    ripple: ripple,
+    icon: icon,
+    className: classNames("webiny-ui-button--floating", className)
+  }, rest));
+};
+/**
+ * Shows an icon, suitable to be shown inside of a button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+
+export var ButtonIcon = function ButtonIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, props);
+};

package/Button/Button.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Button/Button.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./../Button/README.md";
+import { ReactComponent as CloudIcon } from "@svgr/webpack!./assets/baseline-cloud_done-24px.svg";
+import { ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon } from "./Button";
+var story = storiesOf("Components/Button", module);
+story.addDecorator(withKnobs);
+story.add("standard buttons", function () {
+  var label = text("Label", "Click to proceed");
+  var small = boolean("Small", false);
+  var flat = boolean("Flat", false);
+  var icon = /*#__PURE__*/React.createElement(ButtonIcon, {
+    icon: /*#__PURE__*/React.createElement(CloudIcon, null)
+  });
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Primary button"
+  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+    small: small,
+    flat: flat
+  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Primary button with icon"
+  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+    small: small,
+    flat: flat
+  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Secondary button"
+  }, /*#__PURE__*/React.createElement(ButtonSecondary, {
+    small: small
+  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Secondary button with icon"
+  }, /*#__PURE__*/React.createElement(ButtonSecondary, {
+    small: small
+  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Default button"
+  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+    small: small
+  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Default button with icon"
+  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+    small: small
+  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Floating button"
+  }, /*#__PURE__*/React.createElement(ButtonFloating, {
+    small: small,
+    icon: icon
+  })));
+}, {
+  info: {
+    propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]
+  }
+});

package/Button/CopyButton/CopyButton.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { FormComponentProps } from "../../types";
+export declare type CopyButtonProps = FormComponentProps & {
+    value: string;
+    onCopy?: () => void;
+};
+/**
+ * Shows the icon button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
+export { CopyButton };

package/Button/CopyButton/CopyButton.js

@@ -0,0 +1,32 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onCopy"];
+import * as React from "react";
+import { ReactComponent as CopyToClipboardIcon } from "@svgr/webpack!../assets/file_copy-24px.svg";
+import { IconButton } from "../index";
+import { useCallback } from "react";
+
+/**
+ * Shows the icon button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var CopyButton = function CopyButton(props) {
+  var value = props.value,
+      onCopy = props.onCopy,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var copyToClipboard = useCallback(function () {
+    navigator.clipboard.writeText(value);
+
+    if (typeof onCopy === "function") {
+      onCopy();
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, otherProps, {
+    onClick: copyToClipboard,
+    icon: /*#__PURE__*/React.createElement(CopyToClipboardIcon, null)
+  }));
+};
+
+export { CopyButton };

package/Button/CopyButton/CopyButton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Button/CopyButton/CopyButton.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { Menu, MenuItem } from "./../../Menu/index";
+import { CopyButton } from "./CopyButton";
+var story = storiesOf("Components/Button", module);
+story.add("copy button", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Copy button"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/React.createElement(CopyButton, {
+    value: "Hello"
+  }))));
+}, {
+  info: {
+    propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
+  }
+});

package/Button/CopyButton/README.md

@@ -0,0 +1,11 @@
+# Copy Button
+
+### Description
+
+Provides a button that allows you to copy its passed `value` to the clipboard.
+
+### Import
+
+```js
+import { CopyButton } from "@webiny/ui/Button";
+```

package/Button/IconButton/IconButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { IconButtonProps as RmwcIconButtonProps } from "@rmwc/icon-button";
+import { FormComponentProps } from "../../types";
+export declare type IconButtonProps = FormComponentProps & RmwcIconButtonProps & {
+    id?: string;
+    /**
+     * Icon should be provided as an SvgComponent.
+     */
+    icon: React.ReactNode;
+    /**
+     * Button label
+     */
+    label?: string;
+    /**
+     * onClick handler
+     * @param event
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+    /**
+     * For testing purposes.
+     */
+    "data-testid"?: string;
+    /**
+     * Should icon be disabled?
+     */
+    disabled?: boolean;
+};
+/**
+ * Shows the icon button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+declare const IconButton: (props: IconButtonProps) => JSX.Element;
+export { IconButton };

package/Button/IconButton/IconButton.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { IconButton as RIconButton } from "@rmwc/icon-button";
+
+/**
+ * Shows the icon button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var IconButton = function IconButton(props) {
+  var id = props.id,
+      icon = props.icon,
+      label = props.label,
+      onClick = props.onClick,
+      className = props.className,
+      disabled = props.disabled,
+      _props$ripple = props.ripple,
+      ripple = _props$ripple === void 0 ? true : _props$ripple;
+  return /*#__PURE__*/React.createElement(RIconButton, {
+    id: id,
+    "data-testid": props["data-testid"],
+    onClick: onClick,
+    disabled: disabled,
+    className: className,
+    label: label,
+    icon: icon,
+    ripple: ripple
+  });
+};
+
+export { IconButton };

package/Button/IconButton/IconButton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Button/IconButton/IconButton.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { ReactComponent as CloudIcon } from "@svgr/webpack!./../assets/baseline-cloud_done-24px.svg";
+import { ReactComponent as MoreIcon } from "@svgr/webpack!./../assets/round-more_vert-24px.svg";
+import { Menu, MenuItem } from "./../../Menu/index";
+import { IconButton } from "./IconButton";
+var story = storiesOf("Components/Button", module);
+story.add("icon button", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Icon button"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(CloudIcon, null),
+    label: "Icon label",
+    onClick: function onClick() {
+      return console.log("Button clicked");
+    }
+  })), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Menu example"
+  }, /*#__PURE__*/React.createElement(Menu, {
+    handle: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(MoreIcon, null),
+      label: "Toggle menu",
+      onClick: function onClick() {
+        return console.log("Button clicked");
+      }
+    })
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      console.log("Apple selected!");
+    }
+  }, "Apple"), /*#__PURE__*/React.createElement(MenuItem, null, "Banana"), /*#__PURE__*/React.createElement(MenuItem, null, "Watermelon"))));
+}, {
+  info: {
+    propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
+  }
+});

package/Button/IconButton/README.md

@@ -0,0 +1,15 @@
+# Icon Button
+
+### Design
+
+<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
+
+### Description
+
+`IconButton` component provides a simple icon button component with ripple effect.
+
+### Import
+
+```js
+import { IconButton } from "@webiny/ui/Button";
+```

package/Button/README.md

@@ -0,0 +1,28 @@
+# Button
+
+### Design
+
+<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
+
+### Description
+
+`Button` component provides 4 commonly used button types:
+
+- `Default`
+- `Primary`
+- `Secondary`
+- `Floating`
+
+To create buttons with icon, use a `<Button.Icon/>` component.
+
+### Import
+
+```js
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonDefault,
+  ButtonFloating,
+  ButtonIcon
+} from "@webiny/ui/Button";
+```

package/Button/assets/baseline-cloud_done-24px.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
+</svg>

package/Button/assets/file_copy-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>

package/Button/assets/round-more_vert-24px.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
+</g>
+</svg>

package/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./IconButton/IconButton";
+export * from "./CopyButton/CopyButton";

package/Button/index.js

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./IconButton/IconButton";
+export * from "./CopyButton/CopyButton";

package/Carousel/Carousel.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { CarouselProps, CarouselRenderControl } from "nuka-carousel";
+declare type Props = CarouselProps & {
+    children: React.ReactNode;
+    renderNextSlide?: CarouselRenderControl | null;
+    renderPreviousSlide?: CarouselRenderControl | null;
+    renderBottomNav?: CarouselRenderControl | null;
+};
+declare class Carousel extends React.Component<Props> {
+    static defaultProps: {
+        swiping: boolean;
+        dragging: boolean;
+        heightMode: string;
+        easing: string;
+    };
+    static nukaProps: string[];
+    render(): JSX.Element;
+}
+export default Carousel;

package/Carousel/Carousel.js

@@ -0,0 +1,46 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import NukaCarousel from "nuka-carousel";
+import pick from "lodash/pick";
+
+var Carousel = /*#__PURE__*/function (_React$Component) {
+  _inherits(Carousel, _React$Component);
+
+  var _super = _createSuper(Carousel);
+
+  function Carousel() {
+    _classCallCheck(this, Carousel);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Carousel, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(NukaCarousel, Object.assign({}, pick(this.props, Carousel.nukaProps), this.props.renderPreviousSlide ? {
+        renderCenterLeftControls: this.props.renderPreviousSlide
+      } : {}, this.props.renderNextSlide ? {
+        renderCenterRightControls: this.props.renderNextSlide
+      } : {}, this.props.renderBottomNav ? {
+        renderBottomCenterControls: this.props.renderBottomNav
+      } : {}), this.props.children);
+    }
+  }]);
+
+  return Carousel;
+}(React.Component);
+
+_defineProperty(Carousel, "defaultProps", {
+  swiping: true,
+  dragging: false,
+  heightMode: "first",
+  easing: "easeExpInOut"
+});
+
+_defineProperty(Carousel, "nukaProps", ["children", "afterSlide", "autoplay", "autoplayInterval", "beforeSlide", "dragging", "easing", "heightMode", "pauseOnHover", "slideIndex", "speed", "swiping", "transitionMode"]);
+
+export default Carousel;

package/Carousel/Carouser.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Carousel/Carouser.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs } from "@storybook/addon-knobs";
+import readme from "./README.md";
+import Carousel from "./Carousel";
+var story = storiesOf("Components/Carousel", module);
+story.addDecorator(withKnobs);
+story.add("usage - single", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple checkbox with a label and description"
+  }, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
+  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    ")));
+}, {
+  info: {
+    propTables: [Carousel]
+  }
+});

package/Carousel/README.md

@@ -0,0 +1,15 @@
+# Carousel
+
+### Additional information
+
+<a href="https://www.npmjs.com/package/nuka-carousel" target="_blank">https://www.npmjs.com/package/nuka-carousel</a>
+
+### Description
+
+Use `Carousel` component to display two or more items, in a carousel.
+
+### Import
+
+```js
+import { Carousel } from "@webiny/ui/Carousel";
+```

package/Carousel/index.d.ts

@@ -0,0 +1 @@
+export { default as Carousel } from "./Carousel";

package/Carousel/index.js

@@ -0,0 +1 @@
+export { default as Carousel } from "./Carousel";

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: Function;
+    indeterminate?: boolean;
+    description?: string;
+};
+/**
+ * Single Checkbox component can be used to store simple boolean values.
+ *
+ * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.
+ * In that case, each Checkbox component must receive value and onChange callback via props.
+ */
+declare class Checkbox extends React.Component<Props> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export default Checkbox;