@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Pagination/stories.js

@@ -0,0 +1,49 @@
+import Pagination from '.';
+import Grid from '../Grid';
+import { ChevronRight, ChevronLeft, ArrowRight, ArrowLeft, ArrowRightCircle, ArrowLeftCircle } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/Pagination',
+  component: Pagination
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 20,
+    initialPage: 3
+  })));
+};
+export var Limit = function Limit() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    limit: 10
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    initialPage: 6,
+    limit: 5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    initialPage: 6
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 30,
+    initialPage: 6,
+    limit: 10
+  })));
+};
+export var Icon = function Icon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRightCircle, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeftCircle, null)))));
+};

package/esm/Popover/Popover.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TooltipProps } from "../Tooltip";
+import { Placement, TriggerTypes } from "../utils/prop-types";
+export declare type PopoverTriggerTypes = TriggerTypes;
+export declare type PopoverPlacement = Placement;
+interface Props {
+    content?: React.ReactNode | (() => React.ReactNode);
+    trigger?: PopoverTriggerTypes;
+    placement?: Placement;
+    disableItemsAutoClose?: boolean;
+}
+declare type ExcludeTooltipProps = {
+    text: any;
+    trigger: any;
+    placement: any;
+};
+export declare type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps>;
+declare const Popover: React.ForwardRefExoticComponent<Props & Omit<TooltipProps, keyof ExcludeTooltipProps> & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Popover;

package/esm/Popover/Popover.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import Tooltip from '../Tooltip';
+import { getReactNode } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import { PopoverContext } from './PopoverContext';
+import useClasses from '../use-classes';
+
+function PopoverComponent(_ref) {
+  var content = _ref.content,
+      children = _ref.children,
+      _ref$disableItemsAuto = _ref.disableItemsAutoClose,
+      disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
+      _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+      _ref$portalClassName = _ref.portalClassName,
+      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      customVisible = _ref.visible,
+      _ref$onVisibleChange = _ref.onVisibleChange,
+      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var textNode = useMemo(function () {
+    return getReactNode(content);
+  }, [content]);
+
+  var onChildClick = function onChildClick() {
+    onPopoverVisibleChange(false);
+  };
+
+  var value = useMemo(function () {
+    return {
+      onItemClick: onChildClick,
+      disableItemsAutoClose: disableItemsAutoClose
+    };
+  }, [disableItemsAutoClose]);
+  var classes = useClasses('popover', portalClassName);
+
+  var onPopoverVisibleChange = function onPopoverVisibleChange(next) {
+    setVisible(next);
+    onVisibleChange(next);
+  };
+
+  useEffect(function () {
+    if (customVisible === undefined) return;
+    onPopoverVisibleChange(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    initialVisible: false,
+    text: textNode,
+    trigger: trigger,
+    placement: placement,
+    portalClassName: classes,
+    visible: visible,
+    type: type,
+    onVisibleChange: onPopoverVisibleChange
+  }, props), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "421785314",
+    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
+  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}"))));
+}
+
+PopoverComponent.displayName = 'BolioUIPopover';
+var Popover = withScale(PopoverComponent);
+export default Popover;

package/esm/Popover/PopoverContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type PopoverConfig = {
+    disableItemsAutoClose: boolean;
+    onItemClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare const PopoverContext: React.Context<PopoverConfig>;
+export declare const usePopoverContext: () => PopoverConfig;

package/esm/Popover/PopoverItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    line?: boolean;
+    title?: boolean;
+    disableAutoClose?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PopoverItemProps = Props & NativeAttrs;
+declare const PopoverItem: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default PopoverItem;

package/esm/Popover/PopoverItem.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "line", "title", "className", "onClick", "disableAutoClose"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import { usePopoverContext } from './PopoverContext';
+import useClasses from '../use-classes';
+
+function PopoverItemComponent(_ref) {
+  var children = _ref.children,
+      _ref$line = _ref.line,
+      line = _ref$line === void 0 ? false : _ref$line,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? false : _ref$title,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      onClick = _ref.onClick,
+      _ref$disableAutoClose = _ref.disableAutoClose,
+      disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _usePopoverContext = usePopoverContext(),
+      disableItemsAutoClose = _usePopoverContext.disableItemsAutoClose,
+      onItemClick = _usePopoverContext.onItemClick;
+
+  var hasHandler = Boolean(onClick);
+  var dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  var classes = useClasses('item', {
+    line: line,
+    title: title
+  }, className);
+
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+
+    onItemClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2829879905", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2829879905",
+    dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), title && /*#__PURE__*/React.createElement(PopoverItem, {
+    line: true,
+    title: false
+  }));
+}
+
+PopoverItemComponent.displayName = 'BolioUIPopoverItem';
+var PopoverItem = withScale(PopoverItemComponent);
+export default PopoverItem;

