@tanstack/pacer-devtools 1.1.3 → 1.1.4

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/README.md +7 -7
  2. package/dist/PacerDevtools-C_K6wJJQ.js +1315 -0
  3. package/dist/PacerDevtools-DMClGMZE.js +1147 -0
  4. package/dist/index.d.ts +6 -8
  5. package/dist/index.js +5 -6
  6. package/dist/production/index.d.ts +19 -0
  7. package/dist/{core.js → production/index.js} +3 -6
  8. package/dist/production/server.js +6 -0
  9. package/dist/server.js +9 -0
  10. package/package.json +38 -5
  11. package/src/PacerDevtools.tsx +13 -4
  12. package/src/core.tsx +3 -4
  13. package/dist/PacerContextProvider.js +0 -142
  14. package/dist/PacerContextProvider.js.map +0 -1
  15. package/dist/PacerDevtools.js +0 -14
  16. package/dist/PacerDevtools.js.map +0 -1
  17. package/dist/components/ActionButtons.js +0 -154
  18. package/dist/components/ActionButtons.js.map +0 -1
  19. package/dist/components/DetailsPanel.js +0 -76
  20. package/dist/components/DetailsPanel.js.map +0 -1
  21. package/dist/components/Shell.js +0 -107
  22. package/dist/components/Shell.js.map +0 -1
  23. package/dist/components/StateHeader.js +0 -85
  24. package/dist/components/StateHeader.js.map +0 -1
  25. package/dist/components/UtilList.js +0 -72
  26. package/dist/components/UtilList.js.map +0 -1
  27. package/dist/components/util-groups.js +0 -57
  28. package/dist/components/util-groups.js.map +0 -1
  29. package/dist/core.d.ts +0 -24
  30. package/dist/core.js.map +0 -1
  31. package/dist/index.js.map +0 -1
  32. package/dist/production.d.ts +0 -2
  33. package/dist/production.js +0 -5
  34. package/dist/styles/tokens.js +0 -301
  35. package/dist/styles/tokens.js.map +0 -1
  36. package/dist/styles/use-styles.js +0 -364
  37. package/dist/styles/use-styles.js.map +0 -1
