@tanstack/router-devtools 1.20.1 → 1.20.3-alpha.1

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.
Files changed (57) hide show
  1. package/README.md +3 -1
  2. package/dist/cjs/index.cjs +12 -3
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/cjs/index.d.cts +2 -1
  5. package/dist/esm/index.d.ts +2 -1
  6. package/dist/esm/index.js +6 -3
  7. package/dist/esm/index.js.map +1 -1
  8. package/package.json +34 -34
  9. package/src/index.tsx +6 -1
  10. package/dist/cjs/Explorer.cjs +0 -306
  11. package/dist/cjs/Explorer.cjs.map +0 -1
  12. package/dist/cjs/Explorer.d.cts +0 -46
  13. package/dist/cjs/devtools.cjs +0 -1181
  14. package/dist/cjs/devtools.cjs.map +0 -1
  15. package/dist/cjs/devtools.d.cts +0 -65
  16. package/dist/cjs/logo.cjs +0 -1012
  17. package/dist/cjs/logo.cjs.map +0 -1
  18. package/dist/cjs/logo.d.cts +0 -2
  19. package/dist/cjs/theme.d.cts +0 -34
  20. package/dist/cjs/tokens.cjs +0 -302
  21. package/dist/cjs/tokens.cjs.map +0 -1
  22. package/dist/cjs/tokens.d.cts +0 -298
  23. package/dist/cjs/useLocalStorage.cjs +0 -45
  24. package/dist/cjs/useLocalStorage.cjs.map +0 -1
  25. package/dist/cjs/useLocalStorage.d.cts +0 -1
  26. package/dist/cjs/useMediaQuery.d.cts +0 -1
  27. package/dist/cjs/utils.cjs +0 -82
  28. package/dist/cjs/utils.cjs.map +0 -1
  29. package/dist/cjs/utils.d.cts +0 -23
  30. package/dist/esm/Explorer.d.ts +0 -46
  31. package/dist/esm/Explorer.js +0 -289
  32. package/dist/esm/Explorer.js.map +0 -1
  33. package/dist/esm/devtools.d.ts +0 -65
  34. package/dist/esm/devtools.js +0 -1181
  35. package/dist/esm/devtools.js.map +0 -1
  36. package/dist/esm/logo.d.ts +0 -2
  37. package/dist/esm/logo.js +0 -1012
  38. package/dist/esm/logo.js.map +0 -1
  39. package/dist/esm/theme.d.ts +0 -34
  40. package/dist/esm/tokens.d.ts +0 -298
  41. package/dist/esm/tokens.js +0 -302
  42. package/dist/esm/tokens.js.map +0 -1
  43. package/dist/esm/useLocalStorage.d.ts +0 -1
  44. package/dist/esm/useLocalStorage.js +0 -46
  45. package/dist/esm/useLocalStorage.js.map +0 -1
  46. package/dist/esm/useMediaQuery.d.ts +0 -1
  47. package/dist/esm/utils.d.ts +0 -23
  48. package/dist/esm/utils.js +0 -82
  49. package/dist/esm/utils.js.map +0 -1
  50. package/src/Explorer.tsx +0 -357
  51. package/src/devtools.tsx +0 -1401
  52. package/src/logo.tsx +0 -817
  53. package/src/theme.tsx +0 -31
  54. package/src/tokens.ts +0 -305
  55. package/src/useLocalStorage.ts +0 -52
  56. package/src/useMediaQuery.ts +0 -39
  57. package/src/utils.ts +0 -183
