@tanstack/devtools-ui 0.4.3 → 0.5.0

package/dist/esm/components/button.js

@@ -1,4 +1,4 @@
-import { template, spread, mergeProps, insert } from "solid-js/web";
+import { spread, mergeProps, insert, template } from "solid-js/web";
 import { splitProps } from "solid-js";
 import clsx from "clsx";
 import { useStyles } from "../styles/use-styles.js";

package/dist/esm/components/checkbox.js

@@ -1,4 +1,4 @@
-import { template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { insert, memo, effect, className, template, delegateEvents } from "solid-js/web";
 import { createSignal } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);

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

@@ -1,9 +1,10 @@
 import { JSX } from 'solid-js/jsx-runtime';
 export declare function Header({ children, class: className, ...rest }: JSX.IntrinsicElements['header']): JSX.Element;
-export declare function HeaderLogo({ children, flavor, }: {
+export declare function HeaderLogo({ children, flavor, onClick, }: {
     children: JSX.Element;
     flavor: {
         light: string;
         dark: string;
     };
+    onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
 }): JSX.Element;

package/dist/esm/components/header.js

@@ -1,4 +1,4 @@
-import { template, spread, mergeProps, insert, effect, className } from "solid-js/web";
+import { spread, mergeProps, insert, addEventListener, effect, className, template, delegateEvents } from "solid-js/web";
 import clsx from "clsx";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<header>`), _tmpl$2 = /* @__PURE__ */ template(`<div><button><span>TANSTACK</span><span>`);
@@ -21,11 +21,13 @@ function Header({
 }
 function HeaderLogo({
   children,
-  flavor
+  flavor,
+  onClick
 }) {
   const styles = useStyles();
   return (() => {
     var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    addEventListener(_el$3, "click", onClick, true);
     insert(_el$5, children);
     effect((_p$) => {
       var _v$ = styles().header.logoAndToggleContainer, _v$2 = clsx(styles().header.logo), _v$3 = clsx(styles().header.tanstackLogo), _v$4 = clsx(styles().header.flavorLogo(flavor.light, flavor.dark));
@@ -43,6 +45,7 @@ function HeaderLogo({
     return _el$2;
   })();
 }
+delegateEvents(["click"]);
 export {
   Header,
   HeaderLogo

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../src/components/header.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport function Header({\n  children,\n  class: className,\n  ...rest\n}: JSX.IntrinsicElements['header']) {\n  const styles = useStyles()\n  return (\n    <header\n      class={clsx(styles().header.row, 'tsqd-header', className)}\n      {...rest}\n    >\n      {children}\n    </header>\n  )\n}\n\nexport function HeaderLogo({\n  children,\n  flavor,\n}: {\n  children: JSX.Element\n  flavor: {\n    light: string\n    dark: string\n  }\n}) {\n  const styles = useStyles()\n  return (\n    <div class={styles().header.logoAndToggleContainer}>\n      <button class={clsx(styles().header.logo)}>\n        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>\n        <span\n          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}\n        >\n          {children}\n        </span>\n      </button>\n    </div>\n  )\n}\n"],"names":["Header","children","class","className","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","header","row","_$insert","HeaderLogo","flavor","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined"],"mappings":";;;;AAIO,SAASA,OAAO;AAAA,EACrBC;AAAAA,EACAC,OAAOC;AAAAA,EACP,GAAGC;AAC4B,GAAG;AAClC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,KAAKN,OAAAA,EAASO,OAAOC,KAAK,eAAeV,UAAS;AAAA,MAAC;AAAA,IAAA,GACtDC,IAAI,GAAA,OAAA,IAAA;AAAAU,WAAAP,MAEPN,QAAQ;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAGf;AAEO,SAASQ,WAAW;AAAA,EACzBd;AAAAA,EACAe;AAOF,GAAG;AACD,QAAMX,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAW,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAT,WAAAQ,OAOSrB,QAAQ;AAAAuB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANHrB,OAAAA,EAASO,OAAOe,wBAAsBC,OACjCjB,KAAKN,OAAAA,EAASO,OAAOiB,IAAI,GAACC,OAC1BnB,KAAKN,OAAAA,EAASO,OAAOmB,YAAY,GAACC,OAEtCrB,KAAKN,OAAAA,EAASO,OAAOqB,WAAWjB,OAAOkB,OAAOlB,OAAOmB,IAAI,CAAC;AAACT,cAAAD,IAAAW,KAAAC,UAAApB,OAAAQ,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAa,KAAAD,UAAAlB,OAAAM,IAAAa,IAAAV,IAAA;AAAAE,eAAAL,IAAAc,KAAAF,UAAAhB,OAAAI,IAAAc,IAAAT,IAAA;AAAAE,eAAAP,IAAAe,KAAAH,UAAAf,OAAAG,IAAAe,IAAAR,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAO5E;"}
+{"version":3,"file":"header.js","sources":["../../../src/components/header.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport function Header({\n  children,\n  class: className,\n  ...rest\n}: JSX.IntrinsicElements['header']) {\n  const styles = useStyles()\n  return (\n    <header\n      class={clsx(styles().header.row, 'tsqd-header', className)}\n      {...rest}\n    >\n      {children}\n    </header>\n  )\n}\n\nexport function HeaderLogo({\n  children,\n  flavor,\n  onClick,\n}: {\n  children: JSX.Element\n  flavor: {\n    light: string\n    dark: string\n  }\n  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>\n}) {\n  const styles = useStyles()\n  return (\n    <div class={styles().header.logoAndToggleContainer}>\n      <button class={clsx(styles().header.logo)} onClick={onClick}>\n        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>\n        <span\n          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}\n        >\n          {children}\n        </span>\n      </button>\n    </div>\n  )\n}\n"],"names":["Header","children","class","className","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","header","row","_$insert","HeaderLogo","flavor","onClick","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$addEventListener","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;AAIO,SAASA,OAAO;AAAA,EACrBC;AAAAA,EACAC,OAAOC;AAAAA,EACP,GAAGC;AAC4B,GAAG;AAClC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,KAAKN,OAAAA,EAASO,OAAOC,KAAK,eAAeV,UAAS;AAAA,MAAC;AAAA,IAAA,GACtDC,IAAI,GAAA,OAAA,IAAA;AAAAU,WAAAP,MAEPN,QAAQ;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAGf;AAEO,SAASQ,WAAW;AAAA,EACzBd;AAAAA,EACAe;AAAAA,EACAC;AAQF,GAAG;AACD,QAAMZ,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAY,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAC,qBAAAL,OAAA,SAEwDH,SAAO,IAAA;AAAAH,WAAAS,OAKtDtB,QAAQ;AAAAyB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANHvB,OAAAA,EAASO,OAAOiB,wBAAsBC,OACjCnB,KAAKN,OAAAA,EAASO,OAAOmB,IAAI,GAACC,OAC1BrB,KAAKN,OAAAA,EAASO,OAAOqB,YAAY,GAACC,OAEtCvB,KAAKN,OAAAA,EAASO,OAAOuB,WAAWnB,OAAOoB,OAAOpB,OAAOqB,IAAI,CAAC;AAACT,cAAAD,IAAAW,KAAAC,UAAArB,OAAAS,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAa,KAAAD,UAAAnB,OAAAO,IAAAa,IAAAV,IAAA;AAAAE,eAAAL,IAAAc,KAAAF,UAAAjB,OAAAK,IAAAc,IAAAT,IAAA;AAAAE,eAAAP,IAAAe,KAAAH,UAAAhB,OAAAI,IAAAe,IAAAR,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAO5E;AAAC0B,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/components/icons.js

@@ -1,4 +1,4 @@
-import { template, effect, setAttribute } from "solid-js/web";
+import { effect, setAttribute, template } from "solid-js/web";
 var _tmpl$ = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path class=copier d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z"stroke-width=2 stroke-linecap=round stroke-linejoin=round stroke=currentColor>`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-file-search2-icon lucide-file-search-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><circle cx=11.5 cy=14.5 r=2.5></circle><path d="M13.3 16.3 15 18">`), _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`), _tmpl$5 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">`), _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2>`), _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3>`), _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12>`), _tmpl$9 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">`), _tmpl$0 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M16.5 9.39999L7.5 4.20999M12 17.5L12 3M21 16V7.99999C20.9996 7.64926 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.26999L13 2.26999C12.696 2.09446 12.3511 2.00204 12 2.00204C11.6489 2.00204 11.304 2.09446 11 2.26999L4 6.26999C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64926 3 7.99999V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$1 = /* @__PURE__ */ template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.76489 14.1003 1.98232 16.07 2.85999M22 4L12 14.01L9 11.01"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$10 = /* @__PURE__ */ template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$11 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$12 = /* @__PURE__ */ template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$13 = /* @__PURE__ */ template(`<svg width=12 height=12 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M21 13V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H11M15 3H21M21 3V9M21 3L10 14"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$14 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path><path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$15 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$16 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 10h6V4"></path><path d="m2 4 6 6"></path><path d="M21 10V7a2 2 0 0 0-2-2h-7"></path><path d="M3 14v2a2 2 0 0 0 2 2h3"></path><rect x=12 y=14 width=10 height=7 rx=1>`), _tmpl$17 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$18 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"stroke=#F04438 stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
 function Copier() {
   return _tmpl$();

package/dist/esm/components/input.js

@@ -1,4 +1,4 @@
-import { template, insert, memo, effect, className, setAttribute, delegateEvents } from "solid-js/web";
+import { insert, memo, effect, className, setAttribute, template, delegateEvents } from "solid-js/web";
 import { createSignal } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><input>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`);

