@bolio-ui/core 1.0.3 → 1.0.5

package/esm/Tabs/Tabs.js

@@ -0,0 +1,151 @@
+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 = ["initialValue", "value", "hideDivider", "hideBorder", "children", "onChange", "className", "leftSpace", "highlight", "hoverHeightRatio", "hoverWidthRatio", "activeClassName", "activeStyles", "align"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import { TabsContext } from './TabsContext';
+import useScale, { withScale } from '../use-scale';
+import Highlight from '../Shared/highlight';
+import { useRect } from '../utils/layouts';
+import { isBolioUIElement } from '../utils/collections';
+import useClasses from '../use-classes';
+
+function TabsComponent(_ref) {
+  var userCustomInitialValue = _ref.initialValue,
+      value = _ref.value,
+      _ref$hideDivider = _ref.hideDivider,
+      hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+      _ref$hideBorder = _ref.hideBorder,
+      hideBorder = _ref$hideBorder === void 0 ? false : _ref$hideBorder,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$leftSpace = _ref.leftSpace,
+      leftSpace = _ref$leftSpace === void 0 ? '12px' : _ref$leftSpace,
+      _ref$highlight = _ref.highlight,
+      highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+      _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+      hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 0.7 : _ref$hoverHeightRatio,
+      _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+      hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1.15 : _ref$hoverWidthRatio,
+      _ref$activeClassName = _ref.activeClassName,
+      activeClassName = _ref$activeClassName === void 0 ? '' : _ref$activeClassName,
+      activeStyles = _ref.activeStyles,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      tabs = _useState2[0],
+      setTabs = _useState2[1];
+
+  var _useState3 = useState(userCustomInitialValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selfValue = _useState4[0],
+      setSelfValue = _useState4[1];
+
+  var ref = useRef(null);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      displayHighlight = _useState6[0],
+      setDisplayHighlight = _useState6[1];
+
+  var _useRect = useRect(),
+      rect = _useRect.rect,
+      setRect = _useRect.setRect;
+
+  var register = function register(next) {
+    setTabs(function (last) {
+      var hasItem = last.find(function (item) {
+        return item.value === next.value;
+      });
+      if (!hasItem) return [].concat(_toConsumableArray(last), [next]);
+      return last.map(function (item) {
+        if (item.value !== next.value) return item;
+        return _extends({}, item, next);
+      });
+    });
+  };
+
+  var initialValue = useMemo(function () {
+    return {
+      register: register,
+      currentValue: selfValue,
+      inGroup: true,
+      leftSpace: leftSpace
+    };
+  }, [selfValue, leftSpace]);
+  useEffect(function () {
+    if (typeof value === 'undefined') return;
+    setSelfValue(value);
+  }, [value]);
+
+  var clickHandler = function clickHandler(value) {
+    setSelfValue(value);
+    onChange && onChange(value);
+  };
+
+  var tabItemMouseOverHandler = function tabItemMouseOverHandler(event) {
+    if (!isBolioUIElement(event.target)) return;
+    setRect(event, function () {
+      return ref.current;
+    });
+
+    if (highlight) {
+      setDisplayHighlight(true);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["750647969", [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), align, theme.palette.border, leftSpace]]]) + " " + (props && props.className != null && props.className || useClasses('tabs', className) || "")
+  }), /*#__PURE__*/React.createElement("header", {
+    ref: ref,
+    onMouseLeave: function onMouseLeave() {
+      return setDisplayHighlight(false);
+    },
+    className: _JSXStyle.dynamic([["750647969", [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), align, theme.palette.border, leftSpace]]])
+  }, /*#__PURE__*/React.createElement(Highlight, {
+    rect: rect,
+    visible: displayHighlight,
+    hoverHeightRatio: hoverHeightRatio,
+    hoverWidthRatio: hoverWidthRatio
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["750647969", [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), align, theme.palette.border, leftSpace]]]) + " " + (useClasses('scroll-container', {
+      'hide-divider': hideDivider
+    }) || "")
+  }, tabs.map(function (_ref2) {
+    var Cell = _ref2.cell,
+        value = _ref2.value;
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: value,
+      onClick: clickHandler,
+      onMouseOver: tabItemMouseOverHandler,
+      activeClassName: activeClassName,
+      activeStyle: activeStyles,
+      hideBorder: hideBorder,
+      className: _JSXStyle.dynamic([["750647969", [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), align, theme.palette.border, leftSpace]]])
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["750647969", [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), align, theme.palette.border, leftSpace]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "750647969",
+    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), align, theme.palette.border, leftSpace]
+  }, ".tabs.__jsx-style-dynamic-selector{font-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), ";}header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-y:hidden;overflow-x:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;position:relative;}.scroll-container.__jsx-style-dynamic-selector{width:100%;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:").concat(align, ";-webkit-justify-content:").concat(align, ";-ms-flex-pack:").concat(align, ";justify-content:").concat(align, ";border-bottom:1px solid ").concat(theme.palette.border, ";padding-left:").concat(leftSpace, ";}header.__jsx-style-dynamic-selector::-webkit-scrollbar{display:none;}.hide-divider.__jsx-style-dynamic-selector{border-color:transparent;}.content.__jsx-style-dynamic-selector{padding-top:0.625rem;}"))));
+}
+
+TabsComponent.displayName = 'BolioUITabs';
+var Tabs = withScale(TabsComponent);
+export default Tabs;

