@tanstack/devtools-ui 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/button.cjs +23 -0
- package/dist/cjs/components/button.cjs.map +1 -0
- package/dist/cjs/components/button.d.cts +11 -0
- package/dist/cjs/components/tag.cjs +40 -0
- package/dist/cjs/components/tag.cjs.map +1 -0
- package/dist/cjs/components/tag.d.cts +7 -0
- package/dist/cjs/components/tree.cjs +180 -117
- package/dist/cjs/components/tree.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +2 -0
- package/dist/cjs/styles/tokens.cjs +143 -7
- package/dist/cjs/styles/tokens.cjs.map +1 -1
- package/dist/cjs/styles/use-styles.cjs +176 -1
- package/dist/cjs/styles/use-styles.cjs.map +1 -1
- package/dist/cjs/styles/use-styles.d.cts +15 -0
- package/dist/esm/components/button.d.ts +11 -0
- package/dist/esm/components/button.js +23 -0
- package/dist/esm/components/button.js.map +1 -0
- package/dist/esm/components/tag.d.ts +7 -0
- package/dist/esm/components/tag.js +40 -0
- package/dist/esm/components/tag.js.map +1 -0
- package/dist/esm/components/tree.js +182 -119
- package/dist/esm/components/tree.js.map +1 -1
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/styles/tokens.js +143 -7
- package/dist/esm/styles/tokens.js.map +1 -1
- package/dist/esm/styles/use-styles.d.ts +15 -0
- package/dist/esm/styles/use-styles.js +176 -1
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/package.json +2 -1
- package/src/components/button.tsx +42 -0
- package/src/components/tag.tsx +22 -0
- package/src/components/tree.tsx +125 -92
- package/src/index.ts +2 -0
- package/src/styles/use-styles.ts +181 -1
|
@@ -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,MASR,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAGL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAKJ,KAAK;AAAA,IAOP;AAAA,IACA,OAAO;AAAA,MAML,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,IAMP;AAAA,IACA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,IAcA,MAAM;AAAA,MAMJ,KAAK;AAAA,IAMP;AAAA,EAcF;AAAA,EACA,OAAO;AAAA,IASL,IAAI;AAAA,EAGN;AAAA,EACA,MAAM;AAAA,IA6CJ,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAuBF,MAAM;AAAA,IAGJ,KAAK;AAAA,IAkBL,IAAI;AAAA,EAkBN;AAiCF;"}
|
|
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":"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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { tokens } from './tokens.js';
|
|
2
|
+
import { ButtonVariant } from '../components/button.js';
|
|
1
3
|
export declare function useStyles(): import('solid-js').Accessor<{
|
|
2
4
|
logo: string;
|
|
3
5
|
selectWrapper: string;
|
|
@@ -16,7 +18,20 @@ export declare function useStyles(): import('solid-js').Accessor<{
|
|
|
16
18
|
checkbox: string;
|
|
17
19
|
checkboxLabel: string;
|
|
18
20
|
checkboxDescription: string;
|
|
21
|
+
button: {
|
|
22
|
+
base: string;
|
|
23
|
+
variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean): string;
|
|
24
|
+
};
|
|
25
|
+
tag: {
|
|
26
|
+
dot: (color: keyof typeof tokens.colors) => string;
|
|
27
|
+
base: string;
|
|
28
|
+
label: string;
|
|
29
|
+
count: string;
|
|
30
|
+
};
|
|
19
31
|
tree: {
|
|
32
|
+
collapsible: string;
|
|
33
|
+
valueCollapsed: string;
|
|
34
|
+
valueFunction: string;
|
|
20
35
|
valueString: string;
|
|
21
36
|
valueNumber: string;
|
|
22
37
|
valueBoolean: string;
|
|
@@ -1,10 +1,55 @@
|
|
|
1
1
|
import * as goober from "goober";
|
|
2
2
|
import { createSignal } from "solid-js";
|
|
3
3
|
import { tokens } from "./tokens.js";
|
|
4
|
-
const
|
|
4
|
+
const buttonVariantColors = {
|
|
5
|
+
primary: {
|
|
6
|
+
bg: tokens.colors.purple[500],
|
|
7
|
+
hover: tokens.colors.purple[600],
|
|
8
|
+
active: tokens.colors.purple[700],
|
|
9
|
+
text: "#fff",
|
|
10
|
+
border: tokens.colors.purple[500]
|
|
11
|
+
},
|
|
12
|
+
secondary: {
|
|
13
|
+
bg: tokens.colors.gray[800],
|
|
14
|
+
hover: tokens.colors.gray[700],
|
|
15
|
+
active: tokens.colors.gray[600],
|
|
16
|
+
text: tokens.colors.gray[100],
|
|
17
|
+
border: tokens.colors.gray[700]
|
|
18
|
+
},
|
|
19
|
+
info: {
|
|
20
|
+
bg: tokens.colors.blue[500],
|
|
21
|
+
hover: tokens.colors.blue[600],
|
|
22
|
+
active: tokens.colors.blue[700],
|
|
23
|
+
text: "#fff",
|
|
24
|
+
border: tokens.colors.blue[500]
|
|
25
|
+
},
|
|
26
|
+
warning: {
|
|
27
|
+
bg: tokens.colors.yellow[500],
|
|
28
|
+
hover: tokens.colors.yellow[600],
|
|
29
|
+
active: tokens.colors.yellow[700],
|
|
30
|
+
text: "#fff",
|
|
31
|
+
border: tokens.colors.yellow[500]
|
|
32
|
+
},
|
|
33
|
+
danger: {
|
|
34
|
+
bg: tokens.colors.red[500],
|
|
35
|
+
hover: tokens.colors.red[600],
|
|
36
|
+
active: tokens.colors.red[700],
|
|
37
|
+
text: "#fff",
|
|
38
|
+
border: tokens.colors.red[500]
|
|
39
|
+
},
|
|
40
|
+
success: {
|
|
41
|
+
bg: tokens.colors.green[500],
|
|
42
|
+
hover: tokens.colors.green[600],
|
|
43
|
+
active: tokens.colors.green[700],
|
|
44
|
+
text: "#fff",
|
|
45
|
+
border: tokens.colors.green[500]
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const stylesFactory = (theme = "dark") => {
|
|
5
49
|
const { colors, font, size, alpha } = tokens;
|
|
6
50
|
const { fontFamily } = font;
|
|
7
51
|
const css = goober.css;
|
|
52
|
+
const t = (light, dark) => theme === "light" ? light : dark;
|
|
8
53
|
return {
|
|
9
54
|
logo: css`
|
|
10
55
|
cursor: pointer;
|
|
@@ -35,12 +80,14 @@ const stylesFactory = () => {
|
|
|
35
80
|
font-size: 0.875rem;
|
|
36
81
|
font-weight: 500;
|
|
37
82
|
color: ${colors.gray[100]};
|
|
83
|
+
text-align: left;
|
|
38
84
|
`,
|
|
39
85
|
selectDescription: css`
|
|
40
86
|
font-size: 0.8rem;
|
|
41
87
|
color: ${colors.gray[400]};
|
|
42
88
|
margin: 0;
|
|
43
89
|
line-height: 1.3;
|
|
90
|
+
text-align: left;
|
|
44
91
|
`,
|
|
45
92
|
select: css`
|
|
46
93
|
appearance: none;
|
|
@@ -84,12 +131,14 @@ const stylesFactory = () => {
|
|
|
84
131
|
font-size: 0.875rem;
|
|
85
132
|
font-weight: 500;
|
|
86
133
|
color: ${colors.gray[100]};
|
|
134
|
+
text-align: left;
|
|
87
135
|
`,
|
|
88
136
|
inputDescription: css`
|
|
89
137
|
font-size: 0.8rem;
|
|
90
138
|
color: ${colors.gray[400]};
|
|
91
139
|
margin: 0;
|
|
92
140
|
line-height: 1.3;
|
|
141
|
+
text-align: left;
|
|
93
142
|
`,
|
|
94
143
|
input: css`
|
|
95
144
|
appearance: none;
|
|
@@ -177,13 +226,139 @@ const stylesFactory = () => {
|
|
|
177
226
|
font-size: 0.875rem;
|
|
178
227
|
font-weight: 500;
|
|
179
228
|
line-height: 1.4;
|
|
229
|
+
text-align: left;
|
|
180
230
|
`,
|
|
181
231
|
checkboxDescription: css`
|
|
182
232
|
color: ${colors.gray[400]};
|
|
183
233
|
font-size: 0.8rem;
|
|
184
234
|
line-height: 1.3;
|
|
235
|
+
text-align: left;
|
|
185
236
|
`,
|
|
237
|
+
button: {
|
|
238
|
+
base: css`
|
|
239
|
+
display: inline-flex;
|
|
240
|
+
align-items: center;
|
|
241
|
+
justify-content: center;
|
|
242
|
+
font-family: ${tokens.font.fontFamily.sans};
|
|
243
|
+
font-size: 0.8rem;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
border-radius: 0.2rem;
|
|
246
|
+
padding: 0.2rem 0.6rem;
|
|
247
|
+
cursor: pointer;
|
|
248
|
+
transition:
|
|
249
|
+
background 0.2s,
|
|
250
|
+
color 0.2s,
|
|
251
|
+
border 0.2s,
|
|
252
|
+
box-shadow 0.2s;
|
|
253
|
+
outline: none;
|
|
254
|
+
border-width: 1px;
|
|
255
|
+
border-style: solid;
|
|
256
|
+
`,
|
|
257
|
+
variant(variant, outline, ghost) {
|
|
258
|
+
const v = buttonVariantColors[variant];
|
|
259
|
+
if (ghost) {
|
|
260
|
+
return css`
|
|
261
|
+
background: transparent;
|
|
262
|
+
color: ${v.bg};
|
|
263
|
+
border-color: transparent;
|
|
264
|
+
&:hover {
|
|
265
|
+
background: ${tokens.colors.purple[100]};
|
|
266
|
+
}
|
|
267
|
+
&:active {
|
|
268
|
+
background: ${tokens.colors.purple[200]};
|
|
269
|
+
}
|
|
270
|
+
`;
|
|
271
|
+
}
|
|
272
|
+
if (outline) {
|
|
273
|
+
return css`
|
|
274
|
+
background: transparent;
|
|
275
|
+
color: ${v.bg};
|
|
276
|
+
border-color: ${v.bg};
|
|
277
|
+
&:hover {
|
|
278
|
+
background: ${tokens.colors.purple[100]};
|
|
279
|
+
border-color: ${v.hover};
|
|
280
|
+
}
|
|
281
|
+
&:active {
|
|
282
|
+
background: ${tokens.colors.purple[200]};
|
|
283
|
+
border-color: ${v.active};
|
|
284
|
+
}
|
|
285
|
+
`;
|
|
286
|
+
}
|
|
287
|
+
return css`
|
|
288
|
+
background: ${v.bg};
|
|
289
|
+
color: ${v.text};
|
|
290
|
+
border-color: ${v.border};
|
|
291
|
+
&:hover {
|
|
292
|
+
background: ${v.hover};
|
|
293
|
+
border-color: ${v.hover};
|
|
294
|
+
}
|
|
295
|
+
&:active {
|
|
296
|
+
background: ${v.active};
|
|
297
|
+
border-color: ${v.active};
|
|
298
|
+
}
|
|
299
|
+
`;
|
|
300
|
+
}
|
|
301
|
+
},
|
|
302
|
+
tag: {
|
|
303
|
+
dot: (color) => css`
|
|
304
|
+
width: ${tokens.size[1.5]};
|
|
305
|
+
height: ${tokens.size[1.5]};
|
|
306
|
+
border-radius: ${tokens.border.radius.full};
|
|
307
|
+
background-color: ${tokens.colors[color][500]};
|
|
308
|
+
`,
|
|
309
|
+
base: css`
|
|
310
|
+
display: flex;
|
|
311
|
+
gap: ${tokens.size[1.5]};
|
|
312
|
+
box-sizing: border-box;
|
|
313
|
+
height: ${tokens.size[6.5]};
|
|
314
|
+
background: ${t(colors.gray[50], colors.darkGray[500])};
|
|
315
|
+
color: ${t(colors.gray[700], colors.gray[300])};
|
|
316
|
+
border-radius: ${tokens.border.radius.sm};
|
|
317
|
+
font-size: ${font.size.sm};
|
|
318
|
+
padding: ${tokens.size[1]};
|
|
319
|
+
padding-left: ${tokens.size[1.5]};
|
|
320
|
+
align-items: center;
|
|
321
|
+
font-weight: ${font.weight.medium};
|
|
322
|
+
border: ${t("1px solid " + colors.gray[300], "1px solid transparent")};
|
|
323
|
+
user-select: none;
|
|
324
|
+
position: relative;
|
|
325
|
+
&:focus-visible {
|
|
326
|
+
outline-offset: 2px;
|
|
327
|
+
outline: 2px solid ${colors.blue[800]};
|
|
328
|
+
}
|
|
329
|
+
`,
|
|
330
|
+
label: css`
|
|
331
|
+
font-size: ${font.size.xs};
|
|
332
|
+
`,
|
|
333
|
+
count: css`
|
|
334
|
+
font-size: ${font.size.xs};
|
|
335
|
+
padding: 0 5px;
|
|
336
|
+
display: flex;
|
|
337
|
+
align-items: center;
|
|
338
|
+
justify-content: center;
|
|
339
|
+
color: ${t(colors.gray[500], colors.gray[400])};
|
|
340
|
+
background-color: ${t(colors.gray[200], colors.darkGray[300])};
|
|
341
|
+
border-radius: 2px;
|
|
342
|
+
font-variant-numeric: tabular-nums;
|
|
343
|
+
height: ${tokens.size[4.5]};
|
|
344
|
+
`
|
|
345
|
+
},
|
|
186
346
|
tree: {
|
|
347
|
+
collapsible: css`
|
|
348
|
+
cursor: pointer;
|
|
349
|
+
transition: all 0.2s ease;
|
|
350
|
+
&:hover {
|
|
351
|
+
background-color: ${colors.darkGray[700]};
|
|
352
|
+
border-radius: ${tokens.border.radius.sm};
|
|
353
|
+
padding: 0 ${tokens.size[1]};
|
|
354
|
+
}
|
|
355
|
+
`,
|
|
356
|
+
valueCollapsed: css`
|
|
357
|
+
color: ${colors.gray[400]};
|
|
358
|
+
`,
|
|
359
|
+
valueFunction: css`
|
|
360
|
+
color: ${colors.cyan[400]};
|
|
361
|
+
`,
|
|
187
362
|
valueString: css`
|
|
188
363
|
color: ${colors.green[400]};
|
|
189
364
|
`,
|
|
@@ -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'\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha } = tokens\n const { fontFamily } = font\n const css = goober.css\n\n return {\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 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 tree: {\n valueString: css`\n color: ${colors.green[400]};\n `,\n valueNumber: css`\n color: ${colors.yellow[400]};\n `,\n valueBoolean: css`\n color: ${colors.pink[400]};\n `,\n valueNull: css`\n color: ${colors.gray[400]};\n font-style: italic;\n `,\n valueKey: css`\n color: ${colors.blue[300]};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\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 { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n ButtonVariant,\n { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n primary: {\n bg: tokens.colors.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\n },\n info: {\n bg: tokens.colors.blue[500],\n hover: tokens.colors.blue[600],\n active: tokens.colors.blue[700],\n text: '#fff',\n border: tokens.colors.blue[500],\n },\n warning: {\n bg: tokens.colors.yellow[500],\n hover: tokens.colors.yellow[600],\n active: tokens.colors.yellow[700],\n text: '#fff',\n border: tokens.colors.yellow[500],\n },\n danger: {\n bg: tokens.colors.red[500],\n hover: tokens.colors.red[600],\n active: tokens.colors.red[700],\n text: '#fff',\n border: tokens.colors.red[500],\n },\n success: {\n bg: tokens.colors.green[500],\n hover: tokens.colors.green[600],\n active: tokens.colors.green[700],\n text: '#fff',\n border: tokens.colors.green[500],\n },\n}\nconst stylesFactory = (theme: 'light' | 'dark' = 'dark') => {\n const { colors, font, size, alpha } = tokens\n const { fontFamily } = font\n const css = goober.css\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\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 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 text-align: left;\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n text-align: left;\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 text-align: left;\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n text-align: left;\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 text-align: left;\n `,\n checkboxDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.8rem;\n line-height: 1.3;\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${tokens.font.fontFamily.sans};\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: 0.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\n outline: none;\n border-width: 1px;\n border-style: solid;\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariantColors[variant]\n if (ghost) {\n return css`\n background: transparent;\n color: ${v.bg};\n border-color: transparent;\n &:hover {\n background: ${tokens.colors.purple[100]};\n }\n &:active {\n background: ${tokens.colors.purple[200]};\n }\n `\n }\n if (outline) {\n return css`\n background: transparent;\n color: ${v.bg};\n border-color: ${v.bg};\n &:hover {\n background: ${tokens.colors.purple[100]};\n border-color: ${v.hover};\n }\n &:active {\n background: ${tokens.colors.purple[200]};\n border-color: ${v.active};\n }\n `\n }\n // Default solid button\n return css`\n background: ${v.bg};\n color: ${v.text};\n border-color: ${v.border};\n &:hover {\n background: ${v.hover};\n border-color: ${v.hover};\n }\n &:active {\n background: ${v.active};\n border-color: ${v.active};\n }\n `\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${tokens.size[1.5]};\n height: ${tokens.size[1.5]};\n border-radius: ${tokens.border.radius.full};\n background-color: ${tokens.colors[color][500]};\n `,\n base: css`\n display: flex;\n gap: ${tokens.size[1.5]};\n box-sizing: border-box;\n height: ${tokens.size[6.5]};\n background: ${t(colors.gray[50], colors.darkGray[500])};\n color: ${t(colors.gray[700], colors.gray[300])};\n border-radius: ${tokens.border.radius.sm};\n font-size: ${font.size.sm};\n padding: ${tokens.size[1]};\n padding-left: ${tokens.size[1.5]};\n align-items: center;\n font-weight: ${font.weight.medium};\n border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n user-select: none;\n position: relative;\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n label: css`\n font-size: ${font.size.xs};\n `,\n count: css`\n font-size: ${font.size.xs};\n padding: 0 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[400])};\n background-color: ${t(colors.gray[200], colors.darkGray[300])};\n border-radius: 2px;\n font-variant-numeric: tabular-nums;\n height: ${tokens.size[4.5]};\n `,\n },\n tree: {\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${colors.darkGray[700]};\n border-radius: ${tokens.border.radius.sm};\n padding: 0 ${tokens.size[1]};\n }\n `,\n valueCollapsed: css`\n color: ${colors.gray[400]};\n `,\n valueFunction: css`\n color: ${colors.cyan[400]};\n `,\n valueString: css`\n color: ${colors.green[400]};\n `,\n valueNumber: css`\n color: ${colors.yellow[400]};\n `,\n valueBoolean: css`\n color: ${colors.pink[400]};\n `,\n valueNull: css`\n color: ${colors.gray[400]};\n font-style: italic;\n `,\n valueKey: css`\n color: ${colors.blue[300]};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\n `,\n },\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"src"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
+
"clsx": "^2.1.1",
|
|
46
47
|
"goober": "^2.1.16",
|
|
47
48
|
"solid-js": "^1.9.7"
|
|
48
49
|
},
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { splitProps } from 'solid-js'
|
|
2
|
+
import clsx from 'clsx'
|
|
3
|
+
import { useStyles } from '../styles/use-styles'
|
|
4
|
+
import type { JSX } from 'solid-js'
|
|
5
|
+
|
|
6
|
+
export type ButtonVariant =
|
|
7
|
+
| 'primary'
|
|
8
|
+
| 'secondary'
|
|
9
|
+
| 'danger'
|
|
10
|
+
| 'success'
|
|
11
|
+
| 'info'
|
|
12
|
+
| 'warning'
|
|
13
|
+
type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
14
|
+
variant?: ButtonVariant
|
|
15
|
+
outline?: boolean
|
|
16
|
+
ghost?: boolean
|
|
17
|
+
children?: any
|
|
18
|
+
className?: string
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function Button(props: ButtonProps) {
|
|
22
|
+
const styles = useStyles()
|
|
23
|
+
const [local, rest] = splitProps(props, [
|
|
24
|
+
'variant',
|
|
25
|
+
'outline',
|
|
26
|
+
'ghost',
|
|
27
|
+
'children',
|
|
28
|
+
'className',
|
|
29
|
+
])
|
|
30
|
+
const variant = local.variant || 'primary'
|
|
31
|
+
const classes = clsx(
|
|
32
|
+
styles().button.base,
|
|
33
|
+
styles().button.variant(variant, local.outline, local.ghost),
|
|
34
|
+
local.className,
|
|
35
|
+
)
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<button {...rest} class={classes}>
|
|
39
|
+
{local.children}
|
|
40
|
+
</button>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Show } from 'solid-js'
|
|
2
|
+
import { useStyles } from '../styles/use-styles'
|
|
3
|
+
import type { tokens } from '../styles/tokens'
|
|
4
|
+
|
|
5
|
+
export const Tag = (props: {
|
|
6
|
+
color: keyof typeof tokens.colors
|
|
7
|
+
label: string
|
|
8
|
+
count?: number
|
|
9
|
+
disabled?: boolean
|
|
10
|
+
}) => {
|
|
11
|
+
const styles = useStyles()
|
|
12
|
+
return (
|
|
13
|
+
<button disabled={props.disabled} class={styles().tag.base}>
|
|
14
|
+
<span class={styles().tag.dot(props.color)} />
|
|
15
|
+
<span class={styles().tag.label}>{props.label}</span>
|
|
16
|
+
|
|
17
|
+
<Show when={props.count && props.count > 0}>
|
|
18
|
+
<span class={styles().tag.count}>{props.count}</span>
|
|
19
|
+
</Show>
|
|
20
|
+
</button>
|
|
21
|
+
)
|
|
22
|
+
}
|