package/dist/esm/components/logo.js

@@ -1,4 +1,4 @@
-import { template, setAttribute, effect } from "solid-js/web";
+import { setAttribute, effect, template } from "solid-js/web";
 import { createUniqueId } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`);

package/dist/esm/components/main-panel.js

@@ -1,4 +1,4 @@
-import { template, insert, effect, className } from "solid-js/web";
+import { insert, effect, className, template } from "solid-js/web";
 import clsx from "clsx";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/esm/components/section.js

@@ -1,4 +1,4 @@
-import { template, spread, mergeProps, insert } from "solid-js/web";
+import { spread, mergeProps, insert, template } from "solid-js/web";
 import clsx from "clsx";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<section>`), _tmpl$2 = /* @__PURE__ */ template(`<h3>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`), _tmpl$4 = /* @__PURE__ */ template(`<span>`);

package/dist/esm/components/select.js

@@ -1,4 +1,4 @@
-import { template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { insert, memo, effect, className, template, delegateEvents } from "solid-js/web";
 import { createSignal } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><select>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`), _tmpl$4 = /* @__PURE__ */ template(`<option>`);

package/dist/esm/components/tag.js

@@ -1,4 +1,4 @@
-import { template, insert, createComponent, effect, className } from "solid-js/web";
+import { insert, createComponent, effect, className, memo, template } from "solid-js/web";
 import { Show } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<button><span></span><span>`);
