@invoicebox/ui 0.1.0-alpha.89 → 0.1.0-alpha.90

package/dist/hooks/useMedia/index.d.ts

@@ -0,0 +1,4 @@
+export declare const useMobile: () => boolean;
+export declare const useTablet: () => boolean;
+export declare const useLargeTablet: () => boolean;
+export declare const useMiniLaptop: () => boolean;

package/dist/hooks/useMedia/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTablet = exports.useMobile = exports.useMiniLaptop = exports.useLargeTablet = void 0;
+var _reactResponsive = require("react-responsive");
+var _breakpoints = require("../../breakpoints");
+var useMobile = exports.useMobile = function useMobile() {
+  return (0, _reactResponsive.useMediaQuery)({
+    query: _breakpoints.breakpoints.sm
+  });
+};
+var useTablet = exports.useTablet = function useTablet() {
+  return (0, _reactResponsive.useMediaQuery)({
+    query: _breakpoints.breakpoints.md
+  });
+};
+var useLargeTablet = exports.useLargeTablet = function useLargeTablet() {
+  return (0, _reactResponsive.useMediaQuery)({
+    query: _breakpoints.breakpoints.ld
+  });
+};
+var useMiniLaptop = exports.useMiniLaptop = function useMiniLaptop() {
+  return (0, _reactResponsive.useMediaQuery)({
+    query: _breakpoints.breakpoints.xl
+  });
+};

package/dist/hooks/useMedia/index.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/hooks/useMedia/index.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+var meta = {
+  title: 'hooks/useMedia',
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function render() {
+    var isMobile = (0, _.useMobile)();
+    var isTablet = (0, _.useTablet)();
+    var isLargeTablet = (0, _.useLargeTablet)();
+    var isMiniLaptop = (0, _.useMiniLaptop)();
+    return /*#__PURE__*/_react["default"].createElement("div", null, isMobile && /*#__PURE__*/_react["default"].createElement("div", null, "mobile"), isTablet && /*#__PURE__*/_react["default"].createElement("div", null, "tablet"), isLargeTablet && /*#__PURE__*/_react["default"].createElement("div", null, "large tablet"), isMiniLaptop && /*#__PURE__*/_react["default"].createElement("div", null, "mini laptop"));
+  }
+};

package/dist/index.d.ts

@@ -38,3 +38,4 @@ export { useOutsideClick } from './hooks/useOutsideClick';
 export { useInputFocus } from './hooks/useInputFocus';
 export { useUnupdatableHandler } from './hooks/useUnupdatableHandler';
 export { breakpoints } from './breakpoints';
+export { useMobile, useTablet, useLargeTablet, useMiniLaptop } from './hooks/useMedia';

package/dist/index.js

@@ -171,12 +171,36 @@ Object.defineProperty(exports, "useInputFocus", {
     return _useInputFocus.useInputFocus;
   }
 });
+Object.defineProperty(exports, "useLargeTablet", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useLargeTablet;
+  }
+});
+Object.defineProperty(exports, "useMiniLaptop", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useMiniLaptop;
+  }
+});
+Object.defineProperty(exports, "useMobile", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useMobile;
+  }
+});
 Object.defineProperty(exports, "useOutsideClick", {
   enumerable: true,
   get: function get() {
     return _useOutsideClick.useOutsideClick;
   }
 });
+Object.defineProperty(exports, "useTablet", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useTablet;
+  }
+});
 Object.defineProperty(exports, "useUnupdatableHandler", {
   enumerable: true,
   get: function get() {
@@ -210,4 +234,5 @@ var _palette = require("./palette");
 var _useOutsideClick = require("./hooks/useOutsideClick");
 var _useInputFocus = require("./hooks/useInputFocus");
 var _useUnupdatableHandler = require("./hooks/useUnupdatableHandler");
-var _breakpoints = require("./breakpoints");
+var _breakpoints = require("./breakpoints");
+var _useMedia = require("./hooks/useMedia");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.89",
+    "version": "0.1.0-alpha.90",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -53,6 +53,7 @@
         "hex-to-rgba": "^2.0.1",
         "lottie-react": "^2.4.0",
         "react-calendar": "^4.8.0",
+        "react-responsive": "^9.0.2",
         "react-scrollbars-custom": "^4.1.1",
         "react-toastify": "^9.1.3"
     },