@helpdice/ui 1.0.1 → 1.0.2

package/esm/toggle/toggle.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type ToggleTypes = NormalTypes;
+export interface ToggleEventTarget {
+    checked: boolean;
+}
+export interface ToggleEvent {
+    target: ToggleEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    initialChecked?: boolean;
+    onChange?: (ev: ToggleEvent) => void;
+    disabled?: boolean;
+    type?: ToggleTypes;
+    className?: string;
+}
+type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>;
+export type ToggleProps = Props & NativeAttrs;
+export type ToggleSize = {
+    width: string;
+    height: string;
+};
+declare const Toggle: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    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 Toggle;

package/esm/toggle/toggle.js

@@ -0,0 +1,76 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["initialChecked", "checked", "disabled", "onChange", "type", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var ToggleComponent = function ToggleComponent(_ref) {
+  var _ref$initialChecked = _ref.initialChecked,
+    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(initialChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
+  var classes = useClasses('toggle', {
+    checked: selfChecked,
+    disabled: disabled
+  });
+  var changeHandle = useCallback(function (ev) {
+    if (disabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    setSelfChecked(!selfChecked);
+    onChange && onChange(selfEvent);
+  }, [disabled, selfChecked, onChange]);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    bg = _useMemo.bg;
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4106206985", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    disabled: disabled,
+    checked: selfChecked,
+    onChange: changeHandle,
+    className: _JSXStyle.dynamic([["4106206985", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4106206985", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4106206985", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4106206985",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
+  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(0.875), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:var(--toggle-height);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0,rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.background, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 2px));box-shadow:none;}")));
+};
+ToggleComponent.displayName = 'Toggle';
+var Toggle = withScale(ToggleComponent);
+export default Toggle;

package/esm/tooltip/__test__/index.test.js

@@ -0,0 +1,168 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import { mount } from 'enzyme';
+import { Button, Tooltip, GeistProvider } from 'components';
+import { nativeEvent, updateWrapper } from 'tests/utils';
+import { act } from 'react-dom/test-utils';
+var expectTooltipIsShow = function expectTooltipIsShow(wrapper) {
+  expect(wrapper.find('.inner').length).not.toBe(0);
+};
+var expectTooltipIsHidden = function expectTooltipIsHidden(wrapper) {
+  expect(wrapper.find('.inner').length).toBe(0);
+};
+describe('Tooltip', function () {
+  it('should render correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var wrapper;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement(GeistProvider, {
+            themeType: "dark"
+          }, /*#__PURE__*/React.createElement(Tooltip, {
+            text: /*#__PURE__*/React.createElement("p", {
+              id: "test"
+            }, "custom-content")
+          }, "some tips")));
+          expectTooltipIsHidden(wrapper);
+          wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent);
+          _context.next = 5;
+          return updateWrapper(wrapper, 150);
+        case 5:
+          wrapper.find('#test').simulate('click', nativeEvent);
+          expectTooltipIsShow(wrapper);
+          _context.next = 9;
+          return updateWrapper(wrapper, 150);
+        case 9:
+          wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent);
+          _context.next = 12;
+          return updateWrapper(wrapper, 350);
+        case 12:
+          expectTooltipIsHidden(wrapper);
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should render text when hover it', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var wrapper;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+            text: "some text"
+          }, "some tips")));
+          wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent);
+          _context2.next = 4;
+          return updateWrapper(wrapper, 350);
+        case 4:
+          expectTooltipIsShow(wrapper);
+          wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent);
+          _context2.next = 8;
+          return updateWrapper(wrapper, 350);
+        case 8:
+          expectTooltipIsHidden(wrapper);
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('should render react-node when click it', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var wrapper, testNode;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement(Tooltip, {
+            text: /*#__PURE__*/React.createElement("p", {
+              id: "test"
+            }, "custom-content"),
+            trigger: "click"
+          }, /*#__PURE__*/React.createElement("span", null, "click me")));
+          wrapper.find('.tooltip').simulate('click', nativeEvent);
+          _context3.next = 4;
+          return updateWrapper(wrapper, 150);
+        case 4:
+          expectTooltipIsShow(wrapper);
+          testNode = wrapper.find('#test');
+          expect(testNode.length).not.toBe(0);
+          expect(testNode.text()).toContain('custom-content');
+          act(function () {
+            document.body.dispatchEvent(new MouseEvent('click', {
+              view: window,
+              bubbles: true,
+              cancelable: true
+            }));
+          });
+          _context3.next = 11;
+          return updateWrapper(wrapper, 150);
+        case 11:
+          expectTooltipIsHidden(wrapper);
+        case 12:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it('should render inner components', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var wrapper;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement(Tooltip, {
+            text: "some text",
+            type: "dark"
+          }, /*#__PURE__*/React.createElement(Button, {
+            auto: true,
+            id: "test"
+          }, "button")));
+          expect(wrapper.find('#test').length).not.toBe(0);
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it('should render correctly by visible', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var wrapper;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+            text: /*#__PURE__*/React.createElement("p", {
+              id: "visible"
+            }, "custom-content"),
+            visible: true,
+            placement: "rightEnd"
+          }, "some tips")));
+          _context5.next = 3;
+          return updateWrapper(wrapper, 150);
+        case 3:
+          expect(wrapper.find('#visible').length).toBe(1);
+        case 4:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it('should render correctly by using wrong placement', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var wrapper;
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          wrapper = mount( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+            text: /*#__PURE__*/React.createElement("p", {
+              id: "initial-visible"
+            }, "custom-content"),
+            initialVisible: true,
+            placement: 'test'
+          }, "some tips")));
+          expect(wrapper.find('#initial-visible').length).toBe(1);
+        case 2:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+});

