@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Drawer/Drawer.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEvent } from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    visible?: boolean;
+    keyboard?: boolean;
+    disableBackdropClick?: boolean;
+    wrapClassName?: string;
+    placement: DrawerPlacement;
+    onClose?: () => void;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type DrawerProps = Props & NativeAttrs;
+declare const Drawer: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Drawer;

package/esm/Drawer/Drawer.js

@@ -0,0 +1,77 @@
+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 = ["visible", "keyboard", "disableBackdropClick", "wrapClassName", "children", "placement", "onClose", "onContentClick"];
+import React, { useEffect, useState } from 'react';
+import { withScale } from '../use-scale';
+import usePortal from '../utils/use-portal';
+import useBodyScroll from '../utils/use-body-scroll';
+import useKeyboard, { KeyCode } from '../use-keyboard';
+import { createPortal } from 'react-dom';
+import Backdrop from '../Shared/backdrop';
+import DrawerWrapper from './DrawerWrapper';
+
+function DrawerComponent(_ref) {
+  var customVisible = _ref.visible,
+      keyboard = _ref.keyboard,
+      disableBackdropClick = _ref.disableBackdropClick,
+      wrapClassName = _ref.wrapClassName,
+      children = _ref.children,
+      placement = _ref.placement,
+      onClose = _ref.onClose,
+      onContentClick = _ref.onContentClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var portal = usePortal('drawer');
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useBodyScroll = useBodyScroll(null, {
+    delayReset: 300
+  }),
+      _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
+      setBodyHidden = _useBodyScroll2[1];
+
+  var closeDrawer = function closeDrawer() {
+    onClose && onClose();
+    setVisible(false);
+    setBodyHidden(false);
+  };
+
+  useEffect(function () {
+    if (typeof customVisible === 'undefined') return;
+    setVisible(customVisible);
+    setBodyHidden(customVisible);
+  }, [customVisible, setBodyHidden]);
+
+  var _useKeyboard = useKeyboard(function () {
+    keyboard && closeDrawer();
+  }, KeyCode.Escape, {
+    disableGlobalEvent: true
+  }),
+      bindings = _useKeyboard.bindings;
+
+  var closeFromBackdrop = function closeFromBackdrop() {
+    if (disableBackdropClick) return;
+    closeDrawer();
+  };
+
+  if (!portal) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Backdrop, _extends({
+    onClick: closeFromBackdrop,
+    onContentClick: onContentClick,
+    visible: visible,
+    width: "100%"
+  }, bindings), /*#__PURE__*/React.createElement(DrawerWrapper, _extends({
+    visible: visible,
+    className: wrapClassName,
+    placement: placement
+  }, props), children)), portal);
+}
+
+DrawerComponent.displayName = 'BolioUIDrawer';
+var Drawer = withScale(DrawerComponent);
+export default Drawer;

package/esm/Drawer/DrawerWrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    className?: string;
+    visible?: boolean;
+    placement: DrawerPlacement;
+}
+export declare type DrawerWrapperProps = Props;
+declare function DrawerWrapper({ className, children, visible, placement, ...props }: React.PropsWithChildren<DrawerWrapperProps>): JSX.Element;
+declare namespace DrawerWrapper {
+    var displayName: string;
+}
+export default DrawerWrapper;

