@helpdice/ui 1.0.1 → 1.0.2

package/esm/tabs/tabs.d.ts

@@ -0,0 +1,54 @@
+import React, { CSSProperties } from 'react';
+interface Props {
+    initialValue?: string;
+    value?: string;
+    hideDivider?: boolean;
+    hideBorder?: boolean;
+    highlight?: boolean;
+    onChange?: (val: string) => void;
+    className?: string;
+    leftSpace?: CSSProperties['marginLeft'];
+    hoverHeightRatio?: number;
+    hoverWidthRatio?: number;
+    align?: CSSProperties['justifyContent'];
+    activeClassName?: string;
+    activeStyle?: CSSProperties;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TabsProps = Props & NativeAttrs;
+declare const Tabs: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Tabs;

package/esm/tabs/tabs.js

@@ -0,0 +1,138 @@
+"use client";
+
+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", "activeStyle", "align"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import { TabsContext } from './tabs-context';
+import useScale, { withScale } from '../use-scale';
+import Highlight from '../shared/highlight';
+import { useRect } from '../utils/layouts';
+import { isGeistElement } from '../utils/collections';
+import useClasses from '../use-classes';
+var TabsComponent = function TabsComponent(_ref) {
+  var userCustomInitialValue = _ref.initialValue,
+    value = _ref.value,
+    _ref$hideDivider = _ref.hideDivider,
+    hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+    hideBorder = _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,
+    _ref$activeStyle = _ref.activeStyle,
+    activeStyle = _ref$activeStyle === void 0 ? {} : _ref$activeStyle,
+    _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 (!isGeistElement(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([["1340018565", [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([["1340018565", [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([["1340018565", [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: activeStyle,
+      hideBorder: hideBorder,
+      className: _JSXStyle.dynamic([["1340018565", [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([["1340018565", [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: "1340018565",
+    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 = 'Tabs';
+var Tabs = withScale(TabsComponent);
+export default Tabs;

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,4 @@
+"use client";
+
+import Tag from './tag';
+export default Tag;

package/esm/tag/tag.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SnippetTypes } from "../utils/prop-types";
+export type TagTypes = SnippetTypes;
+interface Props {
+    type?: TagTypes;
+    invert?: boolean;
+    className?: string;
+}
+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 & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Tag;

package/esm/tag/tag.js

@@ -0,0 +1,71 @@
+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 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": {
+      color: palette.foreground
+    },
+    success: {
+      color: palette.success
+    },
+    warning: {
+      color: palette.warning
+    },
+    error: {
+      color: palette.error
+    },
+    secondary: {
+      color: palette.secondary
+    },
+    dark: {
+      color: palette.foreground,
+      bgColor: palette.background
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.accents_2
+    }
+  };
+  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
+  });
+};
+var TagComponent = function TagComponent(_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);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    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([["3652870078", [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: "3652870078",
+    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 = 'Tag';
+var Tag = withScale(TagComponent);
+export default Tag;

package/esm/text/child.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export interface Props {
+    tag: keyof JSX.IntrinsicElements;
+    type?: NormalTypes;
+    className?: string;
+}
+type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>;
+export type TextChildProps = Props & NativeAttrs;
+declare const TextChild: React.FC<React.PropsWithChildren<TextChildProps>>;
+export default TextChild;

package/esm/text/child.js

@@ -0,0 +1,70 @@
+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 React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale from '../use-scale';
+var getTypeColor = function getTypeColor(type, palette) {
+  var colors = {
+    "default": 'inherit',
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return colors[type] || colors["default"];
+};
+var TextChild = function TextChild(_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);
+  var Component = tag;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    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']);
+  var px = getScaleProps(['padding', 'paddingLeft', 'paddingRight', 'pl', 'pr', 'px']);
+  var py = getScaleProps(['padding', 'paddingTop', 'paddingBottom', 'pt', 'pb', 'py']);
+  var color = useMemo(function () {
+    return getTypeColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var classNames = useMemo(function () {
+    var keys = [{
+      value: mx,
+      className: 'mx'
+    }, {
+      value: my,
+      className: 'my'
+    }, {
+      value: px,
+      className: 'px'
+    }, {
+      value: py,
+      className: 'py'
+    }, {
+      value: font,
+      className: 'font'
+    }];
+    var scaleClassNames = keys.reduce(function (pre, next) {
+      if (typeof next.value === 'undefined') return pre;
+      return "".concat(pre, " ").concat(next.className);
+    }, '');
+    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 || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3155699851",
+    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 = 'TextChild';
+export default TextChild;

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,4 @@
+"use client";
+
+import Text from './text';
+export default Text;

package/esm/text/text.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export 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;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TextProps = Props & NativeAttrs;
+declare const Text: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Text;

package/esm/text/text.js

@@ -0,0 +1,103 @@
+"use client";
+
+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));
+};
+var TextComponent = 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];
+  });
+
+  /**
+   *  Render element "p" only if no element is found.
+   *  If there is only one modifier, just rendered one modifier element
+   *  e.g.
+   *    <Text /> => <p />
+   *    <Text em /> => <em />
+   *    <Text p em /> => <p><em>children</em></p>
+   *
+   */
+
+  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 = 'Text';
+var Text = withScale(TextComponent);
+export default Text;

package/esm/textarea/index.d.ts

@@ -0,0 +1,3 @@
+import Textarea from "./textarea";
+export type { TextareaProps, TextareaResizes, TextareaTypes } from "./textarea";
+export default Textarea;

package/esm/textarea/index.js

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