@tanstack/devtools-ui 0.2.2 → 0.3.0

package/dist/cjs/components/tree.cjs

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+const useStyles = require("../styles/use-styles.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<span>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span><span>&quot;<!>&quot;`), _tmpl$3 = /* @__PURE__ */ web.template(`<span>&quot;<!>&quot;: `), _tmpl$4 = /* @__PURE__ */ web.template(`<span><span>`), _tmpl$5 = /* @__PURE__ */ web.template(`<span><span>null`), _tmpl$6 = /* @__PURE__ */ web.template(`<span><span>undefined`), _tmpl$7 = /* @__PURE__ */ web.template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ web.template(`<span><span>{</span><span>}`), _tmpl$9 = /* @__PURE__ */ web.template(`<span>,`);
+function JsonTree(props) {
+  return web.createComponent(JsonValue, {
+    isRoot: true,
+    get value() {
+      return props.value;
+    }
+  });
+}
+function JsonValue(props) {
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey
+  } = props;
+  const styles = useStyles.useStyles();
+  return (() => {
+    var _el$ = _tmpl$();
+    web.insert(_el$, () => {
+      if (typeof value === "string") {
+        return (() => {
+          var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling;
+          _el$6.nextSibling;
+          web.insert(_el$2, keyName && (() => {
+            var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild, _el$10 = _el$8.nextSibling;
+            _el$10.nextSibling;
+            web.insert(_el$7, keyName, _el$10);
+            web.effect(() => web.className(_el$7, styles().tree.valueKey));
+            return _el$7;
+          })(), _el$3);
+          web.insert(_el$3, value, _el$6);
+          web.effect(() => web.className(_el$3, styles().tree.valueString));
+          return _el$2;
+        })();
+      }
+      if (typeof value === "number") {
+        return (() => {
+          var _el$11 = _tmpl$4(), _el$12 = _el$11.firstChild;
+          web.insert(_el$11, keyName && (() => {
+            var _el$13 = _tmpl$3(), _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling;
+            _el$16.nextSibling;
+            web.insert(_el$13, keyName, _el$16);
+            web.effect(() => web.className(_el$13, styles().tree.valueKey));
+            return _el$13;
+          })(), _el$12);
+          web.insert(_el$12, value);
+          web.effect(() => web.className(_el$12, styles().tree.valueNumber));
+          return _el$11;
+        })();
+      }
+      if (typeof value === "boolean") {
+        return (() => {
+          var _el$17 = _tmpl$4(), _el$18 = _el$17.firstChild;
+          web.insert(_el$17, keyName && (() => {
+            var _el$19 = _tmpl$3(), _el$20 = _el$19.firstChild, _el$22 = _el$20.nextSibling;
+            _el$22.nextSibling;
+            web.insert(_el$19, keyName, _el$22);
+            web.effect(() => web.className(_el$19, styles().tree.valueKey));
+            return _el$19;
+          })(), _el$18);
+          web.insert(_el$18, () => String(value));
+          web.effect(() => web.className(_el$18, styles().tree.valueBoolean));
+          return _el$17;
+        })();
+      }
+      if (value === null) {
+        return (() => {
+          var _el$23 = _tmpl$5(), _el$24 = _el$23.firstChild;
+          web.insert(_el$23, keyName && (() => {
+            var _el$25 = _tmpl$3(), _el$26 = _el$25.firstChild, _el$28 = _el$26.nextSibling;
+            _el$28.nextSibling;
+            web.insert(_el$25, keyName, _el$28);
+            web.effect(() => web.className(_el$25, styles().tree.valueKey));
+            return _el$25;
+          })(), _el$24);
+          web.effect(() => web.className(_el$24, styles().tree.valueNull));
+          return _el$23;
+        })();
+      }
+      if (value === void 0) {
+        return (() => {
+          var _el$29 = _tmpl$6(), _el$30 = _el$29.firstChild;
+          web.insert(_el$29, keyName && (() => {
+            var _el$31 = _tmpl$3(), _el$32 = _el$31.firstChild, _el$34 = _el$32.nextSibling;
+            _el$34.nextSibling;
+            web.insert(_el$31, keyName, _el$34);
+            web.effect(() => web.className(_el$31, styles().tree.valueKey));
+            return _el$31;
+          })(), _el$30);
+          web.effect(() => web.className(_el$30, styles().tree.valueNull));
+          return _el$29;
+        })();
+      }
+      if (Array.isArray(value)) {
+        return (() => {
+          var _el$35 = _tmpl$7(), _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling;
+          web.insert(_el$35, keyName && (() => {
+            var _el$38 = _tmpl$3(), _el$39 = _el$38.firstChild, _el$41 = _el$39.nextSibling;
+            _el$41.nextSibling;
+            web.insert(_el$38, keyName, _el$41);
+            web.effect(() => web.className(_el$38, styles().tree.valueKey));
+            return _el$38;
+          })(), _el$36);
+          web.insert(_el$35, web.createComponent(solidJs.For, {
+            each: value,
+            children: (item, i) => {
+              const isLastKey2 = i() === value.length - 1;
+              return web.createComponent(JsonValue, {
+                value: item,
+                isLastKey: isLastKey2
+              });
+            }
+          }), _el$37);
+          web.effect((_p$) => {
+            var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
+            _v$ !== _p$.e && web.className(_el$36, _p$.e = _v$);
+            _v$2 !== _p$.t && web.className(_el$37, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$35;
+        })();
+      }
+      if (typeof value === "object") {
+        const keys = Object.keys(value);
+        const lastKeyName = keys[keys.length - 1];
+        return (() => {
+          var _el$42 = _tmpl$8(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
+          web.insert(_el$42, keyName && (() => {
+            var _el$45 = _tmpl$3(), _el$46 = _el$45.firstChild, _el$48 = _el$46.nextSibling;
+            _el$48.nextSibling;
+            web.insert(_el$45, keyName, _el$48);
+            web.effect(() => web.className(_el$45, styles().tree.valueKey));
+            return _el$45;
+          })(), _el$43);
+          web.insert(_el$42, web.createComponent(solidJs.For, {
+            each: keys,
+            children: (k) => web.createComponent(JsonValue, {
+              get value() {
+                return value[k];
+              },
+              keyName: k,
+              isLastKey: lastKeyName === k
+            })
+          }), _el$44);
+          web.effect((_p$) => {
+            var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
+            _v$3 !== _p$.e && web.className(_el$43, _p$.e = _v$3);
+            _v$4 !== _p$.t && web.className(_el$44, _p$.t = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$42;
+        })();
+      }
+      return _tmpl$();
+    }, null);
+    web.insert(_el$, isLastKey || isRoot ? "" : _tmpl$9(), null);
+    web.effect(() => web.className(_el$, styles().tree.valueContainer(isRoot)));
+    return _el$;
+  })();
+}
+exports.JsonTree = JsonTree;
+//# sourceMappingURL=tree.cjs.map

package/dist/cjs/components/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\nexport function JsonTree(props: { value: any }) {\n  return <JsonValue isRoot value={props.value} />\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n            </span>\n          )\n        }\n        if (typeof value === 'number') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNumber}>{value}</span>\n            </span>\n          )\n        }\n        if (typeof value === 'boolean') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBoolean}>{String(value)}</span>\n            </span>\n          )\n        }\n        if (value === null) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNull}>null</span>\n            </span>\n          )\n        }\n        if (value === undefined) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNull}>undefined</span>\n            </span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBraces}>[</span>\n              <For each={value}>\n                {(item, i) => {\n                  const isLastKey = i() === value.length - 1\n                  return (\n                    <>\n                      <JsonValue value={item} isLastKey={isLastKey} />\n                    </>\n                  )\n                }}\n              </For>\n              <span class={styles().tree.valueBraces}>]</span>\n            </span>\n          )\n        }\n        if (typeof value === 'object') {\n          const keys = Object.keys(value)\n          const lastKeyName = keys[keys.length - 1]\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBraces}>{'{'}</span>\n              <For each={keys}>\n                {(k) => (\n                  <>\n                    <JsonValue\n                      value={value[k]}\n                      keyName={k}\n                      isLastKey={lastKeyName === k}\n                    />\n                  </>\n                )}\n              </For>\n              <span class={styles().tree.valueBraces}>{'}'}</span>\n            </span>\n          )\n        }\n        return <span />\n      })()}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$6","nextSibling","_el$7","_tmpl$3","_el$8","_el$10","_$effect","_$className","tree","valueKey","valueString","_el$11","_tmpl$4","_el$12","_el$13","_el$14","_el$16","valueNumber","_el$17","_el$18","_el$19","_el$20","_el$22","String","valueBoolean","_el$23","_tmpl$5","_el$24","_el$25","_el$26","_el$28","valueNull","undefined","_el$29","_tmpl$6","_el$30","_el$31","_el$32","_el$34","Array","isArray","_el$35","_tmpl$7","_el$36","_el$37","_el$38","_el$39","_el$41","For","each","children","item","i","length","_p$","_v$","valueBraces","_v$2","e","t","keys","Object","lastKeyName","_el$42","_tmpl$8","_el$43","_el$44","_el$45","_el$46","_el$48","k","_v$3","_v$4","_tmpl$9","valueContainer"],"mappings":"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"}

