@tanstack/devtools-ui 0.3.0 → 0.3.2

package/dist/esm/components/tree.js

@@ -1,7 +1,8 @@
-import { createComponent, template, insert, effect, className } from "solid-js/web";
-import { For } from "solid-js";
+import { createComponent, template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { createSignal, Show, For } from "solid-js";
+import clsx from "clsx";
 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>,`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$3 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$4 = /* @__PURE__ */ template(`<span>null`), _tmpl$5 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$6 = /* @__PURE__ */ template(`<span>,`), _tmpl$7 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
 function JsonTree(props) {
   return createComponent(JsonValue, {
     isRoot: true,
@@ -20,154 +21,216 @@ function JsonValue(props) {
   const styles = useStyles();
   return (() => {
     var _el$ = _tmpl$();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
+      return () => _c$() && (() => {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
+        _el$5.nextSibling;
+        insert(_el$2, keyName, _el$5);
+        effect(() => className(_el$2, styles().tree.valueKey));
+        return _el$2;
+      })();
+    })(), null);
     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;
+          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
+          _el$9.nextSibling;
+          insert(_el$6, value, _el$9);
+          effect(() => className(_el$6, styles().tree.valueString));
+          return _el$6;
         })();
       }
       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;
+          var _el$0 = _tmpl$();
+          insert(_el$0, value);
+          effect(() => className(_el$0, styles().tree.valueNumber));
+          return _el$0;
         })();
       }
       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;
+          var _el$1 = _tmpl$();
+          insert(_el$1, () => String(value));
+          effect(() => className(_el$1, styles().tree.valueBoolean));
+          return _el$1;
         })();
       }
       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;
+          var _el$10 = _tmpl$4();
+          effect(() => className(_el$10, styles().tree.valueNull));
+          return _el$10;
         })();
       }
       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;
+          var _el$11 = _tmpl$5();
+          effect(() => className(_el$11, styles().tree.valueNull));
+          return _el$11;
         })();
       }
-      if (Array.isArray(value)) {
+      if (typeof value === "function") {
         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;
+          var _el$12 = _tmpl$();
+          insert(_el$12, () => String(value));
+          effect(() => className(_el$12, styles().tree.valueFunction));
+          return _el$12;
         })();
       }
+      if (Array.isArray(value)) {
+        return createComponent(ArrayValue, {
+          keyName,
+          value
+        });
+      }
       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 createComponent(ObjectValue, {
+          keyName,
+          value
+        });
       }
       return _tmpl$();
     }, null);
-    insert(_el$, isLastKey || isRoot ? "" : _tmpl$9(), null);
+    insert(_el$, isLastKey || isRoot ? "" : _tmpl$6(), null);
     effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
     return _el$;
   })();
 }
+const ArrayValue = ({
+  value,
+  keyName
+}) => {
+  const styles = useStyles();
+  const [expanded, setExpanded] = createSignal(true);
+  return (() => {
+    var _el$15 = _tmpl$7(), _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
+    insert(_el$15, keyName && (() => {
+      var _el$19 = _tmpl$2(), _el$20 = _el$19.firstChild, _el$22 = _el$20.nextSibling;
+      _el$22.nextSibling;
+      _el$19.$$click = (e) => {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        setExpanded(!expanded());
+      };
+      insert(_el$19, keyName, _el$22);
+      effect(() => className(_el$19, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+      return _el$19;
+    })(), _el$16);
+    insert(_el$15, createComponent(Show, {
+      get when() {
+        return expanded();
+      },
+      get children() {
+        return createComponent(For, {
+          each: value,
+          children: (item, i) => {
+            const isLastKey = i() === value.length - 1;
+            return createComponent(JsonValue, {
+              value: item,
+              isLastKey
+            });
+          }
+        });
+      }
+    }), _el$18);
+    insert(_el$15, createComponent(Show, {
+      get when() {
+        return !expanded();
+      },
+      get children() {
+        var _el$17 = _tmpl$();
+        _el$17.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$17, () => `... ${value.length} more`);
+        effect(() => className(_el$17, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$17;
+      }
+    }), _el$18);
+    effect((_p$) => {
+      var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
+      _v$ !== _p$.e && className(_el$16, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$18, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$15;
+  })();
+};
+const ObjectValue = ({
+  value,
+  keyName
+}) => {
+  const styles = useStyles();
+  const [expanded, setExpanded] = createSignal(true);
+  const keys = Object.keys(value);
+  const lastKeyName = keys[keys.length - 1];
+  return (() => {
+    var _el$23 = _tmpl$8(), _el$24 = _el$23.firstChild, _el$26 = _el$24.nextSibling;
+    insert(_el$23, keyName && (() => {
+      var _el$27 = _tmpl$2(), _el$28 = _el$27.firstChild, _el$30 = _el$28.nextSibling;
+      _el$30.nextSibling;
+      _el$27.$$click = (e) => {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        setExpanded(!expanded());
+      };
+      insert(_el$27, keyName, _el$30);
+      effect(() => className(_el$27, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+      return _el$27;
+    })(), _el$24);
+    insert(_el$23, createComponent(Show, {
+      get when() {
+        return expanded();
+      },
+      get children() {
+        return createComponent(For, {
+          each: keys,
+          children: (k) => createComponent(JsonValue, {
+            get value() {
+              return value[k];
+            },
+            keyName: k,
+            isLastKey: lastKeyName === k
+          })
+        });
+      }
+    }), _el$26);
+    insert(_el$23, createComponent(Show, {
+      get when() {
+        return !expanded();
+      },
+      get children() {
+        var _el$25 = _tmpl$();
+        _el$25.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$25, () => `... ${keys.length} more`);
+        effect(() => className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$25;
+      }
+    }), _el$26);
+    effect((_p$) => {
+      var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
+      _v$3 !== _p$.e && className(_el$24, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$26, _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$23;
+  })();
+};
+delegateEvents(["click"]);
 export {
   JsonTree
 };

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

@@ -1 +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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"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Show, createSignal } from 'solid-js'\nimport clsx from 'clsx'\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      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return <ArrayValue keyName={keyName} value={value} />\n        }\n        if (typeof value === 'object') {\n          return <ObjectValue keyName={keyName} value={value} />\n        }\n        return <span />\n      })()}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n}: {\n  value: Array<any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span>\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\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      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${value.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n}: {\n  value: Record<string, any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span>\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\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      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${keys.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_tmpl$6","valueContainer","expanded","setExpanded","createSignal","_el$15","_tmpl$7","_el$16","_el$18","_el$19","_el$20","_el$22","$$click","e","stopPropagation","stopImmediatePropagation","clsx","collapsible","Show","when","children","For","each","item","i","length","_el$17","_p$","_v$","valueBraces","_v$2","t","keys","Object","lastKeyName","_el$23","_tmpl$8","_el$24","_el$26","_el$27","_el$28","_el$30","k","_el$25","_v$3","_v$4","_$delegateEvents"],"mappings":";;;;;AAIO,SAASA,SAASC,OAAuB;AAC9C,SAAAC,gBAAQC,WAAS;AAAA,IAACC,QAAM;AAAA,IAAA,IAACC,QAAK;AAAA,aAAEJ,MAAMI;AAAAA,IAAK;AAAA,EAAA,CAAA;AAC7C;AAEA,SAASF,UAAUF,OAKhB;AACD,QAAM;AAAA,IAAEI;AAAAA,IAAOC;AAAAA,IAASF,SAAS;AAAA,IAAOG;AAAAA,EAAAA,IAAcN;AACtD,QAAMO,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,OAAA,MAAA;AAAA,UAAAG,MAAAC,KAAA,MAAA,CAAA,EAEKR,WAAW,OAAOD,UAAU,YAAY,CAACU,MAAMC,QAAQX,KAAK,EAAC;AAAA,aAAA,MAA7DQ,IAAAA,MAAA,MAAA;AAAA,YAAAI,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAD,cAAAC;AAAAV,eAAAK,OAC6CX,SAAOe,KAAA;AAAAE,eAAA,MAAAC,UAAAP,OAAtCT,SAASiB,KAAKC,QAAQ,CAAA;AAAA,eAAAT;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAL,WAAAF,MACC,MAAM;AACN,UAAI,OAAOL,UAAU,UAAU;AAC7B,gBAAA,MAAA;AAAA,cAAAsB,QAAAC,WAAAC,QAAAF,MAAAP,YAAAU,QAAAD,MAAAP;AAAAQ,gBAAAR;AAAAV,iBAAAe,OACiDtB,OAAKyB,KAAA;AAAAP,iBAAA,MAAAC,UAAAG,OAAvCnB,SAASiB,KAAKM,WAAW,CAAA;AAAA,iBAAAJ;AAAAA,QAAA,GAAA;AAAA,MAE1C;AACA,UAAI,OAAOtB,UAAU,UAAU;AAC7B,gBAAA,MAAA;AAAA,cAAA2B,QAAArB,OAAAA;AAAAC,iBAAAoB,OAAgD3B,KAAK;AAAAkB,iBAAA,MAAAC,UAAAQ,OAAjCxB,SAASiB,KAAKQ,WAAW,CAAA;AAAA,iBAAAD;AAAAA,QAAA,GAAA;AAAA,MAC/C;AACA,UAAI,OAAO3B,UAAU,WAAW;AAC9B,gBAAA,MAAA;AAAA,cAAA6B,QAAAvB,OAAAA;AAAAC,iBAAAsB,OAAA,MAAiDC,OAAO9B,KAAK,CAAC;AAAAkB,iBAAA,MAAAC,UAAAU,OAA1C1B,SAASiB,KAAKW,YAAY,CAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,MAChD;AACA,UAAI7B,UAAU,MAAM;AAClB,gBAAA,MAAA;AAAA,cAAAgC,SAAAC,QAAAA;AAAAf,iBAAA,MAAAC,UAAAa,QAAoB7B,SAASiB,KAAKc,SAAS,CAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,MAC7C;AACA,UAAIhC,UAAUmC,QAAW;AACvB,gBAAA,MAAA;AAAA,cAAAC,SAAAC,QAAAA;AAAAnB,iBAAA,MAAAC,UAAAiB,QAAoBjC,SAASiB,KAAKc,SAAS,CAAA;AAAA,iBAAAE;AAAAA,QAAA,GAAA;AAAA,MAC7C;AACA,UAAI,OAAOpC,UAAU,YAAY;AAC/B,gBAAA,MAAA;AAAA,cAAAsC,SAAAhC,OAAAA;AAAAC,iBAAA+B,QAAA,MAC6CR,OAAO9B,KAAK,CAAC;AAAAkB,iBAAA,MAAAC,UAAAmB,QAA3CnC,SAASiB,KAAKmB,aAAa,CAAA;AAAA,iBAAAD;AAAAA,QAAA,GAAA;AAAA,MAE5C;AACA,UAAI5B,MAAMC,QAAQX,KAAK,GAAG;AACxB,eAAAH,gBAAQ2C,YAAU;AAAA,UAACvC;AAAAA,UAAkBD;AAAAA,QAAAA,CAAY;AAAA,MACnD;AACA,UAAI,OAAOA,UAAU,UAAU;AAC7B,eAAAH,gBAAQ4C,aAAW;AAAA,UAACxC;AAAAA,UAAkBD;AAAAA,QAAAA,CAAY;AAAA,MACpD;AACA,aAAAM,OAAAA;AAAAA,IACF,GAAC,IAAA;AAAAC,WAAAF,MACAH,aAAaH,SAAS,KAAE2C,QAAAA,GAAiB,IAAA;AAAAxB,WAAA,MAAAC,UAAAd,MAnC/BF,OAAAA,EAASiB,KAAKuB,eAAe5C,MAAM,CAAC,CAAA;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAsCrD;AAEA,MAAMmC,aAAaA,CAAC;AAAA,EAClBxC;AAAAA,EACAC;AAIF,MAAM;AACJ,QAAME,SAASC,UAAAA;AACf,QAAM,CAACwC,UAAUC,WAAW,IAAIC,aAAa,IAAI;AACjD,UAAA,MAAA;AAAA,QAAAC,SAAAC,QAAAA,GAAAC,SAAAF,OAAAhC,YAAAmC,SAAAD,OAAAhC;AAAAV,WAAAwC,QAEK9C,YAAO,MAAA;AAAA,UAAAkD,SAAAtC,WAAAuC,SAAAD,OAAApC,YAAAsC,SAAAD,OAAAnC;AAAAoC,aAAApC;AAAAkC,aAAAG,UAEMC,CAAAA,MAAM;AACdA,UAAEC,gBAAAA;AACFD,UAAEE,yBAAAA;AACFZ,oBAAY,CAACD,UAAU;AAAA,MACzB;AAACrC,aAAA4C,QAGMlD,SAAOoD,MAAA;AAAAnC,aAAA,MAAAC,UAAAgC,QAFPO,KAAKvD,OAAAA,EAASiB,KAAKC,UAAUlB,OAAAA,EAASiB,KAAKuC,WAAW,CAAC,CAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA,GAIjEF,MAAA;AAAA1C,WAAAwC,QAAAlD,gBAEA+D,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAkB,WAAA;AAAA,eAAAjE,gBACnBkE,KAAG;AAAA,UAACC,MAAMhE;AAAAA,UAAK8D,UACbA,CAACG,MAAMC,MAAM;AACZ,kBAAMhE,YAAYgE,EAAAA,MAAQlE,MAAMmE,SAAS;AACzC,mBAAAtE,gBAEKC,WAAS;AAAA,cAACE,OAAOiE;AAAAA,cAAM/D;AAAAA,YAAAA,CAAoB;AAAA,UAGlD;AAAA,QAAA,CAAC;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAgD,MAAA;AAAA3C,WAAAwC,QAAAlD,gBAGJ+D,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACjB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAkB,WAAA;AAAA,YAAAM,SAAA9D,OAAAA;AAAA8D,eAAAd,UAETC,CAAAA,MAAM;AACdA,YAAEC,gBAAAA;AACFD,YAAEE,yBAAAA;AACFZ,sBAAY,CAACD,UAAU;AAAA,QACzB;AAACrC,eAAA6D,QAAA,MAGA,OAAOpE,MAAMmE,MAAM,OAAO;AAAAjD,eAAA,MAAAC,UAAAiD,QAFpBV,KAAKvD,OAAAA,EAASiB,KAAKC,UAAUlB,OAAAA,EAASiB,KAAKuC,WAAW,CAAC,CAAA;AAAA,eAAAS;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAlB,MAAA;AAAAhC,WAAAmD,CAAAA,QAAA;AAAA,UAAAC,MApBrDnE,SAASiB,KAAKmD,aAAWC,OAyBzBrE,SAASiB,KAAKmD;AAAWD,cAAAD,IAAAd,KAAApC,UAAA8B,QAAAoB,IAAAd,IAAAe,GAAA;AAAAE,eAAAH,IAAAI,KAAAtD,UAAA+B,QAAAmB,IAAAI,IAAAD,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAd,GAAApB;AAAAA,MAAAsC,GAAAtC;AAAAA,IAAAA,CAAA;AAAA,WAAAY;AAAAA,EAAA,GAAA;AAG5C;AAEA,MAAMN,cAAcA,CAAC;AAAA,EACnBzC;AAAAA,EACAC;AAIF,MAAM;AACJ,QAAME,SAASC,UAAAA;AACf,QAAM,CAACwC,UAAUC,WAAW,IAAIC,aAAa,IAAI;AACjD,QAAM4B,OAAOC,OAAOD,KAAK1E,KAAK;AAC9B,QAAM4E,cAAcF,KAAKA,KAAKP,SAAS,CAAC;AAExC,UAAA,MAAA;AAAA,QAAAU,SAAAC,QAAAA,GAAAC,SAAAF,OAAA9D,YAAAiE,SAAAD,OAAA9D;AAAAV,WAAAsE,QAEK5E,YAAO,MAAA;AAAA,UAAAgF,SAAApE,WAAAqE,SAAAD,OAAAlE,YAAAoE,SAAAD,OAAAjE;AAAAkE,aAAAlE;AAAAgE,aAAA3B,UAEMC,CAAAA,MAAM;AACdA,UAAEC,gBAAAA;AACFD,UAAEE,yBAAAA;AACFZ,oBAAY,CAACD,UAAU;AAAA,MACzB;AAACrC,aAAA0E,QAGMhF,SAAOkF,MAAA;AAAAjE,aAAA,MAAAC,UAAA8D,QAFPvB,KAAKvD,OAAAA,EAASiB,KAAKC,UAAUlB,OAAAA,EAASiB,KAAKuC,WAAW,CAAC,CAAA;AAAA,aAAAsB;AAAAA,IAAA,GAAA,GAIjEF,MAAA;AAAAxE,WAAAsE,QAAAhF,gBAEA+D,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAkB,WAAA;AAAA,eAAAjE,gBACnBkE,KAAG;AAAA,UAACC,MAAMU;AAAAA,UAAIZ,UACXsB,CAAAA,MAACvF,gBAEEC,WAAS;AAAA,YAAA,IACRE,QAAK;AAAA,qBAAEA,MAAMoF,CAAC;AAAA,YAAC;AAAA,YACfnF,SAASmF;AAAAA,YACTlF,WAAW0E,gBAAgBQ;AAAAA,UAAAA,CAAC;AAAA,QAAA,CAGjC;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAJ,MAAA;AAAAzE,WAAAsE,QAAAhF,gBAGJ+D,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACjB,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAkB,WAAA;AAAA,YAAAuB,SAAA/E,OAAAA;AAAA+E,eAAA/B,UAETC,CAAAA,MAAM;AACdA,YAAEC,gBAAAA;AACFD,YAAEE,yBAAAA;AACFZ,sBAAY,CAACD,UAAU;AAAA,QACzB;AAACrC,eAAA8E,QAAA,MAGA,OAAOX,KAAKP,MAAM,OAAO;AAAAjD,eAAA,MAAAC,UAAAkE,QAFnB3B,KAAKvD,OAAAA,EAASiB,KAAKC,UAAUlB,OAAAA,EAASiB,KAAKuC,WAAW,CAAC,CAAA;AAAA,eAAA0B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAL,MAAA;AAAA9D,WAAAmD,CAAAA,QAAA;AAAA,UAAAiB,OArBrDnF,SAASiB,KAAKmD,aAAWgB,OA0BzBpF,SAASiB,KAAKmD;AAAWe,eAAAjB,IAAAd,KAAApC,UAAA4D,QAAAV,IAAAd,IAAA+B,IAAA;AAAAC,eAAAlB,IAAAI,KAAAtD,UAAA6D,QAAAX,IAAAI,IAAAc,IAAA;AAAA,aAAAlB;AAAAA,IAAA,GAAA;AAAA,MAAAd,GAAApB;AAAAA,MAAAsC,GAAAtC;AAAAA,IAAAA,CAAA;AAAA,WAAA0C;AAAAA,EAAA,GAAA;AAG5C;AAACW,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/index.d.ts

@@ -3,3 +3,7 @@ export { Input } from './components/input.js';
 export { Select } from './components/select.js';
 export { TanStackLogo } from './components/logo.js';
 export { JsonTree } from './components/tree.js';
+export { Button } from './components/button.js';
+export { Tag } from './components/tag.js';
+export { MainPanel } from './components/main-panel.js';
+export { Section, SectionTitle, SectionDescription, SectionIcon, } from './components/section.js';

package/dist/esm/index.js

@@ -3,11 +3,22 @@ import { Input } from "./components/input.js";
 import { Select } from "./components/select.js";
 import { TanStackLogo } from "./components/logo.js";
 import { JsonTree } from "./components/tree.js";
+import { Button } from "./components/button.js";
+import { Tag } from "./components/tag.js";
+import { MainPanel } from "./components/main-panel.js";
+import { Section, SectionDescription, SectionIcon, SectionTitle } from "./components/section.js";
 export {
+  Button,
   Checkbox,
   Input,
   JsonTree,
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
   Select,
+  Tag,
   TanStackLogo
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,43 +1,180 @@
 const tokens = {
   colors: {
+    inherit: "inherit",
+    current: "currentColor",
+    transparent: "transparent",
+    black: "#000000",
+    white: "#ffffff",
+    neutral: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
     darkGray: {
-      800: "#111318"
+      50: "#525c7a",
+      100: "#49536e",
+      200: "#414962",
+      300: "#394056",
+      400: "#313749",
+      500: "#292e3d",
+      600: "#212530",
+      700: "#191c24",
+      800: "#111318",
+      900: "#0b0d10"
     },
     gray: {
+      50: "#f9fafb",
       100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
       400: "#98a2b3",
       500: "#667085",
       600: "#475467",
-      700: "#344054"
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
     },
     blue: {
-      300: "#84CAFF"
+      25: "#F5FAFF",
+      50: "#EFF8FF",
+      100: "#D1E9FF",
+      200: "#B2DDFF",
+      300: "#84CAFF",
+      400: "#53B1FD",
+      500: "#2E90FA",
+      600: "#1570EF",
+      700: "#175CD3",
+      800: "#1849A9",
+      900: "#194185"
     },
     green: {
-      400: "#32D583"
+      25: "#F6FEF9",
+      50: "#ECFDF3",
+      100: "#D1FADF",
+      200: "#A6F4C5",
+      300: "#6CE9A6",
+      400: "#32D583",
+      500: "#12B76A",
+      600: "#039855",
+      700: "#027A48",
+      800: "#05603A",
+      900: "#054F31"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     yellow: {
-      400: "#FDB022"
+      25: "#FFFCF5",
+      50: "#FFFAEB",
+      100: "#FEF0C7",
+      200: "#FEDF89",
+      300: "#FEC84B",
+      400: "#FDB022",
+      500: "#F79009",
+      600: "#DC6803",
+      700: "#B54708",
+      800: "#93370D",
+      900: "#7A2E0E"
     },
     purple: {
+      25: "#FAFAFF",
+      50: "#F4F3FF",
+      100: "#EBE9FE",
+      200: "#D9D6FE",
+      300: "#BDB4FE",
       400: "#9B8AFB",
-      500: "#7A5AF8"
+      500: "#7A5AF8",
+      600: "#6938EF",
+      700: "#5925DC",
+      800: "#4A1FB8",
+      900: "#3E1C96"
+    },
+    teal: {
+      25: "#F6FEFC",
+      50: "#F0FDF9",
+      100: "#CCFBEF",
+      200: "#99F6E0",
+      300: "#5FE9D0",
+      400: "#2ED3B7",
+      500: "#15B79E",
+      600: "#0E9384",
+      700: "#107569",
+      800: "#125D56",
+      900: "#134E48"
     },
     pink: {
-      400: "#ec4899"
+      25: "#fdf2f8",
+      50: "#fce7f3",
+      100: "#fbcfe8",
+      200: "#f9a8d4",
+      300: "#f472b6",
+      400: "#ec4899",
+      500: "#db2777",
+      600: "#be185d",
+      700: "#9d174d",
+      800: "#831843",
+      900: "#500724"
+    },
+    cyan: {
+      25: "#ecfeff",
+      50: "#cffafe",
+      100: "#a5f3fc",
+      200: "#67e8f9",
+      300: "#22d3ee",
+      400: "#06b6d4",
+      500: "#0891b2",
+      600: "#0e7490",
+      700: "#155e75",
+      800: "#164e63",
+      900: "#083344"
     }
   },
   alpha: {
     20: "33"
   },
   font: {
+    size: {
+      xs: "calc(var(--tsrd-font-size) * 0.75)",
+      sm: "calc(var(--tsrd-font-size) * 0.875)"
+    },
+    weight: {
+      medium: "500"
+    },
     fontFamily: {
       sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
       mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
     }
   },
+  border: {
+    radius: {
+      sm: "calc(var(--tsrd-font-size) * 0.25)",
+      full: "9999px"
+    }
+  },
   size: {
     0.5: "calc(var(--tsrd-font-size) * 0.125)",
+    1: "calc(var(--tsrd-font-size) * 0.25)",
+    1.5: "calc(var(--tsrd-font-size) * 0.375)",
+    4: "calc(var(--tsrd-font-size) * 1)",
+    4.5: "calc(var(--tsrd-font-size) * 1.125)",
+    6.5: "calc(var(--tsrd-font-size) * 1.625)",
     12: "calc(var(--tsrd-font-size) * 3)"
   }
 };