package/esm/tooltip/helper.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+export interface ReactiveDomReact {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+}
+export declare const getRect: (ref: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;

package/esm/tooltip/helper.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  bottom: -1000,
+  width: 0,
+  height: 0
+};
+export var getRect = function getRect(ref) {
+  if (!ref || !ref.current) return defaultRect;
+  var rect = ref.current.getBoundingClientRect();
+  return _extends({}, rect, {
+    width: rect.width || rect.right - rect.left,
+    height: rect.height || rect.bottom - rect.top,
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft
+  });
+};

package/esm/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import Tooltip from "./tooltip";
+export type { TooltipProps, TooltipOnVisibleChange, TooltipTypes, TooltipTriggers, TooltipPlacement, } from "./tooltip";
+export default Tooltip;

package/esm/tooltip/index.js

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

package/esm/tooltip/placement.d.ts

@@ -0,0 +1,29 @@
+import { Placement } from "../utils/prop-types";
+interface ParentDomRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface TooltipPosition {
+    top: string;
+    left: string;
+    transform: string;
+}
+export declare const defaultTooltipPosition: {
+    top: string;
+    left: string;
+    transform: string;
+};
+export interface TooltipIconPosition {
+    top: string;
+    left: string;
+    right: string;
+    bottom: string;
+    transform: string;
+}
+export declare const getPosition: (placement: Placement, rect: ParentDomRect, offset: number) => TooltipPosition;
+export declare const getIconPosition: (placement: Placement, offsetX: string, offsetY: string, offsetAbsolute?: string) => TooltipIconPosition;
+export {};

package/esm/tooltip/placement.js