package/esm/Tabs/TabsContext.d.ts

@@ -0,0 +1,21 @@
+import React, { CSSProperties, MouseEvent } from 'react';
+export declare type TabsInternalCellProps = {
+    onClick: (value: string) => void;
+    onMouseOver: (e: MouseEvent<HTMLDivElement>) => void;
+    activeClassName?: string;
+    activeStyle?: CSSProperties;
+    hideBorder?: boolean;
+};
+export declare type TabsInternalCell = React.FC<TabsInternalCellProps>;
+export interface TabsHeaderItem {
+    value: string;
+    cell: TabsInternalCell;
+}
+export interface TabsConfig {
+    register?: (item: TabsHeaderItem) => void;
+    currentValue?: string;
+    inGroup: boolean;
+    leftSpace?: CSSProperties['marginLeft'];
+}
+export declare const TabsContext: React.Context<TabsConfig>;
+export declare const useTabsContext: () => TabsConfig;

package/esm/Tabs/TabsItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    label: string | React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type TabsItemProps = Props & NativeAttrs;
+declare const TabsItem: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default TabsItem;

package/esm/Tabs/TabsItem.js

@@ -0,0 +1,80 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useTabsContext } from './TabsContext';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function TabsItemComponent(_ref) {
+  var children = _ref.children,
+      value = _ref.value,
+      label = _ref.label,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useTabsContext = useTabsContext(),
+      register = _useTabsContext.register,
+      currentValue = _useTabsContext.currentValue;
+
+  var isActive = useMemo(function () {
+    return currentValue === value;
+  }, [currentValue, value]);
+
+  var TabsInternalCell = function TabsInternalCell(_ref2) {
+    var _useClasses;
+
+    var onClick = _ref2.onClick,
+        onMouseOver = _ref2.onMouseOver,
+        activeClassName = _ref2.activeClassName,
+        activeStyle = _ref2.activeStyle,
+        hideBorder = _ref2.hideBorder;
+    var theme = useTheme();
+    var ref = useRef(null);
+
+    var _useTabsContext2 = useTabsContext(),
+        currentValue = _useTabsContext2.currentValue;
+
+    var active = currentValue === value;
+    var classes = useClasses('tab', (_useClasses = {
+      active: active,
+      disabled: disabled
+    }, _defineProperty(_useClasses, activeClassName, active), _defineProperty(_useClasses, 'hide-border', hideBorder), _useClasses));
+
+    var clickHandler = function clickHandler() {
+      if (disabled) return;
+      onClick && onClick(value);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      role: "button",
+      key: value,
+      onMouseOver: onMouseOver,
+      onClick: clickHandler,
+      style: active ? activeStyle : {},
+      "data-bolioui": "tab-item",
+      className: _JSXStyle.dynamic([["605786882", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
+    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "605786882",
+      dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
+    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
+  };
+
+  TabsInternalCell.displayName = 'BolioUITabsInternalCell';
+  useEffect(function () {
+    register && register({
+      value: value,
+      cell: TabsInternalCell
+    });
+  }, [value, label, disabled]);
+  return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
+}
+
+TabsItemComponent.displayName = 'BolioUITabsItem';
+var TabsItem = withScale(TabsItemComponent);
+export default TabsItem;
+/* eslint-enable */

package/esm/Tabs/index.d.ts

@@ -0,0 +1,9 @@
+import Tabs from "./Tabs";
+import TabsItem from "./TabsItem";
+export declare type TabsComponentType = typeof Tabs & {
+    Item: typeof TabsItem;
+    Tab: typeof TabsItem;
+};
+export type { TabsProps } from "./Tabs";
+declare const _default: TabsComponentType;
+export default _default;

package/esm/Tabs/index.js

@@ -0,0 +1,5 @@
+import Tabs from './Tabs';
+import TabsItem from './TabsItem';
+Tabs.Item = TabsItem;
+Tabs.Tab = TabsItem;
+export default Tabs;

package/esm/Tabs/stories.js

@@ -0,0 +1,92 @@
+import Tabs from '.';
+import Text from '../Text';
+import Grid from '../Grid';
+import { Instagram, Facebook } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/Tabs',
+  component: Tabs
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "1"
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Component-Based",
+    value: "2"
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "1"
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Component-Based",
+    value: "2",
+    disabled: true
+  }))));
+};
+export var HideDivider = function HideDivider() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "react",
+    hideDivider: true
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "react"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Component-Based",
+    value: "component-based"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
+};
+export var HideBorder = function HideBorder() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "react",
+    hideDivider: true,
+    hideBorder: true,
+    leftSpace: 0
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "react"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Component-Based",
+    value: "component-based"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
+};
+export var WithIcon = function WithIcon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1",
+    align: "center",
+    leftSpace: 0
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Instagram, null), " Instagram"),
+    value: "1"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Hello, this is my profile.")), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Facebook, null), " Facebook"),
+    value: "2"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Hi, this is my page.")))));
+};

