@tanstack/devtools-ui 0.3.2 → 0.3.4

package/dist/esm/components/tree.js

@@ -1,233 +1,359 @@
-import { createComponent, template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
-import { createSignal, Show, For } from "solid-js";
+import { createComponent, template, insert, memo, effect, className, addEventListener, setAttribute, delegateEvents } from "solid-js/web";
+import { createSignal, Show, For, Switch, Match } from "solid-js";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
-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>}`);
+import { useStyles, css } from "../styles/use-styles.js";
+import { Copier, CopiedCopier, ErrorCopier } from "./icons.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$2 = /* @__PURE__ */ template(`<span><svg width=16 height=16 viewBox="0 0 16 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 12L10 8L6 4"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$5 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$6 = /* @__PURE__ */ template(`<span>null`), _tmpl$7 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9 = /* @__PURE__ */ template(`<span>,`), _tmpl$0 = /* @__PURE__ */ template(`<span>...`), _tmpl$1 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$10 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
 function JsonTree(props) {
   return createComponent(JsonValue, {
     isRoot: true,
     get value() {
       return props.value;
+    },
+    get copyable() {
+      return props.copyable;
     }
   });
 }
+const CopyButton = (props) => {
+  const styles = useStyles();
+  const [copyState, setCopyState] = createSignal("NoCopy");
+  return (() => {
+    var _el$ = _tmpl$();
+    addEventListener(_el$, "click", copyState() === "NoCopy" ? () => {
+      navigator.clipboard.writeText(JSON.stringify(props.value, null, 2)).then(() => {
+        setCopyState("SuccessCopy");
+        setTimeout(() => {
+          setCopyState("NoCopy");
+        }, 1500);
+      }, (err) => {
+        console.error("Failed to copy: ", err);
+        setCopyState("ErrorCopy");
+        setTimeout(() => {
+          setCopyState("NoCopy");
+        }, 1500);
+      });
+    } : void 0, true);
+    insert(_el$, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return copyState() === "NoCopy";
+          },
+          get children() {
+            return createComponent(Copier, {});
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "SuccessCopy";
+          },
+          get children() {
+            return createComponent(CopiedCopier, {
+              theme: "dark"
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "ErrorCopy";
+          },
+          get children() {
+            return createComponent(ErrorCopier, {});
+          }
+        })];
+      }
+    }));
+    effect((_p$) => {
+      var _v$ = styles().tree.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+const Expander = (props) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$2 = _tmpl$2();
+    effect(() => className(_el$2, clsx(styles().tree.expander, css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `, props.expanded && css`
+            & svg {
+              top: -1px;
+            }
+          `)));
+    return _el$2;
+  })();
+};
 function JsonValue(props) {
   const {
     value,
     keyName,
     isRoot = false,
-    isLastKey
+    isLastKey,
+    copyable
   } = props;
   const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, (() => {
+    var _el$3 = _tmpl$3();
+    insert(_el$3, (() => {
       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;
+        var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$7 = _el$5.nextSibling;
+        _el$7.nextSibling;
+        insert(_el$4, keyName, _el$7);
+        effect(() => className(_el$4, styles().tree.valueKey));
+        return _el$4;
       })();
     })(), null);
-    insert(_el$, () => {
+    insert(_el$3, () => {
       if (typeof value === "string") {
         return (() => {
-          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;
+          var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
+          _el$1.nextSibling;
+          insert(_el$8, value, _el$1);
+          effect(() => className(_el$8, styles().tree.valueString));
+          return _el$8;
         })();
       }
       if (typeof value === "number") {
         return (() => {
-          var _el$0 = _tmpl$();
-          insert(_el$0, value);
-          effect(() => className(_el$0, styles().tree.valueNumber));
-          return _el$0;
+          var _el$10 = _tmpl$3();
+          insert(_el$10, value);
+          effect(() => className(_el$10, styles().tree.valueNumber));
+          return _el$10;
         })();
       }
       if (typeof value === "boolean") {
         return (() => {
-          var _el$1 = _tmpl$();
-          insert(_el$1, () => String(value));
-          effect(() => className(_el$1, styles().tree.valueBoolean));
-          return _el$1;
+          var _el$11 = _tmpl$3();
+          insert(_el$11, () => String(value));
+          effect(() => className(_el$11, styles().tree.valueBoolean));
+          return _el$11;
         })();
       }
       if (value === null) {
         return (() => {
-          var _el$10 = _tmpl$4();
-          effect(() => className(_el$10, styles().tree.valueNull));
-          return _el$10;
+          var _el$12 = _tmpl$6();
+          effect(() => className(_el$12, styles().tree.valueNull));
+          return _el$12;
         })();
       }
       if (value === void 0) {
         return (() => {
-          var _el$11 = _tmpl$5();
-          effect(() => className(_el$11, styles().tree.valueNull));
-          return _el$11;
+          var _el$13 = _tmpl$7();
+          effect(() => className(_el$13, styles().tree.valueNull));
+          return _el$13;
         })();
       }
       if (typeof value === "function") {
         return (() => {
-          var _el$12 = _tmpl$();
-          insert(_el$12, () => String(value));
-          effect(() => className(_el$12, styles().tree.valueFunction));
-          return _el$12;
+          var _el$14 = _tmpl$3();
+          insert(_el$14, () => String(value));
+          effect(() => className(_el$14, styles().tree.valueFunction));
+          return _el$14;
         })();
       }
       if (Array.isArray(value)) {
         return createComponent(ArrayValue, {
+          copyable,
           keyName,
           value
         });
       }
       if (typeof value === "object") {
         return createComponent(ObjectValue, {
+          copyable,
           keyName,
           value
         });
       }
-      return _tmpl$();
+      return _tmpl$3();
     }, null);
-    insert(_el$, isLastKey || isRoot ? "" : _tmpl$6(), null);
-    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
-    return _el$;
+    insert(_el$3, copyable && (() => {
+      var _el$16 = _tmpl$8();
+      insert(_el$16, createComponent(CopyButton, {
+        value
+      }));
+      effect(() => className(_el$16, clsx(styles().tree.actions, "actions")));
+      return _el$16;
+    })(), null);
+    insert(_el$3, isLastKey || isRoot ? "" : _tmpl$9(), null);
+    effect(() => className(_el$3, styles().tree.valueContainer(isRoot)));
+    return _el$3;
   })();
 }
 const ArrayValue = ({
   value,
-  keyName
+  keyName,
+  copyable
 }) => {
   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) => {
+    var _el$18 = _tmpl$1(), _el$19 = _el$18.firstChild, _el$22 = _el$19.nextSibling;
+    insert(_el$18, createComponent(Expander, {
+      get expanded() {
+        return expanded();
+      }
+    }), _el$19);
+    insert(_el$18, keyName && (() => {
+      var _el$23 = _tmpl$10(), _el$24 = _el$23.firstChild, _el$29 = _el$24.nextSibling, _el$25 = _el$29.nextSibling, _el$27 = _el$25.nextSibling, _el$28 = _el$27.firstChild;
+      _el$23.$$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, {
+      insert(_el$23, keyName, _el$29);
+      insert(_el$27, () => value.length, _el$28);
+      effect((_p$) => {
+        var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
+        _v$6 !== _p$.e && className(_el$23, _p$.e = _v$6);
+        _v$7 !== _p$.t && className(_el$27, _p$.t = _v$7);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$23;
+    })(), _el$19);
+    insert(_el$18, createComponent(Show, {
       get when() {
         return expanded();
       },
       get children() {
-        return createComponent(For, {
+        var _el$20 = _tmpl$3();
+        insert(_el$20, createComponent(For, {
           each: value,
           children: (item, i) => {
             const isLastKey = i() === value.length - 1;
             return createComponent(JsonValue, {
+              copyable,
               value: item,
               isLastKey
             });
           }
-        });
+        }));
+        effect(() => className(_el$20, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$20;
       }
-    }), _el$18);
-    insert(_el$15, createComponent(Show, {
+    }), _el$22);
+    insert(_el$18, createComponent(Show, {
       get when() {
         return !expanded();
       },
       get children() {
-        var _el$17 = _tmpl$();
-        _el$17.$$click = (e) => {
+        var _el$21 = _tmpl$0();
+        _el$21.$$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;
+        effect(() => className(_el$21, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$21;
       }
-    }), _el$18);
+    }), _el$22);
     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);
+      var _v$3 = styles().tree.expanderContainer, _v$4 = styles().tree.valueBraces, _v$5 = styles().tree.valueBraces;
+      _v$3 !== _p$.e && className(_el$18, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$19, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$22, _p$.a = _v$5);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
-    return _el$15;
+    return _el$18;
   })();
 };
 const ObjectValue = ({
   value,
-  keyName
+  keyName,
+  copyable
 }) => {
   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) => {
+    var _el$30 = _tmpl$11(), _el$31 = _el$30.firstChild, _el$34 = _el$31.nextSibling;
+    insert(_el$30, keyName && createComponent(Expander, {
+      get expanded() {
+        return expanded();
+      }
+    }), _el$31);
+    insert(_el$30, keyName && (() => {
+      var _el$35 = _tmpl$10(), _el$36 = _el$35.firstChild, _el$41 = _el$36.nextSibling, _el$37 = _el$41.nextSibling, _el$39 = _el$37.nextSibling, _el$40 = _el$39.firstChild;
+      _el$35.$$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, {
+      insert(_el$35, keyName, _el$41);
+      insert(_el$39, () => keys.length, _el$40);
+      effect((_p$) => {
+        var _v$1 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$10 = styles().tree.info;
+        _v$1 !== _p$.e && className(_el$35, _p$.e = _v$1);
+        _v$10 !== _p$.t && className(_el$39, _p$.t = _v$10);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$35;
+    })(), _el$31);
+    insert(_el$30, createComponent(Show, {
       get when() {
         return expanded();
       },
       get children() {
-        return createComponent(For, {
+        var _el$32 = _tmpl$3();
+        insert(_el$32, createComponent(For, {
           each: keys,
           children: (k) => createComponent(JsonValue, {
             get value() {
               return value[k];
             },
             keyName: k,
-            isLastKey: lastKeyName === k
+            isLastKey: lastKeyName === k,
+            copyable
           })
-        });
+        }));
+        effect(() => className(_el$32, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$32;
       }
-    }), _el$26);
-    insert(_el$23, createComponent(Show, {
+    }), _el$34);
+    insert(_el$30, createComponent(Show, {
       get when() {
         return !expanded();
       },
       get children() {
-        var _el$25 = _tmpl$();
-        _el$25.$$click = (e) => {
+        var _el$33 = _tmpl$0();
+        _el$33.$$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;
+        effect(() => className(_el$33, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$33;
       }
-    }), _el$26);
+    }), _el$34);
     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);
+      var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces, _v$0 = styles().tree.valueBraces;
+      _v$8 !== _p$.e && className(_el$30, _p$.e = _v$8);
+      _v$9 !== _p$.t && className(_el$31, _p$.t = _v$9);
+      _v$0 !== _p$.a && className(_el$34, _p$.a = _v$0);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
-    return _el$23;
+    return _el$30;
   })();
 };
 delegateEvents(["click"]);

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: { value: any; copyable?: boolean }) {\n  return <JsonValue isRoot value={props.value} copyable={props.copyable} />\n}\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean }) => {\n  const styles = useStyles()\n  return (\n    <span\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey, copyable } = 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 (\n            <ArrayValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander expanded={expanded()} />\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 class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                />\n              )\n            }}\n          </For>\n        </span>\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          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\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 class={styles().tree.expanderContainer}>\n      {keyName && <Expander expanded={expanded()} />}\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 class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                />\n              </>\n            )}\n          </For>\n        </span>\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          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","CopyButton","styles","useStyles","copyState","setCopyState","createSignal","_el$","_tmpl$","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","undefined","_$insert","Switch","children","Match","when","Copier","CopiedCopier","theme","ErrorCopier","_$effect","_p$","_v$","tree","actionButton","_v$2","e","_$className","t","_$setAttribute","Expander","_el$2","_tmpl$2","clsx","expander","css","expanded","keyName","isLastKey","_el$3","_tmpl$3","_c$","_$memo","Array","isArray","_el$4","_tmpl$4","_el$5","firstChild","_el$7","nextSibling","valueKey","_el$8","_tmpl$5","_el$9","_el$1","valueString","_el$10","valueNumber","_el$11","String","valueBoolean","_el$12","_tmpl$6","valueNull","_el$13","_tmpl$7","_el$14","valueFunction","ArrayValue","ObjectValue","_el$16","_tmpl$8","actions","_tmpl$9","valueContainer","setExpanded","_el$18","_tmpl$1","_el$19","_el$22","_el$23","_tmpl$10","_el$24","_el$29","_el$25","_el$27","_el$28","$$click","stopPropagation","stopImmediatePropagation","length","_v$6","collapsible","_v$7","info","Show","_el$20","For","each","item","i","expandedLine","Boolean","_el$21","_tmpl$0","_v$3","expanderContainer","_v$4","valueBraces","_v$5","a","keys","Object","lastKeyName","_el$30","_tmpl$11","_el$31","_el$34","_el$35","_el$36","_el$41","_el$37","_el$39","_el$40","_v$1","_v$10","_el$32","k","_el$33","_v$8","_v$9","_v$0","_$delegateEvents"],"mappings":"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"}

package/dist/esm/icons.d.ts

@@ -0,0 +1 @@
+export * from './components/icons.js';

package/dist/esm/icons.js

@@ -0,0 +1,17 @@
+import { Cogs, CopiedCopier, Copier, ErrorCopier, GeoTag, Keyboard, Link, List, PageSearch, PiP, SettingsCog, SocialBubble, X } from "./components/icons.js";
+export {
+  Cogs,
+  CopiedCopier,
+  Copier,
+  ErrorCopier,
+  GeoTag,
+  Keyboard,
+  Link,
+  List,
+  PageSearch,
+  PiP,
+  SettingsCog,
+  SocialBubble,
+  X
+};
+//# sourceMappingURL=icons.js.map

package/dist/esm/icons.js.map

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

package/dist/esm/index.d.ts

@@ -7,3 +7,5 @@ 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';
+export { Header, HeaderLogo } from './components/header.js';
+export { useTheme, ThemeContextProvider } from './components/theme.js';

package/dist/esm/index.js

@@ -7,9 +7,13 @@ 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";
+import { Header, HeaderLogo } from "./components/header.js";
+import { ThemeContextProvider, useTheme } from "./components/theme.js";
 export {
   Button,
   Checkbox,
+  Header,
+  HeaderLogo,
   Input,
   JsonTree,
   MainPanel,
@@ -19,6 +23,8 @@ export {
   SectionTitle,
   Select,
   Tag,
-  TanStackLogo
+  TanStackLogo,
+  ThemeContextProvider,
+  useTheme
 };
 //# 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

@@ -152,10 +152,16 @@ const tokens = {
   font: {
     size: {
       xs: "calc(var(--tsrd-font-size) * 0.75)",
-      sm: "calc(var(--tsrd-font-size) * 0.875)"
+      sm: "calc(var(--tsrd-font-size) * 0.875)",
+      md: "var(--tsrd-font-size)"
+    },
+    lineHeight: {
+      xs: "calc(var(--tsrd-font-size) * 1)"
     },
     weight: {
-      medium: "500"
+      medium: "500",
+      semibold: "600",
+      bold: "700"
     },
     fontFamily: {
       sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
@@ -164,6 +170,7 @@ const tokens = {
   },
   border: {
     radius: {
+      xs: "calc(var(--tsrd-font-size) * 0.125)",
       sm: "calc(var(--tsrd-font-size) * 0.25)",
       full: "9999px"
     }
@@ -172,6 +179,9 @@ const tokens = {
     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)",
+    2: "calc(var(--tsrd-font-size) * 0.5)",
+    2.5: "calc(var(--tsrd-font-size) * 0.625)",
+    3: "calc(var(--tsrd-font-size) * 0.75)",
     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)",