@taiv/ui 1.1.0 → 1.2.0

package/dist/components/Data/CheckboxTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMediaQuery } from '@mantine/hooks';
+import { useMobile } from '../../hooks/useMediaQuery';
 import { Checkbox } from '../Inputs/Controls/Checkbox';
 import { Group } from '../Layout/Group';
 import { Box } from '../Layout/Box';
@@ -9,7 +9,7 @@ import { Title } from '../Typography/Title';
 import { neutral } from '../../constants/colors';
 import { fontStyle } from '../../constants/font';
 const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, subtitle, showColumnTitles = false, outlines = false, }) => {
-    const isMobile = useMediaQuery('(max-width: 768px)');
+    const isMobile = useMobile();
     const style = {
         container: {
             borderRadius: '8px',

package/dist/components/Info/Notifications/NotificationProvider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Notifications } from '@mantine/notifications';
 import { createStyles } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
 import { neutral } from '../../../constants/colors';
+import { useMobile } from '../../../hooks/useMediaQuery';
 export const NotificationProvider = () => {
-    const isMobile = useMediaQuery('(max-width: 768px)');
+    const isMobile = useMobile();
     const { classes } = createStyles(() => ({
         root: {
             '& .mantine-Notification-root': {

package/dist/constants/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const BREAKPOINTS: {
+    readonly MOBILE: 640;
+    readonly TABLET: 768;
+    readonly LAPTOP: 1024;
+    readonly DESKTOP: 1280;
+    readonly WIDE: 1536;
+};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/constants/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/constants/breakpoints.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/constants/breakpoints.js

@@ -0,0 +1,8 @@
+// Breakpoints in px - from Tailwind CSS
+export const BREAKPOINTS = {
+    MOBILE: 640,
+    TABLET: 768,
+    LAPTOP: 1024,
+    DESKTOP: 1280,
+    WIDE: 1536,
+};

package/dist/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './font';
+export * from './breakpoints';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/constants/index.js

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './font';
+export * from './breakpoints';

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

package/dist/hooks/useMediaQuery.d.ts

@@ -1,3 +1,10 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+import { BREAKPOINTS } from '../constants/breakpoints';
 export declare const useMediaQuery: typeof useMantineMediaQuery;
+export declare const useScreenSize: () => keyof typeof BREAKPOINTS;
+export declare const useMobile: () => boolean;
+export declare const useTablet: () => boolean;
+export declare const useLaptop: () => boolean;
+export declare const useDesktop: () => boolean;
+export declare const useWide: () => boolean;
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEvE,eAAO,MAAM,aAAa,6BAAuB,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC"}

package/dist/hooks/useMediaQuery.js

@@ -1,2 +1,23 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+import { BREAKPOINTS } from '../constants/breakpoints';
 export const useMediaQuery = useMantineMediaQuery;
+export const useScreenSize = () => {
+    const isMobile = useMobile();
+    const isTablet = useTablet();
+    const isLaptop = useLaptop();
+    const isDesktop = useDesktop();
+    if (isMobile)
+        return 'MOBILE';
+    if (isTablet)
+        return 'TABLET';
+    if (isLaptop)
+        return 'LAPTOP';
+    if (isDesktop)
+        return 'DESKTOP';
+    return 'WIDE';
+};
+export const useMobile = () => useMediaQuery(`(max-width: ${BREAKPOINTS.MOBILE}px)`);
+export const useTablet = () => useMediaQuery(`(max-width: ${BREAKPOINTS.TABLET}px)`);
+export const useLaptop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.LAPTOP}px)`);
+export const useDesktop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.DESKTOP}px)`);
+export const useWide = () => useMediaQuery(`(max-width: ${BREAKPOINTS.WIDE}px)`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",