package/dist/styles/tokens.js DELETED
@@ -1,301 +0,0 @@
1
- //#region src/styles/tokens.ts
2
- const tokens = {
3
- colors: {
4
- inherit: "inherit",
5
- current: "currentColor",
6
- transparent: "transparent",
7
- black: "#000000",
8
- white: "#ffffff",
9
- neutral: {
10
- 50: "#f9fafb",
11
- 100: "#f2f4f7",
12
- 200: "#eaecf0",
13
- 300: "#d0d5dd",
14
- 400: "#98a2b3",
15
- 500: "#667085",
16
- 600: "#475467",
17
- 700: "#344054",
18
- 800: "#1d2939",
19
- 900: "#101828"
20
- },
21
- darkGray: {
22
- 50: "#525c7a",
23
- 100: "#49536e",
24
- 200: "#414962",
25
- 300: "#394056",
26
- 400: "#313749",
27
- 500: "#292e3d",
28
- 600: "#212530",
29
- 700: "#191c24",
30
- 800: "#111318",
31
- 900: "#0b0d10"
32
- },
33
- gray: {
34
- 50: "#f9fafb",
35
- 100: "#f2f4f7",
36
- 200: "#eaecf0",
37
- 300: "#d0d5dd",
38
- 400: "#98a2b3",
39
- 500: "#667085",
40
- 600: "#475467",
41
- 700: "#344054",
42
- 800: "#1d2939",
43
- 900: "#101828"
44
- },
45
- blue: {
46
- 25: "#F5FAFF",
47
- 50: "#EFF8FF",
48
- 100: "#D1E9FF",
49
- 200: "#B2DDFF",
50
- 300: "#84CAFF",
51
- 400: "#53B1FD",
52
- 500: "#2E90FA",
53
- 600: "#1570EF",
54
- 700: "#175CD3",
55
- 800: "#1849A9",
56
- 900: "#194185"
57
- },
58
- green: {
59
- 25: "#F6FEF9",
60
- 50: "#ECFDF3",
61
- 100: "#D1FADF",
62
- 200: "#A6F4C5",
63
- 300: "#6CE9A6",
64
- 400: "#32D583",
65
- 500: "#12B76A",
66
- 600: "#039855",
67
- 700: "#027A48",
68
- 800: "#05603A",
69
- 900: "#054F31"
70
- },
71
- red: {
72
- 50: "#fef2f2",
73
- 100: "#fee2e2",
74
- 200: "#fecaca",
75
- 300: "#fca5a5",
76
- 400: "#f87171",
77
- 500: "#ef4444",
78
- 600: "#dc2626",
79
- 700: "#b91c1c",
80
- 800: "#991b1b",
81
- 900: "#7f1d1d",
82
- 950: "#450a0a"
83
- },
84
- yellow: {
85
- 25: "#FFFCF5",
86
- 50: "#FFFAEB",
87
- 100: "#FEF0C7",
88
- 200: "#FEDF89",
89
- 300: "#FEC84B",
90
- 400: "#FDB022",
91
- 500: "#F79009",
92
- 600: "#DC6803",
93
- 700: "#B54708",
94
- 800: "#93370D",
95
- 900: "#7A2E0E"
96
- },
97
- purple: {
98
- 25: "#FAFAFF",
99
- 50: "#F4F3FF",
100
- 100: "#EBE9FE",
101
- 200: "#D9D6FE",
102
- 300: "#BDB4FE",
103
- 400: "#9B8AFB",
104
- 500: "#7A5AF8",
105
- 600: "#6938EF",
106
- 700: "#5925DC",
107
- 800: "#4A1FB8",
108
- 900: "#3E1C96"
109
- },
110
- teal: {
111
- 25: "#F6FEFC",
112
- 50: "#F0FDF9",
113
- 100: "#CCFBEF",
114
- 200: "#99F6E0",
115
- 300: "#5FE9D0",
116
- 400: "#2ED3B7",
117
- 500: "#15B79E",
118
- 600: "#0E9384",
119
- 700: "#107569",
120
- 800: "#125D56",
121
- 900: "#134E48"
122
- },
123
- pink: {
124
- 25: "#fdf2f8",
125
- 50: "#fce7f3",
126
- 100: "#fbcfe8",
127
- 200: "#f9a8d4",
128
- 300: "#f472b6",
129
- 400: "#ec4899",
130
- 500: "#db2777",
131
- 600: "#be185d",
132
- 700: "#9d174d",
133
- 800: "#831843",
134
- 900: "#500724"
135
- },
136
- cyan: {
137
- 25: "#ecfeff",
138
- 50: "#cffafe",
139
- 100: "#a5f3fc",
140
- 200: "#67e8f9",
141
- 300: "#22d3ee",
142
- 400: "#06b6d4",
143
- 500: "#0891b2",
144
- 600: "#0e7490",
145
- 700: "#155e75",
146
- 800: "#164e63",
147
- 900: "#083344"
148
- }
149
- },
150
- alpha: {
151
- 100: "ff",
152
- 90: "e5",
153
- 80: "cc",
154
- 70: "b3",
155
- 60: "99",
156
- 50: "80",
157
- 40: "66",
158
- 30: "4d",
159
- 20: "33",
160
- 10: "1a",
161
- 0: "00"
162
- },
163
- font: {
164
- size: {
165
- "2xs": "calc(var(--tsrd-font-size) * 0.625)",
166
- xs: "calc(var(--tsrd-font-size) * 0.75)",
167
- sm: "calc(var(--tsrd-font-size) * 0.875)",
168
- md: "var(--tsrd-font-size)",
169
- lg: "calc(var(--tsrd-font-size) * 1.125)",
170
- xl: "calc(var(--tsrd-font-size) * 1.25)",
171
- "2xl": "calc(var(--tsrd-font-size) * 1.5)",
172
- "3xl": "calc(var(--tsrd-font-size) * 1.875)",
173
- "4xl": "calc(var(--tsrd-font-size) * 2.25)",
174
- "5xl": "calc(var(--tsrd-font-size) * 3)",
175
- "6xl": "calc(var(--tsrd-font-size) * 3.75)",
176
- "7xl": "calc(var(--tsrd-font-size) * 4.5)",
177
- "8xl": "calc(var(--tsrd-font-size) * 6)",
178
- "9xl": "calc(var(--tsrd-font-size) * 8)"
179
- },
180
- lineHeight: {
181
- "3xs": "calc(var(--tsrd-font-size) * 0.75)",
182
- "2xs": "calc(var(--tsrd-font-size) * 0.875)",
183
- xs: "calc(var(--tsrd-font-size) * 1)",
184
- sm: "calc(var(--tsrd-font-size) * 1.25)",
185
- md: "calc(var(--tsrd-font-size) * 1.5)",
186
- lg: "calc(var(--tsrd-font-size) * 1.75)",
187
- xl: "calc(var(--tsrd-font-size) * 2)",
188
- "2xl": "calc(var(--tsrd-font-size) * 2.25)",
189
- "3xl": "calc(var(--tsrd-font-size) * 2.5)",
190
- "4xl": "calc(var(--tsrd-font-size) * 2.75)",
191
- "5xl": "calc(var(--tsrd-font-size) * 3)",
192
- "6xl": "calc(var(--tsrd-font-size) * 3.25)",
193
- "7xl": "calc(var(--tsrd-font-size) * 3.5)",
194
- "8xl": "calc(var(--tsrd-font-size) * 3.75)",
195
- "9xl": "calc(var(--tsrd-font-size) * 4)"
196
- },
197
- weight: {
198
- thin: "100",
199
- extralight: "200",
200
- light: "300",
201
- normal: "400",
202
- medium: "500",
203
- semibold: "600",
204
- bold: "700",
205
- extrabold: "800",
206
- black: "900"
207
- },
208
- fontFamily: {
209
- sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
210
- mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
211
- }
212
- },
213
- breakpoints: {
214
- xs: "320px",
215
- sm: "640px",
216
- md: "768px",
217
- lg: "1024px",
218
- xl: "1280px",
219
- "2xl": "1536px"
220
- },
221
- border: { radius: {
222
- none: "0px",
223
- xs: "calc(var(--tsrd-font-size) * 0.125)",
224
- sm: "calc(var(--tsrd-font-size) * 0.25)",
225
- md: "calc(var(--tsrd-font-size) * 0.375)",
226
- lg: "calc(var(--tsrd-font-size) * 0.5)",
227
- xl: "calc(var(--tsrd-font-size) * 0.75)",
228
- "2xl": "calc(var(--tsrd-font-size) * 1)",
229
- "3xl": "calc(var(--tsrd-font-size) * 1.5)",
230
- full: "9999px"
231
- } },
232
- size: {
233
- 0: "0px",
234
- .25: "calc(var(--tsrd-font-size) * 0.0625)",
235
- .5: "calc(var(--tsrd-font-size) * 0.125)",
236
- 1: "calc(var(--tsrd-font-size) * 0.25)",
237
- 1.5: "calc(var(--tsrd-font-size) * 0.375)",
238
- 2: "calc(var(--tsrd-font-size) * 0.5)",
239
- 2.5: "calc(var(--tsrd-font-size) * 0.625)",
240
- 3: "calc(var(--tsrd-font-size) * 0.75)",
241
- 3.5: "calc(var(--tsrd-font-size) * 0.875)",
242
- 4: "calc(var(--tsrd-font-size) * 1)",
243
- 4.5: "calc(var(--tsrd-font-size) * 1.125)",
244
- 5: "calc(var(--tsrd-font-size) * 1.25)",
245
- 5.5: "calc(var(--tsrd-font-size) * 1.375)",
246
- 6: "calc(var(--tsrd-font-size) * 1.5)",
247
- 6.5: "calc(var(--tsrd-font-size) * 1.625)",
248
- 7: "calc(var(--tsrd-font-size) * 1.75)",
249
- 8: "calc(var(--tsrd-font-size) * 2)",
250
- 9: "calc(var(--tsrd-font-size) * 2.25)",
251
- 10: "calc(var(--tsrd-font-size) * 2.5)",
252
- 11: "calc(var(--tsrd-font-size) * 2.75)",
253
- 12: "calc(var(--tsrd-font-size) * 3)",
254
- 14: "calc(var(--tsrd-font-size) * 3.5)",
255
- 16: "calc(var(--tsrd-font-size) * 4)",
256
- 20: "calc(var(--tsrd-font-size) * 5)",
257
- 24: "calc(var(--tsrd-font-size) * 6)",
258
- 28: "calc(var(--tsrd-font-size) * 7)",
259
- 32: "calc(var(--tsrd-font-size) * 8)",
260
- 36: "calc(var(--tsrd-font-size) * 9)",
261
- 40: "calc(var(--tsrd-font-size) * 10)",
262
- 44: "calc(var(--tsrd-font-size) * 11)",
263
- 48: "calc(var(--tsrd-font-size) * 12)",
264
- 52: "calc(var(--tsrd-font-size) * 13)",
265
- 56: "calc(var(--tsrd-font-size) * 14)",
266
- 60: "calc(var(--tsrd-font-size) * 15)",
267
- 64: "calc(var(--tsrd-font-size) * 16)",
268
- 72: "calc(var(--tsrd-font-size) * 18)",
269
- 80: "calc(var(--tsrd-font-size) * 20)",
270
- 96: "calc(var(--tsrd-font-size) * 24)"
271
- },
272
- shadow: {
273
- xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
274
- sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
275
- md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
276
- lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
277
- xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
278
- "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
279
- inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
280
- none: () => `none`
281
- },
282
- zIndices: {
283
- hide: -1,
284
- auto: "auto",
285
- base: 0,
286
- docked: 10,
287
- dropdown: 1e3,
288
- sticky: 1100,
289
- banner: 1200,
290
- overlay: 1300,
291
- modal: 1400,
292
- popover: 1500,
293
- skipLink: 1600,
294
- toast: 1700,
295
- tooltip: 1800
296
- }
297
- };
298
-
299
- //#endregion
300
- export { tokens };
301
- //# sourceMappingURL=tokens.js.map
package/dist/styles/tokens.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"tokens.js","names":[],"sources":["../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n colors: {\n inherit: 'inherit',\n current: 'currentColor',\n transparent: 'transparent',\n black: '#000000',\n white: '#ffffff',\n neutral: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n darkGray: {\n 50: '#525c7a',\n 100: '#49536e',\n 200: '#414962',\n 300: '#394056',\n 400: '#313749',\n 500: '#292e3d',\n 600: '#212530',\n 700: '#191c24',\n 800: '#111318',\n 900: '#0b0d10',\n },\n gray: {\n 50: '#f9fafb',\n 100: '#f2f4f7',\n 200: '#eaecf0',\n 300: '#d0d5dd',\n 400: '#98a2b3',\n 500: '#667085',\n 600: '#475467',\n 700: '#344054',\n 800: '#1d2939',\n 900: '#101828',\n },\n blue: {\n 25: '#F5FAFF',\n 50: '#EFF8FF',\n 100: '#D1E9FF',\n 200: '#B2DDFF',\n 300: '#84CAFF',\n 400: '#53B1FD',\n 500: '#2E90FA',\n 600: '#1570EF',\n 700: '#175CD3',\n 800: '#1849A9',\n 900: '#194185',\n },\n green: {\n 25: '#F6FEF9',\n 50: '#ECFDF3',\n 100: '#D1FADF',\n 200: '#A6F4C5',\n 300: '#6CE9A6',\n 400: '#32D583',\n 500: '#12B76A',\n 600: '#039855',\n 700: '#027A48',\n 800: '#05603A',\n 900: '#054F31',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n 950: '#450a0a',\n },\n yellow: {\n 25: '#FFFCF5',\n 50: '#FFFAEB',\n 100: '#FEF0C7',\n 200: '#FEDF89',\n 300: '#FEC84B',\n 400: '#FDB022',\n 500: '#F79009',\n 600: '#DC6803',\n 700: '#B54708',\n 800: '#93370D',\n 900: '#7A2E0E',\n },\n purple: {\n 25: '#FAFAFF',\n 50: '#F4F3FF',\n 100: '#EBE9FE',\n 200: '#D9D6FE',\n 300: '#BDB4FE',\n 400: '#9B8AFB',\n 500: '#7A5AF8',\n 600: '#6938EF',\n 700: '#5925DC',\n 800: '#4A1FB8',\n 900: '#3E1C96',\n },\n teal: {\n 25: '#F6FEFC',\n 50: '#F0FDF9',\n 100: '#CCFBEF',\n 200: '#99F6E0',\n 300: '#5FE9D0',\n 400: '#2ED3B7',\n 500: '#15B79E',\n 600: '#0E9384',\n 700: '#107569',\n 800: '#125D56',\n 900: '#134E48',\n },\n pink: {\n 25: '#fdf2f8',\n 50: '#fce7f3',\n 100: '#fbcfe8',\n 200: '#f9a8d4',\n 300: '#f472b6',\n 400: '#ec4899',\n 500: '#db2777',\n 600: '#be185d',\n 700: '#9d174d',\n 800: '#831843',\n 900: '#500724',\n },\n cyan: {\n 25: '#ecfeff',\n 50: '#cffafe',\n 100: '#a5f3fc',\n 200: '#67e8f9',\n 300: '#22d3ee',\n 400: '#06b6d4',\n 500: '#0891b2',\n 600: '#0e7490',\n 700: '#155e75',\n 800: '#164e63',\n 900: '#083344',\n },\n },\n alpha: {\n 100: 'ff',\n 90: 'e5',\n 80: 'cc',\n 70: 'b3',\n 60: '99',\n 50: '80',\n 40: '66',\n 30: '4d',\n 20: '33',\n 10: '1a',\n 0: '00',\n },\n font: {\n size: {\n '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n xs: 'calc(var(--tsrd-font-size) * 0.75)',\n sm: 'calc(var(--tsrd-font-size) * 0.875)',\n md: 'var(--tsrd-font-size)',\n lg: 'calc(var(--tsrd-font-size) * 1.125)',\n xl: 'calc(var(--tsrd-font-size) * 1.25)',\n '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 6)',\n '9xl': 'calc(var(--tsrd-font-size) * 8)',\n },\n lineHeight: {\n '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n xs: 'calc(var(--tsrd-font-size) * 1)',\n sm: 'calc(var(--tsrd-font-size) * 1.25)',\n md: 'calc(var(--tsrd-font-size) * 1.5)',\n lg: 'calc(var(--tsrd-font-size) * 1.75)',\n xl: 'calc(var(--tsrd-font-size) * 2)',\n '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n '5xl': 'calc(var(--tsrd-font-size) * 3)',\n '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n '9xl': 'calc(var(--tsrd-font-size) * 4)',\n },\n weight: {\n thin: '100',\n extralight: '200',\n light: '300',\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n extrabold: '800',\n black: '900',\n },\n fontFamily: {\n sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n },\n },\n breakpoints: {\n xs: '320px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n '2xl': '1536px',\n },\n border: {\n radius: {\n none: '0px',\n xs: 'calc(var(--tsrd-font-size) * 0.125)',\n sm: 'calc(var(--tsrd-font-size) * 0.25)',\n md: 'calc(var(--tsrd-font-size) * 0.375)',\n lg: 'calc(var(--tsrd-font-size) * 0.5)',\n xl: 'calc(var(--tsrd-font-size) * 0.75)',\n '2xl': 'calc(var(--tsrd-font-size) * 1)',\n '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n full: '9999px',\n },\n },\n size: {\n 0: '0px',\n 0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n 0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n 1: 'calc(var(--tsrd-font-size) * 0.25)',\n 1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n 2: 'calc(var(--tsrd-font-size) * 0.5)',\n 2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n 3: 'calc(var(--tsrd-font-size) * 0.75)',\n 3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n 4: 'calc(var(--tsrd-font-size) * 1)',\n 4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n 5: 'calc(var(--tsrd-font-size) * 1.25)',\n 5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n 6: 'calc(var(--tsrd-font-size) * 1.5)',\n 6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n 7: 'calc(var(--tsrd-font-size) * 1.75)',\n 8: 'calc(var(--tsrd-font-size) * 2)',\n 9: 'calc(var(--tsrd-font-size) * 2.25)',\n 10: 'calc(var(--tsrd-font-size) * 2.5)',\n 11: 'calc(var(--tsrd-font-size) * 2.75)',\n 12: 'calc(var(--tsrd-font-size) * 3)',\n 14: 'calc(var(--tsrd-font-size) * 3.5)',\n 16: 'calc(var(--tsrd-font-size) * 4)',\n 20: 'calc(var(--tsrd-font-size) * 5)',\n 24: 'calc(var(--tsrd-font-size) * 6)',\n 28: 'calc(var(--tsrd-font-size) * 7)',\n 32: 'calc(var(--tsrd-font-size) * 8)',\n 36: 'calc(var(--tsrd-font-size) * 9)',\n 40: 'calc(var(--tsrd-font-size) * 10)',\n 44: 'calc(var(--tsrd-font-size) * 11)',\n 48: 'calc(var(--tsrd-font-size) * 12)',\n 52: 'calc(var(--tsrd-font-size) * 13)',\n 56: 'calc(var(--tsrd-font-size) * 14)',\n 60: 'calc(var(--tsrd-font-size) * 15)',\n 64: 'calc(var(--tsrd-font-size) * 16)',\n 72: 'calc(var(--tsrd-font-size) * 18)',\n 80: 'calc(var(--tsrd-font-size) * 20)',\n 96: 'calc(var(--tsrd-font-size) * 24)',\n },\n shadow: {\n xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n `0 25px 50px -12px ${color}` as const,\n inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n `inset 0 2px 4px 0 ${color}` as const,\n none: () => `none` as const,\n },\n zIndices: {\n hide: -1,\n auto: 'auto',\n base: 0,\n docked: 10,\n dropdown: 1000,\n sticky: 1100,\n banner: 1200,\n overlay: 1300,\n modal: 1400,\n popover: 1500,\n skipLink: 1600,\n toast: 1700,\n tooltip: 1800,\n },\n} as const\n"],"mappings":"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"}
package/dist/styles/use-styles.js DELETED
@@ -1,364 +0,0 @@
1
- import { tokens } from "./tokens.js";
2
- import { createEffect, createSignal } from "solid-js";
3
- import { useTheme } from "@tanstack/devtools-ui";
4
- import * as goober from "goober";
5
-
6
- //#region src/styles/use-styles.ts
7
- const stylesFactory = (theme) => {
8
- const { colors, font, size, alpha, border } = tokens;
9
- const { fontFamily, size: fontSize } = font;
10
- const css = goober.css;
11
- const t = (light, dark) => theme === "light" ? light : dark;
12
- return {
13
- mainContainer: css`
14
- display: flex;
15
- flex: 1;
16
- min-height: 0;
17
- overflow: hidden;
18
- padding: ${size[2]};
19
- padding-top: 0;
20
- margin-top: ${size[2]};
21
- `,
22
- dragHandle: css`
23
- width: 8px;
24
- background: ${t(colors.gray[300], colors.darkGray[600])};
25
- cursor: col-resize;
26
- position: relative;
27
- transition: all 0.2s ease;
28
- user-select: none;
29
- pointer-events: all;
30
- margin: 0 ${size[1]};
31
- border-radius: 2px;
32
-
33
- &:hover {
34
- background: ${t(colors.blue[600], colors.blue[500])};
35
- margin: 0 ${size[1]};
36
- }
37
-
38
- &.dragging {
39
- background: ${t(colors.blue[700], colors.blue[600])};
40
- margin: 0 ${size[1]};
41
- }
42
-
43
- &::after {
44
- content: '';
45
- position: absolute;
46
- top: 50%;
47
- left: 50%;
48
- transform: translate(-50%, -50%);
49
- width: 2px;
50
- height: 20px;
51
- background: ${t(colors.gray[400], colors.darkGray[400])};
52
- border-radius: 1px;
53
- pointer-events: none;
54
- }
55
-
56
- &:hover::after,
57
- &.dragging::after {
58
- background: ${t(colors.blue[500], colors.blue[300])};
59
- }
60
- `,
61
- leftPanel: css`
62
- background: ${t(colors.gray[100], colors.darkGray[800])};
63
- border-radius: ${border.radius.lg};
64
- border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
65
- display: flex;
66
- flex-direction: column;
67
- overflow: hidden;
68
- min-height: 0;
69
- flex-shrink: 0;
70
- `,
71
- rightPanel: css`
72
- background: ${t(colors.gray[100], colors.darkGray[800])};
73
- border-radius: ${border.radius.lg};
74
- border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
75
- display: flex;
76
- flex-direction: column;
77
- overflow: hidden;
78
- min-height: 0;
79
- flex: 1;
80
- `,
81
- panelHeader: css`
82
- font-size: ${fontSize.md};
83
- font-weight: ${font.weight.bold};
84
- color: ${t(colors.blue[700], colors.blue[400])};
85
- padding: ${size[2]};
86
- border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
87
- background: ${t(colors.gray[100], colors.darkGray[800])};
88
- flex-shrink: 0;
89
- `,
90
- utilList: css`
91
- flex: 1;
92
- overflow-y: auto;
93
- padding: ${size[1]};
94
- min-height: 0;
95
- `,
96
- utilGroup: css`
97
- margin-bottom: ${size[2]};
98
- `,
99
- utilGroupHeader: css`
100
- font-size: ${fontSize.xs};
101
- font-weight: ${font.weight.semibold};
102
- color: ${t(colors.gray[600], colors.gray[400])};
103
- text-transform: uppercase;
104
- letter-spacing: 0.05em;
105
- margin-bottom: ${size[1]};
106
- padding: ${size[1]} ${size[2]};
107
- background: ${t(colors.gray[200], colors.darkGray[700])};
108
- border-radius: ${border.radius.md};
109
- `,
110
- utilRow: css`
111
- display: flex;
112
- justify-content: space-between;
113
- align-items: center;
114
- padding: ${size[2]};
115
- margin-bottom: ${size[1]};
116
- background: ${t(colors.gray[200], colors.darkGray[700])};
117
- border-radius: ${border.radius.md};
118
- cursor: pointer;
119
- transition: all 0.2s ease;
120
- border: 1px solid transparent;
121
-
122
- &:hover {
123
- background: ${t(colors.gray[300], colors.darkGray[600])};
124
- border-color: ${t(colors.gray[400], colors.darkGray[500])};
125
- }
126
- `,
127
- utilRowSelected: css`
128
- background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
129
- border-color: ${t(colors.blue[600], colors.blue[500])};
130
- box-shadow: 0 0 0 1px
131
- ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
132
- `,
133
- utilKey: css`
134
- font-family: ${fontFamily.mono};
135
- font-size: ${fontSize.xs};
136
- color: ${t(colors.gray[900], colors.gray[100])};
137
- flex: 1;
138
- overflow: hidden;
139
- text-overflow: ellipsis;
140
- white-space: nowrap;
141
- `,
142
- utilStatus: css`
143
- font-size: ${fontSize.xs};
144
- color: ${t(colors.gray[600], colors.gray[400])};
145
- text-transform: uppercase;
146
- letter-spacing: 0.05em;
147
- padding: ${size[1]} ${size[1]};
148
- background: ${t(colors.gray[300], colors.darkGray[600])};
149
- border-radius: ${border.radius.sm};
150
- margin-left: ${size[1]};
151
- `,
152
- stateDetails: css`
153
- flex: 1;
154
- overflow-y: auto;
155
- padding: ${size[2]};
156
- min-height: 0;
157
- `,
158
- stateHeader: css`
159
- margin-bottom: ${size[2]};
160
- padding-bottom: ${size[2]};
161
- border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
162
- `,
163
- stateTitle: css`
164
- font-size: ${fontSize.md};
165
- font-weight: ${font.weight.bold};
166
- color: ${t(colors.blue[700], colors.blue[400])};
167
- margin-bottom: ${size[1]};
168
- `,
169
- stateKey: css`
170
- font-family: ${fontFamily.mono};
171
- font-size: ${fontSize.xs};
172
- color: ${t(colors.gray[600], colors.gray[400])};
173
- word-break: break-all;
174
- `,
175
- stateContent: css`
176
- background: ${t(colors.gray[100], colors.darkGray[700])};
177
- border-radius: ${border.radius.md};
178
- padding: ${size[2]};
179
- border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
180
- `,
181
- detailsGrid: css`
182
- display: grid;
183
- grid-template-columns: 1fr;
184
- gap: ${size[2]};
185
- align-items: start;
186
- `,
187
- detailSection: css`
188
- background: ${t(colors.white, colors.darkGray[700])};
189
- border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
190
- border-radius: ${border.radius.md};
191
- padding: ${size[2]};
192
- `,
193
- detailSectionHeader: css`
194
- font-size: ${fontSize.sm};
195
- font-weight: ${font.weight.bold};
196
- color: ${t(colors.gray[800], colors.gray[200])};
197
- margin-bottom: ${size[1]};
198
- text-transform: uppercase;
199
- letter-spacing: 0.04em;
200
- `,
201
- actionsRow: css`
202
- display: flex;
203
- flex-wrap: wrap;
204
- gap: ${size[2]};
205
- `,
206
- actionButton: css`
207
- display: inline-flex;
208
- align-items: center;
209
- gap: ${size[1]};
210
- padding: ${size[1]} ${size[2]};
211
- border-radius: ${border.radius.md};
212
- border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
213
- background: ${t(colors.gray[200], colors.darkGray[600])};
214
- color: ${t(colors.gray[900], colors.gray[100])};
215
- font-size: ${fontSize.xs};
216
- cursor: pointer;
217
- user-select: none;
218
- transition:
219
- background 0.15s,
220
- border-color 0.15s;
221
- &:hover {
222
- background: ${t(colors.gray[300], colors.darkGray[500])};
223
- border-color: ${t(colors.gray[400], colors.darkGray[400])};
224
- }
225
- &:disabled {
226
- opacity: 0.5;
227
- cursor: not-allowed;
228
- &:hover {
229
- background: ${t(colors.gray[200], colors.darkGray[600])};
230
- border-color: ${t(colors.gray[300], colors.darkGray[500])};
231
- }
232
- }
233
- `,
234
- actionDotBlue: css`
235
- width: 6px;
236
- height: 6px;
237
- border-radius: 9999px;
238
- background: ${colors.blue[400]};
239
- `,
240
- actionDotGreen: css`
241
- width: 6px;
242
- height: 6px;
243
- border-radius: 9999px;
244
- background: ${colors.green[400]};
245
- `,
246
- actionDotRed: css`
247
- width: 6px;
248
- height: 6px;
249
- border-radius: 9999px;
250
- background: ${colors.red[400]};
251
- `,
252
- actionDotYellow: css`
253
- width: 6px;
254
- height: 6px;
255
- border-radius: 9999px;
256
- background: ${colors.yellow[400]};
257
- `,
258
- actionDotOrange: css`
259
- width: 6px;
260
- height: 6px;
261
- border-radius: 9999px;
262
- background: ${colors.pink[400]};
263
- `,
264
- actionDotPurple: css`
265
- width: 6px;
266
- height: 6px;
267
- border-radius: 9999px;
268
- background: ${colors.purple[400]};
269
- `,
270
- infoGrid: css`
271
- display: grid;
272
- grid-template-columns: auto 1fr;
273
- gap: ${size[1]};
274
- row-gap: ${size[1]};
275
- align-items: center;
276
- `,
277
- infoLabel: css`
278
- color: ${t(colors.gray[600], colors.gray[400])};
279
- font-size: ${fontSize.xs};
280
- text-transform: uppercase;
281
- letter-spacing: 0.05em;
282
- `,
283
- infoValueMono: css`
284
- font-family: ${fontFamily.mono};
285
- font-size: ${fontSize.xs};
286
- color: ${t(colors.gray[900], colors.gray[100])};
287
- word-break: break-all;
288
- `,
289
- noSelection: css`
290
- flex: 1;
291
- display: flex;
292
- align-items: center;
293
- justify-content: center;
294
- color: ${t(colors.gray[500], colors.gray[500])};
295
- font-style: italic;
296
- text-align: center;
297
- padding: ${size[4]};
298
- `,
299
- sectionContainer: css`
300
- display: flex;
301
- flex-wrap: wrap;
302
- gap: ${size[4]};
303
- `,
304
- section: css`
305
- background: ${t(colors.gray[100], colors.darkGray[800])};
306
- border-radius: ${border.radius.lg};
307
- box-shadow: ${tokens.shadow.md(t(colors.gray[400] + alpha[80], colors.black + alpha[80]))};
308
- padding: ${size[4]};
309
- margin-bottom: ${size[4]};
310
- border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
311
- min-width: 0;
312
- max-width: 33%;
313
- max-height: fit-content;
314
- `,
315
- sectionHeader: css`
316
- font-size: ${fontSize.lg};
317
- font-weight: ${font.weight.bold};
318
- margin-bottom: ${size[2]};
319
- color: ${t(colors.blue[600], colors.blue[400])};
320
- letter-spacing: 0.01em;
321
- display: flex;
322
- align-items: center;
323
- gap: ${size[2]};
324
- `,
325
- sectionEmpty: css`
326
- color: ${t(colors.gray[500], colors.gray[500])};
327
- font-size: ${fontSize.sm};
328
- font-style: italic;
329
- margin: ${size[2]} 0;
330
- `,
331
- instanceList: css`
332
- display: flex;
333
- flex-direction: column;
334
- gap: ${size[2]};
335
- background: ${t(colors.gray[200], colors.darkGray[700])};
336
- border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
337
- `,
338
- instanceCard: css`
339
- background: ${t(colors.gray[200], colors.darkGray[700])};
340
- border-radius: ${border.radius.md};
341
- padding: ${size[3]};
342
- border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
343
- font-size: ${fontSize.sm};
344
- color: ${t(colors.gray[900], colors.gray[100])};
345
- font-family: ${fontFamily.mono};
346
- overflow-x: auto;
347
- transition:
348
- box-shadow 0.3s,
349
- background 0.3s;
350
- `
351
- };
352
- };
353
- function useStyles() {
354
- const { theme } = useTheme();
355
- const [styles, setStyles] = createSignal(stylesFactory(theme()));
356
- createEffect(() => {
357
- setStyles(stylesFactory(theme()));
358
- });
359
- return styles;
360
- }
361
-
362
- //#endregion
363
- export { useStyles };
364
- //# sourceMappingURL=use-styles.js.map