@tanstack/devtools 0.6.2 → 0.6.5

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 (37) hide show
  1. package/dist/esm/components/tabs.js +5 -2
  2. package/dist/esm/components/tabs.js.map +1 -1
  3. package/dist/esm/context/devtools-context.d.ts +2 -2
  4. package/dist/esm/context/devtools-context.js.map +1 -1
  5. package/dist/esm/context/devtools-store.d.ts +5 -0
  6. package/dist/esm/context/devtools-store.js +2 -1
  7. package/dist/esm/context/devtools-store.js.map +1 -1
  8. package/dist/esm/context/use-devtools-context.d.ts +5 -0
  9. package/dist/esm/context/use-devtools-context.js +10 -1
  10. package/dist/esm/context/use-devtools-context.js.map +1 -1
  11. package/dist/esm/devtools.js +38 -27
  12. package/dist/esm/devtools.js.map +1 -1
  13. package/dist/esm/styles/tokens.js +15 -7
  14. package/dist/esm/styles/tokens.js.map +1 -1
  15. package/dist/esm/styles/use-styles.d.ts +2 -3
  16. package/dist/esm/styles/use-styles.js +62 -59
  17. package/dist/esm/styles/use-styles.js.map +1 -1
  18. package/dist/esm/tabs/index.d.ts +3 -3
  19. package/dist/esm/tabs/index.js +5 -5
  20. package/dist/esm/tabs/index.js.map +1 -1
  21. package/dist/esm/tabs/plugins-tab.js +9 -8
  22. package/dist/esm/tabs/plugins-tab.js.map +1 -1
  23. package/dist/esm/tabs/seo-tab.js +23 -22
  24. package/dist/esm/tabs/seo-tab.js.map +1 -1
  25. package/dist/esm/tabs/settings-tab.js +52 -34
  26. package/dist/esm/tabs/settings-tab.js.map +1 -1
  27. package/package.json +2 -2
  28. package/src/components/tabs.tsx +4 -33
  29. package/src/context/devtools-context.tsx +10 -2
  30. package/src/context/devtools-store.ts +8 -0
  31. package/src/context/use-devtools-context.ts +10 -0
  32. package/src/devtools.tsx +30 -25
  33. package/src/styles/use-styles.ts +66 -59
  34. package/src/tabs/index.tsx +4 -64
  35. package/src/tabs/plugins-tab.tsx +7 -10
  36. package/src/tabs/seo-tab.tsx +2 -15
  37. package/src/tabs/settings-tab.tsx +20 -65
package/src/tabs/settings-tab.tsx CHANGED
@@ -10,6 +10,12 @@ import {
10
10
  SectionTitle,
11
11
  Select,
12
12
  } from '@tanstack/devtools-ui'
13
+ import {
14
+ GeoTag,
15
+ Keyboard,
16
+ Link,
17
+ SettingsCog,
18
+ } from '@tanstack/devtools-ui/icons'
13
19
  import { useDevtoolsSettings } from '../context/use-devtools-context'
14
20
  import { uppercaseFirstLetter } from '../utils/sanitize'
15
21
  import { useStyles } from '../styles/use-styles'
@@ -38,24 +44,10 @@ export const SettingsTab = () => {
38
44
  }
39
45
  return (
40
46
  <MainPanel withPadding>
41
- {/* General Settings */}
42
47
  <Section>
43
48
  <SectionTitle>
44
49
  <SectionIcon>
45
- <svg
46
- xmlns="http://www.w3.org/2000/svg"
47
- width="20"
48
- height="20"
49
- viewBox="0 0 24 24"
50
- fill="none"
51
- stroke="currentColor"
52
- stroke-width="2"
53
- stroke-linecap="round"
54
- stroke-linejoin="round"
55
- >
56
- <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
57
- <circle cx="12" cy="12" r="3" />
58
- </svg>
50
+ <SettingsCog />
59
51
  </SectionIcon>
60
52
  General
61
53
  </SectionTitle>
@@ -79,6 +71,16 @@ export const SettingsTab = () => {
79
71
  }
80
72
  checked={settings().hideUntilHover}
81
73
  />
74
+ <Select
75
+ label="Theme"
76
+ description="Choose the theme for the devtools panel"
77
+ value={settings().theme}
78
+ options={[
79
+ { label: 'Dark', value: 'dark' },
80
+ { label: 'Light', value: 'light' },
81
+ ]}
82
+ onChange={(value) => setSettings({ theme: value })}
83
+ />
82
84
  </div>
83
85
  </Section>
84
86
 
@@ -86,21 +88,7 @@ export const SettingsTab = () => {
86
88
  <Section>
87
89
  <SectionTitle>
88
90
  <SectionIcon>
89
- <svg
90
- xmlns="http://www.w3.org/2000/svg"
91
- width="20"
92
- height="20"
93
- viewBox="0 0 24 24"
94
- fill="none"
95
- stroke="currentColor"
96
- stroke-width="2"
97
- stroke-linecap="round"
98
- stroke-linejoin="round"
99
- >
100
- <path d="M9 17H7A5 5 0 0 1 7 7h2" />
101
- <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
102
- <line x1="8" x2="16" y1="12" y2="12" />
103
- </svg>
91
+ <Link />
104
92
  </SectionIcon>
105
93
  URL Configuration
106
94
  </SectionTitle>
@@ -140,27 +128,7 @@ export const SettingsTab = () => {
140
128
  <Section>
141
129
  <SectionTitle>
142
130
  <SectionIcon>
143
- <svg
144
- xmlns="http://www.w3.org/2000/svg"
145
- width="20"
146
- height="20"
147
- viewBox="0 0 24 24"
148
- fill="none"
149
- stroke="currentColor"
150
- stroke-width="2"
151
- stroke-linecap="round"
152
- stroke-linejoin="round"
153
- >
154
- <path d="M10 8h.01" />
155
- <path d="M12 12h.01" />
156
- <path d="M14 8h.01" />
157
- <path d="M16 12h.01" />
158
- <path d="M18 8h.01" />
159
- <path d="M6 8h.01" />
160
- <path d="M7 16h10" />
161
- <path d="M8 12h.01" />
162
- <rect width="20" height="16" x="2" y="4" rx="2" />
163
- </svg>
131
+ <Keyboard />
164
132
  </SectionIcon>
165
133
  Keyboard
166
134
  </SectionTitle>
@@ -239,20 +207,7 @@ export const SettingsTab = () => {
239
207
  <Section>
240
208
  <SectionTitle>
241
209
  <SectionIcon>
242
- <svg
243
- xmlns="http://www.w3.org/2000/svg"
244
- width="20"
245
- height="20"
246
- viewBox="0 0 24 24"
247
- fill="none"
248
- stroke="currentColor"
249
- stroke-width="2"
250
- stroke-linecap="round"
251
- stroke-linejoin="round"
252
- >
253
- <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
254
- <circle cx="12" cy="10" r="3" />
255
- </svg>
210
+ <GeoTag />
256
211
  </SectionIcon>
257
212
  Position
258
213
  </SectionTitle>