package/dist/cjs/components/tree.d.cts

@@ -0,0 +1,3 @@
+export declare function JsonTree(props: {
+    value: any;
+}): import("solid-js").JSX.Element;

package/dist/cjs/index.cjs

@@ -4,8 +4,10 @@ const checkbox = require("./components/checkbox.cjs");
 const input = require("./components/input.cjs");
 const select = require("./components/select.cjs");
 const logo = require("./components/logo.cjs");
+const tree = require("./components/tree.cjs");
 exports.Checkbox = checkbox.Checkbox;
 exports.Input = input.Input;
 exports.Select = select.Select;
 exports.TanStackLogo = logo.TanStackLogo;
+exports.JsonTree = tree.JsonTree;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -2,3 +2,4 @@ export { Checkbox } from './components/checkbox.cjs';
 export { Input } from './components/input.cjs';
 export { Select } from './components/select.cjs';
 export { TanStackLogo } from './components/logo.cjs';
+export { JsonTree } from './components/tree.cjs';

package/dist/cjs/styles/tokens.cjs

@@ -12,9 +12,21 @@ const tokens = {
       600: "#475467",
       700: "#344054"
     },
+    blue: {
+      300: "#84CAFF"
+    },
+    green: {
+      400: "#32D583"
+    },
+    yellow: {
+      400: "#FDB022"
+    },
     purple: {
       400: "#9B8AFB",
       500: "#7A5AF8"
+    },
+    pink: {
+      400: "#ec4899"
     }
   },
   alpha: {

package/dist/cjs/styles/tokens.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs","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,IAqDA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;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;;"}
+{"version":3,"file":"tokens.cjs","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;;"}

package/dist/cjs/styles/use-styles.cjs

@@ -201,7 +201,32 @@ const stylesFactory = () => {
       color: ${colors.gray[400]};
       font-size: 0.8rem;
       line-height: 1.3;
-    `
+    `,
+    tree: {
+      valueString: css`
+        color: ${colors.green[400]};
+      `,
+      valueNumber: css`
+        color: ${colors.yellow[400]};
+      `,
+      valueBoolean: css`
+        color: ${colors.pink[400]};
+      `,
+      valueNull: css`
+        color: ${colors.gray[400]};
+        font-style: italic;
+      `,
+      valueKey: css`
+        color: ${colors.blue[300]};
+      `,
+      valueBraces: css`
+        color: ${colors.gray[500]};
+      `,
+      valueContainer: (isRoot) => css`
+        display: block;
+        margin-left: ${isRoot ? "0" : "1rem"};
+      `
+    }
   };
 };
 function useStyles() {

package/dist/cjs/styles/use-styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.cjs","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  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}
+{"version":3,"file":"use-styles.cjs","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":["tokens","goober","createSignal"],"mappings":"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"}