package/esm/Drawer/DrawerWrapper.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "visible", "placement"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import useScale from '../use-scale';
+import useTheme from '../use-theme';
+import CssTransition from '../Shared/css-transition';
+import { isChildElement } from '../utils/collections';
+import { getDrawerTransform } from './helper';
+import useClasses from '../use-classes';
+
+function DrawerWrapper(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? false : _ref$visible,
+      placement = _ref.placement,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var modalContent = useRef(null);
+  var tabStart = useRef(null);
+  var tabEnd = useRef(null);
+  var transform = useMemo(function () {
+    return getDrawerTransform(placement);
+  }, [placement]);
+  var classes = useClasses('wrapper', placement, className);
+  useEffect(function () {
+    if (!visible) return;
+    var activeElement = document.activeElement;
+    var isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    tabStart.current && tabStart.current.focus();
+  }, [visible]);
+
+  var onKeyDown = function onKeyDown(event) {
+    var isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    var activeElement = document.activeElement;
+
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        tabEnd.current && tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        tabStart.current && tabStart.current.focus();
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    role: "dialog",
+    tabIndex: -1,
+    onKeyDown: onKeyDown,
+    ref: modalContent
+  }, props, {
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabStart,
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab start"
+  }), children, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabEnd,
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab end"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1322120384",
+    dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]
+  }, ".wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;vertical-align:middle;overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:calc(3 * ").concat(theme.layout.radius, ");box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;outline:none;-webkit-transform:").concat(transform.initial, ";-ms-transform:").concat(transform.initial, ";transform:").concat(transform.initial, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.6,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);font-size:").concat(SCALES.font(1), ";--modal-wrapper-padding-left:").concat(SCALES.pl(1.3125), ";--modal-wrapper-padding-right:").concat(SCALES.pr(1.3125), ";padding:").concat(SCALES.pt(1.3125), " var(--modal-wrapper-padding-right) ").concat(SCALES.pb(1.3125), " var(--modal-wrapper-padding-left);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.top.__jsx-style-dynamic-selector,.bottom.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";}.left.__jsx-style-dynamic-selector,.right.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, '100%'), ";}.top.__jsx-style-dynamic-selector{bottom:auto;border-top-left-radius:0;border-top-right-radius:0;}.left.__jsx-style-dynamic-selector{right:auto;border-top-left-radius:0;border-bottom-left-radius:0;}.bottom.__jsx-style-dynamic-selector{top:auto;border-bottom-left-radius:0;border-bottom-right-radius:0;}.right.__jsx-style-dynamic-selector{left:auto;border-top-right-radius:0;border-bottom-right-radius:0;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.2,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0.4;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}"))));
+}
+
+DrawerWrapper.displayName = 'BolioUIDrawerWrapper';
+export default DrawerWrapper;

package/esm/Drawer/helper.d.ts

@@ -0,0 +1,9 @@
+declare const drawerPlacement: ["top", "right", "bottom", "left"];
+export declare type DrawerPlacement = typeof drawerPlacement[number];
+export declare type DrawerTranslateItem = {
+    initial: string;
+    hidden: string;
+    visible: string;
+};
+export declare const getDrawerTransform: (placement: DrawerPlacement) => DrawerTranslateItem;
+export {};

package/esm/Drawer/index.d.ts

@@ -0,0 +1,13 @@
+import Drawer from "./Drawer";
+import ModalTitle from "../Modal/ModalTitle";
+import ModalSubtitle from "../Modal/ModalSubtitle";
+import ModalContent from "../Modal/ModalContent";
+export declare type DrawerComponentType = typeof Drawer & {
+    Title: typeof ModalTitle;
+    Subtitle: typeof ModalSubtitle;
+    Content: typeof ModalContent;
+};
+export type { DrawerProps } from "./Drawer";
+export type { ModalTitleProps as DrawerTitleProps, ModalSubtitleProps as DrawerSubtitleProps, ModalContentProps as DrawerContentProps } from "../Modal";
+declare const _default: DrawerComponentType;
+export default _default;

package/esm/Drawer/index.js

@@ -0,0 +1,8 @@
+import Drawer from './Drawer';
+import ModalTitle from '../Modal/ModalTitle';
+import ModalSubtitle from '../Modal/ModalSubtitle';
+import ModalContent from '../Modal/ModalContent';
+Drawer.Title = ModalTitle;
+Drawer.Subtitle = ModalSubtitle;
+Drawer.Content = ModalContent;
+export default Drawer;

package/esm/Drawer/stories.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Drawer from '.';
+import Button from '../Button';
+import Grid from '../Grid';
+export default {
+  title: 'Feedback/Drawer',
+  component: Drawer
+};
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setState(true);
+    }
+  }, "Show Drawer"), /*#__PURE__*/React.createElement(Drawer, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    },
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(Drawer.Title, null, "Drawer"), /*#__PURE__*/React.createElement(Drawer.Subtitle, null, "Example of a drawer"), /*#__PURE__*/React.createElement(Drawer.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the drawer.")))));
+};
+export var Placement = function Placement() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  var _React$useState3 = React.useState('bottom'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      placement = _React$useState4[0],
+      setPlacement = _React$useState4[1];
+
+  var open = function open(text) {
+    setPlacement(text);
+    setState(true);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('top');
+    },
+    mr: "10px"
+  }, "Top")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('right');
+    },
+    mr: "10px"
+  }, "Right")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('bottom');
+    },
+    mr: "10px"
+  }, "Bottom")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('left');
+    }
+  }, "Left")), /*#__PURE__*/React.createElement(Drawer, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    },
+    placement: placement
+  }, /*#__PURE__*/React.createElement(Drawer.Title, null, "Drawer"), /*#__PURE__*/React.createElement(Drawer.Subtitle, null, "Example of a drawer"), /*#__PURE__*/React.createElement(Drawer.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the drawer."))));
+};