@@ -1,289 +0,0 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { clsx } from "clsx";
4
- import { tokens } from "./tokens.js";
5
- import { displayValue } from "./utils.js";
6
- import { css } from "goober";
7
- const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsx("span", { className: getStyles().expander, children: /* @__PURE__ */ jsx(
8
- "svg",
9
- {
10
- xmlns: "http://www.w3.org/2000/svg",
11
- width: "12",
12
- height: "12",
13
- fill: "none",
14
- viewBox: "0 0 24 24",
15
- className: clsx(getStyles().expanderIcon(expanded)),
16
- children: /* @__PURE__ */ jsx(
17
- "path",
18
- {
19
- stroke: "currentColor",
20
- strokeLinecap: "round",
21
- strokeLinejoin: "round",
22
- strokeWidth: "2",
23
- d: "M9 18l6-6-6-6"
24
- }
25
- )
26
- }
27
- ) });
28
- function chunkArray(array, size) {
29
- if (size < 1)
30
- return [];
31
- let i = 0;
32
- const result = [];
33
- while (i < array.length) {
34
- result.push(array.slice(i, i + size));
35
- i = i + size;
36
- }
37
- return result;
38
- }
39
- const DefaultRenderer = ({
40
- handleEntry,
41
- label,
42
- value,
43
- subEntries = [],
44
- subEntryPages = [],
45
- type,
46
- expanded = false,
47
- toggleExpanded,
48
- pageSize,
49
- renderer
50
- }) => {
51
- const [expandedPages, setExpandedPages] = React.useState([]);
52
- const [valueSnapshot, setValueSnapshot] = React.useState(void 0);
53
- const refreshValueSnapshot = () => {
54
- setValueSnapshot(value());
55
- };
56
- return /* @__PURE__ */ jsx("div", { className: getStyles().entry, children: subEntryPages.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
57
- /* @__PURE__ */ jsxs(
58
- "button",
59
- {
60
- className: getStyles().expandButton,
61
- onClick: () => toggleExpanded(),
62
- children: [
63
- /* @__PURE__ */ jsx(Expander, { expanded }),
64
- label,
65
- /* @__PURE__ */ jsxs("span", { className: getStyles().info, children: [
66
- String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
67
- subEntries.length,
68
- " ",
69
- subEntries.length > 1 ? `items` : `item`
70
- ] })
71
- ]
72
- }
73
- ),
74
- expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: subEntryPages.map((entries, index) => {
75
- return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: getStyles().entry, children: [
76
- /* @__PURE__ */ jsxs(
77
- "button",
78
- {
79
- className: clsx(getStyles().labelButton, "labelButton"),
80
- onClick: () => setExpandedPages(
81
- (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
82
- ),
83
- children: [
84
- /* @__PURE__ */ jsx(Expander, { expanded: expandedPages.includes(index) }),
85
- " ",
86
- "[",
87
- index * pageSize,
88
- " ...",
89
- " ",
90
- index * pageSize + pageSize - 1,
91
- "]"
92
- ]
93
- }
94
- ),
95
- expandedPages.includes(index) ? /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: entries.map((entry) => handleEntry(entry)) }) : null
96
- ] }) }, index);
97
- }) }) : null
98
- ] }) : type === "function" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
99
- Explorer,
100
- {
101
- renderer,
102
- label: /* @__PURE__ */ jsxs(
103
- "button",
104
- {
105
- onClick: refreshValueSnapshot,
106
- className: getStyles().refreshValueBtn,
107
- children: [
108
- /* @__PURE__ */ jsx("span", { children: label }),
109
- " 🔄",
110
- " "
111
- ]
112
- }
113
- ),
114
- value: valueSnapshot,
115
- defaultExpanded: {}
116
- }
117
- ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
118
- /* @__PURE__ */ jsxs("span", { children: [
119
- label,
120
- ":"
121
- ] }),
122
- " ",
123
- /* @__PURE__ */ jsx("span", { className: getStyles().value, children: displayValue(value) })
124
- ] }) });
125
- };
126
- function isIterable(x) {
127
- return Symbol.iterator in x;
128
- }
129
- function Explorer({
130
- value,
131
- defaultExpanded,
132
- renderer = DefaultRenderer,
133
- pageSize = 100,
134
- filterSubEntries,
135
- ...rest
136
- }) {
137
- const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
138
- const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), []);
139
- let type = typeof value;
140
- let subEntries = [];
141
- const makeProperty = (sub) => {
142
- const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
143
- return {
144
- ...sub,
145
- defaultExpanded: subDefaultExpanded
146
- };
147
- };
148
- if (Array.isArray(value)) {
149
- type = "array";
150
- subEntries = value.map(
151
- (d, i) => makeProperty({
152
- label: i.toString(),
153
- value: d
154
- })
155
- );
156
- } else if (value !== null && typeof value === "object" && isIterable(value) && typeof value[Symbol.iterator] === "function") {
157
- type = "Iterable";
158
- subEntries = Array.from(
159
- value,
160
- (val, i) => makeProperty({
161
- label: i.toString(),
162
- value: val
163
- })
164
- );
165
- } else if (typeof value === "object" && value !== null) {
166
- type = "object";
167
- subEntries = Object.entries(value).map(
168
- ([key, val]) => makeProperty({
169
- label: key,
170
- value: val
171
- })
172
- );
173
- }
174
- subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
175
- const subEntryPages = chunkArray(subEntries, pageSize);
176
- return renderer({
177
- handleEntry: (entry) => /* @__PURE__ */ jsx(
178
- Explorer,
179
- {
180
- value,
181
- renderer,
182
- filterSubEntries,
183
- ...rest,
184
- ...entry
185
- },
186
- entry.label
187
- ),
188
- type,
189
- subEntries,
190
- subEntryPages,
191
- value,
192
- expanded,
193
- toggleExpanded,
194
- pageSize,
195
- ...rest
196
- });
197
- }
198
- const stylesFactory = () => {
199
- const { colors, font, size, alpha, shadow, border } = tokens;
200
- const { fontFamily, lineHeight, size: fontSize } = font;
201
- return {
202
- entry: css`
203
- font-family: ${fontFamily.mono};
204
- font-size: ${fontSize.xs};
205
- line-height: ${lineHeight.sm};
206
- outline: none;
207
- word-break: break-word;
208
- `,
209
- labelButton: css`
210
- cursor: pointer;
211
- color: inherit;
212
- font: inherit;
213
- outline: inherit;
214
- background: transparent;
215
- border: none;
216
- padding: 0;
217
- `,
218
- expander: css`
219
- display: inline-flex;
220
- align-items: center;
221
- justify-content: center;
222
- width: ${size[3]};
223
- height: ${size[3]};
224
- padding-left: 3px;
225
- box-sizing: content-box;
226
- `,
227
- expanderIcon: (expanded) => {
228
- if (expanded) {
229
- return css`
230
- transform: rotate(90deg);
231
- transition: transform 0.1s ease;
232
- `;
233
- }
234
- return css`
235
- transform: rotate(0deg);
236
- transition: transform 0.1s ease;
237
- `;
238
- },
239
- expandButton: css`
240
- display: flex;
241
- gap: ${size[1]};
242
- align-items: center;
243
- cursor: pointer;
244
- color: inherit;
245
- font: inherit;
246
- outline: inherit;
247
- background: transparent;
248
- border: none;
249
- padding: 0;
250
- `,
251
- value: css`
252
- color: ${colors.purple[400]};
253
- `,
254
- subEntries: css`
255
- margin-left: ${size[2]};
256
- padding-left: ${size[2]};
257
- border-left: 2px solid ${colors.darkGray[400]};
258
- `,
259
- info: css`
260
- color: ${colors.gray[500]};
261
- font-size: ${fontSize["2xs"]};
262
- padding-left: ${size[1]};
263
- `,
264
- refreshValueBtn: css`
265
- appearance: none;
266
- border: 0;
267
- cursor: pointer;
268
- background: transparent;
269
- color: inherit;
270
- padding: 0;
271
- font-family: ${fontFamily.mono};
272
- font-size: ${fontSize.xs};
273
- `
274
- };
275
- };
276
- let _styles = null;
277
- function getStyles() {
278
- if (_styles)
279
- return _styles;
280
- _styles = stylesFactory();
281
- return _styles;
282
- }
283
- export {
284
- DefaultRenderer,
285
- Expander,
286
- chunkArray,
287
- Explorer as default
288
- };
289
- //# sourceMappingURL=Explorer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\nimport { css } from 'goober'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n <span className={getStyles().expander}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n className={cx(getStyles().expanderIcon(expanded))}\n >\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M9 18l6-6-6-6\"\n ></path>\n </svg>\n </span>\n)\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Entry[]\n subEntryPages: Entry[][]\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\n filterSubEntries?: (subEntries: Property[]) => Property[]\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n if (size < 1) return []\n let i = 0\n const result: T[][] = []\n while (i < array.length) {\n result.push(array.slice(i, i + size))\n i = i + size\n }\n return result\n}\n\ntype Renderer = (props: RendererProps) => React.ReactNode\n\nexport const DefaultRenderer: Renderer = ({\n handleEntry,\n label,\n value,\n subEntries = [],\n subEntryPages = [],\n type,\n expanded = false,\n toggleExpanded,\n pageSize,\n renderer,\n}) => {\n const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n\n const refreshValueSnapshot = () => {\n setValueSnapshot((value as () => any)())\n }\n\n return (\n <div className={getStyles().entry}>\n {subEntryPages.length ? (\n <>\n <button\n className={getStyles().expandButton}\n onClick={() => toggleExpanded()}\n >\n <Expander expanded={expanded} />\n {label}\n <span className={getStyles().info}>\n {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n </span>\n </button>\n {expanded ? (\n subEntryPages.length === 1 ? (\n <div className={getStyles().subEntries}>\n {subEntries.map((entry, index) => handleEntry(entry))}\n </div>\n ) : (\n <div className={getStyles().subEntries}>\n {subEntryPages.map((entries, index) => {\n return (\n <div key={index}>\n <div className={getStyles().entry}>\n <button\n className={cx(getStyles().labelButton, 'labelButton')}\n onClick={() =>\n setExpandedPages((old) =>\n old.includes(index)\n ? old.filter((d) => d !== index)\n : [...old, index],\n )\n }\n >\n <Expander expanded={expandedPages.includes(index)} />{' '}\n [{index * pageSize} ...{' '}\n {index * pageSize + pageSize - 1}]\n </button>\n {expandedPages.includes(index) ? (\n <div className={getStyles().subEntries}>\n {entries.map((entry) => handleEntry(entry))}\n </div>\n ) : null}\n </div>\n </div>\n )\n })}\n </div>\n )\n ) : null}\n </>\n ) : type === 'function' ? (\n <>\n <Explorer\n renderer={renderer}\n label={\n <button\n onClick={refreshValueSnapshot}\n className={getStyles().refreshValueBtn}\n >\n <span>{label}</span> 🔄{' '}\n </button>\n }\n value={valueSnapshot}\n defaultExpanded={{}}\n />\n </>\n ) : (\n <>\n <span>{label}:</span>{' '}\n <span className={getStyles().value}>{displayValue(value)}</span>\n </>\n )}\n </div>\n )\n}\n\ntype HandleEntryFn = (entry: Entry) => React.ReactNode\n\ntype ExplorerProps = Partial<RendererProps> & {\n renderer?: Renderer\n defaultExpanded?: true | Record<string, boolean>\n}\n\ntype Property = {\n defaultExpanded?: boolean | Record<string, boolean>\n label: string\n value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n return Symbol.iterator in x\n}\n\nexport default function Explorer({\n value,\n defaultExpanded,\n renderer = DefaultRenderer,\n pageSize = 100,\n filterSubEntries,\n ...rest\n}: ExplorerProps) {\n const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n let type: string = typeof value\n let subEntries: Property[] = []\n\n const makeProperty = (sub: { label: string; value: unknown }): Property => {\n const subDefaultExpanded =\n defaultExpanded === true\n ? { [sub.label]: true }\n : defaultExpanded?.[sub.label]\n return {\n ...sub,\n defaultExpanded: subDefaultExpanded,\n }\n }\n\n if (Array.isArray(value)) {\n type = 'array'\n subEntries = value.map((d, i) =>\n makeProperty({\n label: i.toString(),\n value: d,\n }),\n )\n } else if (\n value !== null &&\n typeof value === 'object' &&\n isIterable(value) &&\n typeof value[Symbol.iterator] === 'function'\n ) {\n type = 'Iterable'\n subEntries = Array.from(value, (val, i) =>\n makeProperty({\n label: i.toString(),\n value: val,\n }),\n )\n } else if (typeof value === 'object' && value !== null) {\n type = 'object'\n subEntries = Object.entries(value).map(([key, val]) =>\n makeProperty({\n label: key,\n value: val,\n }),\n )\n }\n\n subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\n\n const subEntryPages = chunkArray(subEntries, pageSize)\n\n return renderer({\n handleEntry: (entry) => (\n <Explorer\n key={entry.label}\n value={value}\n renderer={renderer}\n filterSubEntries={filterSubEntries}\n {...rest}\n {...entry}\n />\n ),\n type,\n subEntries,\n subEntryPages,\n value,\n expanded,\n toggleExpanded,\n pageSize,\n ...rest,\n })\n}\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n\n return {\n entry: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n line-height: ${lineHeight.sm};\n outline: none;\n word-break: break-word;\n `,\n labelButton: css`\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n expander: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${size[3]};\n height: ${size[3]};\n padding-left: 3px;\n box-sizing: content-box;\n `,\n expanderIcon: (expanded: boolean) => {\n if (expanded) {\n return css`\n transform: rotate(90deg);\n transition: transform 0.1s ease;\n `\n }\n return css`\n transform: rotate(0deg);\n transition: transform 0.1s ease;\n `\n },\n expandButton: css`\n display: flex;\n gap: ${size[1]};\n align-items: center;\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n value: css`\n color: ${colors.purple[400]};\n `,\n subEntries: css`\n margin-left: ${size[2]};\n padding-left: ${size[2]};\n border-left: 2px solid ${colors.darkGray[400]};\n `,\n info: css`\n color: ${colors.gray[500]};\n font-size: ${fontSize['2xs']};\n padding-left: ${size[1]};\n `,\n refreshValueBtn: css`\n appearance: none;\n border: 0;\n cursor: pointer;\n background: transparent;\n color: inherit;\n padding: 0;\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n `,\n }\n}\n\nlet _styles: ReturnType<typeof stylesFactory> | null = null\n\nfunction getStyles() {\n if (_styles) return _styles\n _styles = stylesFactory()\n\n return _styles\n}\n"],"names":["cx"],"mappings":"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"}
@@ -1,65 +0,0 @@
1
- import React from 'react';
2
- import { AnyRouter } from '@tanstack/react-router';
3
- export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
4
- interface DevtoolsOptions {
5
- /**
6
- * Set this true if you want the dev tools to default to being open
7
- */
8
- initialIsOpen?: boolean;
9
- /**
10
- * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
11
- */
12
- panelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
13
- /**
14
- * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
15
- */
16
- closeButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
17
- /**
18
- * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
19
- */
20
- toggleButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
21
- /**
22
- * The position of the TanStack Router logo to open and close the devtools panel.
23
- * Defaults to 'bottom-left'.
24
- */
25
- position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
26
- /**
27
- * Use this to render the devtools inside a different type of container element for a11y purposes.
28
- * Any string which corresponds to a valid intrinsic JSX element is allowed.
29
- * Defaults to 'footer'.
30
- */
31
- containerElement?: string | any;
32
- /**
33
- * A boolean variable indicating if the "lite" version of the library is being used
34
- */
35
- router?: AnyRouter;
36
- }
37
- interface DevtoolsPanelOptions {
38
- /**
39
- * The standard React style object used to style a component with inline styles
40
- */
41
- style?: React.CSSProperties;
42
- /**
43
- * The standard React className property used to style a component with classes
44
- */
45
- className?: string;
46
- /**
47
- * A boolean variable indicating whether the panel is open or closed
48
- */
49
- isOpen?: boolean;
50
- /**
51
- * A function that toggles the open and close state of the panel
52
- */
53
- setIsOpen: (isOpen: boolean) => void;
54
- /**
55
- * Handles the opening and closing the devtools panel
56
- */
57
- handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
58
- /**
59
- * A boolean variable indicating if the "lite" version of the library is being used
60
- */
61
- router?: AnyRouter;
62
- }
63
- export declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
64
- export declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
65
- export {};