@bolio-ui/core 1.1.8 → 2.0.0-alpha.1

package/esm/Tabs/Tabs.js

@@ -3,7 +3,7 @@ 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 _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import useTheme from '../use-theme';
 import { TabsContext } from './TabsContext';
@@ -12,59 +12,50 @@ import Highlight from '../Shared/highlight';
 import { useRect } from '../utils/layouts';
 import { isBolioUIElement } from '../utils/collections';
 import useClasses from '../use-classes';
-
-function TabsComponent(_ref) {
+var TabsComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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);
-
+    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;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      tabs = _useState2[0],
-      setTabs = _useState2[1];
-
+    _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);
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selfValue = _useState4[0],
+    setSelfValue = _useState4[1];
+  var headerRef = useRef(null);
   var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      displayHighlight = _useState6[0],
-      setDisplayHighlight = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    displayHighlight = _useState6[0],
+    setDisplayHighlight = _useState6[1];
   var _useRect = useRect(),
-      rect = _useRect.rect,
-      setRect = _useRect.setRect;
-
+    rect = _useRect.rect,
+    setRect = _useRect.setRect;
   var register = function register(next) {
     setTabs(function (last) {
       var hasItem = last.find(function (item) {
@@ -77,7 +68,6 @@ function TabsComponent(_ref) {
       });
     });
   };
-
   var initialValue = useMemo(function () {
     return {
       register: register,
@@ -90,45 +80,44 @@ function TabsComponent(_ref) {
     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;
+      return headerRef.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("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["1540493998", [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,
+    ref: headerRef,
     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]]])
+    className: _JSXStyle.dynamic([["1540493998", [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', {
+    role: "tablist",
+    className: _JSXStyle.dynamic([["1540493998", [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;
+      value = _ref2.value;
     return /*#__PURE__*/React.createElement(Cell, {
       key: value,
       onClick: clickHandler,
@@ -136,16 +125,16 @@ function TabsComponent(_ref) {
       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]]])
+      className: _JSXStyle.dynamic([["1540493998", [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"
+    role: "tabpanel",
+    className: _JSXStyle.dynamic([["1540493998", [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",
+    id: "1540493998",
     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

@@ -1,12 +1,12 @@
 import React, { CSSProperties, MouseEvent } from 'react';
-export declare type TabsInternalCellProps = {
+export 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 type TabsInternalCell = React.FC<TabsInternalCellProps>;
 export interface TabsHeaderItem {
     value: string;
     cell: TabsInternalCell;

package/esm/Tabs/TabsItem.d.ts

@@ -4,7 +4,9 @@ interface Props {
     value: string;
     disabled?: boolean;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type TabsItemProps = Props & NativeAttrs;
-declare const TabsItem: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TabsItemProps = Props & NativeAttrs;
+declare const TabsItem: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default TabsItem;

package/esm/Tabs/TabsItem.js

@@ -1,69 +1,79 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 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;
-
+    value = _ref.value,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useTabsContext = useTabsContext(),
-      register = _useTabsContext.register,
-      currentValue = _useTabsContext.currentValue;
-
+    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;
+      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;
-
+      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);
     };
-
+    var keyDownHandler = function keyDownHandler(event) {
+      var _event$currentTarget$, _tabs$next, _tabs$next2;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        clickHandler();
+        return;
+      }
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      var tabs = Array.from(((_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.querySelectorAll('[role="tab"]:not([aria-disabled="true"])')) || []);
+      var current = tabs.indexOf(event.currentTarget);
+      var last = tabs.length - 1;
+      var next = current;
+      if (event.key === 'Home') next = 0;else if (event.key === 'End') next = last;else if (event.key === 'ArrowRight') next = current === last ? 0 : current + 1;else next = current === 0 ? last : current - 1;
+      event.preventDefault();
+      (_tabs$next = tabs[next]) === null || _tabs$next === void 0 ? void 0 : _tabs$next.focus();
+      (_tabs$next2 = tabs[next]) === null || _tabs$next2 === void 0 ? void 0 : _tabs$next2.click();
+    };
     return /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      role: "button",
+      role: "tab",
+      "aria-selected": active,
+      "aria-disabled": disabled || undefined,
+      tabIndex: active ? 0 : -1,
       key: value,
       onMouseOver: onMouseOver,
       onClick: clickHandler,
+      onKeyDown: keyDownHandler,
       style: active ? activeStyle : {},
       "data-bolioui": "tab-item",
-      className: _JSXStyle.dynamic([["243163264", [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 || "")
+      className: _JSXStyle.dynamic([["2844756105", [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, theme.palette.primary]]]) + " " + (classes || "")
     }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "243163264",
-      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;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;}")));
+      id: "2844756105",
+      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, theme.palette.primary]
+    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;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;}.tab.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:-2px;}.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({
@@ -73,7 +83,6 @@ function TabsItemComponent(_ref) {
   }, [value, label, disabled]);
   return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
 }
-
 TabsItemComponent.displayName = 'BolioUITabsItem';
 var TabsItem = withScale(TabsItemComponent);
 export default TabsItem;

package/esm/Tabs/index.d.ts

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

package/esm/Tabs/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Tabs from './Tabs';
 import TabsItem from './TabsItem';
 Tabs.Item = TabsItem;

package/esm/Tag/Tag.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
-import { SnippetTypes } from "../utils/prop-types";
-export declare type TagTypes = SnippetTypes;
+import { SnippetTypes } from '../utils/prop-types';
+export 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 = {
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TagProps = Props & NativeAttrs;
+export type TagColors = {
     color: string;
     bgColor: string;
     borderColor: string;
 };
-declare const Tag: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+declare const Tag: import("../use-scale/with-scale").ScaleComponent<HTMLSpanElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/esm/Tag/Tag.js

@@ -1,11 +1,10 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["type", "children", "className", "invert"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
-
 var getColors = function getColors(type, palette, invert) {
   var colors = {
     "default": {
@@ -39,48 +38,42 @@ var getColors = function getColors(type, palette, invert) {
     }
   };
   var hideBorder = invert || type === 'lite';
-
   var cardStyle = _extends({}, colors[type], {
     bgColor: colors[type].bgColor || palette.background,
     borderColor: hideBorder ? 'transparent' : colors[type].color
   });
-
   return !invert ? cardStyle : _extends({}, cardStyle, {
     color: cardStyle.bgColor,
     bgColor: cardStyle.color
   });
 };
-
-function TagComponent(_ref) {
+var TagComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$invert = _ref.invert,
-      invert = _ref$invert === void 0 ? false : _ref$invert,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$invert = _ref.invert,
+    invert = _ref$invert === void 0 ? false : _ref$invert,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useMemo = useMemo(function () {
-    return getColors(type, theme.palette, invert);
-  }, [type, theme.palette, invert]),
-      color = _useMemo.color,
-      bgColor = _useMemo.bgColor,
-      borderColor = _useMemo.borderColor;
-
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3411740258", [borderColor, bgColor, color, SCALES.height(0.3125), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1.75), SCALES.pt(0.375), SCALES.pr(0.375), SCALES.pb(0.375), SCALES.pl(0.375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+      return getColors(type, theme.palette, invert);
+    }, [type, theme.palette, invert]),
+    color = _useMemo.color,
+    bgColor = _useMemo.bgColor,
+    borderColor = _useMemo.borderColor;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["3433524475", [borderColor, bgColor, color, SCALES.height(0.3125), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1.75), SCALES.pt(0.375), SCALES.pr(0.375), SCALES.pb(0.375), SCALES.pl(0.375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3411740258",
+    id: "3433524475",
     dynamic: [borderColor, bgColor, color, SCALES.height(0.3125), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1.75), SCALES.pt(0.375), SCALES.pr(0.375), SCALES.pb(0.375), SCALES.pl(0.375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, "span.__jsx-style-dynamic-selector{display:inline-block;border:1px solid ".concat(borderColor, ";background-color:").concat(bgColor, ";color:").concat(color, ";box-sizing:border-box;line-height:1em;border-radius:").concat(SCALES.height(0.3125), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1.75), ";padding:").concat(SCALES.pt(0.375), " ").concat(SCALES.pr(0.375), " ").concat(SCALES.pb(0.375), " ").concat(SCALES.pl(0.375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
-}
-
+});
 TagComponent.displayName = 'BolioUITag';
 var Tag = withScale(TagComponent);
 export default Tag;

package/esm/Tag/index.d.ts

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

package/esm/Tag/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Tag from './Tag';
 export default Tag;

package/esm/Text/Child.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
+import { NormalTypes } from '../utils/prop-types';
 export interface Props {
-    tag: keyof JSX.IntrinsicElements;
+    tag: keyof React.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;
-}
+type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>;
+export type TextChildProps = Props & NativeAttrs;
+declare const TextChild: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default TextChild;

package/esm/Text/Child.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "tag", "className", "type"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import useScale from '../use-scale';
-
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -18,23 +17,19 @@ var getTypeColor = function getTypeColor(type, palette) {
   };
   return colors[type] || colors["default"];
 };
-
-function TextChild(_ref) {
+var TextChild = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      tag = _ref.tag,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    tag = _ref.tag,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
   var Component = tag;
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES,
-      getScaleProps = _useScale.getScaleProps;
-
+    SCALES = _useScale.SCALES,
+    getScaleProps = _useScale.getScaleProps;
   var font = getScaleProps('font');
   var mx = getScaleProps(['margin', 'marginLeft', 'marginRight', 'mx', 'ml', 'mr']);
   var my = getScaleProps(['margin', 'marginTop', 'marginBottom', 'my', 'mt', 'mb']);
@@ -66,13 +61,14 @@ function TextChild(_ref) {
     }, '');
     return "".concat(scaleClassNames, " ").concat(className).trim();
   }, [mx, my, px, py, font, className]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    className: _JSXStyle.dynamic([["3155699851", [tag, color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || "")
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["674408519", [tag, color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3155699851",
+    id: "674408519",
     dynamic: [tag, color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]
   }, "".concat(tag, ".__jsx-style-dynamic-selector{color:").concat(color, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.font.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(1, 'inherit'), ";}.mx.__jsx-style-dynamic-selector{margin-left:").concat(SCALES.ml(0, 'revert'), ";margin-right:").concat(SCALES.mr(0, 'revert'), ";}.my.__jsx-style-dynamic-selector{margin-top:").concat(SCALES.mt(0, 'revert'), ";margin-bottom:").concat(SCALES.mb(0, 'revert'), ";}.px.__jsx-style-dynamic-selector{padding-left:").concat(SCALES.pl(0, 'revert'), ";padding-right:").concat(SCALES.pr(0, 'revert'), ";}.py.__jsx-style-dynamic-selector{padding-top:").concat(SCALES.pt(0, 'revert'), ";padding-bottom:").concat(SCALES.pb(0, 'revert'), ";}")));
-}
-
+});
 TextChild.displayName = 'BolioUITextChild';
 export default TextChild;

package/esm/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type TextTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type TextTypes = NormalTypes;
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -19,7 +19,9 @@ interface Props {
     className?: string;
     type?: TextTypes;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type TextProps = Props & NativeAttrs;
-declare const Text: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TextProps = Props & NativeAttrs;
+declare const Text: import("../use-scale/with-scale").ScaleComponent<HTMLElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Text;