@@ -9,7 +9,7 @@ const Tag = (props) => {
     insert(_el$3, () => props.label);
     insert(_el$, createComponent(Show, {
       get when() {
-        return props.count && props.count > 0;
+        return memo(() => !!props.count)() && props.count > 0;
       },
       get children() {
         var _el$4 = _tmpl$();

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../../src/components/tag.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport type { tokens } from '../styles/tokens'\n\nexport const Tag = (props: {\n  color: keyof typeof tokens.colors\n  label: string\n  count?: number\n  disabled?: boolean\n}) => {\n  const styles = useStyles()\n  return (\n    <button disabled={props.disabled} class={styles().tag.base}>\n      <span class={styles().tag.dot(props.color)} />\n      <span class={styles().tag.label}>{props.label}</span>\n\n      <Show when={props.count && props.count > 0}>\n        <span class={styles().tag.count}>{props.count}</span>\n      </Show>\n    </button>\n  )\n}\n"],"names":["Tag","props","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","label","_$createComponent","Show","when","count","children","_el$4","_tmpl$","_$effect","_$className","tag","_p$","_v$","disabled","_v$2","base","_v$3","dot","color","_v$4","e","t","a","o","undefined"],"mappings":";;;;AAIO,MAAMA,MAAMA,CAACC,UAKd;AACJ,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,WAAAF,OAAA,MAGsCP,MAAMU,KAAK;AAAAD,WAAAN,MAAAQ,gBAE5CC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,MAAMc,SAASd,MAAMc,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAC,OAAAA;AAAAR,eAAAO,OAAA,MACNhB,MAAMc,KAAK;AAAAI,eAAA,MAAAC,UAAAH,OAAhCf,SAASmB,IAAIN,KAAK,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAE,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MALjBtB,MAAMuB,UAAQC,OAASvB,SAASmB,IAAIK,MAAIC,OAC3CzB,SAASmB,IAAIO,IAAI3B,MAAM4B,KAAK,GAACC,OAC7B5B,SAASmB,IAAIV;AAAKY,cAAAD,IAAAS,MAAA3B,KAAAoB,WAAAF,IAAAS,IAAAR;AAAAE,eAAAH,IAAAU,KAAAZ,UAAAhB,MAAAkB,IAAAU,IAAAP,IAAA;AAAAE,eAAAL,IAAAW,KAAAb,UAAAd,OAAAgB,IAAAW,IAAAN,IAAA;AAAAG,eAAAR,IAAAY,KAAAd,UAAAZ,OAAAc,IAAAY,IAAAJ,IAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA/B;AAAAA,EAAA,GAAA;AAOrC;"}
+{"version":3,"file":"tag.js","sources":["../../../src/components/tag.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport type { tokens } from '../styles/tokens'\n\nexport const Tag = (props: {\n  color: keyof typeof tokens.colors\n  label: string\n  count?: number\n  disabled?: boolean\n}) => {\n  const styles = useStyles()\n  return (\n    <button disabled={props.disabled} class={styles().tag.base}>\n      <span class={styles().tag.dot(props.color)} />\n      <span class={styles().tag.label}>{props.label}</span>\n\n      <Show when={props.count && props.count > 0}>\n        <span class={styles().tag.count}>{props.count}</span>\n      </Show>\n    </button>\n  )\n}\n"],"names":["Tag","props","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","label","_$createComponent","Show","when","_$memo","count","children","_el$4","_tmpl$","_$effect","_$className","tag","_p$","_v$","disabled","_v$2","base","_v$3","dot","color","_v$4","e","t","a","o","undefined"],"mappings":";;;;AAIO,MAAMA,MAAMA,CAACC,UAKd;AACJ,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,WAAAF,OAAA,MAGsCP,MAAMU,KAAK;AAAAD,WAAAN,MAAAQ,gBAE5CC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,KAAA,MAAA,CAAA,CAAAd,MAAMe,KAAK,OAAIf,MAAMe,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAC,OAAAA;AAAAT,eAAAQ,OAAA,MACNjB,MAAMe,KAAK;AAAAI,eAAA,MAAAC,UAAAH,OAAhChB,SAASoB,IAAIN,KAAK,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAE,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MALjBvB,MAAMwB,UAAQC,OAASxB,SAASoB,IAAIK,MAAIC,OAC3C1B,SAASoB,IAAIO,IAAI5B,MAAM6B,KAAK,GAACC,OAC7B7B,SAASoB,IAAIX;AAAKa,cAAAD,IAAAS,MAAA5B,KAAAqB,WAAAF,IAAAS,IAAAR;AAAAE,eAAAH,IAAAU,KAAAZ,UAAAjB,MAAAmB,IAAAU,IAAAP,IAAA;AAAAE,eAAAL,IAAAW,KAAAb,UAAAf,OAAAiB,IAAAW,IAAAN,IAAA;AAAAG,eAAAR,IAAAY,KAAAd,UAAAb,OAAAe,IAAAY,IAAAJ,IAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AAOrC;"}

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

@@ -4,4 +4,7 @@ export declare function JsonTree<TData, TName extends CollapsiblePaths<TData>>(p
     copyable?: boolean;
     defaultExpansionDepth?: number;
     collapsePaths?: Array<TName>;
+    config?: {
+        dateFormat?: string;
+    };
 }): import("solid-js").JSX.Element;

package/dist/esm/components/tree.js

@@ -1,9 +1,10 @@
-import { createComponent, template, insert, memo, effect, className, addEventListener, setAttribute, delegateEvents } from "solid-js/web";
+import { createComponent, insert, memo, effect, className, template, addEventListener, setAttribute, delegateEvents } from "solid-js/web";
 import { createSignal, Show, For, Switch, Match } from "solid-js";
 import clsx from "clsx";
+import dayjs from "dayjs";
 import { useStyles, css } from "../styles/use-styles.js";
 import { Copier, CopiedCopier, ErrorCopier } from "./icons.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(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>,`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>[]`), _tmpl$9 = /* @__PURE__ */ template(`<span>...`), _tmpl$0 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$1 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>{}`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{</span><span>}`), _tmpl$12 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$13 = /* @__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>`);
+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(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>,`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>[]`), _tmpl$9 = /* @__PURE__ */ template(`<span>...`), _tmpl$0 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$1 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{}`), _tmpl$12 = /* @__PURE__ */ template(`<span><span>{</span><span>}`), _tmpl$13 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$14 = /* @__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>`);
 function JsonTree(props) {
   return createComponent(JsonValue, {
     isRoot: true,
@@ -20,6 +21,9 @@ function JsonTree(props) {
     path: "",
     get collapsePaths() {
       return props.collapsePaths;
+    },
+    get config() {
+      return props.config;
     }
   });
 }
@@ -107,6 +111,9 @@ function JsonValue(props) {
           },
           get path() {
             return props.path;
+          },
+          get config() {
+            return props.config;
           }
         });
       }
@@ -132,6 +139,9 @@ function JsonValue(props) {
           },
           get path() {
             return props.path;
+          },
+          get config() {
+            return props.config;
           }
         });
       }