package/dist/cjs/styles/use-styles.d.cts

@@ -16,4 +16,13 @@ export declare function useStyles(): import('solid-js').Accessor<{
     checkbox: string;
     checkboxLabel: string;
     checkboxDescription: string;
+    tree: {
+        valueString: string;
+        valueNumber: string;
+        valueBoolean: string;
+        valueNull: string;
+        valueKey: string;
+        valueBraces: string;
+        valueContainer: (isRoot: boolean) => string;
+    };
 }>;

package/dist/esm/components/tree.d.ts

@@ -0,0 +1,3 @@
+export declare function JsonTree(props: {
+    value: any;
+}): import("solid-js").JSX.Element;

package/dist/esm/components/tree.js

@@ -0,0 +1,174 @@
+import { createComponent, template, insert, effect, className } from "solid-js/web";
+import { For } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<span><span>&quot;<!>&quot;`), _tmpl$3 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$4 = /* @__PURE__ */ template(`<span><span>`), _tmpl$5 = /* @__PURE__ */ template(`<span><span>null`), _tmpl$6 = /* @__PURE__ */ template(`<span><span>undefined`), _tmpl$7 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>{</span><span>}`), _tmpl$9 = /* @__PURE__ */ template(`<span>,`);
+function JsonTree(props) {
+  return createComponent(JsonValue, {
+    isRoot: true,
+    get value() {
+      return props.value;
+    }
+  });
+}
+function JsonValue(props) {
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey
+  } = props;
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$();
+    insert(_el$, () => {
+      if (typeof value === "string") {
+        return (() => {
+          var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling;
+          _el$6.nextSibling;
+          insert(_el$2, keyName && (() => {
+            var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild, _el$10 = _el$8.nextSibling;
+            _el$10.nextSibling;
+            insert(_el$7, keyName, _el$10);
+            effect(() => className(_el$7, styles().tree.valueKey));
+            return _el$7;
+          })(), _el$3);
+          insert(_el$3, value, _el$6);
+          effect(() => className(_el$3, styles().tree.valueString));
+          return _el$2;
+        })();
+      }
+      if (typeof value === "number") {
+        return (() => {
+          var _el$11 = _tmpl$4(), _el$12 = _el$11.firstChild;
+          insert(_el$11, keyName && (() => {
+            var _el$13 = _tmpl$3(), _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling;
+            _el$16.nextSibling;
+            insert(_el$13, keyName, _el$16);
+            effect(() => className(_el$13, styles().tree.valueKey));
+            return _el$13;
+          })(), _el$12);
+          insert(_el$12, value);
+          effect(() => className(_el$12, styles().tree.valueNumber));
+          return _el$11;
+        })();
+      }
+      if (typeof value === "boolean") {
+        return (() => {
+          var _el$17 = _tmpl$4(), _el$18 = _el$17.firstChild;
+          insert(_el$17, keyName && (() => {
+            var _el$19 = _tmpl$3(), _el$20 = _el$19.firstChild, _el$22 = _el$20.nextSibling;
+            _el$22.nextSibling;
+            insert(_el$19, keyName, _el$22);
+            effect(() => className(_el$19, styles().tree.valueKey));
+            return _el$19;
+          })(), _el$18);
+          insert(_el$18, () => String(value));
+          effect(() => className(_el$18, styles().tree.valueBoolean));
+          return _el$17;
+        })();
+      }
+      if (value === null) {
+        return (() => {
+          var _el$23 = _tmpl$5(), _el$24 = _el$23.firstChild;
+          insert(_el$23, keyName && (() => {
+            var _el$25 = _tmpl$3(), _el$26 = _el$25.firstChild, _el$28 = _el$26.nextSibling;
+            _el$28.nextSibling;
+            insert(_el$25, keyName, _el$28);
+            effect(() => className(_el$25, styles().tree.valueKey));
+            return _el$25;
+          })(), _el$24);
+          effect(() => className(_el$24, styles().tree.valueNull));
+          return _el$23;
+        })();
+      }
+      if (value === void 0) {
+        return (() => {
+          var _el$29 = _tmpl$6(), _el$30 = _el$29.firstChild;
+          insert(_el$29, keyName && (() => {
+            var _el$31 = _tmpl$3(), _el$32 = _el$31.firstChild, _el$34 = _el$32.nextSibling;
+            _el$34.nextSibling;
+            insert(_el$31, keyName, _el$34);
+            effect(() => className(_el$31, styles().tree.valueKey));
+            return _el$31;
+          })(), _el$30);
+          effect(() => className(_el$30, styles().tree.valueNull));
+          return _el$29;
+        })();
+      }
+      if (Array.isArray(value)) {
+        return (() => {
+          var _el$35 = _tmpl$7(), _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling;
+          insert(_el$35, keyName && (() => {
+            var _el$38 = _tmpl$3(), _el$39 = _el$38.firstChild, _el$41 = _el$39.nextSibling;
+            _el$41.nextSibling;
+            insert(_el$38, keyName, _el$41);
+            effect(() => className(_el$38, styles().tree.valueKey));
+            return _el$38;
+          })(), _el$36);
+          insert(_el$35, createComponent(For, {
+            each: value,
+            children: (item, i) => {
+              const isLastKey2 = i() === value.length - 1;
+              return createComponent(JsonValue, {
+                value: item,
+                isLastKey: isLastKey2
+              });
+            }
+          }), _el$37);
+          effect((_p$) => {
+            var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
+            _v$ !== _p$.e && className(_el$36, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$37, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$35;
+        })();
+      }
+      if (typeof value === "object") {
+        const keys = Object.keys(value);
+        const lastKeyName = keys[keys.length - 1];
+        return (() => {
+          var _el$42 = _tmpl$8(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
+          insert(_el$42, keyName && (() => {
+            var _el$45 = _tmpl$3(), _el$46 = _el$45.firstChild, _el$48 = _el$46.nextSibling;
+            _el$48.nextSibling;
+            insert(_el$45, keyName, _el$48);
+            effect(() => className(_el$45, styles().tree.valueKey));
+            return _el$45;
+          })(), _el$43);
+          insert(_el$42, createComponent(For, {
+            each: keys,
+            children: (k) => createComponent(JsonValue, {
+              get value() {
+                return value[k];
+              },
+              keyName: k,
+              isLastKey: lastKeyName === k
+            })
+          }), _el$44);
+          effect((_p$) => {
+            var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
+            _v$3 !== _p$.e && className(_el$43, _p$.e = _v$3);
+            _v$4 !== _p$.t && className(_el$44, _p$.t = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$42;
+        })();
+      }
+      return _tmpl$();
+    }, null);
+    insert(_el$, isLastKey || isRoot ? "" : _tmpl$9(), null);
+    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
+    return _el$;
+  })();
+}
+export {
+  JsonTree
+};
+//# sourceMappingURL=tree.js.map

package/dist/esm/components/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\nexport function JsonTree(props: { value: any }) {\n  return <JsonValue isRoot value={props.value} />\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n            </span>\n          )\n        }\n        if (typeof value === 'number') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNumber}>{value}</span>\n            </span>\n          )\n        }\n        if (typeof value === 'boolean') {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBoolean}>{String(value)}</span>\n            </span>\n          )\n        }\n        if (value === null) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNull}>null</span>\n            </span>\n          )\n        }\n        if (value === undefined) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueNull}>undefined</span>\n            </span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBraces}>[</span>\n              <For each={value}>\n                {(item, i) => {\n                  const isLastKey = i() === value.length - 1\n                  return (\n                    <>\n                      <JsonValue value={item} isLastKey={isLastKey} />\n                    </>\n                  )\n                }}\n              </For>\n              <span class={styles().tree.valueBraces}>]</span>\n            </span>\n          )\n        }\n        if (typeof value === 'object') {\n          const keys = Object.keys(value)\n          const lastKeyName = keys[keys.length - 1]\n          return (\n            <span>\n              {keyName && (\n                <span class={styles().tree.valueKey}>\n                  &quot;{keyName}&quot;:{' '}\n                </span>\n              )}\n              <span class={styles().tree.valueBraces}>{'{'}</span>\n              <For each={keys}>\n                {(k) => (\n                  <>\n                    <JsonValue\n                      value={value[k]}\n                      keyName={k}\n                      isLastKey={lastKeyName === k}\n                    />\n                  </>\n                )}\n              </For>\n              <span class={styles().tree.valueBraces}>{'}'}</span>\n            </span>\n          )\n        }\n        return <span />\n      })()}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$6","nextSibling","_el$7","_tmpl$3","_el$8","_el$10","_$effect","_$className","tree","valueKey","valueString","_el$11","_tmpl$4","_el$12","_el$13","_el$14","_el$16","valueNumber","_el$17","_el$18","_el$19","_el$20","_el$22","String","valueBoolean","_el$23","_tmpl$5","_el$24","_el$25","_el$26","_el$28","valueNull","undefined","_el$29","_tmpl$6","_el$30","_el$31","_el$32","_el$34","Array","isArray","_el$35","_tmpl$7","_el$36","_el$37","_el$38","_el$39","_el$41","For","each","children","item","i","length","_p$","_v$","valueBraces","_v$2","e","t","keys","Object","lastKeyName","_el$42","_tmpl$8","_el$43","_el$44","_el$45","_el$46","_el$48","k","_v$3","_v$4","_tmpl$9","valueContainer"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -2,3 +2,4 @@ export { Checkbox } from './components/checkbox.js';
 export { Input } from './components/input.js';
 export { Select } from './components/select.js';
 export { TanStackLogo } from './components/logo.js';
