@tamagui/core 1.0.0-alpha.19 → 1.0.0-alpha.22
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/dist/cjs/createTheme.js +2 -0
- package/dist/cjs/createTheme.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +2 -1
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/esm/createTheme.js +2 -0
- package/dist/esm/createTheme.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +1 -1
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/jsx/createTheme.js +2 -0
- package/dist/jsx/hooks/useMedia.js +1 -1
- package/package.json +6 -6
- package/src/createTheme.ts +2 -0
- package/src/hooks/useMedia.tsx +1 -1
- package/types/createTheme.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts +0 -1
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +0 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
package/dist/cjs/createTheme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n }\n }\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n } else {\n res[key] = val\n }\n }\n return res\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA,WAEG;AACL,UAAI,OAAO;AAAA;AAAA;AAGf,SAAO;AAAA,GAlBkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -58,7 +58,8 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
58
58
|
mediaQueryListeners[key].add(cb);
|
|
59
59
|
}, "addMediaQueryListener");
|
|
60
60
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
61
|
-
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
|
|
62
63
|
}, "removeMediaQueryListener");
|
|
63
64
|
let conf = null;
|
|
64
65
|
const mediaQueryConfig = new Proxy({}, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAuB;AAEvB,sBAA0C;AAC1C,wBAA2B;AAO3B,yBAA4B;AAErB,MAAM,aAA0D;AACvE,MAAM,sBAAwD;AAEvD,MAAM,wBAAwB,wBAAC,KAAa,OAAY;AAC7D,sBAAoB,OAAO,oBAAoB,QAAQ,IAAI;AAC3D,sBAAoB,KAAK,IAAI;AAAA,GAFM;AAK9B,MAAM,2BAA2B,wBAAC,KAAa,OAAY;
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[key] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(mediaState, {\n get(target, key: string) {\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n })\n })\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/createTheme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n }\n }\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEO,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,WAAW;AAC9B,UAAI,OAAO,eAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n } else {\n res[key] = val\n }\n }\n return res\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEO,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,WAAW;AAC9B,UAAI,OAAO,eAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA,WAEG;AACL,UAAI,OAAO;AAAA;AAAA;AAGf,SAAO;AAAA,GAlBkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
12
12
|
mediaQueryListeners[key].add(cb);
|
|
13
13
|
}, "addMediaQueryListener");
|
|
14
14
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
15
|
-
mediaQueryListeners[key]
|
|
15
|
+
mediaQueryListeners[key]?.delete(cb);
|
|
16
16
|
}, "removeMediaQueryListener");
|
|
17
17
|
let conf = null;
|
|
18
18
|
const mediaQueryConfig = new Proxy({}, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAEA;AACA;AAOA;AAEO,MAAM,aAA0D;AACvE,MAAM,sBAAwD;AAEvD,MAAM,wBAAwB,wBAAC,KAAa,OAAY;AAC7D,sBAAoB,OAAO,oBAAoB,QAAQ,IAAI;AAC3D,sBAAoB,KAAK,IAAI;AAAA,GAFM;AAK9B,MAAM,2BAA2B,wBAAC,KAAa,OAAY;AAChE,sBAAoB,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[key] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(mediaState, {\n get(target, key: string) {\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n })\n })\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/createTheme.js
CHANGED
|
@@ -12,7 +12,7 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
12
12
|
mediaQueryListeners[key].add(cb);
|
|
13
13
|
}, "addMediaQueryListener");
|
|
14
14
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
15
|
-
mediaQueryListeners[key]
|
|
15
|
+
mediaQueryListeners[key]?.delete(cb);
|
|
16
16
|
}, "removeMediaQueryListener");
|
|
17
17
|
let conf = null;
|
|
18
18
|
const mediaQueryConfig = new Proxy({}, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.22",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"src"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@tamagui/helpers": "^1.0.0-alpha.
|
|
18
|
+
"@tamagui/helpers": "^1.0.0-alpha.22",
|
|
19
19
|
"@tamagui/ow": "^0.28.1",
|
|
20
|
-
"@tamagui/use-debounce": "^1.0.0-alpha.
|
|
21
|
-
"@tamagui/use-force-update": "^1.0.0-alpha.
|
|
20
|
+
"@tamagui/use-debounce": "^1.0.0-alpha.22",
|
|
21
|
+
"@tamagui/use-force-update": "^1.0.0-alpha.22",
|
|
22
22
|
"react": "*",
|
|
23
23
|
"react-dom": "*"
|
|
24
24
|
},
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-native-web": "*"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@tamagui/build": "^1.0.0-alpha.
|
|
29
|
+
"@tamagui/build": "^1.0.0-alpha.22",
|
|
30
30
|
"@types/react": "^17.0.35",
|
|
31
31
|
"esbuild": "^0.13.12",
|
|
32
32
|
"react-native-web": "^0.17.5",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"engines": {
|
|
39
39
|
"node": ">=16"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "f247aca6f00c201efbc317bb24b22a62b08d1033"
|
|
42
42
|
}
|
package/src/createTheme.ts
CHANGED
package/src/hooks/useMedia.tsx
CHANGED
|
@@ -20,7 +20,7 @@ export const addMediaQueryListener = (key: string, cb: any) => {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export const removeMediaQueryListener = (key: string, cb: any) => {
|
|
23
|
-
mediaQueryListeners[key]
|
|
23
|
+
mediaQueryListeners[key]?.delete(cb)
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
let conf: MediaQueries | null = null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,eAAO,MAAM,WAAW;;
|
|
1
|
+
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,eAAO,MAAM,WAAW;;gEAmBvB,CAAA"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { StyleObject } from '@tamagui/helpers';
|
|
2
1
|
import { MediaQueries } from '../types';
|
|
3
2
|
export declare const MEDIA_SEP = "_";
|
|
4
3
|
export declare const createMediaStyle: ({ identifier, rules }: StyleObject, mediaKey: string, mediaQueries: MediaQueries, negate?: boolean | undefined, importance?: number) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createMediaStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/createMediaStyle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createMediaStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/createMediaStyle.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAKvC,eAAO,MAAM,SAAS,MAAM,CAAA;AAE5B,eAAO,MAAM,gBAAgB,iDAEjB,MAAM,gBACF,YAAY;;;CAgC3B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getStylesAtomic.d.ts","sourceRoot":"","sources":["../../src/helpers/getStylesAtomic.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getStylesAtomic.d.ts","sourceRoot":"","sources":["../../src/helpers/getStylesAtomic.ts"],"names":[],"mappings":"AAqBA,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,eAAe,UAAQ,iBAiBlE"}
|