package/esm/Popover/index.d.ts

@@ -0,0 +1,10 @@
+import Popover from "./Popover";
+import PopoverItem from "./PopoverItem";
+export declare type PopoverComponentType = typeof Popover & {
+    Item: typeof PopoverItem;
+    Option: typeof PopoverItem;
+};
+export type { PopoverProps, PopoverTriggerTypes, PopoverPlacement } from "./Popover";
+export type { PopoverItemProps } from "./PopoverItem";
+declare const _default: PopoverComponentType;
+export default _default;

package/esm/Popover/index.js

@@ -0,0 +1,5 @@
+import Popover from './Popover';
+import PopoverItem from './PopoverItem';
+Popover.Item = PopoverItem;
+Popover.Option = PopoverItem;
+export default Popover;

package/esm/Popover/stories.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Popover from '.';
+import Link from '../Link';
+import Spacer from '../Spacer';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Popover',
+  component: Popover
+};
+export var Default = function Default() {
+  var content = function content() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '0 10px'
+      }
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: "#"
+    }, "A hyperlink"), /*#__PURE__*/React.createElement(Spacer, {
+      h: 0.5
+    }), /*#__PURE__*/React.createElement(Link, {
+      color: true,
+      href: "#"
+    }, "External link"));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content
+  }, "Menu")));
+};
+export var PresetItem = function PresetItem() {
+  var content = function content() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Item, {
+      title: true
+    }, /*#__PURE__*/React.createElement("span", null, "User Settings")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
+      href: "#"
+    }, "A hyperlink")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
+      color: true,
+      href: "#"
+    }, "A hyperlink for edit profile")), /*#__PURE__*/React.createElement(Popover.Item, {
+      line: true
+    }), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement("span", null, "Command-Line")));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content
+  }, "Menu")));
+};
+export var CloseManual = function CloseManual() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var changeHandler = function changeHandler(next) {
+    setVisible(next);
+  };
+
+  var content = function content() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '0 10px'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setVisible(false);
+      }
+    }, "Click to close"), /*#__PURE__*/React.createElement(Spacer, {
+      h: 0.5
+    }), /*#__PURE__*/React.createElement("span", null, "Nothing"));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content,
+    visible: visible,
+    onVisibleChange: changeHandler
+  }, "Menu")));
+};