@@ -0,0 +1,160 @@
+export var defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none'
+};
+export var getPosition = function getPosition(placement, rect, offset) {
+  var positions = {
+    top: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, -100%)'
+    },
+    topStart: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, -100%)'
+    },
+    topEnd: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    bottom: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, 0)'
+    },
+    bottomStart: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, 0)'
+    },
+    bottomEnd: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    left: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -50%)'
+    },
+    leftStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    leftEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    right: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -50%)'
+    },
+    rightStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, 0)'
+    },
+    rightEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -100%)'
+    }
+  };
+  return positions[placement] || positions.top;
+};
+export var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
+  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
+  var positions = {
+    top: {
+      top: 'auto',
+      right: 'auto',
+      left: '50%',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
+    },
+    topStart: {
+      top: 'auto',
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    topEnd: {
+      top: 'auto',
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    bottom: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: '50%',
+      bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
+    },
+    bottomStart: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    bottomEnd: {
+      top: "".concat(offsetAbsolute),
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    left: {
+      top: '50%',
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftStart: {
+      top: "".concat(offsetY),
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftEnd: {
+      top: 'auto',
+      right: '0',
+      left: 'auto',
+      bottom: "".concat(offsetY),
+      transform: 'translate(100%, 50%) rotate(180deg)'
+    },
+    right: {
+      top: '50%',
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightStart: {
+      top: "".concat(offsetY),
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightEnd: {
+      top: 'auto',
+      right: 'auto',
+      left: '0',
+      bottom: "".concat(offsetY),
+      transform: 'translate(-100%, 50%) rotate(0deg)'
+    }
+  };
+  return positions[placement] || positions.top;
+};

package/esm/tooltip/styles.d.ts

@@ -0,0 +1,7 @@
+import { SnippetTypes } from "../utils/prop-types";
+import { HUIThemesPalette } from "../themes/presets";
+export type TooltipColors = {
+    bgColor: string;
+    color: string;
+};
+export declare const getColors: (type: SnippetTypes, palette: HUIThemesPalette) => TooltipColors;

package/esm/tooltip/styles.js

@@ -0,0 +1,16 @@
+export var getColors = function getColors(type, palette) {
+  var colors = {
+    "default": palette.background,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary,
+    dark: palette.foreground,
+    lite: palette.background
+  };
+  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
+  return {
+    color: color,
+    bgColor: colors[type]
+  };
+};

package/esm/tooltip/tooltip-content.d.ts

@@ -0,0 +1,18 @@
+import React, { MutableRefObject } from 'react';
+import { Placement, SnippetTypes } from "../utils/prop-types";
+interface Props {
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    placement: Placement;
+    type: SnippetTypes;
+    visible: boolean;
+    hideArrow: boolean;
+    offset: number;
+    className?: string;
+    iconOffset: TooltipIconOffset;
+}
+export type TooltipIconOffset = {
+    x: string;
+    y: string;
+};
+declare const TooltipContent: React.FC<React.PropsWithChildren<Props>>;
+export default TooltipContent;

package/esm/tooltip/tooltip-content.js

@@ -0,0 +1,75 @@
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import useTheme from '../use-theme';
+import usePortal from '../utils/use-portal';
+import useResize from '../utils/use-resize';
+import CssTransition from '../shared/css-transition';
+import useClickAnyWhere from '../utils/use-click-anywhere';
+import { getColors } from './styles';
+import { getPosition, defaultTooltipPosition } from './placement';
+import TooltipIcon from './tooltip-icon';
+import useScale from '../use-scale';
+import { getRect } from './helper';
+import useClasses from '../use-classes';
+var TooltipContent = function TooltipContent(_ref) {
+  var children = _ref.children,
+    parent = _ref.parent,
+    visible = _ref.visible,
+    offset = _ref.offset,
+    iconOffset = _ref.iconOffset,
+    placement = _ref.placement,
+    type = _ref.type,
+    className = _ref.className,
+    hideArrow = _ref.hideArrow;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var el = usePortal('tooltip');
+  var selfRef = useRef(null);
+  var _useState = useState(defaultTooltipPosition),
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var colors = useMemo(function () {
+    return getColors(type, theme.palette);
+  }, [type, theme.palette]);
+  var hasShadow = type === 'default';
+  var classes = useClasses('tooltip-content', className);
+  if (!parent) return null;
+  var updateRect = function updateRect() {
+    var position = getPosition(placement, getRect(parent), offset);
+    setRect(position);
+  };
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    return updateRect();
+  });
+  useEffect(function () {
+    updateRect();
+  }, [visible]);
+  var preventHandler = function preventHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+  if (!el) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: selfRef,
+    onClick: preventHandler,
+    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + "inner"
+  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
+    placement: placement,
+    shadow: hasShadow
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2387841858",
+    dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
+  }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
+};
+export default TooltipContent;