@bolio-ui/core 1.0.4 → 1.0.5

package/esm/Pagination/PaginationEllipsis.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState } from 'react';
+import PaginationItem from './PaginationItem';
+
+function PaginationEllipsis(_ref) {
+  var isBefore = _ref.isBefore,
+      _onClick = _ref.onClick;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMore = _useState2[0],
+      setShowMore = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(PaginationItem, {
+    onClick: function onClick(e) {
+      return _onClick && _onClick(e);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setShowMore(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowMore(false);
+    }
+  }, showMore ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]]) + " " + "more"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "19",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2928474255",
+    dynamic: [isBefore ? '180deg' : '0deg']
+  }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
+}
+
+PaginationEllipsis.displayName = 'BolioUIPaginationEllipsis';
+export default PaginationEllipsis;

package/esm/Pagination/PaginationItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export declare type PaginationItemProps = Props & NativeAttrs;
+declare function PaginationItem({ active, children, disabled, onClick, ...props }: PaginationItemProps): JSX.Element;
+declare namespace PaginationItem {
+    var displayName: string;
+}
+export default PaginationItem;

package/esm/Pagination/PaginationNext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type PaginationNextProps = React.ButtonHTMLAttributes<any>;
+declare function PaginationNext({ children, ...props }: PaginationNextProps): JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+export default PaginationNext;

package/esm/Pagination/PaginationNext.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './PaginationItem';
+import { usePaginationContext } from './PaginationContext';
+
+function PaginationNext(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isLast = _usePaginationContext.isLast;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('next');
+    },
+    disabled: isLast
+  }, props), children);
+}
+
+PaginationNext.displayName = 'BolioUIPaginationNext';
+export default PaginationNext;

package/esm/Pagination/PaginationPages.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+interface Props {
+    limit: number;
+    count: number;
+    current: number;
+    setPage: Dispatch<SetStateAction<number>>;
+}
+declare function PaginationPages({ limit, count, current, setPage }: Props): JSX.Element;
+declare namespace PaginationPages {
+    var displayName: string;
+}
+export default PaginationPages;

package/esm/Pagination/PaginationPages.js

@@ -0,0 +1,90 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useMemo } from 'react';
+import PaginationItem from './PaginationItem';
+import PaginationEllipsis from './PaginationEllipsis';
+
+function PaginationPages(_ref) {
+  var limit = _ref.limit,
+      count = _ref.count,
+      current = _ref.current,
+      setPage = _ref.setPage;
+  var showPages = useMemo(function () {
+    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
+    return oddLimit - 2;
+  }, [limit]);
+  var middleNumber = (showPages + 1) / 2;
+
+  var _useMemo = useMemo(function () {
+    var showEllipsis = count > limit;
+    return [showEllipsis && current > middleNumber + 1, showEllipsis && current < count - middleNumber];
+  }, [current, middleNumber, count, limit]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      showBeforeEllipsis = _useMemo2[0],
+      showAfterEllipsis = _useMemo2[1];
+
+  var pagesArray = useMemo(function () {
+    return _toConsumableArray(new Array(showPages));
+  }, [showPages]);
+  var renderItem = useCallback(function (value, active) {
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-item-".concat(value),
+      active: value === active,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  }, [setPage]);
+  var startPages = pagesArray.map(function (_, index) {
+    var value = index + 2;
+    return renderItem(value, current);
+  });
+  var middlePages = pagesArray.map(function (_, index) {
+    var middleIndexNumber = middleNumber - (index + 1);
+    var value = current - middleIndexNumber;
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-middle-".concat(index),
+      active: index + 1 === middleNumber,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  });
+  var endPages = pagesArray.map(function (_, index) {
+    var value = count - (showPages - index);
+    return renderItem(value, current);
+  });
+
+  if (count <= limit) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
+      var value = index + 1;
+      return /*#__PURE__*/React.createElement(PaginationItem, {
+        key: "pagination-item-".concat(value),
+        active: value === current,
+        onClick: function onClick() {
+          return setPage(value);
+        }
+      }, value);
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, current), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-before",
+    isBefore: true,
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last - 5 >= 1 ? last - 5 : 1;
+      });
+    }
+  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-after",
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last + 5 <= count ? last + 5 : count;
+      });
+    }
+  }), renderItem(count, current));
+}
+
+PaginationPages.displayName = 'BolioUIPaginationPages';
+export default PaginationPages;

package/esm/Pagination/PaginationPrevious.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type PaginationPreviousProps = React.ButtonHTMLAttributes<any>;
+declare function PaginationPrevious({ children, ...props }: PaginationPreviousProps): JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+export default PaginationPrevious;

package/esm/Pagination/PaginationPrevious.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './PaginationItem';
+import { usePaginationContext } from './PaginationContext';
+
+function PaginationPrevious(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isFirst = _usePaginationContext.isFirst;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('prev');
+    },
+    disabled: isFirst
+  }, props), children);
+}
+
+PaginationPrevious.displayName = 'BolioUIPaginationPrevious';
+export default PaginationPrevious;

package/esm/Pagination/index.d.ts

@@ -0,0 +1,12 @@
+import Pagination from "./Pagination";
+import PaginationPrevious from "./PaginationPrevious";
+import PaginationNext from "./PaginationNext";
+export declare type PaginationComponentType = typeof Pagination & {
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+};
+export type { PaginationProps } from "./Pagination";
+export type { PaginationPreviousProps } from "./PaginationPrevious";
+export type { PaginationNextProps } from "./PaginationNext";
+declare const _default: PaginationComponentType;
+export default _default;

package/esm/Pagination/index.js

@@ -0,0 +1,6 @@
+import Pagination from './Pagination';
+import PaginationPrevious from './PaginationPrevious';
+import PaginationNext from './PaginationNext';
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+export default Pagination;

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<Pick<Props & Omit<TooltipProps, keyof ExcludeTooltipProps> & import("../use-scale").ScaleProps, string | number> & 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<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & 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<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & 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;