package/esm/Progress/Progress.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type ProgressColors = {
+    [key: number]: string;
+};
+export declare type ProgressTypes = NormalTypes;
+interface Props {
+    value?: number;
+    max?: number;
+    fixedTop?: boolean;
+    fixedBottom?: boolean;
+    colors?: ProgressColors;
+    type?: ProgressTypes;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.ProgressHTMLAttributes<any>, keyof Props>;
+export declare type ProgressProps = Props & NativeAttrs;
+declare const Progress: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Progress;

package/esm/Progress/index.d.ts

@@ -0,0 +1,3 @@
+import Progress from "./Progress";
+export type { ProgressProps, ProgressColors, ProgressTypes } from "./Progress";
+export default Progress;

package/esm/Progress/index.js

@@ -0,0 +1,2 @@
+import Progress from './Progress';
+export default Progress;

package/esm/Progress/stories.js

@@ -0,0 +1,114 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import useTheme from '../use-theme';
+import Progress from '.';
+import Grid from '../Grid';
+import Button from '../Button';
+export default {
+  title: 'Feedback/Progress',
+  component: Progress
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 50
+  })));
+};
+export var CustomMax = function CustomMax() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 45,
+    max: 50
+  })));
+};
+export var DynamicColors = function DynamicColors() {
+  var theme = useTheme();
+
+  var _useState = useState(20),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var colors = {
+    20: theme.palette.error,
+    40: theme.palette.warning,
+    60: theme.palette.success,
+    80: '#000'
+  };
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: value,
+    colors: colors
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setValue(value + 20);
+    },
+    auto: true,
+    scale: 0.5
+  }, "Add")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setValue(20);
+    },
+    auto: true,
+    scale: 0.5,
+    type: "error"
+  }, "Remove")));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 3
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "primary",
+    value: 74
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "secondary",
+    value: 10
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "success",
+    value: 45
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "warning",
+    value: 100
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "error",
+    value: 21
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "info",
+    value: 34
+  })));
+};

package/esm/Radio/Radio.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type RadioTypes = NormalTypes;
+export interface RadioEventTarget {
+    checked: boolean;
+}
+export interface RadioEvent {
+    target: RadioEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    value?: string | number;
+    type?: RadioTypes;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (e: RadioEvent) => void;
+}
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export declare type RadioProps = Props & NativeAttrs;
+declare const Radio: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Radio;

package/esm/Radio/Radio.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { useRadioContext } from './RadioContext';
+import RadioDescription from './RadioDescription';
+import { pickChild } from '../utils/collections';
+import useWarning from '../utils/use-warning';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function RadioComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      checked = _ref.checked,
+      onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      radioValue = _ref.value,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(!!checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfChecked = _useState2[0],
+      setSelfChecked = _useState2[1];
+
+  var _useRadioContext = useRadioContext(),
+      groupValue = _useRadioContext.value,
+      disabledAll = _useRadioContext.disabledAll,
+      inGroup = _useRadioContext.inGroup,
+      updateState = _useRadioContext.updateState;
+
+  var _pickChild = pickChild(children, RadioDescription),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutDescChildren = _pickChild2[0],
+      DescChildren = _pickChild2[1];
+
+  if (inGroup) {
+    if (checked !== undefined) {
+      useWarning('Remove props "checked" if in the Radio.Group.', 'Radio');
+    }
+
+    if (radioValue === undefined) {
+      useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio');
+    }
+
+    useEffect(function () {
+      setSelfChecked(groupValue === radioValue);
+    }, [groupValue, radioValue]);
+  }
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      label = _useMemo.label,
+      border = _useMemo.border,
+      bg = _useMemo.bg;
+
+  var isDisabled = useMemo(function () {
+    return disabled || disabledAll;
+  }, [disabled, disabledAll]);
+
+  var changeHandler = function changeHandler(event) {
+    if (isDisabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: event.stopPropagation,
+      preventDefault: event.preventDefault,
+      nativeEvent: event
+    };
+    setSelfChecked(!selfChecked);
+
+    if (inGroup) {
+      updateState && updateState(radioValue);
+    }
+
+    onChange && onChange(selfEvent);
+  };
+
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(Boolean(checked));
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
+  }, /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    value: radioValue,
+    checked: selfChecked,
+    onChange: changeHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
+      active: selfChecked
+    }) || "")
+  }), withoutDescChildren), DescChildren && DescChildren), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3162430237",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
+  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
+}
+
+RadioComponent.displayName = 'BolioUIRadio';
+var Radio = withScale(RadioComponent);
+export default Radio;

package/esm/Radio/RadioContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface RadioConfig {
+    updateState?: (value: string | number) => void;
+    disabledAll: boolean;
+    value?: string | number;
+    inGroup: boolean;
+}
+export declare const RadioContext: React.Context<RadioConfig>;
+export declare const useRadioContext: () => RadioConfig;

package/esm/Radio/RadioDescription.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type RadioDescriptionProps = Props & NativeAttrs;
+declare const RadioDescription: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default RadioDescription;