@tanstack/react-query-devtools 4.24.9 → 5.0.0-alpha.0
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.
- package/build/lib/Explorer.d.ts +4 -4
- package/build/lib/Explorer.esm.js +5 -15
- package/build/lib/Explorer.esm.js.map +1 -1
- package/build/lib/Explorer.js +11 -25
- package/build/lib/Explorer.js.map +1 -1
- package/build/lib/Explorer.mjs +5 -15
- package/build/lib/Explorer.mjs.map +1 -1
- package/build/lib/Logo.d.ts +0 -1
- package/build/lib/Logo.esm.js.map +1 -1
- package/build/lib/Logo.js +5 -6
- package/build/lib/Logo.js.map +1 -1
- package/build/lib/Logo.mjs.map +1 -1
- package/build/lib/__tests__/devtools.test.d.ts +0 -5
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -2
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +1 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +1 -5
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -2
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +1 -1
- package/build/lib/devtools.d.ts +12 -4
- package/build/lib/devtools.esm.js +73 -108
- package/build/lib/devtools.esm.js.map +1 -1
- package/build/lib/devtools.js +95 -133
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/devtools.mjs +73 -108
- package/build/lib/devtools.mjs.map +1 -1
- package/build/lib/index.d.ts +2 -2
- package/build/lib/index.esm.js.map +1 -1
- package/build/lib/index.js +0 -2
- package/build/lib/index.js.map +1 -1
- package/build/lib/index.mjs.map +1 -1
- package/build/lib/index.prod.d.ts +2 -2
- package/build/lib/index.prod.esm.js +121 -176
- package/build/lib/index.prod.esm.js.map +1 -1
- package/build/lib/index.prod.js +126 -187
- package/build/lib/index.prod.js.map +1 -1
- package/build/lib/index.prod.mjs +121 -176
- package/build/lib/index.prod.mjs.map +1 -1
- package/build/lib/screenreader.d.ts +0 -1
- package/build/lib/screenreader.esm.js.map +1 -1
- package/build/lib/screenreader.js +4 -5
- package/build/lib/screenreader.js.map +1 -1
- package/build/lib/screenreader.mjs.map +1 -1
- package/build/lib/styledComponents.esm.js +17 -16
- package/build/lib/styledComponents.esm.js.map +1 -1
- package/build/lib/styledComponents.js +17 -18
- package/build/lib/styledComponents.js.map +1 -1
- package/build/lib/styledComponents.mjs +17 -16
- package/build/lib/styledComponents.mjs.map +1 -1
- package/build/lib/theme.esm.js.map +1 -1
- package/build/lib/theme.js +4 -7
- package/build/lib/theme.js.map +1 -1
- package/build/lib/theme.mjs.map +1 -1
- package/build/lib/useLocalStorage.esm.js +0 -7
- package/build/lib/useLocalStorage.esm.js.map +1 -1
- package/build/lib/useLocalStorage.js +4 -12
- package/build/lib/useLocalStorage.js.map +1 -1
- package/build/lib/useLocalStorage.mjs +0 -7
- package/build/lib/useLocalStorage.mjs.map +1 -1
- package/build/lib/useMediaQuery.esm.js +6 -6
- package/build/lib/useMediaQuery.esm.js.map +1 -1
- package/build/lib/useMediaQuery.js +10 -11
- package/build/lib/useMediaQuery.js.map +1 -1
- package/build/lib/useMediaQuery.mjs +6 -6
- package/build/lib/useMediaQuery.mjs.map +1 -1
- package/build/lib/utils.esm.js +20 -22
- package/build/lib/utils.esm.js.map +1 -1
- package/build/lib/utils.js +24 -32
- package/build/lib/utils.js.map +1 -1
- package/build/lib/utils.mjs +20 -22
- package/build/lib/utils.mjs.map +1 -1
- package/build/umd/index.development.js +124 -439
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +6 -10
- package/src/Explorer.tsx +4 -4
- package/src/__tests__/Explorer.test.tsx +5 -0
- package/src/__tests__/devtools.test.tsx +121 -175
- package/src/__tests__/utils.tsx +2 -2
- package/src/devtools.tsx +110 -116
- package/src/index.ts +2 -2
- package/build/lib/useSyncExternalStore.d.ts +0 -1
- package/build/lib/useSyncExternalStore.native.d.ts +0 -1
- package/src/useSyncExternalStore.native.ts +0 -3
- package/src/useSyncExternalStore.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screenreader.esm.js","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","position","width","height","overflow"],"mappings":";;AAEe,SAASA,
|
|
1
|
+
{"version":3,"file":"screenreader.esm.js","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","position","width","height","overflow"],"mappings":";;AAEe,SAASA,YAAY,CAAC;AAAEC,EAAAA,IAAAA;AAAuB,CAAC,EAAE;EAC/D,oBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,MAAM,EAAE,OAAO;AACfC,MAAAA,QAAQ,EAAE,QAAA;AACZ,KAAA;AAAE,GAAA,EAEDJ,IAAI,CACA,CAAA;AAEX;;;;"}
|
|
@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
|
|
7
|
-
function
|
|
8
|
-
if (e && e.__esModule) return e;
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
9
8
|
var n = Object.create(null);
|
|
10
9
|
if (e) {
|
|
11
10
|
Object.keys(e).forEach(function (k) {
|
|
@@ -18,11 +17,11 @@ function _interopNamespace(e) {
|
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
19
|
}
|
|
21
|
-
n
|
|
20
|
+
n.default = e;
|
|
22
21
|
return Object.freeze(n);
|
|
23
22
|
}
|
|
24
23
|
|
|
25
|
-
var React__namespace = /*#__PURE__*/
|
|
24
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
26
25
|
|
|
27
26
|
function ScreenReader({
|
|
28
27
|
text
|
|
@@ -37,5 +36,5 @@ function ScreenReader({
|
|
|
37
36
|
}, text);
|
|
38
37
|
}
|
|
39
38
|
|
|
40
|
-
exports
|
|
39
|
+
exports.default = ScreenReader;
|
|
41
40
|
//# sourceMappingURL=screenreader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screenreader.js","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","React","position","width","height","overflow"],"mappings":"
|
|
1
|
+
{"version":3,"file":"screenreader.js","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","React","position","width","height","overflow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEe,SAASA,YAAY,CAAC;AAAEC,EAAAA,IAAAA;AAAuB,CAAC,EAAE;EAC/D,oBACEC,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,MAAM,EAAE,OAAO;AACfC,MAAAA,QAAQ,EAAE,QAAA;AACZ,KAAA;AAAE,GAAA,EAEDL,IAAI,CACA,CAAA;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screenreader.mjs","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","position","width","height","overflow"],"mappings":";;AAEe,SAASA,
|
|
1
|
+
{"version":3,"file":"screenreader.mjs","sources":["../../src/screenreader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport default function ScreenReader({ text }: { text: string }) {\n return (\n <span\n style={{\n position: 'absolute',\n width: '0.1px',\n height: '0.1px',\n overflow: 'hidden',\n }}\n >\n {text}\n </span>\n )\n}\n"],"names":["ScreenReader","text","position","width","height","overflow"],"mappings":";;AAEe,SAASA,YAAY,CAAC;AAAEC,EAAAA,IAAAA;AAAuB,CAAC,EAAE;EAC/D,oBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,MAAM,EAAE,OAAO;AACfC,MAAAA,QAAQ,EAAE,QAAA;AACZ,KAAA;AAAE,GAAA,EAEDJ,IAAI,CACA,CAAA;AAEX;;;;"}
|
|
@@ -2,7 +2,7 @@ import { styled } from './utils.esm.js';
|
|
|
2
2
|
|
|
3
3
|
const Panel = styled('div', (_props, theme) => ({
|
|
4
4
|
fontSize: 'clamp(12px, 1.5vw, 14px)',
|
|
5
|
-
fontFamily:
|
|
5
|
+
fontFamily: `sans-serif`,
|
|
6
6
|
display: 'flex',
|
|
7
7
|
backgroundColor: theme.background,
|
|
8
8
|
color: theme.foreground
|
|
@@ -11,10 +11,11 @@ const Panel = styled('div', (_props, theme) => ({
|
|
|
11
11
|
flexDirection: 'column'
|
|
12
12
|
},
|
|
13
13
|
'(max-width: 600px)': {
|
|
14
|
-
fontSize: '.9em'
|
|
15
|
-
|
|
14
|
+
fontSize: '.9em'
|
|
15
|
+
// flexDirection: 'column',
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
|
|
18
19
|
const ActiveQueryPanel = styled('div', () => ({
|
|
19
20
|
flex: '1 1 500px',
|
|
20
21
|
display: 'flex',
|
|
@@ -23,7 +24,7 @@ const ActiveQueryPanel = styled('div', () => ({
|
|
|
23
24
|
height: '100%'
|
|
24
25
|
}), {
|
|
25
26
|
'(max-width: 700px)': (_props, theme) => ({
|
|
26
|
-
borderTop:
|
|
27
|
+
borderTop: `2px solid ${theme.gray}`
|
|
27
28
|
})
|
|
28
29
|
});
|
|
29
30
|
const Button = styled('button', (props, theme) => ({
|
|
@@ -61,26 +62,26 @@ const Input = styled('input', (_props, theme) => ({
|
|
|
61
62
|
borderRadius: '.2em',
|
|
62
63
|
color: theme.inputTextColor,
|
|
63
64
|
fontSize: '.9em',
|
|
64
|
-
lineHeight:
|
|
65
|
+
lineHeight: `1.3`,
|
|
65
66
|
padding: '.3em .4em'
|
|
66
67
|
}));
|
|
67
68
|
const Select = styled('select', (_props, theme) => ({
|
|
68
|
-
display:
|
|
69
|
-
fontSize:
|
|
70
|
-
fontFamily:
|
|
69
|
+
display: `inline-block`,
|
|
70
|
+
fontSize: `.9em`,
|
|
71
|
+
fontFamily: `sans-serif`,
|
|
71
72
|
fontWeight: 'normal',
|
|
72
|
-
lineHeight:
|
|
73
|
-
padding:
|
|
73
|
+
lineHeight: `1.3`,
|
|
74
|
+
padding: `.3em 1.5em .3em .5em`,
|
|
74
75
|
height: 'auto',
|
|
75
76
|
border: 0,
|
|
76
|
-
borderRadius:
|
|
77
|
-
appearance:
|
|
77
|
+
borderRadius: `.2em`,
|
|
78
|
+
appearance: `none`,
|
|
78
79
|
WebkitAppearance: 'none',
|
|
79
80
|
backgroundColor: theme.inputBackgroundColor,
|
|
80
|
-
backgroundImage:
|
|
81
|
-
backgroundRepeat:
|
|
82
|
-
backgroundPosition:
|
|
83
|
-
backgroundSize:
|
|
81
|
+
backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
|
|
82
|
+
backgroundRepeat: `no-repeat`,
|
|
83
|
+
backgroundPosition: `right .55em center`,
|
|
84
|
+
backgroundSize: `.65em auto, 100%`,
|
|
84
85
|
color: theme.inputTextColor
|
|
85
86
|
}), {
|
|
86
87
|
'(max-width: 500px)': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":";;AAEO,MAAMA,KAAK,GAAGC,MAAM,CACzB,
|
|
1
|
+
{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var utils = require('./utils.js');
|
|
6
4
|
|
|
7
5
|
const Panel = utils.styled('div', (_props, theme) => ({
|
|
8
6
|
fontSize: 'clamp(12px, 1.5vw, 14px)',
|
|
9
|
-
fontFamily:
|
|
7
|
+
fontFamily: `sans-serif`,
|
|
10
8
|
display: 'flex',
|
|
11
9
|
backgroundColor: theme.background,
|
|
12
10
|
color: theme.foreground
|
|
@@ -15,10 +13,11 @@ const Panel = utils.styled('div', (_props, theme) => ({
|
|
|
15
13
|
flexDirection: 'column'
|
|
16
14
|
},
|
|
17
15
|
'(max-width: 600px)': {
|
|
18
|
-
fontSize: '.9em'
|
|
19
|
-
|
|
16
|
+
fontSize: '.9em'
|
|
17
|
+
// flexDirection: 'column',
|
|
20
18
|
}
|
|
21
19
|
});
|
|
20
|
+
|
|
22
21
|
const ActiveQueryPanel = utils.styled('div', () => ({
|
|
23
22
|
flex: '1 1 500px',
|
|
24
23
|
display: 'flex',
|
|
@@ -27,7 +26,7 @@ const ActiveQueryPanel = utils.styled('div', () => ({
|
|
|
27
26
|
height: '100%'
|
|
28
27
|
}), {
|
|
29
28
|
'(max-width: 700px)': (_props, theme) => ({
|
|
30
|
-
borderTop:
|
|
29
|
+
borderTop: `2px solid ${theme.gray}`
|
|
31
30
|
})
|
|
32
31
|
});
|
|
33
32
|
const Button = utils.styled('button', (props, theme) => ({
|
|
@@ -65,26 +64,26 @@ const Input = utils.styled('input', (_props, theme) => ({
|
|
|
65
64
|
borderRadius: '.2em',
|
|
66
65
|
color: theme.inputTextColor,
|
|
67
66
|
fontSize: '.9em',
|
|
68
|
-
lineHeight:
|
|
67
|
+
lineHeight: `1.3`,
|
|
69
68
|
padding: '.3em .4em'
|
|
70
69
|
}));
|
|
71
70
|
const Select = utils.styled('select', (_props, theme) => ({
|
|
72
|
-
display:
|
|
73
|
-
fontSize:
|
|
74
|
-
fontFamily:
|
|
71
|
+
display: `inline-block`,
|
|
72
|
+
fontSize: `.9em`,
|
|
73
|
+
fontFamily: `sans-serif`,
|
|
75
74
|
fontWeight: 'normal',
|
|
76
|
-
lineHeight:
|
|
77
|
-
padding:
|
|
75
|
+
lineHeight: `1.3`,
|
|
76
|
+
padding: `.3em 1.5em .3em .5em`,
|
|
78
77
|
height: 'auto',
|
|
79
78
|
border: 0,
|
|
80
|
-
borderRadius:
|
|
81
|
-
appearance:
|
|
79
|
+
borderRadius: `.2em`,
|
|
80
|
+
appearance: `none`,
|
|
82
81
|
WebkitAppearance: 'none',
|
|
83
82
|
backgroundColor: theme.inputBackgroundColor,
|
|
84
|
-
backgroundImage:
|
|
85
|
-
backgroundRepeat:
|
|
86
|
-
backgroundPosition:
|
|
87
|
-
backgroundSize:
|
|
83
|
+
backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
|
|
84
|
+
backgroundRepeat: `no-repeat`,
|
|
85
|
+
backgroundPosition: `right .55em center`,
|
|
86
|
+
backgroundSize: `.65em auto, 100%`,
|
|
88
87
|
color: theme.inputTextColor
|
|
89
88
|
}), {
|
|
90
89
|
'(max-width: 500px)': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"
|
|
1
|
+
{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { styled } from './utils.mjs';
|
|
|
2
2
|
|
|
3
3
|
const Panel = styled('div', (_props, theme) => ({
|
|
4
4
|
fontSize: 'clamp(12px, 1.5vw, 14px)',
|
|
5
|
-
fontFamily:
|
|
5
|
+
fontFamily: `sans-serif`,
|
|
6
6
|
display: 'flex',
|
|
7
7
|
backgroundColor: theme.background,
|
|
8
8
|
color: theme.foreground
|
|
@@ -11,10 +11,11 @@ const Panel = styled('div', (_props, theme) => ({
|
|
|
11
11
|
flexDirection: 'column'
|
|
12
12
|
},
|
|
13
13
|
'(max-width: 600px)': {
|
|
14
|
-
fontSize: '.9em'
|
|
15
|
-
|
|
14
|
+
fontSize: '.9em'
|
|
15
|
+
// flexDirection: 'column',
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
|
|
18
19
|
const ActiveQueryPanel = styled('div', () => ({
|
|
19
20
|
flex: '1 1 500px',
|
|
20
21
|
display: 'flex',
|
|
@@ -23,7 +24,7 @@ const ActiveQueryPanel = styled('div', () => ({
|
|
|
23
24
|
height: '100%'
|
|
24
25
|
}), {
|
|
25
26
|
'(max-width: 700px)': (_props, theme) => ({
|
|
26
|
-
borderTop:
|
|
27
|
+
borderTop: `2px solid ${theme.gray}`
|
|
27
28
|
})
|
|
28
29
|
});
|
|
29
30
|
const Button = styled('button', (props, theme) => ({
|
|
@@ -61,26 +62,26 @@ const Input = styled('input', (_props, theme) => ({
|
|
|
61
62
|
borderRadius: '.2em',
|
|
62
63
|
color: theme.inputTextColor,
|
|
63
64
|
fontSize: '.9em',
|
|
64
|
-
lineHeight:
|
|
65
|
+
lineHeight: `1.3`,
|
|
65
66
|
padding: '.3em .4em'
|
|
66
67
|
}));
|
|
67
68
|
const Select = styled('select', (_props, theme) => ({
|
|
68
|
-
display:
|
|
69
|
-
fontSize:
|
|
70
|
-
fontFamily:
|
|
69
|
+
display: `inline-block`,
|
|
70
|
+
fontSize: `.9em`,
|
|
71
|
+
fontFamily: `sans-serif`,
|
|
71
72
|
fontWeight: 'normal',
|
|
72
|
-
lineHeight:
|
|
73
|
-
padding:
|
|
73
|
+
lineHeight: `1.3`,
|
|
74
|
+
padding: `.3em 1.5em .3em .5em`,
|
|
74
75
|
height: 'auto',
|
|
75
76
|
border: 0,
|
|
76
|
-
borderRadius:
|
|
77
|
-
appearance:
|
|
77
|
+
borderRadius: `.2em`,
|
|
78
|
+
appearance: `none`,
|
|
78
79
|
WebkitAppearance: 'none',
|
|
79
80
|
backgroundColor: theme.inputBackgroundColor,
|
|
80
|
-
backgroundImage:
|
|
81
|
-
backgroundRepeat:
|
|
82
|
-
backgroundPosition:
|
|
83
|
-
backgroundSize:
|
|
81
|
+
backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
|
|
82
|
+
backgroundRepeat: `no-repeat`,
|
|
83
|
+
backgroundPosition: `right .55em center`,
|
|
84
|
+
backgroundSize: `.65em auto, 100%`,
|
|
84
85
|
color: theme.inputTextColor
|
|
85
86
|
}), {
|
|
86
87
|
'(max-width: 500px)': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":";;AAEO,MAAMA,KAAK,GAAGC,MAAM,CACzB,
|
|
1
|
+
{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.esm.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"theme.esm.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA;AAAC,IAAA,KAAK,EAAED,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASC,QAAQ,GAAG;AACzB,EAAA,OAAOL,KAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACvC;;;;"}
|
package/build/lib/theme.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
|
|
8
|
-
function
|
|
9
|
-
if (e && e.__esModule) return e;
|
|
6
|
+
function _interopNamespaceDefault(e) {
|
|
10
7
|
var n = Object.create(null);
|
|
11
8
|
if (e) {
|
|
12
9
|
Object.keys(e).forEach(function (k) {
|
|
@@ -19,11 +16,11 @@ function _interopNamespace(e) {
|
|
|
19
16
|
}
|
|
20
17
|
});
|
|
21
18
|
}
|
|
22
|
-
n
|
|
19
|
+
n.default = e;
|
|
23
20
|
return Object.freeze(n);
|
|
24
21
|
}
|
|
25
22
|
|
|
26
|
-
var React__namespace = /*#__PURE__*/
|
|
23
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
27
24
|
|
|
28
25
|
const defaultTheme = {
|
|
29
26
|
background: '#0b1521',
|
|
@@ -44,7 +41,7 @@ function ThemeProvider({
|
|
|
44
41
|
theme,
|
|
45
42
|
...rest
|
|
46
43
|
}) {
|
|
47
|
-
return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers
|
|
44
|
+
return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers.extends({
|
|
48
45
|
value: theme
|
|
49
46
|
}, rest));
|
|
50
47
|
}
|
package/build/lib/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","_extends","useTheme","useContext"],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","_extends","useTheme","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,gBAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAOJ,gBAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAAK,iCAAA,CAAA;AAAC,IAAA,KAAK,EAAEF,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASE,QAAQ,GAAG;AACzB,EAAA,OAAON,gBAAK,CAACO,UAAU,CAACR,YAAY,CAAC,CAAA;AACvC;;;;;;"}
|
package/build/lib/theme.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.mjs","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"theme.mjs","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA;AAAC,IAAA,KAAK,EAAED,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASC,QAAQ,GAAG;AACzB,EAAA,OAAOL,KAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACvC;;;;"}
|
|
@@ -3,22 +3,18 @@ import * as React from 'react';
|
|
|
3
3
|
const getItem = key => {
|
|
4
4
|
try {
|
|
5
5
|
const itemValue = localStorage.getItem(key);
|
|
6
|
-
|
|
7
6
|
if (typeof itemValue === 'string') {
|
|
8
7
|
return JSON.parse(itemValue);
|
|
9
8
|
}
|
|
10
|
-
|
|
11
9
|
return undefined;
|
|
12
10
|
} catch {
|
|
13
11
|
return undefined;
|
|
14
12
|
}
|
|
15
13
|
};
|
|
16
|
-
|
|
17
14
|
function useLocalStorage(key, defaultValue) {
|
|
18
15
|
const [value, setValue] = React.useState();
|
|
19
16
|
React.useEffect(() => {
|
|
20
17
|
const initialValue = getItem(key);
|
|
21
|
-
|
|
22
18
|
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
23
19
|
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
24
20
|
} else {
|
|
@@ -28,15 +24,12 @@ function useLocalStorage(key, defaultValue) {
|
|
|
28
24
|
const setter = React.useCallback(updater => {
|
|
29
25
|
setValue(old => {
|
|
30
26
|
let newVal = updater;
|
|
31
|
-
|
|
32
27
|
if (typeof updater == 'function') {
|
|
33
28
|
newVal = updater(old);
|
|
34
29
|
}
|
|
35
|
-
|
|
36
30
|
try {
|
|
37
31
|
localStorage.setItem(key, JSON.stringify(newVal));
|
|
38
32
|
} catch {}
|
|
39
|
-
|
|
40
33
|
return newVal;
|
|
41
34
|
});
|
|
42
35
|
}, [key]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLocalStorage.esm.js","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import * as React from 'react'\n\nconst getItem = (key: string): unknown => {\n try {\n const itemValue = localStorage.getItem(key)\n if (typeof itemValue === 'string') {\n return JSON.parse(itemValue)\n }\n return undefined\n } catch {\n return undefined\n }\n}\n\nexport default function useLocalStorage<T>(\n key: string,\n defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n const [value, setValue] = React.useState<T>()\n\n React.useEffect(() => {\n const initialValue = getItem(key) as T | undefined\n\n if (typeof initialValue === 'undefined' || initialValue === null) {\n setValue(\n typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n )\n } else {\n setValue(initialValue)\n }\n }, [defaultValue, key])\n\n const setter = React.useCallback(\n (updater: any) => {\n setValue((old) => {\n let newVal = updater\n\n if (typeof updater == 'function') {\n newVal = updater(old)\n }\n try {\n localStorage.setItem(key, JSON.stringify(newVal))\n } catch {}\n\n return newVal\n })\n },\n [key],\n )\n\n return [value, setter]\n}\n"],"names":["getItem","key","itemValue","localStorage","JSON","parse","undefined","useLocalStorage","defaultValue","value","setValue","React","useState","useEffect","initialValue","setter","useCallback","updater","old","newVal","setItem","stringify"],"mappings":";;AAEA,MAAMA,OAAO,GAAIC,
|
|
1
|
+
{"version":3,"file":"useLocalStorage.esm.js","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import * as React from 'react'\n\nconst getItem = (key: string): unknown => {\n try {\n const itemValue = localStorage.getItem(key)\n if (typeof itemValue === 'string') {\n return JSON.parse(itemValue)\n }\n return undefined\n } catch {\n return undefined\n }\n}\n\nexport default function useLocalStorage<T>(\n key: string,\n defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n const [value, setValue] = React.useState<T>()\n\n React.useEffect(() => {\n const initialValue = getItem(key) as T | undefined\n\n if (typeof initialValue === 'undefined' || initialValue === null) {\n setValue(\n typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n )\n } else {\n setValue(initialValue)\n }\n }, [defaultValue, key])\n\n const setter = React.useCallback(\n (updater: any) => {\n setValue((old) => {\n let newVal = updater\n\n if (typeof updater == 'function') {\n newVal = updater(old)\n }\n try {\n localStorage.setItem(key, JSON.stringify(newVal))\n } catch {}\n\n return newVal\n })\n },\n [key],\n )\n\n return [value, setter]\n}\n"],"names":["getItem","key","itemValue","localStorage","JSON","parse","undefined","useLocalStorage","defaultValue","value","setValue","React","useState","useEffect","initialValue","setter","useCallback","updater","old","newVal","setItem","stringify"],"mappings":";;AAEA,MAAMA,OAAO,GAAIC,GAAW,IAAc;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAO,CAACC,GAAG,CAAC,CAAA;AAC3C,IAAA,IAAI,OAAOC,SAAS,KAAK,QAAQ,EAAE;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAK,CAACH,SAAS,CAAC,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAC,CAAC,MAAM;AACN,IAAA,OAAOA,SAAS,CAAA;AAClB,GAAA;AACF,CAAC,CAAA;AAEc,SAASC,eAAe,CACrCN,GAAW,EACXO,YAA2B,EACiC;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,EAAK,CAAA;EAE7CD,KAAK,CAACE,SAAS,CAAC,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAG,CAAkB,CAAA;IAElD,IAAI,OAAOa,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,IAAI,EAAE;MAChEJ,QAAQ,CACN,OAAOF,YAAY,KAAK,UAAU,GAAGA,YAAY,EAAE,GAAGA,YAAY,CACnE,CAAA;AACH,KAAC,MAAM;MACLE,QAAQ,CAACI,YAAY,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACN,YAAY,EAAEP,GAAG,CAAC,CAAC,CAAA;AAEvB,EAAA,MAAMc,MAAM,GAAGJ,KAAK,CAACK,WAAW,CAC7BC,OAAY,IAAK;IAChBP,QAAQ,CAAEQ,GAAG,IAAK;MAChB,IAAIC,MAAM,GAAGF,OAAO,CAAA;AAEpB,MAAA,IAAI,OAAOA,OAAO,IAAI,UAAU,EAAE;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAG,CAAC,CAAA;AACvB,OAAA;MACA,IAAI;QACFf,YAAY,CAACiB,OAAO,CAACnB,GAAG,EAAEG,IAAI,CAACiB,SAAS,CAACF,MAAM,CAAC,CAAC,CAAA;OAClD,CAAC,MAAM,EAAC;AAET,MAAA,OAAOA,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAAClB,GAAG,CAAC,CACN,CAAA;AAED,EAAA,OAAO,CAACQ,KAAK,EAAEM,MAAM,CAAC,CAAA;AACxB;;;;"}
|