@tanstack/devtools 0.2.1 → 0.3.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/dist/cjs/components/trigger.cjs +2 -2
- package/dist/cjs/components/trigger.cjs.map +1 -1
- package/dist/cjs/styles/tokens.cjs +2 -8
- package/dist/cjs/styles/tokens.cjs.map +1 -1
- package/dist/cjs/styles/use-styles.cjs +0 -177
- package/dist/cjs/styles/use-styles.cjs.map +1 -1
- package/dist/cjs/styles/use-styles.d.cts +0 -17
- package/dist/cjs/tabs/settings-tab.cjs +8 -10
- package/dist/cjs/tabs/settings-tab.cjs.map +1 -1
- package/dist/esm/components/trigger.js +1 -1
- package/dist/esm/components/trigger.js.map +1 -1
- package/dist/esm/styles/tokens.js +2 -8
- package/dist/esm/styles/tokens.js.map +1 -1
- package/dist/esm/styles/use-styles.d.ts +0 -17
- package/dist/esm/styles/use-styles.js +0 -177
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/dist/esm/tabs/settings-tab.js +1 -3
- package/dist/esm/tabs/settings-tab.js.map +1 -1
- package/package.json +3 -2
- package/src/components/trigger.tsx +1 -1
- package/src/styles/use-styles.ts +0 -177
- package/src/tabs/settings-tab.tsx +1 -3
- package/dist/cjs/components/checkbox.cjs +0 -55
- package/dist/cjs/components/checkbox.cjs.map +0 -1
- package/dist/cjs/components/checkbox.d.cts +0 -8
- package/dist/cjs/components/input.cjs +0 -57
- package/dist/cjs/components/input.cjs.map +0 -1
- package/dist/cjs/components/input.d.cts +0 -10
- package/dist/cjs/components/logo.cjs +0 -95
- package/dist/cjs/components/logo.cjs.map +0 -1
- package/dist/cjs/components/logo.d.cts +0 -1
- package/dist/cjs/components/select.cjs +0 -59
- package/dist/cjs/components/select.cjs.map +0 -1
- package/dist/cjs/components/select.d.cts +0 -13
- package/dist/esm/components/checkbox.d.ts +0 -8
- package/dist/esm/components/checkbox.js +0 -55
- package/dist/esm/components/checkbox.js.map +0 -1
- package/dist/esm/components/input.d.ts +0 -10
- package/dist/esm/components/input.js +0 -57
- package/dist/esm/components/input.js.map +0 -1
- package/dist/esm/components/logo.d.ts +0 -1
- package/dist/esm/components/logo.js +0 -95
- package/dist/esm/components/logo.js.map +0 -1
- package/dist/esm/components/select.d.ts +0 -13
- package/dist/esm/components/select.js +0 -59
- package/dist/esm/components/select.js.map +0 -1
- package/src/components/checkbox.tsx +0 -43
- package/src/components/input.tsx +0 -42
- package/src/components/logo.tsx +0 -820
- package/src/components/select.tsx +0 -50
|
@@ -8,8 +8,6 @@ const tokens = {
|
|
|
8
8
|
100: "#f2f4f7",
|
|
9
9
|
300: "#d0d5dd",
|
|
10
10
|
400: "#98a2b3",
|
|
11
|
-
500: "#667085",
|
|
12
|
-
600: "#475467",
|
|
13
11
|
700: "#344054"
|
|
14
12
|
},
|
|
15
13
|
blue: {
|
|
@@ -24,8 +22,7 @@ const tokens = {
|
|
|
24
22
|
}
|
|
25
23
|
},
|
|
26
24
|
alpha: {
|
|
27
|
-
90: "e5"
|
|
28
|
-
20: "33"
|
|
25
|
+
90: "e5"
|
|
29
26
|
},
|
|
30
27
|
font: {
|
|
31
28
|
size: {
|
|
@@ -33,8 +30,7 @@ const tokens = {
|
|
|
33
30
|
sm: "calc(var(--tsrd-font-size) * 0.875)"
|
|
34
31
|
},
|
|
35
32
|
fontFamily: {
|
|
36
|
-
sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif"
|
|
37
|
-
mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
|
|
33
|
+
sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif"
|
|
38
34
|
}
|
|
39
35
|
},
|
|
40
36
|
border: {
|
|
@@ -43,10 +39,8 @@ const tokens = {
|
|
|
43
39
|
}
|
|
44
40
|
},
|
|
45
41
|
size: {
|
|
46
|
-
0.5: "calc(var(--tsrd-font-size) * 0.125)",
|
|
47
42
|
2: "calc(var(--tsrd-font-size) * 0.5)",
|
|
48
43
|
10: "calc(var(--tsrd-font-size) * 2.5)",
|
|
49
|
-
12: "calc(var(--tsrd-font-size) * 3)",
|
|
50
44
|
48: "calc(var(--tsrd-font-size) * 12)"
|
|
51
45
|
}
|
|
52
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","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"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,
|
|
1
|
+
{"version":3,"file":"tokens.js","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"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MAGL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IAcA,KAAK;AAAA,MAMH,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,EAUN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}
|
|
@@ -5,7 +5,6 @@ export declare function useStyles(): Accessor<{
|
|
|
5
5
|
devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
|
|
6
6
|
devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
|
|
7
7
|
devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
|
|
8
|
-
logo: string;
|
|
9
8
|
devtoolsPanel: string;
|
|
10
9
|
dragHandle: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
|
|
11
10
|
mainCloseBtn: string;
|
|
@@ -18,22 +17,6 @@ export declare function useStyles(): Accessor<{
|
|
|
18
17
|
pluginsTabSidebar: string;
|
|
19
18
|
pluginName: string;
|
|
20
19
|
pluginsTabContent: string;
|
|
21
|
-
selectWrapper: string;
|
|
22
|
-
selectContainer: string;
|
|
23
|
-
selectLabel: string;
|
|
24
|
-
selectDescription: string;
|
|
25
|
-
select: string;
|
|
26
|
-
inputWrapper: string;
|
|
27
|
-
inputContainer: string;
|
|
28
|
-
inputLabel: string;
|
|
29
|
-
inputDescription: string;
|
|
30
|
-
input: string;
|
|
31
|
-
checkboxWrapper: string;
|
|
32
|
-
checkboxContainer: string;
|
|
33
|
-
checkboxLabelContainer: string;
|
|
34
|
-
checkbox: string;
|
|
35
|
-
checkboxLabel: string;
|
|
36
|
-
checkboxDescription: string;
|
|
37
20
|
settingsContainer: string;
|
|
38
21
|
settingsSection: string;
|
|
39
22
|
sectionTitle: string;
|
|
@@ -48,21 +48,6 @@ const stylesFactory = () => {
|
|
|
48
48
|
transform: translateY(${height}px);
|
|
49
49
|
`;
|
|
50
50
|
},
|
|
51
|
-
logo: css`
|
|
52
|
-
cursor: pointer;
|
|
53
|
-
display: flex;
|
|
54
|
-
flex-direction: column;
|
|
55
|
-
background-color: transparent;
|
|
56
|
-
border: none;
|
|
57
|
-
width: ${size[12]};
|
|
58
|
-
height: ${size[12]};
|
|
59
|
-
font-family: ${fontFamily.sans};
|
|
60
|
-
gap: ${tokens.size[0.5]};
|
|
61
|
-
padding: 0px;
|
|
62
|
-
&:hover {
|
|
63
|
-
opacity: 0.7;
|
|
64
|
-
}
|
|
65
|
-
`,
|
|
66
51
|
devtoolsPanel: css`
|
|
67
52
|
display: flex;
|
|
68
53
|
font-size: ${fontSize.sm};
|
|
@@ -249,168 +234,6 @@ const stylesFactory = () => {
|
|
|
249
234
|
height: 100%;
|
|
250
235
|
overflow-y: auto;
|
|
251
236
|
`,
|
|
252
|
-
selectWrapper: css`
|
|
253
|
-
width: 100%;
|
|
254
|
-
max-width: 300px;
|
|
255
|
-
display: flex;
|
|
256
|
-
flex-direction: column;
|
|
257
|
-
gap: 0.375rem;
|
|
258
|
-
`,
|
|
259
|
-
selectContainer: css`
|
|
260
|
-
width: 100%;
|
|
261
|
-
`,
|
|
262
|
-
selectLabel: css`
|
|
263
|
-
font-size: 0.875rem;
|
|
264
|
-
font-weight: 500;
|
|
265
|
-
color: ${colors.gray[100]};
|
|
266
|
-
`,
|
|
267
|
-
selectDescription: css`
|
|
268
|
-
font-size: 0.8rem;
|
|
269
|
-
color: ${colors.gray[400]};
|
|
270
|
-
margin: 0;
|
|
271
|
-
line-height: 1.3;
|
|
272
|
-
`,
|
|
273
|
-
select: css`
|
|
274
|
-
appearance: none;
|
|
275
|
-
width: 100%;
|
|
276
|
-
padding: 0.75rem 3rem 0.75rem 0.75rem;
|
|
277
|
-
border-radius: 0.5rem;
|
|
278
|
-
background-color: ${colors.darkGray[800]};
|
|
279
|
-
color: ${colors.gray[100]};
|
|
280
|
-
border: 1px solid ${colors.gray[700]};
|
|
281
|
-
font-size: 0.875rem;
|
|
282
|
-
transition: all 0.2s ease;
|
|
283
|
-
cursor: pointer;
|
|
284
|
-
|
|
285
|
-
/* Custom arrow */
|
|
286
|
-
background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
|
|
287
|
-
background-repeat: no-repeat;
|
|
288
|
-
background-position: right 0.75rem center;
|
|
289
|
-
background-size: 1.25rem;
|
|
290
|
-
|
|
291
|
-
&:hover {
|
|
292
|
-
border-color: ${colors.gray[600]};
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
&:focus {
|
|
296
|
-
outline: none;
|
|
297
|
-
border-color: ${colors.purple[400]};
|
|
298
|
-
box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
|
|
299
|
-
}
|
|
300
|
-
`,
|
|
301
|
-
inputWrapper: css`
|
|
302
|
-
width: 100%;
|
|
303
|
-
max-width: 300px;
|
|
304
|
-
display: flex;
|
|
305
|
-
flex-direction: column;
|
|
306
|
-
gap: 0.375rem;
|
|
307
|
-
`,
|
|
308
|
-
inputContainer: css`
|
|
309
|
-
width: 100%;
|
|
310
|
-
`,
|
|
311
|
-
inputLabel: css`
|
|
312
|
-
font-size: 0.875rem;
|
|
313
|
-
font-weight: 500;
|
|
314
|
-
color: ${colors.gray[100]};
|
|
315
|
-
`,
|
|
316
|
-
inputDescription: css`
|
|
317
|
-
font-size: 0.8rem;
|
|
318
|
-
color: ${colors.gray[400]};
|
|
319
|
-
margin: 0;
|
|
320
|
-
line-height: 1.3;
|
|
321
|
-
`,
|
|
322
|
-
input: css`
|
|
323
|
-
appearance: none;
|
|
324
|
-
width: 100%;
|
|
325
|
-
padding: 0.75rem;
|
|
326
|
-
border-radius: 0.5rem;
|
|
327
|
-
background-color: ${colors.darkGray[800]};
|
|
328
|
-
color: ${colors.gray[100]};
|
|
329
|
-
border: 1px solid ${colors.gray[700]};
|
|
330
|
-
font-size: 0.875rem;
|
|
331
|
-
font-family: ${fontFamily.mono};
|
|
332
|
-
transition: all 0.2s ease;
|
|
333
|
-
|
|
334
|
-
&::placeholder {
|
|
335
|
-
color: ${colors.gray[500]};
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
&:hover {
|
|
339
|
-
border-color: ${colors.gray[600]};
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
&:focus {
|
|
343
|
-
outline: none;
|
|
344
|
-
border-color: ${colors.purple[400]};
|
|
345
|
-
box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
|
|
346
|
-
}
|
|
347
|
-
`,
|
|
348
|
-
checkboxWrapper: css`
|
|
349
|
-
display: flex;
|
|
350
|
-
align-items: flex-start;
|
|
351
|
-
gap: 0.75rem;
|
|
352
|
-
cursor: pointer;
|
|
353
|
-
user-select: none;
|
|
354
|
-
padding: 0.5rem;
|
|
355
|
-
border-radius: 0.5rem;
|
|
356
|
-
transition: background-color 0.2s ease;
|
|
357
|
-
|
|
358
|
-
&:hover {
|
|
359
|
-
background-color: ${colors.darkGray[800]};
|
|
360
|
-
}
|
|
361
|
-
`,
|
|
362
|
-
checkboxContainer: css`
|
|
363
|
-
width: 100%;
|
|
364
|
-
`,
|
|
365
|
-
checkboxLabelContainer: css`
|
|
366
|
-
display: flex;
|
|
367
|
-
flex-direction: column;
|
|
368
|
-
gap: 0.25rem;
|
|
369
|
-
flex: 1;
|
|
370
|
-
`,
|
|
371
|
-
checkbox: css`
|
|
372
|
-
appearance: none;
|
|
373
|
-
width: 1.25rem;
|
|
374
|
-
height: 1.25rem;
|
|
375
|
-
border: 2px solid ${colors.gray[700]};
|
|
376
|
-
border-radius: 0.375rem;
|
|
377
|
-
background-color: ${colors.darkGray[800]};
|
|
378
|
-
display: grid;
|
|
379
|
-
place-items: center;
|
|
380
|
-
transition: all 0.2s ease;
|
|
381
|
-
flex-shrink: 0;
|
|
382
|
-
margin-top: 0.125rem;
|
|
383
|
-
|
|
384
|
-
&:hover {
|
|
385
|
-
border-color: ${colors.purple[400]};
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
&:checked {
|
|
389
|
-
background-color: ${colors.purple[500]};
|
|
390
|
-
border-color: ${colors.purple[500]};
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
&:checked::after {
|
|
394
|
-
content: '';
|
|
395
|
-
width: 0.4rem;
|
|
396
|
-
height: 0.6rem;
|
|
397
|
-
border: solid white;
|
|
398
|
-
border-width: 0 2px 2px 0;
|
|
399
|
-
transform: rotate(45deg);
|
|
400
|
-
margin-top: -3px;
|
|
401
|
-
}
|
|
402
|
-
`,
|
|
403
|
-
checkboxLabel: css`
|
|
404
|
-
color: ${colors.gray[100]};
|
|
405
|
-
font-size: 0.875rem;
|
|
406
|
-
font-weight: 500;
|
|
407
|
-
line-height: 1.4;
|
|
408
|
-
`,
|
|
409
|
-
checkboxDescription: css`
|
|
410
|
-
color: ${colors.gray[400]};
|
|
411
|
-
font-size: 0.8rem;
|
|
412
|
-
line-height: 1.3;
|
|
413
|
-
`,
|
|
414
237
|
settingsContainer: css`
|
|
415
238
|
padding: 1.5rem;
|
|
416
239
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily, size: fontSize } = font\n const css = goober.css\n\n return {\n devtoolsPanelContainer: (\n panelLocation: TanStackDevtoolsConfig['panelLocation'],\n ) => css`\n direction: ltr;\n position: fixed;\n overflow-y: hidden;\n overflow-x: hidden;\n ${panelLocation}: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n\n max-height: 90%;\n border-top: 1px solid ${colors.gray[700]};\n transform-origin: top;\n `,\n devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n return css`\n visibility: ${isOpen ? 'visible' : 'hidden'};\n height: ${isOpen ? 'auto' : '0'};\n `\n },\n devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n if (isResizing()) {\n return css`\n transition: none;\n `\n }\n\n return css`\n transition: all 0.4s ease;\n `\n },\n devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n if (isOpen) {\n return css`\n pointer-events: auto;\n transform: translateY(0);\n `\n }\n return css`\n pointer-events: none;\n transform: translateY(${height}px);\n `\n },\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: ${size[12]};\n height: ${size[12]};\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n devtoolsPanel: css`\n display: flex;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n background-color: ${colors.darkGray[700]};\n color: ${colors.gray[300]};\n width: w-screen;\n flex-direction: row;\n overflow-x: hidden;\n overflow-y: hidden;\n height: 100%;\n `,\n dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n position: absolute;\n left: 0;\n ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n width: 100%;\n height: 4px;\n cursor: row-resize;\n user-select: none;\n z-index: 100000;\n &:hover {\n background-color: ${colors.purple[400]}${alpha[90]};\n }\n `,\n\n mainCloseBtn: css`\n background: transparent;\n position: fixed;\n z-index: 99999;\n display: inline-flex;\n width: fit-content;\n cursor: pointer;\n appearance: none;\n border: 0;\n align-items: center;\n padding: 0;\n font-size: ${font.size.xs};\n cursor: pointer;\n transition: all 0.25s ease-out;\n &:hide-until-hover {\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n }\n &:hide-until-hover:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n &:focus-visible {\n outline-offset: 2px;\n border-radius: ${border.radius.full};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n const base = css`\n ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n ${position === 'middle-left'\n ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'middle-right'\n ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'bottom-left'\n ? `bottom: ${size[2]}; left: ${size[2]};`\n : ''}\n ${position === 'bottom-right'\n ? `bottom: ${size[2]}; right: ${size[2]};`\n : ''}\n `\n return base\n },\n mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n if (!isOpen) {\n return hideUntilHover\n ? css`\n opacity: 0;\n\n &:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n `\n : css`\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n `\n }\n return css`\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n `\n },\n tabContainer: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n background-color: ${colors.darkGray[800]};\n border-right: 1px solid ${colors.gray[700]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n position: relative;\n width: ${size[10]};\n `,\n\n tab: css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: ${size[10]};\n cursor: pointer;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n color: ${colors.gray[300]};\n background-color: transparent;\n border: none;\n transition: all 0.2s ease-in-out;\n border-left: 2px solid transparent;\n &:hover:not(.close):not(.active) {\n background-color: ${colors.gray[700]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.active {\n background-color: ${colors.purple[500]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.close {\n margin-top: auto;\n &:hover {\n background-color: ${colors.gray[700]};\n }\n &:hover {\n color: ${colors.red[500]};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.2;\n pointer-events: none;\n }\n &.disabled:hover {\n background-color: transparent;\n color: ${colors.gray[300]};\n }\n `,\n tabContent: css`\n transition: all 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n `,\n pluginsTabPanel: css`\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n overflow: hidden;\n `,\n pluginsTabSidebar: css`\n width: ${size[48]};\n background-color: ${colors.darkGray[800]};\n border-right: 1px solid ${colors.gray[700]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n overflow-y: auto;\n `,\n pluginName: css`\n font-size: ${fontSize.xs};\n font-family: ${fontFamily.sans};\n color: ${colors.gray[300]};\n padding: ${size[2]};\n cursor: pointer;\n text-align: center;\n transition: all 0.2s ease-in-out;\n &:hover {\n background-color: ${colors.gray[700]};\n color: ${colors.gray[100]};\n padding: ${size[2]};\n }\n &.active {\n background-color: ${colors.purple[500]};\n color: ${colors.gray[100]};\n }\n `,\n pluginsTabContent: css`\n width: 100%;\n height: 100%;\n overflow-y: auto;\n `,\n selectWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n selectContainer: css`\n width: 100%;\n `,\n selectLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${colors.gray[100]};\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n `,\n select: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ${colors.darkGray[800]};\n color: ${colors.gray[100]};\n border: 1px solid ${colors.gray[700]};\n font-size: 0.875rem;\n transition: all 0.2s ease;\n cursor: pointer;\n\n /* Custom arrow */\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.25rem;\n\n &:hover {\n border-color: ${colors.gray[600]};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n inputContainer: css`\n width: 100%;\n `,\n inputLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${colors.gray[100]};\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n `,\n input: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: ${colors.darkGray[800]};\n color: ${colors.gray[100]};\n border: 1px solid ${colors.gray[700]};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${colors.gray[500]};\n }\n\n &:hover {\n border-color: ${colors.gray[600]};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${colors.darkGray[800]};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid ${colors.gray[700]};\n border-radius: 0.375rem;\n background-color: ${colors.darkGray[800]};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${colors.purple[400]};\n }\n\n &:checked {\n background-color: ${colors.purple[500]};\n border-color: ${colors.purple[500]};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${colors.gray[100]};\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n `,\n checkboxDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.8rem;\n line-height: 1.3;\n `,\n settingsContainer: css`\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n background-color: ${colors.darkGray[700]};\n `,\n settingsSection: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${colors.darkGray[800]};\n border: 1px solid ${colors.gray[700]};\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n sectionTitle: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${colors.gray[100]};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${colors.gray[700]};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n `,\n sectionIcon: css`\n color: ${colors.purple[400]};\n `,\n sectionDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n `,\n settingsGroup: css`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n `,\n conditionalSetting: css`\n margin-left: 1.5rem;\n padding-left: 1rem;\n border-left: 2px solid ${colors.purple[400]};\n background-color: ${colors.darkGray[800]};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily, size: fontSize } = font\n const css = goober.css\n\n return {\n devtoolsPanelContainer: (\n panelLocation: TanStackDevtoolsConfig['panelLocation'],\n ) => css`\n direction: ltr;\n position: fixed;\n overflow-y: hidden;\n overflow-x: hidden;\n ${panelLocation}: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n\n max-height: 90%;\n border-top: 1px solid ${colors.gray[700]};\n transform-origin: top;\n `,\n devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n return css`\n visibility: ${isOpen ? 'visible' : 'hidden'};\n height: ${isOpen ? 'auto' : '0'};\n `\n },\n devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n if (isResizing()) {\n return css`\n transition: none;\n `\n }\n\n return css`\n transition: all 0.4s ease;\n `\n },\n devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n if (isOpen) {\n return css`\n pointer-events: auto;\n transform: translateY(0);\n `\n }\n return css`\n pointer-events: none;\n transform: translateY(${height}px);\n `\n },\n devtoolsPanel: css`\n display: flex;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n background-color: ${colors.darkGray[700]};\n color: ${colors.gray[300]};\n width: w-screen;\n flex-direction: row;\n overflow-x: hidden;\n overflow-y: hidden;\n height: 100%;\n `,\n dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n position: absolute;\n left: 0;\n ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n width: 100%;\n height: 4px;\n cursor: row-resize;\n user-select: none;\n z-index: 100000;\n &:hover {\n background-color: ${colors.purple[400]}${alpha[90]};\n }\n `,\n\n mainCloseBtn: css`\n background: transparent;\n position: fixed;\n z-index: 99999;\n display: inline-flex;\n width: fit-content;\n cursor: pointer;\n appearance: none;\n border: 0;\n align-items: center;\n padding: 0;\n font-size: ${font.size.xs};\n cursor: pointer;\n transition: all 0.25s ease-out;\n &:hide-until-hover {\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n }\n &:hide-until-hover:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n &:focus-visible {\n outline-offset: 2px;\n border-radius: ${border.radius.full};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n const base = css`\n ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n ${position === 'middle-left'\n ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'middle-right'\n ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'bottom-left'\n ? `bottom: ${size[2]}; left: ${size[2]};`\n : ''}\n ${position === 'bottom-right'\n ? `bottom: ${size[2]}; right: ${size[2]};`\n : ''}\n `\n return base\n },\n mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n if (!isOpen) {\n return hideUntilHover\n ? css`\n opacity: 0;\n\n &:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n `\n : css`\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n `\n }\n return css`\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n `\n },\n tabContainer: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n background-color: ${colors.darkGray[800]};\n border-right: 1px solid ${colors.gray[700]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n position: relative;\n width: ${size[10]};\n `,\n\n tab: css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: ${size[10]};\n cursor: pointer;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n color: ${colors.gray[300]};\n background-color: transparent;\n border: none;\n transition: all 0.2s ease-in-out;\n border-left: 2px solid transparent;\n &:hover:not(.close):not(.active) {\n background-color: ${colors.gray[700]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.active {\n background-color: ${colors.purple[500]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.close {\n margin-top: auto;\n &:hover {\n background-color: ${colors.gray[700]};\n }\n &:hover {\n color: ${colors.red[500]};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.2;\n pointer-events: none;\n }\n &.disabled:hover {\n background-color: transparent;\n color: ${colors.gray[300]};\n }\n `,\n tabContent: css`\n transition: all 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n `,\n pluginsTabPanel: css`\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n overflow: hidden;\n `,\n pluginsTabSidebar: css`\n width: ${size[48]};\n background-color: ${colors.darkGray[800]};\n border-right: 1px solid ${colors.gray[700]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n overflow-y: auto;\n `,\n pluginName: css`\n font-size: ${fontSize.xs};\n font-family: ${fontFamily.sans};\n color: ${colors.gray[300]};\n padding: ${size[2]};\n cursor: pointer;\n text-align: center;\n transition: all 0.2s ease-in-out;\n &:hover {\n background-color: ${colors.gray[700]};\n color: ${colors.gray[100]};\n padding: ${size[2]};\n }\n &.active {\n background-color: ${colors.purple[500]};\n color: ${colors.gray[100]};\n }\n `,\n pluginsTabContent: css`\n width: 100%;\n height: 100%;\n overflow-y: auto;\n `,\n\n settingsContainer: css`\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n background-color: ${colors.darkGray[700]};\n `,\n settingsSection: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${colors.darkGray[800]};\n border: 1px solid ${colors.gray[700]};\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n sectionTitle: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${colors.gray[100]};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${colors.gray[700]};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n `,\n sectionIcon: css`\n color: ${colors.purple[400]};\n `,\n sectionDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n `,\n settingsGroup: css`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n `,\n conditionalSetting: css`\n margin-left: 1.5rem;\n padding-left: 1rem;\n border-left: 2px solid ${colors.purple[400]};\n background-color: ${colors.darkGray[800]};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { template, insert, createComponent, effect, className, setAttribute } from "solid-js/web";
|
|
2
2
|
import { Show } from "solid-js";
|
|
3
|
-
import { Input } from "
|
|
4
|
-
import { Select } from "../components/select.js";
|
|
3
|
+
import { Checkbox, Input, Select } from "@tanstack/devtools-ui";
|
|
5
4
|
import { useDevtoolsSettings } from "../context/use-devtools-context.js";
|
|
6
5
|
import { uppercaseFirstLetter } from "../utils/sanitize.js";
|
|
7
|
-
import { Checkbox } from "../components/checkbox.js";
|
|
8
6
|
import { useStyles } from "../styles/use-styles.js";
|
|
9
7
|
var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><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"></path><circle cx=12 cy=12 r=3></circle></svg>General</h3><p>Configure general behavior of the devtools panel.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12></line></svg>URL Configuration</h3><p>Control when devtools are available based on URL parameters.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2></rect></svg>Keyboard</h3><p>Customize keyboard shortcuts for quick access.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><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"></path><circle cx=12 cy=10 r=3></circle></svg>Position</h3><p>Adjust the position of the trigger button and devtools panel.</p><div><div>`);
|
|
10
8
|
const SettingsTab = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { Input } from '../components/input'\nimport { Select } from '../components/select'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { Checkbox } from '../components/checkbox'\nimport { useStyles } from '../styles/use-styles'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n\n return (\n <div class={styles().settingsContainer}>\n {/* General Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class={styles().sectionIcon}\n >\n <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\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n General\n </h3>\n <p class={styles().sectionDescription}>\n Configure general behavior of the devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </div>\n\n {/* URL Flag Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n </svg>\n URL Configuration\n </h3>\n <p class={styles().sectionDescription}>\n Control when devtools are available based on URL parameters.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </div>\n\n {/* Keyboard Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M10 8h.01\" />\n <path d=\"M12 12h.01\" />\n <path d=\"M14 8h.01\" />\n <path d=\"M16 12h.01\" />\n <path d=\"M18 8h.01\" />\n <path d=\"M6 8h.01\" />\n <path d=\"M7 16h10\" />\n <path d=\"M8 12h.01\" />\n <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n </svg>\n Keyboard\n </h3>\n <p class={styles().sectionDescription}>\n Customize keyboard shortcuts for quick access.\n </p>\n <div class={styles().settingsGroup}>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')\"\n placeholder=\"Ctrl+Shift+D\"\n value={settings().openHotkey.join('+')}\n onChange={(e) =>\n setSettings({\n openHotkey: e\n .split('+')\n .map((key) => uppercaseFirstLetter(key))\n .filter(Boolean),\n })\n }\n />\n </div>\n </div>\n\n {/* Position Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <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\" />\n <circle cx=\"12\" cy=\"10\" r=\"3\" />\n </svg>\n Position\n </h3>\n <p class={styles().sectionDescription}>\n Adjust the position of the trigger button and devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$12","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","openHotkey","join","split","map","key","uppercaseFirstLetter","filter","Boolean","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","_v$22","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { Checkbox, Input, Select } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n\n return (\n <div class={styles().settingsContainer}>\n {/* General Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class={styles().sectionIcon}\n >\n <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\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n General\n </h3>\n <p class={styles().sectionDescription}>\n Configure general behavior of the devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </div>\n\n {/* URL Flag Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n </svg>\n URL Configuration\n </h3>\n <p class={styles().sectionDescription}>\n Control when devtools are available based on URL parameters.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </div>\n\n {/* Keyboard Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M10 8h.01\" />\n <path d=\"M12 12h.01\" />\n <path d=\"M14 8h.01\" />\n <path d=\"M16 12h.01\" />\n <path d=\"M18 8h.01\" />\n <path d=\"M6 8h.01\" />\n <path d=\"M7 16h10\" />\n <path d=\"M8 12h.01\" />\n <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n </svg>\n Keyboard\n </h3>\n <p class={styles().sectionDescription}>\n Customize keyboard shortcuts for quick access.\n </p>\n <div class={styles().settingsGroup}>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')\"\n placeholder=\"Ctrl+Shift+D\"\n value={settings().openHotkey.join('+')}\n onChange={(e) =>\n setSettings({\n openHotkey: e\n .split('+')\n .map((key) => uppercaseFirstLetter(key))\n .filter(Boolean),\n })\n }\n />\n </div>\n </div>\n\n {/* Position Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <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\" />\n <circle cx=\"12\" cy=\"10\" r=\"3\" />\n </svg>\n Position\n </h3>\n <p class={styles().sectionDescription}>\n Adjust the position of the trigger button and devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$12","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","openHotkey","join","split","map","key","uppercaseFirstLetter","filter","Boolean","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","_v$22","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","undefined"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
"clsx": "^2.1.1",
|
|
48
48
|
"goober": "^2.1.16",
|
|
49
49
|
"solid-js": "^1.9.7",
|
|
50
|
-
"@tanstack/devtools-event-bus": "0.2.1"
|
|
50
|
+
"@tanstack/devtools-event-bus": "0.2.1",
|
|
51
|
+
"@tanstack/devtools-ui": "0.2.2"
|
|
51
52
|
},
|
|
52
53
|
"peerDependencies": {
|
|
53
54
|
"solid-js": ">=1.9.7"
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { createMemo } from 'solid-js'
|
|
2
2
|
import clsx from 'clsx'
|
|
3
|
+
import { TanStackLogo } from '@tanstack/devtools-ui'
|
|
3
4
|
import { useDevtoolsSettings } from '../context/use-devtools-context'
|
|
4
5
|
import { useStyles } from '../styles/use-styles'
|
|
5
|
-
import { TanStackLogo } from './logo'
|
|
6
6
|
import type { Accessor } from 'solid-js'
|
|
7
7
|
|
|
8
8
|
export const Trigger = ({
|