+export { JsonTree } from './components/tree.js';

package/dist/esm/index.js

@@ -2,9 +2,11 @@ import { Checkbox } from "./components/checkbox.js";
 import { Input } from "./components/input.js";
 import { Select } from "./components/select.js";
 import { TanStackLogo } from "./components/logo.js";
+import { JsonTree } from "./components/tree.js";
 export {
   Checkbox,
   Input,
+  JsonTree,
   Select,
   TanStackLogo
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/styles/tokens.js

@@ -10,9 +10,21 @@ const tokens = {
       600: "#475467",
       700: "#344054"
     },
+    blue: {
+      300: "#84CAFF"
+    },
+    green: {
+      400: "#32D583"
+    },
+    yellow: {
+      400: "#FDB022"
+    },
     purple: {
       400: "#9B8AFB",
       500: "#7A5AF8"
+    },
+    pink: {
+      400: "#ec4899"
     }
   },
   alpha: {

package/dist/esm/styles/tokens.js.map

@@ -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,IAqDA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;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;"}
+{"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;"}

package/dist/esm/styles/use-styles.d.ts

@@ -16,4 +16,13 @@ export declare function useStyles(): import('solid-js').Accessor<{
     checkbox: string;
     checkboxLabel: string;
     checkboxDescription: string;
+    tree: {
+        valueString: string;
+        valueNumber: string;
+        valueBoolean: string;
+        valueNull: string;
+        valueKey: string;
+        valueBraces: string;
+        valueContainer: (isRoot: boolean) => string;
+    };
 }>;

package/dist/esm/styles/use-styles.js

@@ -182,7 +182,32 @@ const stylesFactory = () => {
       color: ${colors.gray[400]};
       font-size: 0.8rem;
       line-height: 1.3;
-    `
+    `,
+    tree: {
+      valueString: css`
+        color: ${colors.green[400]};
+      `,
+      valueNumber: css`
+        color: ${colors.yellow[400]};
+      `,
+      valueBoolean: css`
+        color: ${colors.pink[400]};
+      `,
+      valueNull: css`
+        color: ${colors.gray[400]};
+        font-style: italic;
+      `,
+      valueKey: css`
+        color: ${colors.blue[300]};
+      `,
+      valueBraces: css`
+        color: ${colors.gray[500]};
+      `,
+      valueContainer: (isRoot) => css`
+        display: block;
+        margin-left: ${isRoot ? "0" : "1rem"};
+      `
+    }
   };
 };
 function useStyles() {

package/dist/esm/styles/use-styles.js.map

@@ -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  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/tree.tsx

@@ -0,0 +1,134 @@
+import { For } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+export function JsonTree(props: { value: any }) {
+  return <JsonValue isRoot value={props.value} />
+}
+
+function JsonValue(props: {
+  value: any
+  keyName?: string
+  isRoot?: boolean
+  isLastKey?: boolean
+}) {
+  const { value, keyName, isRoot = false, isLastKey } = props
+  const styles = useStyles()
+
+  return (
+    <span class={styles().tree.valueContainer(isRoot)}>
+      {(() => {
+        if (typeof value === 'string') {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
+            </span>
+          )
+        }
+        if (typeof value === 'number') {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueNumber}>{value}</span>
+            </span>
+          )
+        }
+        if (typeof value === 'boolean') {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueBoolean}>{String(value)}</span>
+            </span>
+          )
+        }
+        if (value === null) {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueNull}>null</span>
+            </span>
+          )
+        }
+        if (value === undefined) {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueNull}>undefined</span>
+            </span>
+          )
+        }
+        if (Array.isArray(value)) {
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueBraces}>[</span>
+              <For each={value}>
+                {(item, i) => {
+                  const isLastKey = i() === value.length - 1
+                  return (
+                    <>
+                      <JsonValue value={item} isLastKey={isLastKey} />
+                    </>
+                  )
+                }}
+              </For>
+              <span class={styles().tree.valueBraces}>]</span>
+            </span>
+          )
+        }
+        if (typeof value === 'object') {
+          const keys = Object.keys(value)
+          const lastKeyName = keys[keys.length - 1]
+          return (
+            <span>
+              {keyName && (
+                <span class={styles().tree.valueKey}>
+                  &quot;{keyName}&quot;:{' '}
+                </span>
+              )}
+              <span class={styles().tree.valueBraces}>{'{'}</span>
+              <For each={keys}>
+                {(k) => (
+                  <>
+                    <JsonValue
+                      value={value[k]}
+                      keyName={k}
+                      isLastKey={lastKeyName === k}
+                    />
+                  </>
+                )}
+              </For>
+              <span class={styles().tree.valueBraces}>{'}'}</span>
+            </span>
+          )
+        }
+        return <span />
+      })()}
+      {isLastKey || isRoot ? '' : <span>,</span>}
+    </span>
+  )
+}

package/src/index.ts

@@ -2,3 +2,4 @@ export { Checkbox } from './components/checkbox'
 export { Input } from './components/input'
 export { Select } from './components/select'
 export { TanStackLogo } from './components/logo'
+export { JsonTree } from './components/tree'

package/src/styles/use-styles.ts

@@ -186,6 +186,31 @@ const stylesFactory = () => {
       font-size: 0.8rem;
       line-height: 1.3;
     `,
+    tree: {
+      valueString: css`
+        color: ${colors.green[400]};
+      `,
+      valueNumber: css`
+        color: ${colors.yellow[400]};
+      `,
+      valueBoolean: css`
+        color: ${colors.pink[400]};
+      `,
+      valueNull: css`
+        color: ${colors.gray[400]};
+        font-style: italic;
+      `,
+      valueKey: css`
+        color: ${colors.blue[300]};
+      `,
+      valueBraces: css`
+        color: ${colors.gray[500]};
+      `,
+      valueContainer: (isRoot: boolean) => css`
+        display: block;
+        margin-left: ${isRoot ? '0' : '1rem'};
+      `,
+    },
   }
 }