@fragment-build/ui 1.13.2 → 1.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Breakpoints from Tailwind V2
|
|
3
|
+
*
|
|
4
|
+
* @see https://tailwindcss.com/docs/breakpoints
|
|
5
|
+
*/
|
|
6
|
+
export declare const breakpointsTailwind: {
|
|
7
|
+
sm: number;
|
|
8
|
+
md: number;
|
|
9
|
+
lg: number;
|
|
10
|
+
xl: number;
|
|
11
|
+
'2xl': number;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Reactive media query hook that returns the truthy value of the media query.
|
|
15
|
+
*
|
|
16
|
+
* @param {string} query
|
|
17
|
+
* @returns {boolean} boolean value of the query
|
|
18
|
+
*
|
|
19
|
+
* @see https://react-hooks-library.vercel.app/core/useMediaQuery
|
|
20
|
+
*/
|
|
21
|
+
export declare function useMediaQuery(query: string): boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Reactive hooks and utilities to be used with user provided breakpoints.
|
|
24
|
+
*
|
|
25
|
+
* @param {string} breakpoints
|
|
26
|
+
* @returns functions to be used as hooks
|
|
27
|
+
*
|
|
28
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
29
|
+
*/
|
|
30
|
+
export declare function BreakPointHooks<BreakPoints extends Record<string, number>>(breakpoints: BreakPoints): {
|
|
31
|
+
/**
|
|
32
|
+
* Hook that returns a boolean if screen width is greater than given breakpoint.
|
|
33
|
+
*
|
|
34
|
+
* @param k {string} breakpoint
|
|
35
|
+
* @returns boolean
|
|
36
|
+
*
|
|
37
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
38
|
+
**/
|
|
39
|
+
useGreater: (k: keyof BreakPoints) => boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Hook that returns a boolean if screen width is smaller than given breakpoint.
|
|
42
|
+
*
|
|
43
|
+
* @param k {string} breakpoint
|
|
44
|
+
* @param k {string} breakpoint
|
|
45
|
+
*
|
|
46
|
+
* @returns boolean
|
|
47
|
+
*
|
|
48
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
49
|
+
**/
|
|
50
|
+
useSmaller: (k: keyof BreakPoints) => boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Hook that returns a boolean if screen width is between two given breakpoint.
|
|
53
|
+
*
|
|
54
|
+
* @param a {string} breakpoint
|
|
55
|
+
* @param b {string} breakpoint
|
|
56
|
+
*
|
|
57
|
+
* @returns boolean
|
|
58
|
+
*
|
|
59
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
60
|
+
**/
|
|
61
|
+
useBetween: (a: keyof BreakPoints, b: keyof BreakPoints) => boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Utility function that returns a boolean if screen width is greater than given breakpoint.
|
|
64
|
+
*
|
|
65
|
+
* @param k {string} breakpoint
|
|
66
|
+
*
|
|
67
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
68
|
+
**/
|
|
69
|
+
isGreater(k: keyof BreakPoints): boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Utility function that returns a boolean if screen width is smaller than given breakpoint.
|
|
72
|
+
*
|
|
73
|
+
* @param k {string} breakpoint
|
|
74
|
+
*
|
|
75
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
76
|
+
**/
|
|
77
|
+
isSmaller(k: keyof BreakPoints): boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Utility function that returns a boolean if screen width is between two given breakpoint.
|
|
80
|
+
*
|
|
81
|
+
* @param k {string} breakpoint
|
|
82
|
+
*
|
|
83
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
84
|
+
**/
|
|
85
|
+
isInBetween(a: keyof BreakPoints, b: keyof BreakPoints): boolean;
|
|
86
|
+
};
|
|
1
87
|
export declare const useGreater: (k: "sm" | "md" | "lg" | "xl" | "2xl") => boolean, useBetween: (a: "sm" | "md" | "lg" | "xl" | "2xl", b: "sm" | "md" | "lg" | "xl" | "2xl") => boolean, useSmaller: (k: "sm" | "md" | "lg" | "xl" | "2xl") => boolean;
|
|
@@ -1,3 +1,123 @@
|
|
|
1
|
-
|
|
1
|
+
// this file is based on @react-hooks-library/core with some fixes
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Breakpoints from Tailwind V2
|
|
5
|
+
*
|
|
6
|
+
* @see https://tailwindcss.com/docs/breakpoints
|
|
7
|
+
*/
|
|
8
|
+
export const breakpointsTailwind = {
|
|
9
|
+
sm: 640,
|
|
10
|
+
md: 768,
|
|
11
|
+
lg: 1024,
|
|
12
|
+
xl: 1280,
|
|
13
|
+
'2xl': 1536
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Reactive media query hook that returns the truthy value of the media query.
|
|
17
|
+
*
|
|
18
|
+
* @param {string} query
|
|
19
|
+
* @returns {boolean} boolean value of the query
|
|
20
|
+
*
|
|
21
|
+
* @see https://react-hooks-library.vercel.app/core/useMediaQuery
|
|
22
|
+
*/
|
|
23
|
+
export function useMediaQuery(query) {
|
|
24
|
+
const [matches, setMatches] = useState(typeof window === 'undefined' ? false : window.matchMedia(query).matches);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setMatches(window.matchMedia(query).matches);
|
|
27
|
+
}, []);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const mediaQuery = window.matchMedia(query);
|
|
30
|
+
const handler = (event) => {
|
|
31
|
+
setMatches(event.matches);
|
|
32
|
+
};
|
|
33
|
+
mediaQuery.addEventListener('change', handler);
|
|
34
|
+
return () => mediaQuery.removeEventListener('change', handler);
|
|
35
|
+
}, [query]);
|
|
36
|
+
return matches;
|
|
37
|
+
}
|
|
38
|
+
function match(query) {
|
|
39
|
+
if (typeof window === 'undefined')
|
|
40
|
+
return false;
|
|
41
|
+
return window.matchMedia(query).matches;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Reactive hooks and utilities to be used with user provided breakpoints.
|
|
45
|
+
*
|
|
46
|
+
* @param {string} breakpoints
|
|
47
|
+
* @returns functions to be used as hooks
|
|
48
|
+
*
|
|
49
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
50
|
+
*/
|
|
51
|
+
export function BreakPointHooks(breakpoints) {
|
|
52
|
+
return {
|
|
53
|
+
/**
|
|
54
|
+
* Hook that returns a boolean if screen width is greater than given breakpoint.
|
|
55
|
+
*
|
|
56
|
+
* @param k {string} breakpoint
|
|
57
|
+
* @returns boolean
|
|
58
|
+
*
|
|
59
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
60
|
+
**/
|
|
61
|
+
useGreater: (k) => {
|
|
62
|
+
return useMediaQuery(`(min-width: ${breakpoints[k]}px)`);
|
|
63
|
+
},
|
|
64
|
+
/**
|
|
65
|
+
* Hook that returns a boolean if screen width is smaller than given breakpoint.
|
|
66
|
+
*
|
|
67
|
+
* @param k {string} breakpoint
|
|
68
|
+
* @param k {string} breakpoint
|
|
69
|
+
*
|
|
70
|
+
* @returns boolean
|
|
71
|
+
*
|
|
72
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
73
|
+
**/
|
|
74
|
+
useSmaller: (k) => {
|
|
75
|
+
return useMediaQuery(`(max-width: ${breakpoints[k]}px)`);
|
|
76
|
+
},
|
|
77
|
+
/**
|
|
78
|
+
* Hook that returns a boolean if screen width is between two given breakpoint.
|
|
79
|
+
*
|
|
80
|
+
* @param a {string} breakpoint
|
|
81
|
+
* @param b {string} breakpoint
|
|
82
|
+
*
|
|
83
|
+
* @returns boolean
|
|
84
|
+
*
|
|
85
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
86
|
+
**/
|
|
87
|
+
useBetween: (a, b) => {
|
|
88
|
+
return useMediaQuery(`(min-width: ${breakpoints[a]}px) and (max-width: ${breakpoints[b]}px)`);
|
|
89
|
+
},
|
|
90
|
+
/**
|
|
91
|
+
* Utility function that returns a boolean if screen width is greater than given breakpoint.
|
|
92
|
+
*
|
|
93
|
+
* @param k {string} breakpoint
|
|
94
|
+
*
|
|
95
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
96
|
+
**/
|
|
97
|
+
isGreater(k) {
|
|
98
|
+
return match(`(min-width: ${breakpoints[k]}px)`);
|
|
99
|
+
},
|
|
100
|
+
/**
|
|
101
|
+
* Utility function that returns a boolean if screen width is smaller than given breakpoint.
|
|
102
|
+
*
|
|
103
|
+
* @param k {string} breakpoint
|
|
104
|
+
*
|
|
105
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
106
|
+
**/
|
|
107
|
+
isSmaller(k) {
|
|
108
|
+
return match(`(max-width: ${breakpoints[k]}px)`);
|
|
109
|
+
},
|
|
110
|
+
/**
|
|
111
|
+
* Utility function that returns a boolean if screen width is between two given breakpoint.
|
|
112
|
+
*
|
|
113
|
+
* @param k {string} breakpoint
|
|
114
|
+
*
|
|
115
|
+
* @see https://react-hooks-library.vercel.app/core/BreakPointHooks
|
|
116
|
+
**/
|
|
117
|
+
isInBetween(a, b) {
|
|
118
|
+
return match(`(min-width: ${breakpoints[a]}px) and (max-width: ${breakpoints[b]}px)`);
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}
|
|
2
122
|
export const { useGreater, useBetween, useSmaller } = BreakPointHooks(breakpointsTailwind);
|
|
3
123
|
//# sourceMappingURL=breakpoints.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/hooks/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/hooks/breakpoints.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fragment-build/ui",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"repository": {
|
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@nextui-org/react": "2.4.8",
|
|
51
|
-
"@react-hooks-library/core": "0.6.2",
|
|
52
51
|
"@tabler/icons-react": "3.19.0",
|
|
53
52
|
"apexcharts": "3.54.1",
|
|
54
53
|
"framer-motion": "11.11.9",
|