package/esm/Fieldset/Fieldset.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    value?: string;
+    label?: string;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>;
+export declare type FieldsetProps = Props & NativeAttrs;
+declare const Fieldset: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Fieldset;

package/esm/Fieldset/Fieldset.js

@@ -0,0 +1,96 @@
+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", "title", "subtitle", "children", "value", "label"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import FieldsetTitle from './FieldsetTitle';
+import FieldsetSubtitle from './FieldsetSubtitle';
+import FieldsetFooter from './FieldsetFooter';
+import FieldsetContent from './FieldsetContent';
+import { hasChild, pickChild } from '../utils/collections';
+import { useFieldset } from './FieldsetContext';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function FieldsetComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
+      children = _ref.children,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useFieldset = useFieldset(),
+      inGroup = _useFieldset.inGroup,
+      currentValue = _useFieldset.currentValue,
+      register = _useFieldset.register;
+
+  var _useState = useState(inGroup),
+      _useState2 = _slicedToArray(_useState, 2),
+      hidden = _useState2[0],
+      setHidden = _useState2[1];
+
+  var classes = useClasses('fieldset', className);
+
+  var _pickChild = pickChild(children, FieldsetFooter),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutFooterChildren = _pickChild2[0],
+      FooterChildren = _pickChild2[1];
+
+  var hasTitle = hasChild(withoutFooterChildren, FieldsetTitle);
+  var hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle);
+  var hasContent = hasChild(withoutFooterChildren, FieldsetContent);
+
+  if (inGroup) {
+    if (!label) {
+      useWarning('Props "label" is required when in a group.', 'Fieldset Group');
+    }
+
+    if (!value || value === '') {
+      value = label;
+    }
+
+    useEffect(function () {
+      register && register({
+        value: value,
+        label: label
+      });
+    }, []);
+    useEffect(function () {
+      // In a few cases, the user will set Fieldset state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+
+      /* istanbul ignore if */
+      if (!currentValue || currentValue === '') return;
+      setHidden(currentValue !== value);
+    }, [currentValue, value]);
+  }
+
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, withoutFooterChildren, !hasTitle && title && /*#__PURE__*/React.createElement(FieldsetTitle, null, title), !hasSubtitle && subtitle && /*#__PURE__*/React.createElement(FieldsetSubtitle, null, subtitle));
+  }, [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["169128941", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), 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)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), hasContent ? content : /*#__PURE__*/React.createElement(FieldsetContent, null, content), FooterChildren && FooterChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "169128941",
+    dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), 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)]
+  }, ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";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), ";}")));
+}
+
+FieldsetComponent.displayName = 'BolioUIFieldset';
+var Fieldset = withScale(FieldsetComponent);
+export default Fieldset;

package/esm/Fieldset/FieldsetContent.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 FieldsetContentProps = Props & NativeAttrs;
+declare const FieldsetContent: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default FieldsetContent;

package/esm/Fieldset/FieldsetContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FieldItem {
+    value: string;
+    label: string;
+}
+export interface FieldsetConfig {
+    register?: (item: FieldItem) => void;
+    currentValue: string;
+    inGroup: boolean;
+}
+export declare const FieldsetContext: React.Context<FieldsetConfig>;
+export declare const useFieldset: () => FieldsetConfig;

package/esm/Fieldset/FieldsetFooter.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 FieldsetFooterProps = Props & NativeAttrs;
+declare const FieldsetFooter: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default FieldsetFooter;

package/esm/Fieldset/FieldsetGroup.d.ts

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

