@helpdice/theme 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import useTheme from './use-theme';
 export { default as UiProvider } from './ui-provider';
 export type { UiProviderProps } from './ui-provider';
 export { default as Themes } from './themes';
@@ -6,7 +5,18 @@ export type { HUIThemes, HUserTheme } from './themes';
 export { default as useAllThemes } from './use-all-themes';
 export type { AllThemesConfig } from './use-all-themes';
 export { default as CssBaseline } from './css-baseline';
-export { default as useTheme } from './use-theme';
 export { useRect } from './utils/layouts';
 export type { ReactiveDomReact } from './utils/layouts';
-export default useTheme;
+export { default as useCurrentState } from './use-current-state';
+export { default as useTheme } from './use-theme';
+export { default as useClasses } from './use-classes';
+export { default as useToasts } from './use-toasts';
+export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
+export { default as useMediaQuery } from './use-media-query';
+export type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query';
+export { default as Highlight } from './shared/highlight';
+export type { HighlightProps } from './shared/highlight';
+export { default as Ellipsis } from './shared/ellipsis';
+export { default as Expand } from './shared/expand';
+export { default as Dropdown } from './shared/dropdown';
+export { default as Backdrop } from './shared/backdrop';

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var reactDom = require('react-dom');
 
@@ -13,6 +11,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -21,6 +22,18 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -51,6 +64,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -95,6 +111,9 @@ function _objectWithoutPropertiesLoose(r, e) {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -126,6 +145,33 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+var defaultToastLayout = {
+  padding: '12px 16px',
+  margin: '8px 0',
+  width: '420px',
+  maxWidth: '90vw',
+  maxHeight: '75px',
+  placement: 'bottomRight'
+};
+var defaultParams = {
+  toasts: [],
+  toastLayout: defaultToastLayout,
+  updateToastLayout: function updateToastLayout(t) {
+    return t;
+  },
+  updateToasts: function updateToasts(t) {
+    return t;
+  },
+  lastUpdateToastId: null,
+  updateLastToastId: function updateLastToastId() {
+    return null;
+  }
+};
+var HUIContent = /*#__PURE__*/React.createContext(defaultParams);
+var useHUIContext = function useHUIContext() {
+  return React.useContext(HUIContent);
+};
+
 var defaultFont = {
   sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -375,33 +421,6 @@ var useTheme = function useTheme() {
   return React.useContext(ThemeContext);
 };
 
-var defaultToastLayout = {
-  padding: '12px 16px',
-  margin: '8px 0',
-  width: '420px',
-  maxWidth: '90vw',
-  maxHeight: '75px',
-  placement: 'bottomRight'
-};
-var defaultParams = {
-  toasts: [],
-  toastLayout: defaultToastLayout,
-  updateToastLayout: function updateToastLayout(t) {
-    return t;
-  },
-  updateToasts: function updateToasts(t) {
-    return t;
-  },
-  lastUpdateToastId: null,
-  updateLastToastId: function updateLastToastId() {
-    return null;
-  }
-};
-var HUIContent = /*#__PURE__*/React.createContext(defaultParams);
-var useHUIContext = function useHUIContext() {
-  return React.useContext(HUIContent);
-};
-
 /* "use client" */
 
 var defaultAllThemesConfig = {
@@ -1062,7 +1081,7 @@ var usePortal = function usePortal() {
   return elSnapshot;
 };
 
-var _excluded = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var _excluded$2 = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -1077,7 +1096,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -1452,7 +1471,7 @@ var getElementOffset = function getElementOffset(el) {
     left: left
   };
 };
-var defaultRect = {
+var defaultRect$1 = {
   top: -1e3,
   left: -1e3,
   right: -1e3,
@@ -1461,7 +1480,7 @@ var defaultRect = {
   elementTop: -1e3
 };
 var getRectFromDOMWithContainer = function getRectFromDOMWithContainer(domRect, getContainer) {
-  if (!domRect) return defaultRect;
+  if (!domRect) return defaultRect$1;
   var container = getContainer ? getContainer() : null;
   var scrollElement = container || document.documentElement;
   var _getElementOffset = getElementOffset(container),
@@ -1475,22 +1494,26 @@ var getRectFromDOMWithContainer = function getRectFromDOMWithContainer(domRect,
     elementTop: domRect.top + scrollElement.scrollTop - offsetTop
   });
 };
+var isUnplacedRect = function isUnplacedRect(rect) {
+  if (!rect) return true;
+  return rect.top === defaultRect$1.top && rect.left === defaultRect$1.left;
+};
 var getRefRect = function getRefRect(ref, getContainer) {
-  if (!ref || !ref.current) return defaultRect;
+  if (!ref || !ref.current) return defaultRect$1;
   var rect = ref.current.getBoundingClientRect();
   return getRectFromDOMWithContainer(rect, getContainer);
 };
 var getEventRect = function getEventRect(event, getContainer) {
   var _event$target;
   var rect = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getBoundingClientRect();
-  if (!rect) return defaultRect;
+  if (!rect) return defaultRect$1;
   return getRectFromDOMWithContainer(rect, getContainer);
 };
 var isRefTarget = function isRefTarget(eventOrRef) {
   return typeof (eventOrRef === null || eventOrRef === void 0 ? void 0 : eventOrRef.target) === 'undefined';
 };
 var useRect = function useRect(initialState) {
-  var _useState = React.useState(initialState || defaultRect),
+  var _useState = React.useState(initialState || defaultRect$1),
     _useState2 = _slicedToArray(_useState, 2),
     rect = _useState2[0],
     setRect = _useState2[1];
@@ -1504,13 +1527,581 @@ var useRect = function useRect(initialState) {
   };
 };
 
-// @ts-ignore
-/// <reference types="styled-jsx" />
+var defaultToast = {
+  delay: 2000,
+  type: 'default'
+};
+var useToasts = function useToasts(layout) {
+  var _useHUIContext = useHUIContext(),
+    updateToasts = _useHUIContext.updateToasts,
+    toasts = _useHUIContext.toasts,
+    updateToastLayout = _useHUIContext.updateToastLayout,
+    updateLastToastId = _useHUIContext.updateLastToastId;
+  React.useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _objectSpread2(_objectSpread2({}, defaultToastLayout), layout) : defaultToastLayout;
+    });
+  }, []);
+  var _cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _objectSpread2(_objectSpread2({}, toast), {}, {
+          visible: false
+        });
+      });
+    });
+  };
+  var findToastOneByID = function findToastOneByID(id) {
+    return toasts.find(function (t) {
+      return t.id === id;
+    });
+  };
+  var removeToastOneByID = function removeToastOneByID(id) {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        if (toast.id !== id) return toast;
+        return _objectSpread2(_objectSpread2({}, toast), {}, {
+          visible: false
+        });
+      });
+    });
+  };
+  var setToast = function setToast(toast) {
+    var internalIdent = "toast-".concat(getId());
+    var delay = toast.delay || defaultToast.delay;
+    if (toast.id) {
+      var hasIdent = toasts.find(function (t) {
+        return t.id === toast.id;
+      });
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+    updateToasts(function (last) {
+      var newToast = {
+        delay: delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(function () {
+          _cancel(internalIdent);
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: function cancel() {
+          return _cancel(internalIdent);
+        }
+      };
+      return [].concat(_toConsumableArray(last), [newToast]);
+    });
+  };
+  return {
+    toasts: toasts,
+    setToast: setToast,
+    removeAll: removeAll,
+    findToastOneByID: findToastOneByID,
+    removeToastOneByID: removeToastOneByID
+  };
+};
+
+tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile');
+tuple('up', 'down', 'default');
+var defaultResponsiveOptions = {
+  match: 'default'
+};
+var makeQueries = function makeQueries(bp, up, down) {
+  var queryString = function queryString(item) {
+    var upQuery = "(min-width: ".concat(item.min, ")");
+    var downQuery = "(max-width: ".concat(item.max, ")");
+    return up ? upQuery : down ? downQuery : "".concat(upQuery, " and ").concat(downQuery);
+  };
+  var xs = queryString(bp.xs);
+  return {
+    xs: xs,
+    mobile: xs,
+    sm: queryString(bp.sm),
+    md: queryString(bp.md),
+    lg: queryString(bp.lg),
+    xl: queryString(bp.xl)
+  };
+};
+var useMediaQuery = function useMediaQuery(breakpoint) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultResponsiveOptions;
+  var _options$match = options.match,
+    matchType = _options$match === void 0 ? 'default' : _options$match,
+    _options$ssrMatchMedi = options.ssrMatchMedia,
+    ssrMatchMedia = _options$ssrMatchMedi === void 0 ? null : _options$ssrMatchMedi;
+  var supportMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  var theme = useTheme();
+  var mediaQueries = React.useMemo(function () {
+    var up = matchType === 'up';
+    var down = matchType === 'down';
+    return makeQueries(theme.breakpoints, up, down);
+  }, [theme.breakpoints, options]);
+  var query = React.useMemo(function () {
+    return mediaQueries[breakpoint];
+  }, [mediaQueries, breakpoint]);
+  var matchQuery = function matchQuery(q) {
+    return window.matchMedia(q);
+  };
+
+  /**
+   * Do nothing in the server-side rendering.
+   * If server match query fucntion is simulated, return user-defined value first.
+   */
+  var _useState = React.useState(function () {
+      if (supportMedia) return matchQuery(query).matches;
+      if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {
+        return ssrMatchMedia(query).matches;
+      }
+      return false;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  React.useEffect(function () {
+    if (!supportMedia) return;
+    var queryList = matchQuery(query);
+    var update = function update() {
+      return setState(matchQuery(query).matches);
+    };
+    update();
+
+    /**
+     * addListener is deprecated. EventTarget.addEventListener is recommended.
+     * But in some old browsers, MediaQueryList does not inherit from EventTarget.
+     */
+    queryList.addListener(update);
+    return function () {
+      queryList.removeListener(update);
+    };
+  }, [supportMedia]);
+  return state;
+};
+
+/* "use client" */
+
+var usePrevious = function usePrevious(state) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    ref.current = state;
+  });
+  return ref ? ref.current : null;
+};
+
+var _excluded$1 = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
+var Highlight = function Highlight(_ref) {
+  var rect = _ref.rect,
+    visible = _ref.visible,
+    _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+    hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
+    _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+    hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
+    _ref$activeOpacity = _ref.activeOpacity,
+    activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var theme = useTheme();
+  var ref = React.useRef(null);
+  var isFirstVisible = usePrevious(isUnplacedRect(rect));
+  var position = React.useMemo(function () {
+    var width = rect.width * hoverWidthRatio;
+    var height = rect.height * hoverHeightRatio;
+    return {
+      width: "".concat(width, "px"),
+      left: "".concat(rect.left + (rect.width - width) / 2, "px"),
+      height: "".concat(height, "px"),
+      top: "".concat(rect.elementTop + (rect.height - height) / 2, "px"),
+      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
+    };
+  }, [rect, hoverWidthRatio, hoverHeightRatio]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || useClasses('highlight', className) || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "603024321",
+    dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]
+  }, ".highlight.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_2, ";position:absolute;border-radius:5px;width:").concat(position.width, ";left:").concat(position.left, ";height:").concat(position.height, ";top:").concat(position.top, ";opacity:").concat(visible ? activeOpacity : 0, ";-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:").concat(position.transition, ";transition-property:").concat(position.transition, ";}")));
+};
+
+var Ellipsis = function Ellipsis(_ref) {
+  var children = _ref.children,
+    height = _ref.height;
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["822089635", [height]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "822089635",
+    dynamic: [height]
+  }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
+};
+var ellipsis = /*#__PURE__*/React.memo(Ellipsis);
+
+var getRealShape = function getRealShape(el) {
+  var defaultShape = {
+    width: 0,
+    height: 0
+  };
+  if (!el || typeof window === 'undefined') return defaultShape;
+  var rect = el.getBoundingClientRect();
+  var _window$getComputedSt = window.getComputedStyle(el),
+    width = _window$getComputedSt.width,
+    height = _window$getComputedSt.height;
+  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
+    if (!str) return 0;
+    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
+    return Number.isNaN(+strVal) ? 0 : +strVal;
+  };
+  return {
+    width: getCSSStyleVal("".concat(width), rect.width),
+    height: getCSSStyleVal("".concat(height), rect.height)
+  };
+};
+var useRealShape = function useRealShape(ref) {
+  var _useState = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var update = function update() {
+    var _getRealShape = getRealShape(ref.current),
+      width = _getRealShape.width,
+      height = _getRealShape.height;
+    setState({
+      width: width,
+      height: height
+    });
+  };
+  React.useEffect(function () {
+    return update();
+  }, [ref.current]);
+  return [state, update];
+};
+
+var Expand = function Expand(_ref) {
+  var _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay,
+    children = _ref.children;
+  var _useState = React.useState(isExpanded ? 'auto' : '0'),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _useState3 = React.useState(isExpanded),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selfExpanded = _useState4[0],
+    setSelfExpanded = _useState4[1];
+  var _useState5 = React.useState(isExpanded),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var contentRef = React.useRef(null);
+  var entryTimer = React.useRef();
+  var leaveTimer = React.useRef();
+  var resetTimer = React.useRef();
+  var _useRealShape = useRealShape(contentRef),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    state = _useRealShape2[0],
+    updateShape = _useRealShape2[1];
+  var classes = useClasses('container', {
+    expanded: selfExpanded
+  });
+  React.useEffect(function () {
+    return setHeight("".concat(state.height, "px"));
+  }, [state.height]);
+  React.useEffect(function () {
+    // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight("".concat(state.height, "px"));
+    }
+
+    // show expand animation
+    entryTimer.current = window.setTimeout(function () {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30);
+
+    // Reset height after animation
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(function () {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(function () {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+    return function () {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1918690829",
+    dynamic: [visible ? 'visible' : 'hidden', delay, height]
+  }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
+};
+Expand.displayName = 'Expand';
+
+/* "use client" */
+
+var useResize = function useResize(callback) {
+  var immediatelyInvoke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  React.useEffect(function () {
+    var fn = function fn() {
+      return callback();
+    };
+    if (immediatelyInvoke) {
+      fn();
+    }
+    window.addEventListener('resize', fn);
+    return function () {
+      return window.removeEventListener('resize', fn);
+    };
+  }, []);
+};
+
+/* "use client" */
+
+var useClickAnyWhere = function useClickAnyWhere(handler) {
+  React.useEffect(function () {
+    var callback = function callback(event) {
+      return handler(event);
+    };
+    document.addEventListener('click', callback);
+    return function () {
+      return document.removeEventListener('click', callback);
+    };
+  }, [handler]);
+};
+
+/* "use client" */
+
+var useDOMObserver = function useDOMObserver(ref) {
+  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  var config = {
+    attributes: false,
+    childList: true,
+    subtree: true
+  };
+  React.useEffect(function () {
+    if (!ref || !ref.current) return;
+    var unmount = false;
+    var done = function done() {
+      if (unmount) return;
+      callback.apply(void 0, arguments);
+    };
+    var observer = new MutationObserver(done);
+    observer.observe(ref.current, config);
+    return function () {
+      unmount = true;
+      observer.disconnect();
+    };
+  }, [ref]);
+};
+
+var warningStack = {};
+var useWarning = function useWarning(message, component) {
+  var tag = ' ';
+  var log = "[Helpdice UI]".concat(tag, ": ").concat(message);
+  if (typeof console === 'undefined') return;
+  if (warningStack[log]) return;
+  warningStack[log] = true;
+  if (process.env.NODE_ENV !== 'production') {
+    return console.error(log);
+  }
+  console.warn(log);
+};
+
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  width: 0
+};
+var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    parent = _ref.parent,
+    visible = _ref.visible,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
+  var el = usePortal('dropdown', getPopupContainer);
+  var _useState = React.useState(defaultRect),
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
+  if (!parent) return null;
+
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production') {
+    if (getPopupContainer && getPopupContainer()) {
+      var _el = getPopupContainer();
+      var style = window.getComputedStyle(_el);
+      if (style.position === 'static') {
+        useWarning('The element specified by "getPopupContainer" must have "position" set.');
+      }
+    }
+  }
+  var updateRect = function updateRect() {
+    var _getRefRect = getRefRect(parent, getPopupContainer),
+      top = _getRefRect.top,
+      left = _getRefRect.left,
+      right = _getRefRect.right,
+      nativeWidth = _getRefRect.width;
+    setRect({
+      top: top,
+      left: left,
+      right: right,
+      width: nativeWidth
+    });
+  };
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    var _getRefRect2 = getRefRect(parent, getPopupContainer),
+      top = _getRefRect2.top,
+      left = _getRefRect2.left;
+    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
+    if (!shouldUpdatePosition) return;
+    updateRect();
+  });
+  useDOMObserver(parent, function () {
+    updateRect();
+  });
+  React.useEffect(function () {
+    if (!parent || !parent.current) return;
+    parent.current.addEventListener('mouseenter', updateRect);
+    /* istanbul ignore next */
+    return function () {
+      if (!parent || !parent.current) return;
+      parent.current.removeEventListener('mouseenter', updateRect);
+    };
+  }, [parent]);
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+  };
+  var mouseDownHandler = function mouseDownHandler(event) {
+    event.preventDefault();
+  };
+  if (!el) return null;
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1644673105",
+    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
+  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
+});
+
+var _excluded = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
+var Backdrop = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    width = _ref.width,
+    _ref$onContentClick = _ref.onContentClick,
+    onContentClick = _ref$onContentClick === void 0 ? function () {} : _ref$onContentClick,
+    _ref$backdropClassNam = _ref.backdropClassName,
+    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
+    _ref$positionClassNam = _ref.positionClassName,
+    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
+    _ref$layerClassName = _ref.layerClassName,
+    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useCurrentState = useCurrentState(false),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setIsContentMouseDown = _useCurrentState2[1],
+    IsContentMouseDownRef = _useCurrentState2[2];
+  var clickHandler = function clickHandler(event) {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+  var mouseUpHandler = function mouseUpHandler() {
+    if (!IsContentMouseDownRef.current) return;
+    var timer = setTimeout(function () {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "backdrop-wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler,
+    onMouseUp: mouseUpHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentClick,
+    onMouseDown: function onMouseDown() {
+      return setIsContentMouseDown(true);
+    },
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2021762493",
+    dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
+  }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
+});
+Backdrop.displayName = 'Backdrop';
 
+exports.Backdrop = Backdrop;
 exports.CssBaseline = MemoCssBaseline;
+exports.Dropdown = Dropdown;
+exports.Ellipsis = ellipsis;
+exports.Expand = Expand;
+exports.Highlight = Highlight;
 exports.Themes = Themes;
 exports.UiProvider = HuiProvider;
-exports.default = useTheme;
 exports.useAllThemes = useAllThemes;
+exports.useClasses = useClasses;
+exports.useCurrentState = useCurrentState;
+exports.useMediaQuery = useMediaQuery;
 exports.useRect = useRect;
 exports.useTheme = useTheme;
+exports.useToasts = useToasts;

package/dist/shared/backdrop.d.ts

@@ -0,0 +1,14 @@
+import React, { MouseEvent } from 'react';
+interface Props {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    visible?: boolean;
+    width?: string;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+    backdropClassName?: string;
+    positionClassName?: string;
+    layerClassName?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BackdropProps = Props & NativeAttrs;
+declare const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>>;
+export default Backdrop;

package/dist/shared/dropdown.d.ts

@@ -0,0 +1,9 @@
+import React, { MutableRefObject } from 'react';
+interface Props {
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    visible: boolean;
+    disableMatchWidth?: boolean;
+    getPopupContainer?: () => HTMLElement | null;
+}
+declare const Dropdown: React.FC<React.PropsWithChildren<Props>>;
+export default Dropdown;

package/dist/shared/ellipsis.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EllipsisProps = {
+    height: string;
+};
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<EllipsisProps>>;
+export default _default;

package/dist/shared/expand.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ExpandProps = {
+    isExpanded?: boolean;
+    delay?: number;
+};
+declare const Expand: React.FC<React.PropsWithChildren<ExpandProps>>;
+export default Expand;

package/dist/shared/highlight.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactiveDomReact } from '../utils/layouts';
+type Props = {
+    rect: ReactiveDomReact;
+    visible?: boolean;
+    hoverHeightRatio?: number;
+    hoverWidthRatio?: number;
+    activeOpacity?: number;
+};
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type HighlightProps = Props & NativeAttrs;
+declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

package/dist/use-media-query/index.d.ts

@@ -0,0 +1,3 @@
+import useMediaQuery from './use-media-query';
+export type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query';
+export default useMediaQuery;

package/dist/use-media-query/use-media-query.d.ts

@@ -0,0 +1,12 @@
+declare const breakpoints: ["xs", "sm", "md", "lg", "xl", "mobile"];
+export type ResponsiveBreakpoint = typeof breakpoints[number];
+declare const matchType: ["up", "down", "default"];
+export type ResponsiveMatchType = typeof matchType[number];
+export type ResponsiveOptions = {
+    match?: ResponsiveMatchType;
+    ssrMatchMedia?: (query: string) => {
+        matches: boolean;
+    };
+};
+declare const useMediaQuery: (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) => boolean;
+export default useMediaQuery;

package/dist/use-toasts/index.d.ts

@@ -0,0 +1,3 @@
+import useToasts from './use-toast';
+export type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from './use-toast';
+export default useToasts;

package/dist/utils/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+declare const useClickAnyWhere: (handler: (event: Event) => void) => void;
+export default useClickAnyWhere;

package/dist/utils/use-dom-observer.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useDOMObserver: (ref: MutableRefObject<HTMLElement | null> | undefined, callback?: MutationCallback) => void;
+export default useDOMObserver;

package/dist/utils/use-previous.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(state: T) => T | undefined | null;
+export default usePrevious;

package/dist/utils/use-real-shape.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+export type ShapeType = {
+    width: number;
+    height: number;
+};
+export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
+export type ShapeResult = [ShapeType, () => void];
+declare const useRealShape: <T extends HTMLElement>(ref: MutableRefObject<T | null>) => ShapeResult;
+export default useRealShape;

package/dist/utils/use-resize.d.ts

@@ -0,0 +1,2 @@
+declare const useResize: (callback: () => unknown, immediatelyInvoke?: boolean) => void;
+export default useResize;

package/dist/utils/use-warning.d.ts

@@ -0,0 +1,2 @@
+declare const useWarning: (message: string, component?: string) => void;
+export default useWarning;

package/esm/index.d.ts

@@ -1,4 +1,3 @@
-import useTheme from './use-theme';
 export { default as UiProvider } from './ui-provider';
 export type { UiProviderProps } from './ui-provider';
 export { default as Themes } from './themes';
@@ -6,7 +5,18 @@ export type { HUIThemes, HUserTheme } from './themes';
 export { default as useAllThemes } from './use-all-themes';
 export type { AllThemesConfig } from './use-all-themes';
 export { default as CssBaseline } from './css-baseline';
-export { default as useTheme } from './use-theme';
 export { useRect } from './utils/layouts';
 export type { ReactiveDomReact } from './utils/layouts';
-export default useTheme;
+export { default as useCurrentState } from './use-current-state';
+export { default as useTheme } from './use-theme';
+export { default as useClasses } from './use-classes';
+export { default as useToasts } from './use-toasts';
+export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
+export { default as useMediaQuery } from './use-media-query';
+export type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query';
+export { default as Highlight } from './shared/highlight';
+export type { HighlightProps } from './shared/highlight';
+export { default as Ellipsis } from './shared/ellipsis';
+export { default as Expand } from './shared/expand';
+export { default as Dropdown } from './shared/dropdown';
+export { default as Backdrop } from './shared/backdrop';

package/esm/index.js

@@ -1,11 +1,18 @@
 // @ts-ignore
 /// <reference types="styled-jsx" />
 
-import useTheme from './use-theme';
 export { default as UiProvider } from './ui-provider';
 export { default as Themes } from './themes';
 export { default as useAllThemes } from './use-all-themes';
 export { default as CssBaseline } from './css-baseline';
-export { default as useTheme } from './use-theme';
 export { useRect } from './utils/layouts';
-export default useTheme;
+export { default as useCurrentState } from './use-current-state';
+export { default as useTheme } from './use-theme';
+export { default as useClasses } from './use-classes';
+export { default as useToasts } from './use-toasts';
+export { default as useMediaQuery } from './use-media-query';
+export { default as Highlight } from './shared/highlight';
+export { default as Ellipsis } from './shared/ellipsis';
+export { default as Expand } from './shared/expand';
+export { default as Dropdown } from './shared/dropdown';
+export { default as Backdrop } from './shared/backdrop';

package/esm/shared/backdrop.d.ts

@@ -0,0 +1,14 @@
+import React, { MouseEvent } from 'react';
+interface Props {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    visible?: boolean;
+    width?: string;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+    backdropClassName?: string;
+    positionClassName?: string;
+    layerClassName?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BackdropProps = Props & NativeAttrs;
+declare const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>>;
+export default Backdrop;

package/esm/shared/dropdown.d.ts

@@ -0,0 +1,9 @@
+import React, { MutableRefObject } from 'react';
+interface Props {
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    visible: boolean;
+    disableMatchWidth?: boolean;
+    getPopupContainer?: () => HTMLElement | null;
+}
+declare const Dropdown: React.FC<React.PropsWithChildren<Props>>;
+export default Dropdown;

package/esm/shared/ellipsis.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EllipsisProps = {
+    height: string;
+};
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<EllipsisProps>>;
+export default _default;

package/esm/shared/expand.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ExpandProps = {
+    isExpanded?: boolean;
+    delay?: number;
+};
+declare const Expand: React.FC<React.PropsWithChildren<ExpandProps>>;
+export default Expand;

package/esm/shared/highlight.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactiveDomReact } from '../utils/layouts';
+type Props = {
+    rect: ReactiveDomReact;
+    visible?: boolean;
+    hoverHeightRatio?: number;
+    hoverWidthRatio?: number;
+    activeOpacity?: number;
+};
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type HighlightProps = Props & NativeAttrs;
+declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

package/esm/shared/highlight.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
-
 import React, { useMemo, useRef } from 'react';
 import { isUnplacedRect } from '../utils/layouts';
 import usePrevious from '../utils/use-previous';

package/esm/use-media-query/index.d.ts

@@ -0,0 +1,3 @@
+import useMediaQuery from './use-media-query';
+export type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query';
+export default useMediaQuery;

package/esm/use-media-query/use-media-query.d.ts

@@ -0,0 +1,12 @@
+declare const breakpoints: ["xs", "sm", "md", "lg", "xl", "mobile"];
+export type ResponsiveBreakpoint = typeof breakpoints[number];
+declare const matchType: ["up", "down", "default"];
+export type ResponsiveMatchType = typeof matchType[number];
+export type ResponsiveOptions = {
+    match?: ResponsiveMatchType;
+    ssrMatchMedia?: (query: string) => {
+        matches: boolean;
+    };
+};
+declare const useMediaQuery: (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) => boolean;
+export default useMediaQuery;

package/esm/use-toasts/index.d.ts

@@ -0,0 +1,3 @@
+import useToasts from './use-toast';
+export type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from './use-toast';
+export default useToasts;

package/esm/utils/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+declare const useClickAnyWhere: (handler: (event: Event) => void) => void;
+export default useClickAnyWhere;

package/esm/utils/use-dom-observer.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useDOMObserver: (ref: MutableRefObject<HTMLElement | null> | undefined, callback?: MutationCallback) => void;
+export default useDOMObserver;

package/esm/utils/use-previous.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(state: T) => T | undefined | null;
+export default usePrevious;

package/esm/utils/use-real-shape.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+export type ShapeType = {
+    width: number;
+    height: number;
+};
+export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
+export type ShapeResult = [ShapeType, () => void];
+declare const useRealShape: <T extends HTMLElement>(ref: MutableRefObject<T | null>) => ShapeResult;
+export default useRealShape;

package/esm/utils/use-resize.d.ts

@@ -0,0 +1,2 @@
+declare const useResize: (callback: () => unknown, immediatelyInvoke?: boolean) => void;
+export default useResize;

package/esm/utils/use-warning.d.ts

@@ -0,0 +1,2 @@
+declare const useWarning: (message: string, component?: string) => void;
+export default useWarning;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/theme",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",