package/esm/Tag/Tag.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SnippetTypes } from "../utils/prop-types";
+export declare type TagTypes = SnippetTypes;
+interface Props {
+    type?: TagTypes;
+    invert?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type TagProps = Props & NativeAttrs;
+export declare type TagColors = {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+};
+declare const Tag: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Tag;

package/esm/Tag/index.d.ts

@@ -0,0 +1,3 @@
+import Tag from "./Tag";
+export type { TagProps, TagColors, TagTypes } from "./Tag";
+export default Tag;

package/esm/Tag/index.js

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

package/esm/Tag/stories.js

@@ -0,0 +1,58 @@
+import Tag from '.';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Tag',
+  component: Tag
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Status: Unstable")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "dark"
+  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "lite"
+  }, "Lite")));
+};
+export var TypesInvert = function TypesInvert() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    invert: true
+  }, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "primary",
+    invert: true
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "secondary",
+    invert: true
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "success",
+    invert: true
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "warning",
+    invert: true
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "error",
+    invert: true
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "dark",
+    invert: true
+  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "lite",
+    invert: true
+  }, "Lite")));
+};

package/esm/Text/Child.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export interface Props {
+    tag: keyof JSX.IntrinsicElements;
+    type?: NormalTypes;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>;
+export declare type TextChildProps = Props & NativeAttrs;
+declare function TextChild({ children, tag, className, type, ...props }: React.PropsWithChildren<TextChildProps>): JSX.Element;
+declare namespace TextChild {
+    var displayName: string;
+}
+export default TextChild;

package/esm/Text/Text.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type TextTypes = NormalTypes;
+interface Props {
+    h1?: boolean;
+    h2?: boolean;
+    h3?: boolean;
+    h4?: boolean;
+    h5?: boolean;
+    h6?: boolean;
+    p?: boolean;
+    b?: boolean;
+    small?: boolean;
+    i?: boolean;
+    span?: boolean;
+    del?: boolean;
+    em?: boolean;
+    blockquote?: boolean;
+    className?: string;
+    type?: TextTypes;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type TextProps = Props & NativeAttrs;
+declare const Text: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Text;

package/esm/Text/Text.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
+import React, { useMemo } from 'react';
+import TextChild from './Child';
+import { withScale } from '../use-scale';
+
+var getModifierChild = function getModifierChild(tags, children) {
+  if (!tags.length) return children;
+  var nextTag = tags.slice(1, tags.length);
+  return /*#__PURE__*/React.createElement(TextChild, {
+    tag: tags[0]
+  }, getModifierChild(nextTag, children));
+};
+
+function TextComponent(_ref) {
+  var _ref$h = _ref.h1,
+      h1 = _ref$h === void 0 ? false : _ref$h,
+      _ref$h2 = _ref.h2,
+      h2 = _ref$h2 === void 0 ? false : _ref$h2,
+      _ref$h3 = _ref.h3,
+      h3 = _ref$h3 === void 0 ? false : _ref$h3,
+      _ref$h4 = _ref.h4,
+      h4 = _ref$h4 === void 0 ? false : _ref$h4,
+      _ref$h5 = _ref.h5,
+      h5 = _ref$h5 === void 0 ? false : _ref$h5,
+      _ref$h6 = _ref.h6,
+      h6 = _ref$h6 === void 0 ? false : _ref$h6,
+      _ref$p = _ref.p,
+      p = _ref$p === void 0 ? false : _ref$p,
+      _ref$b = _ref.b,
+      b = _ref$b === void 0 ? false : _ref$b,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      _ref$i = _ref.i,
+      i = _ref$i === void 0 ? false : _ref$i,
+      _ref$span = _ref.span,
+      span = _ref$span === void 0 ? false : _ref$span,
+      _ref$del = _ref.del,
+      del = _ref$del === void 0 ? false : _ref$del,
+      _ref$em = _ref.em,
+      em = _ref$em === void 0 ? false : _ref$em,
+      _ref$blockquote = _ref.blockquote,
+      blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var elements = {
+    h1: h1,
+    h2: h2,
+    h3: h3,
+    h4: h4,
+    h5: h5,
+    h6: h6,
+    p: p,
+    blockquote: blockquote
+  };
+  var inlineElements = {
+    span: span,
+    small: small,
+    b: b,
+    em: em,
+    i: i,
+    del: del
+  };
+  var names = Object.keys(elements).filter(function (name) {
+    return elements[name];
+  });
+  var inlineNames = Object.keys(inlineElements).filter(function (name) {
+    return inlineElements[name];
+  });
+  var tag = useMemo(function () {
+    if (names[0]) return names[0];
+    if (inlineNames[0]) return inlineNames[0];
+    return 'p';
+  }, [names, inlineNames]);
+  var renderableChildElements = inlineNames.filter(function (name) {
+    return name !== tag;
+  });
+  var modifers = useMemo(function () {
+    if (!renderableChildElements.length) return children;
+    return getModifierChild(renderableChildElements, children);
+  }, [renderableChildElements, children]);
+  return /*#__PURE__*/React.createElement(TextChild, _extends({
+    className: className,
+    tag: tag
+  }, props), modifers);
+}
+
+TextComponent.displayName = 'BolioUIText';
+var Text = withScale(TextComponent);
+export default Text;

package/esm/Text/index.d.ts

@@ -0,0 +1,3 @@
+import Text from "./Text";
+export type { TextProps, TextTypes } from "./Text";
+export default Text;

package/esm/Text/index.js

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