@@ -246,6 +256,9 @@ const ArrayValue = (props) => {
               },
               get path() {
                 return memo(() => !!props.path)() ? `${props.path}[${i()}]` : `[${i()}]`;
+              },
+              get config() {
+                return props.config;
               }
             });
           }
@@ -288,7 +301,7 @@ const ObjectValue = (props) => {
   const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
   const keys = Object.keys(props.value);
   const lastKeyName = keys[keys.length - 1];
-  if (keys.length === 0) {
+  if (props.value instanceof Date) {
     return (() => {
       var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
       insert(_el$34, (() => {
@@ -301,6 +314,7 @@ const ObjectValue = (props) => {
           return _el$36;
         })();
       })(), _el$35);
+      insert(_el$35, () => dayjs(props.value).format(props.config?.dateFormat ? props.config.dateFormat : "DDMMMYY"));
       effect((_p$) => {
         var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
         _v$8 !== _p$.e && className(_el$34, _p$.e = _v$8);
@@ -313,47 +327,72 @@ const ObjectValue = (props) => {
       return _el$34;
     })();
   }
+  if (keys.length === 0) {
+    return (() => {
+      var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild;
+      insert(_el$40, (() => {
+        var _c$7 = memo(() => !!props.keyName);
+        return () => _c$7() && (() => {
+          var _el$42 = _tmpl$2(), _el$43 = _el$42.firstChild, _el$45 = _el$43.nextSibling;
+          _el$45.nextSibling;
+          insert(_el$42, () => props.keyName, _el$45);
+          effect(() => className(_el$42, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+          return _el$42;
+        })();
+      })(), _el$41);
+      effect((_p$) => {
+        var _v$0 = styles().tree.expanderContainer, _v$1 = styles().tree.valueBraces;
+        _v$0 !== _p$.e && className(_el$40, _p$.e = _v$0);
+        _v$1 !== _p$.t && className(_el$41, _p$.t = _v$1);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$40;
+    })();
+  }
   return (() => {
-    var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild, _el$44 = _el$41.nextSibling;
-    insert(_el$40, (() => {
-      var _c$7 = memo(() => !!props.keyName);
-      return () => _c$7() && createComponent(Expander, {
+    var _el$46 = _tmpl$12(), _el$47 = _el$46.firstChild, _el$50 = _el$47.nextSibling;
+    insert(_el$46, (() => {
+      var _c$8 = memo(() => !!props.keyName);
+      return () => _c$8() && createComponent(Expander, {
         onClick: () => setExpanded(!expanded()),
         get expanded() {
           return expanded();
         }
       });
-    })(), _el$41);
-    insert(_el$40, (() => {
-      var _c$8 = memo(() => !!props.keyName);
-      return () => _c$8() && (() => {
-        var _el$45 = _tmpl$1(), _el$46 = _el$45.firstChild, _el$51 = _el$46.nextSibling, _el$47 = _el$51.nextSibling, _el$49 = _el$47.nextSibling, _el$50 = _el$49.firstChild;
-        _el$45.$$click = (e) => {
+    })(), _el$47);
+    insert(_el$46, (() => {
+      var _c$9 = memo(() => !!props.keyName);
+      return () => _c$9() && (() => {
+        var _el$51 = _tmpl$1(), _el$52 = _el$51.firstChild, _el$57 = _el$52.nextSibling, _el$53 = _el$57.nextSibling, _el$55 = _el$53.nextSibling, _el$56 = _el$55.firstChild;
+        _el$51.$$click = (e) => {
           e.stopPropagation();
           e.stopImmediatePropagation();
           setExpanded(!expanded());
         };
-        insert(_el$45, () => props.keyName, _el$51);
-        insert(_el$49, () => keys.length, _el$50);
+        insert(_el$51, () => props.keyName, _el$57);
+        insert(_el$55, () => keys.length, _el$56);
         effect((_p$) => {
-          var _v$11 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$12 = styles().tree.info;
-          _v$11 !== _p$.e && className(_el$45, _p$.e = _v$11);
-          _v$12 !== _p$.t && className(_el$49, _p$.t = _v$12);
+          var _v$13 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$14 = styles().tree.info;
+          _v$13 !== _p$.e && className(_el$51, _p$.e = _v$13);
+          _v$14 !== _p$.t && className(_el$55, _p$.t = _v$14);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$45;
+        return _el$51;
       })();
-    })(), _el$41);
-    insert(_el$40, createComponent(Show, {
+    })(), _el$47);
+    insert(_el$46, createComponent(Show, {
       get when() {
         return expanded();
       },
       get children() {
-        var _el$42 = _tmpl$();
-        insert(_el$42, createComponent(For, {
+        var _el$48 = _tmpl$();
+        insert(_el$48, createComponent(For, {
           each: keys,
           children: (k) => createComponent(JsonValue, {
             get value() {
@@ -375,48 +414,51 @@ const ObjectValue = (props) => {
             },
             get path() {
               return `${props.path}${props.path ? "." : ""}${k}`;
+            },
+            get config() {
+              return props.config;
             }
           })
         }));
-        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(props.keyName))));
-        return _el$42;
+        effect(() => className(_el$48, styles().tree.expandedLine(Boolean(props.keyName))));
+        return _el$48;
       }
-    }), _el$44);
-    insert(_el$40, createComponent(Show, {
+    }), _el$50);
+    insert(_el$46, createComponent(Show, {
       get when() {
         return !expanded();
       },
       get children() {
-        var _el$43 = _tmpl$9();
-        _el$43.$$click = (e) => {
+        var _el$49 = _tmpl$9();
+        _el$49.$$click = (e) => {
           e.stopPropagation();
           e.stopImmediatePropagation();
           setExpanded(!expanded());
         };
-        effect(() => className(_el$43, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$43;
+        effect(() => className(_el$49, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$49;
       }
-    }), _el$44);
+    }), _el$50);
     effect((_p$) => {
-      var _v$0 = styles().tree.expanderContainer, _v$1 = styles().tree.valueBraces, _v$10 = styles().tree.valueBraces;
-      _v$0 !== _p$.e && className(_el$40, _p$.e = _v$0);
-      _v$1 !== _p$.t && className(_el$41, _p$.t = _v$1);
-      _v$10 !== _p$.a && className(_el$44, _p$.a = _v$10);
+      var _v$10 = styles().tree.expanderContainer, _v$11 = styles().tree.valueBraces, _v$12 = styles().tree.valueBraces;
+      _v$10 !== _p$.e && className(_el$46, _p$.e = _v$10);
+      _v$11 !== _p$.t && className(_el$47, _p$.t = _v$11);
+      _v$12 !== _p$.a && className(_el$50, _p$.a = _v$12);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    return _el$40;
+    return _el$46;
   })();
 };
 const CopyButton = (props) => {
   const styles = useStyles();
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
-    var _el$52 = _tmpl$12();
-    addEventListener(_el$52, "click", copyState() === "NoCopy" ? () => {
+    var _el$58 = _tmpl$13();
+    addEventListener(_el$58, "click", copyState() === "NoCopy" ? () => {
       navigator.clipboard.writeText(JSON.stringify(props.value, null, 2)).then(() => {
         setCopyState("SuccessCopy");
         setTimeout(() => {
@@ -430,7 +472,7 @@ const CopyButton = (props) => {
         }, 1500);
       });
     } : void 0, true);
-    insert(_el$52, createComponent(Switch, {
+    insert(_el$58, createComponent(Switch, {
       get children() {
         return [createComponent(Match, {
           get when() {
@@ -459,30 +501,30 @@ const CopyButton = (props) => {
       }
     }));
     effect((_p$) => {
-      var _v$13 = styles().tree.actionButton, _v$14 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
-      _v$13 !== _p$.e && className(_el$52, _p$.e = _v$13);
-      _v$14 !== _p$.t && setAttribute(_el$52, "aria-label", _p$.t = _v$14);
+      var _v$15 = styles().tree.actionButton, _v$16 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+      _v$15 !== _p$.e && className(_el$58, _p$.e = _v$15);
+      _v$16 !== _p$.t && setAttribute(_el$58, "aria-label", _p$.t = _v$16);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$52;
+    return _el$58;
   })();
 };
 const Expander = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$53 = _tmpl$13();
-    addEventListener(_el$53, "click", props.onClick, true);
-    effect(() => className(_el$53, clsx(styles().tree.expander, css`
+    var _el$59 = _tmpl$14();
+    addEventListener(_el$59, "click", props.onClick, true);
+    effect(() => className(_el$59, clsx(styles().tree.expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `, props.expanded && css`
             & svg {
               top: -1px;
             }
           `)));
-    return _el$53;
+    return _el$59;
   })();
 };
 delegateEvents(["click"]);

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

@@ -1 +1 @@
-{"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'\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\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 = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\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\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\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; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\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"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","keyName","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","_c$2","_el$14","_tmpl$6","CopyButton","clsx","actions","_c$3","isLastKey","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_c$7","_c$8","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}
+{"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 dayjs from 'dayjs'\n\n// css\nimport { css, useStyles } from '../styles/use-styles'\n\n// icons\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\n// utils\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n\n  config?: { dateFormat?: string }\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n      config={props.config}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n\n  config?: { dateFormat?: string }\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                  config={props.config}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\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 = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (props.value instanceof Date) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>\n          {dayjs(props.value).format(\n            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',\n          )}\n        </span>\n      </span>\n    )\n  }\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                  config={props.config}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\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\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\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; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\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"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","config","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","keyName","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","_c$2","_el$14","_tmpl$6","CopyButton","clsx","actions","_c$3","isLastKey","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","Date","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","dayjs","format","dateFormat","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_c$7","_el$42","_el$43","_el$45","_v$0","_v$1","_el$46","_tmpl$12","_el$47","_el$50","_c$8","_c$9","_el$51","_el$52","_el$57","_el$53","_el$55","_el$56","_v$13","_v$14","_el$48","k","_el$49","_v$10","_v$11","_v$12","copyState","setCopyState","_el$58","_tmpl$13","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$15","actionButton","_v$16","_$setAttribute","_el$59","_tmpl$14","expander","css","_$delegateEvents"],"mappings":"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"}

package/dist/esm/utils/deep-keys.d.ts

@@ -1,5 +1,7 @@
-type CollapsibleKeys<T, TPrefix extends string = ''> = T extends ReadonlyArray<infer U> ? (TPrefix extends '' ? '' : TPrefix) | CollapsibleKeys<U, `${TPrefix}[${number}]`> : T extends object ? (TPrefix extends '' ? '' : TPrefix) | {
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type Clean<T> = Exclude<T, undefined | null>;
+type CollapsibleKeys<T, TPrefix extends string = ''> = IsAny<T> extends true ? TPrefix extends '' ? never : TPrefix : T extends ReadonlyArray<infer U> ? (TPrefix extends '' ? '' : TPrefix) | CollapsibleKeys<U, `${TPrefix}[${number}]`> : T extends object ? (TPrefix extends '' ? '' : TPrefix) | {
     [K in Extract<keyof T, string>]: CollapsibleKeys<T[K], TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`>;
 }[Extract<keyof T, string>] : never;
-export type CollapsiblePaths<T> = CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never;
+export type CollapsiblePaths<T> = CollapsibleKeys<Clean<T>> extends infer P ? P extends string ? P : never : never;
 export {};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TanStack/devtools.git",
-    "directory": "packages/devtools"
+    "url": "git+https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools-ui"
   },
   "homepage": "https://tanstack.com/devtools",
   "funding": {
@@ -45,6 +45,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9"
   },

package/src/components/header.tsx

@@ -21,17 +21,19 @@ export function Header({
 export function HeaderLogo({
   children,
   flavor,
+  onClick,
 }: {
   children: JSX.Element
   flavor: {
     light: string
     dark: string
   }
+  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
 }) {
   const styles = useStyles()
   return (
     <div class={styles().header.logoAndToggleContainer}>
-      <button class={clsx(styles().header.logo)}>
+      <button class={clsx(styles().header.logo)} onClick={onClick}>
         <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
         <span
           class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}

package/src/components/tree.tsx

@@ -1,14 +1,24 @@
 import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
+import dayjs from 'dayjs'
+
+// css
 import { css, useStyles } from '../styles/use-styles'
+
+// icons
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
+
+// utils
 import type { CollapsiblePaths } from '../utils/deep-keys'
 
 export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
   value: TData
   copyable?: boolean
+
   defaultExpansionDepth?: number
   collapsePaths?: Array<TName>
+
+  config?: { dateFormat?: string }
 }) {
   return (
     <JsonValue
@@ -19,6 +29,7 @@ export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
       defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
       path=""
       collapsePaths={props.collapsePaths}
+      config={props.config}
     />
   )
 }
@@ -35,6 +46,8 @@ function JsonValue(props: {
 
   collapsePaths?: Array<string>
   path: string
+
+  config?: { dateFormat?: string }
 }) {
   const styles = useStyles()
 
@@ -47,6 +60,7 @@ function JsonValue(props: {
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
+
       {(() => {
         if (typeof props.value === 'string') {
           return (
@@ -55,9 +69,11 @@ function JsonValue(props: {
             </span>
           )
         }
+
         if (typeof props.value === 'number') {
           return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
+
         if (typeof props.value === 'boolean') {
           return (
             <span class={styles().tree.valueBoolean}>
@@ -65,12 +81,15 @@ function JsonValue(props: {
             </span>
           )
         }
+
         if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
         }
+
         if (props.value === undefined) {
           return <span class={styles().tree.valueNull}>undefined</span>
         }
+
         if (typeof props.value === 'function') {
           return (
             <span class={styles().tree.valueFunction}>
@@ -78,6 +97,7 @@ function JsonValue(props: {
             </span>
           )
         }
+
         if (Array.isArray(props.value)) {
           return (
             <ArrayValue
@@ -88,9 +108,11 @@ function JsonValue(props: {
               value={props.value}
               collapsePaths={props.collapsePaths}
               path={props.path}
+              config={props.config}
             />
           )
         }
+
         if (typeof props.value === 'object') {
           return (
             <ObjectValue
@@ -101,9 +123,11 @@ function JsonValue(props: {
               value={props.value}
               collapsePaths={props.collapsePaths}
               path={props.path}
+              config={props.config}
             />
           )
         }
+
         return <span />
       })()}
       {props.copyable && (
@@ -124,6 +148,7 @@ const ArrayValue = (props: {
   depth: number
   collapsePaths?: Array<string>
   path: string
+  config?: { dateFormat?: string }
 }) => {
   const styles = useStyles()
 
@@ -182,6 +207,7 @@ const ArrayValue = (props: {
                   depth={props.depth + 1}
                   collapsePaths={props.collapsePaths}
                   path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
+                  config={props.config}
                 />
               )
             }}
@@ -214,6 +240,7 @@ const ObjectValue = (props: {
   depth: number
   collapsePaths?: Array<string>
   path: string
+  config?: { dateFormat?: string }
 }) => {
   const styles = useStyles()
 
@@ -225,6 +252,24 @@ const ObjectValue = (props: {
   const keys = Object.keys(props.value)
   const lastKeyName = keys[keys.length - 1]
 
+  if (props.value instanceof Date) {
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {props.keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{props.keyName}&quot;:{' '}
+          </span>
+        )}
+
+        <span class={styles().tree.valueBraces}>
+          {dayjs(props.value).format(
+            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',
+          )}
+        </span>
+      </span>
+    )
+  }
+
   if (keys.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
@@ -278,6 +323,7 @@ const ObjectValue = (props: {
                   depth={props.depth + 1}
                   collapsePaths={props.collapsePaths}
                   path={`${props.path}${props.path ? '.' : ''}${k}`}
+                  config={props.config}
                 />
               </>
             )}

package/src/utils/deep-keys.ts

@@ -1,18 +1,30 @@
+type IsAny<T> = 0 extends 1 & T ? true : false
+
+type Clean<T> = Exclude<T, undefined | null>
+
 type CollapsibleKeys<T, TPrefix extends string = ''> =
-  T extends ReadonlyArray<infer U>
-    ?
-        | (TPrefix extends '' ? '' : TPrefix)
-        | CollapsibleKeys<U, `${TPrefix}[${number}]`>
-    : T extends object
+  IsAny<T> extends true
+    ? TPrefix extends ''
+      ? never
+      : TPrefix
+    : T extends ReadonlyArray<infer U>
       ?
           | (TPrefix extends '' ? '' : TPrefix)
-          | {
-              [K in Extract<keyof T, string>]: CollapsibleKeys<
-                T[K],
-                TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`
-              >
-            }[Extract<keyof T, string>]
-      : never
+          | CollapsibleKeys<U, `${TPrefix}[${number}]`>
+      : T extends object
+        ?
+            | (TPrefix extends '' ? '' : TPrefix)
+            | {
+                [K in Extract<keyof T, string>]: CollapsibleKeys<
+                  T[K],
+                  TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`
+                >
+              }[Extract<keyof T, string>]
+        : never
 
 export type CollapsiblePaths<T> =
-  CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never
+  CollapsibleKeys<Clean<T>> extends infer P
+    ? P extends string
+      ? P
+      : never
+    : never