package/esm/Fieldset/FieldsetGroup.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "value", "onChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import useCurrentState from '../utils/use-current-state';
+import { FieldsetContext } from './FieldsetContext';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function FieldsetGroupComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfVal = _useState2[0],
+      setSelfVal = _useState2[1];
+
+  var _useCurrentState = useCurrentState([]),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      items = _useCurrentState2[0],
+      setItems = _useCurrentState2[1],
+      ref = _useCurrentState2[2];
+
+  var classes = useClasses('group', className);
+
+  var register = function register(newItem) {
+    var hasItem = ref.current.find(function (item) {
+      return item.value === newItem.value;
+    });
+
+    if (hasItem) {
+      useWarning('The "value" of each "Fieldset" must be unique.', 'Fieldset');
+    }
+
+    setItems([].concat(_toConsumableArray(ref.current), [newItem]));
+  };
+
+  var providerValue = useMemo(function () {
+    return {
+      currentValue: selfVal,
+      inGroup: true,
+      register: register
+    };
+  }, [selfVal]);
+  var clickHandle = useCallback(function (nextValue) {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(FieldsetContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-tabs"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return clickHandle(item.value);
+      },
+      key: item.value,
+      className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || "")
+    }, item.label);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4025768429",
+    dynamic: [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]
+  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";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, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme.palette.accents_3, ";background-color:").concat(theme.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
+}
+
+FieldsetGroupComponent.displayName = 'BolioUIFieldsetGroup';
+var FieldsetGroup = withScale(FieldsetGroupComponent);
+export default FieldsetGroup;

package/esm/Fieldset/FieldsetSubtitle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export declare type FieldsetSubtitleProps = Props & NativeAttrs;
+declare function FieldsetSubtitle({ className, children, ...props }: React.PropsWithChildren<FieldsetSubtitleProps>): JSX.Element;
+declare namespace FieldsetSubtitle {
+    var displayName: string;
+}
+export default FieldsetSubtitle;

package/esm/Fieldset/FieldsetTitle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export declare type FieldsetTitleProps = Props & NativeAttrs;
+declare function FieldsetTitle({ className, children, ...props }: React.PropsWithChildren<FieldsetTitleProps>): JSX.Element;
+declare namespace FieldsetTitle {
+    var displayName: string;
+}
+export default FieldsetTitle;

package/esm/Fieldset/index.d.ts

@@ -0,0 +1,22 @@
+import Fieldset from "./Fieldset";
+import FieldsetTitle from "./FieldsetTitle";
+import FieldsetSubtitle from "./FieldsetSubtitle";
+import FieldsetFooter from "./FieldsetFooter";
+import FieldsetGroup from "./FieldsetGroup";
+import FieldsetContent from "./FieldsetContent";
+export declare type FieldsetComponentType = typeof Fieldset & {
+    Title: typeof FieldsetTitle;
+    Subtitle: typeof FieldsetSubtitle;
+    Footer: typeof FieldsetFooter;
+    Group: typeof FieldsetGroup;
+    Content: typeof FieldsetContent;
+    Body: typeof FieldsetContent;
+};
+export type { FieldsetProps } from "./Fieldset";
+export type { FieldsetTitleProps } from "./FieldsetTitle";
+export type { FieldsetSubtitleProps } from "./FieldsetSubtitle";
+export type { FieldsetGroupProps } from "./FieldsetGroup";
+export type { FieldsetFooterProps } from "./FieldsetFooter";
+export type { FieldsetContentProps } from "./FieldsetContent";
+declare const _default: FieldsetComponentType;
+export default _default;

package/esm/Fieldset/index.js

@@ -0,0 +1,13 @@
+import Fieldset from './Fieldset';
+import FieldsetTitle from './FieldsetTitle';
+import FieldsetSubtitle from './FieldsetSubtitle';
+import FieldsetFooter from './FieldsetFooter';
+import FieldsetGroup from './FieldsetGroup';
+import FieldsetContent from './FieldsetContent';
+Fieldset.Title = FieldsetTitle;
+Fieldset.Subtitle = FieldsetSubtitle;
+Fieldset.Footer = FieldsetFooter;
+Fieldset.Group = FieldsetGroup;
+Fieldset.Content = FieldsetContent;
+Fieldset.Body = FieldsetContent;
+export default Fieldset;