@tanstack/router-devtools 1.16.5 → 1.17.0

package/dist/cjs/tokens.d.cts

@@ -0,0 +1,298 @@
+export declare const tokens: {
+    readonly colors: {
+        readonly inherit: "inherit";
+        readonly current: "currentColor";
+        readonly transparent: "transparent";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly neutral: {
+            readonly 50: "#f9fafb";
+            readonly 100: "#f2f4f7";
+            readonly 200: "#eaecf0";
+            readonly 300: "#d0d5dd";
+            readonly 400: "#98a2b3";
+            readonly 500: "#667085";
+            readonly 600: "#475467";
+            readonly 700: "#344054";
+            readonly 800: "#1d2939";
+            readonly 900: "#101828";
+        };
+        readonly darkGray: {
+            readonly 50: "#525c7a";
+            readonly 100: "#49536e";
+            readonly 200: "#414962";
+            readonly 300: "#394056";
+            readonly 400: "#313749";
+            readonly 500: "#292e3d";
+            readonly 600: "#212530";
+            readonly 700: "#191c24";
+            readonly 800: "#111318";
+            readonly 900: "#0b0d10";
+        };
+        readonly gray: {
+            readonly 50: "#f9fafb";
+            readonly 100: "#f2f4f7";
+            readonly 200: "#eaecf0";
+            readonly 300: "#d0d5dd";
+            readonly 400: "#98a2b3";
+            readonly 500: "#667085";
+            readonly 600: "#475467";
+            readonly 700: "#344054";
+            readonly 800: "#1d2939";
+            readonly 900: "#101828";
+        };
+        readonly blue: {
+            readonly 25: "#F5FAFF";
+            readonly 50: "#EFF8FF";
+            readonly 100: "#D1E9FF";
+            readonly 200: "#B2DDFF";
+            readonly 300: "#84CAFF";
+            readonly 400: "#53B1FD";
+            readonly 500: "#2E90FA";
+            readonly 600: "#1570EF";
+            readonly 700: "#175CD3";
+            readonly 800: "#1849A9";
+            readonly 900: "#194185";
+        };
+        readonly green: {
+            readonly 25: "#F6FEF9";
+            readonly 50: "#ECFDF3";
+            readonly 100: "#D1FADF";
+            readonly 200: "#A6F4C5";
+            readonly 300: "#6CE9A6";
+            readonly 400: "#32D583";
+            readonly 500: "#12B76A";
+            readonly 600: "#039855";
+            readonly 700: "#027A48";
+            readonly 800: "#05603A";
+            readonly 900: "#054F31";
+        };
+        readonly red: {
+            readonly 50: "#fef2f2";
+            readonly 100: "#fee2e2";
+            readonly 200: "#fecaca";
+            readonly 300: "#fca5a5";
+            readonly 400: "#f87171";
+            readonly 500: "#ef4444";
+            readonly 600: "#dc2626";
+            readonly 700: "#b91c1c";
+            readonly 800: "#991b1b";
+            readonly 900: "#7f1d1d";
+            readonly 950: "#450a0a";
+        };
+        readonly yellow: {
+            readonly 25: "#FFFCF5";
+            readonly 50: "#FFFAEB";
+            readonly 100: "#FEF0C7";
+            readonly 200: "#FEDF89";
+            readonly 300: "#FEC84B";
+            readonly 400: "#FDB022";
+            readonly 500: "#F79009";
+            readonly 600: "#DC6803";
+            readonly 700: "#B54708";
+            readonly 800: "#93370D";
+            readonly 900: "#7A2E0E";
+        };
+        readonly purple: {
+            readonly 25: "#FAFAFF";
+            readonly 50: "#F4F3FF";
+            readonly 100: "#EBE9FE";
+            readonly 200: "#D9D6FE";
+            readonly 300: "#BDB4FE";
+            readonly 400: "#9B8AFB";
+            readonly 500: "#7A5AF8";
+            readonly 600: "#6938EF";
+            readonly 700: "#5925DC";
+            readonly 800: "#4A1FB8";
+            readonly 900: "#3E1C96";
+        };
+        readonly teal: {
+            readonly 25: "#F6FEFC";
+            readonly 50: "#F0FDF9";
+            readonly 100: "#CCFBEF";
+            readonly 200: "#99F6E0";
+            readonly 300: "#5FE9D0";
+            readonly 400: "#2ED3B7";
+            readonly 500: "#15B79E";
+            readonly 600: "#0E9384";
+            readonly 700: "#107569";
+            readonly 800: "#125D56";
+            readonly 900: "#134E48";
+        };
+        readonly pink: {
+            readonly 25: "#fdf2f8";
+            readonly 50: "#fce7f3";
+            readonly 100: "#fbcfe8";
+            readonly 200: "#f9a8d4";
+            readonly 300: "#f472b6";
+            readonly 400: "#ec4899";
+            readonly 500: "#db2777";
+            readonly 600: "#be185d";
+            readonly 700: "#9d174d";
+            readonly 800: "#831843";
+            readonly 900: "#500724";
+        };
+        readonly cyan: {
+            readonly 25: "#ecfeff";
+            readonly 50: "#cffafe";
+            readonly 100: "#a5f3fc";
+            readonly 200: "#67e8f9";
+            readonly 300: "#22d3ee";
+            readonly 400: "#06b6d4";
+            readonly 500: "#0891b2";
+            readonly 600: "#0e7490";
+            readonly 700: "#155e75";
+            readonly 800: "#164e63";
+            readonly 900: "#083344";
+        };
+    };
+    readonly alpha: {
+        readonly 100: "ff";
+        readonly 90: "e5";
+        readonly 80: "cc";
+        readonly 70: "b3";
+        readonly 60: "99";
+        readonly 50: "80";
+        readonly 40: "66";
+        readonly 30: "4d";
+        readonly 20: "33";
+        readonly 10: "1a";
+        readonly 0: "00";
+    };
+    readonly font: {
+        readonly size: {
+            readonly '2xs': "calc(var(--tsrd-font-size) * 0.625)";
+            readonly xs: "calc(var(--tsrd-font-size) * 0.75)";
+            readonly sm: "calc(var(--tsrd-font-size) * 0.875)";
+            readonly md: "var(--tsrd-font-size)";
+            readonly lg: "calc(var(--tsrd-font-size) * 1.125)";
+            readonly xl: "calc(var(--tsrd-font-size) * 1.25)";
+            readonly '2xl': "calc(var(--tsrd-font-size) * 1.5)";
+            readonly '3xl': "calc(var(--tsrd-font-size) * 1.875)";
+            readonly '4xl': "calc(var(--tsrd-font-size) * 2.25)";
+            readonly '5xl': "calc(var(--tsrd-font-size) * 3)";
+            readonly '6xl': "calc(var(--tsrd-font-size) * 3.75)";
+            readonly '7xl': "calc(var(--tsrd-font-size) * 4.5)";
+            readonly '8xl': "calc(var(--tsrd-font-size) * 6)";
+            readonly '9xl': "calc(var(--tsrd-font-size) * 8)";
+        };
+        readonly lineHeight: {
+            readonly '3xs': "calc(var(--tsrd-font-size) * 0.75)";
+            readonly '2xs': "calc(var(--tsrd-font-size) * 0.875)";
+            readonly xs: "calc(var(--tsrd-font-size) * 1)";
+            readonly sm: "calc(var(--tsrd-font-size) * 1.25)";
+            readonly md: "calc(var(--tsrd-font-size) * 1.5)";
+            readonly lg: "calc(var(--tsrd-font-size) * 1.75)";
+            readonly xl: "calc(var(--tsrd-font-size) * 2)";
+            readonly '2xl': "calc(var(--tsrd-font-size) * 2.25)";
+            readonly '3xl': "calc(var(--tsrd-font-size) * 2.5)";
+            readonly '4xl': "calc(var(--tsrd-font-size) * 2.75)";
+            readonly '5xl': "calc(var(--tsrd-font-size) * 3)";
+            readonly '6xl': "calc(var(--tsrd-font-size) * 3.25)";
+            readonly '7xl': "calc(var(--tsrd-font-size) * 3.5)";
+            readonly '8xl': "calc(var(--tsrd-font-size) * 3.75)";
+            readonly '9xl': "calc(var(--tsrd-font-size) * 4)";
+        };
+        readonly weight: {
+            readonly thin: "100";
+            readonly extralight: "200";
+            readonly light: "300";
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+            readonly extrabold: "800";
+            readonly black: "900";
+        };
+        readonly fontFamily: {
+            readonly sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif";
+            readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+        };
+    };
+    readonly breakpoints: {
+        readonly xs: "320px";
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+    readonly border: {
+        readonly radius: {
+            readonly none: "0px";
+            readonly xs: "calc(var(--tsrd-font-size) * 0.125)";
+            readonly sm: "calc(var(--tsrd-font-size) * 0.25)";
+            readonly md: "calc(var(--tsrd-font-size) * 0.375)";
+            readonly lg: "calc(var(--tsrd-font-size) * 0.5)";
+            readonly xl: "calc(var(--tsrd-font-size) * 0.75)";
+            readonly '2xl': "calc(var(--tsrd-font-size) * 1)";
+            readonly '3xl': "calc(var(--tsrd-font-size) * 1.5)";
+            readonly full: "9999px";
+        };
+    };
+    readonly size: {
+        readonly 0: "0px";
+        readonly 0.25: "calc(var(--tsrd-font-size) * 0.0625)";
+        readonly 0.5: "calc(var(--tsrd-font-size) * 0.125)";
+        readonly 1: "calc(var(--tsrd-font-size) * 0.25)";
+        readonly 1.5: "calc(var(--tsrd-font-size) * 0.375)";
+        readonly 2: "calc(var(--tsrd-font-size) * 0.5)";
+        readonly 2.5: "calc(var(--tsrd-font-size) * 0.625)";
+        readonly 3: "calc(var(--tsrd-font-size) * 0.75)";
+        readonly 3.5: "calc(var(--tsrd-font-size) * 0.875)";
+        readonly 4: "calc(var(--tsrd-font-size) * 1)";
+        readonly 4.5: "calc(var(--tsrd-font-size) * 1.125)";
+        readonly 5: "calc(var(--tsrd-font-size) * 1.25)";
+        readonly 5.5: "calc(var(--tsrd-font-size) * 1.375)";
+        readonly 6: "calc(var(--tsrd-font-size) * 1.5)";
+        readonly 6.5: "calc(var(--tsrd-font-size) * 1.625)";
+        readonly 7: "calc(var(--tsrd-font-size) * 1.75)";
+        readonly 8: "calc(var(--tsrd-font-size) * 2)";
+        readonly 9: "calc(var(--tsrd-font-size) * 2.25)";
+        readonly 10: "calc(var(--tsrd-font-size) * 2.5)";
+        readonly 11: "calc(var(--tsrd-font-size) * 2.75)";
+        readonly 12: "calc(var(--tsrd-font-size) * 3)";
+        readonly 14: "calc(var(--tsrd-font-size) * 3.5)";
+        readonly 16: "calc(var(--tsrd-font-size) * 4)";
+        readonly 20: "calc(var(--tsrd-font-size) * 5)";
+        readonly 24: "calc(var(--tsrd-font-size) * 6)";
+        readonly 28: "calc(var(--tsrd-font-size) * 7)";
+        readonly 32: "calc(var(--tsrd-font-size) * 8)";
+        readonly 36: "calc(var(--tsrd-font-size) * 9)";
+        readonly 40: "calc(var(--tsrd-font-size) * 10)";
+        readonly 44: "calc(var(--tsrd-font-size) * 11)";
+        readonly 48: "calc(var(--tsrd-font-size) * 12)";
+        readonly 52: "calc(var(--tsrd-font-size) * 13)";
+        readonly 56: "calc(var(--tsrd-font-size) * 14)";
+        readonly 60: "calc(var(--tsrd-font-size) * 15)";
+        readonly 64: "calc(var(--tsrd-font-size) * 16)";
+        readonly 72: "calc(var(--tsrd-font-size) * 18)";
+        readonly 80: "calc(var(--tsrd-font-size) * 20)";
+        readonly 96: "calc(var(--tsrd-font-size) * 24)";
+    };
+    readonly shadow: {
+        readonly xs: (_?: string) => "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly sm: (color?: string) => `0 1px 3px 0 ${string}, 0 1px 2px -1px ${string}`;
+        readonly md: (color?: string) => `0 4px 6px -1px ${string}, 0 2px 4px -2px ${string}`;
+        readonly lg: (color?: string) => `0 10px 15px -3px ${string}, 0 4px 6px -4px ${string}`;
+        readonly xl: (color?: string) => `0 20px 25px -5px ${string}, 0 8px 10px -6px ${string}`;
+        readonly '2xl': (color?: string) => `0 25px 50px -12px ${string}`;
+        readonly inner: (color?: string) => `inset 0 2px 4px 0 ${string}`;
+        readonly none: () => "none";
+    };
+    readonly zIndices: {
+        readonly hide: -1;
+        readonly auto: "auto";
+        readonly base: 0;
+        readonly docked: 10;
+        readonly dropdown: 1000;
+        readonly sticky: 1100;
+        readonly banner: 1200;
+        readonly overlay: 1300;
+        readonly modal: 1400;
+        readonly popover: 1500;
+        readonly skipLink: 1600;
+        readonly toast: 1700;
+        readonly tooltip: 1800;
+    };
+};

package/dist/cjs/utils.cjs

@@ -1,42 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const theme = require("./theme.cjs");
-const useMediaQuery = require("./useMediaQuery.cjs");
 const isServer = typeof window === "undefined";
-function getStatusColor(match, theme2) {
-  return match.status === "pending" || match.isFetching ? theme2.active : match.status === "error" ? theme2.danger : match.status === "success" ? theme2.success : theme2.gray;
+function getStatusColor(match) {
+  return match.status === "success" && match.isFetching ? "blue" : match.status === "pending" ? "yellow" : match.status === "error" ? "red" : match.status === "success" ? "green" : "gray";
 }
-function getRouteStatusColor(matches, route, theme2) {
+function getRouteStatusColor(matches, route) {
   const found = matches.find((d) => d.routeId === route.id);
   if (!found)
-    return theme2.gray;
-  return getStatusColor(found, theme2);
-}
-function styled(type, newStyles, queries = {}) {
-  return React.forwardRef(
-    ({ style, ...rest }, ref) => {
-      const theme$1 = theme.useTheme();
-      const mediaStyles = Object.entries(queries).reduce(
-        (current, [key, value]) => {
-          return useMediaQuery(key) ? {
-            ...current,
-            ...typeof value === "function" ? value(rest, theme$1) : value
-          } : current;
-        },
-        {}
-      );
-      return React.createElement(type, {
-        ...rest,
-        style: {
-          ...typeof newStyles === "function" ? newStyles(rest, theme$1) : newStyles,
-          ...style,
-          ...mediaStyles
-        },
-        ref
-      });
-    }
-  );
+    return "gray";
+  return getStatusColor(found);
 }
 function useIsMounted() {
   const mountedRef = React.useRef(false);
@@ -104,7 +77,6 @@ exports.getRouteStatusColor = getRouteStatusColor;
 exports.getStatusColor = getStatusColor;
 exports.isServer = isServer;
 exports.multiSortBy = multiSortBy;
-exports.styled = styled;
 exports.useIsMounted = useIsMounted;
 exports.useSafeState = useSafeState;
 //# sourceMappingURL=utils.cjs.map

package/dist/cjs/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n        : never\n\nexport function getStatusColor(match: AnyRouteMatch, theme: Theme) {\n  return match.status === 'pending' || match.isFetching\n    ? theme.active\n    : match.status === 'error'\n      ? theme.danger\n      : match.status === 'success'\n        ? theme.success\n        : theme.gray\n}\n\nexport function getRouteStatusColor(\n  matches: AnyRouteMatch[],\n  route: AnyRoute | AnyRootRoute,\n  theme: Theme,\n) {\n  const found = matches.find((d) => d.routeId === route.id)\n  if (!found) return theme.gray\n  return getStatusColor(found, theme)\n}\n\ntype Styles =\n  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const mountedRef = React.useRef(false)\n  const isMounted = React.useCallback(() => mountedRef.current, [])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    mountedRef.current = true\n    return () => {\n      mountedRef.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n  try {\n    return JSON.stringify(newValue, name)\n  } catch (e) {\n    return `unable to stringify`\n  }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n  const isMounted = useIsMounted()\n  const [state, setState] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted()) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\n  )\n\n  return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n  Promise.resolve()\n    .then(callback)\n    .catch((error) =>\n      setTimeout(() => {\n        throw error\n      }),\n    )\n}\n\nexport function multiSortBy<T>(\n  arr: T[],\n  accessors: ((item: T) => any)[] = [(d) => d],\n): T[] {\n  return arr\n    .map((d, i) => [d, i] as const)\n    .sort(([a, ai], [b, bi]) => {\n      for (const accessor of accessors) {\n        const ao = accessor(a)\n        const bo = accessor(b)\n\n        if (typeof ao === 'undefined') {\n          if (typeof bo === 'undefined') {\n            continue\n          }\n          return 1\n        }\n\n        if (ao === bo) {\n          continue\n        }\n\n        return ao > bo ? 1 : -1\n      }\n\n      return ai - bi\n    })\n    .map(([d]) => d)\n}\n"],"names":["theme","useTheme"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n        : never\n\nexport function getStatusColor(match: AnyRouteMatch) {\n  return match.status === 'success' && match.isFetching\n    ? 'blue'\n    : match.status === 'pending'\n      ? 'yellow'\n      : match.status === 'error'\n        ? 'red'\n        : match.status === 'success'\n          ? 'green'\n          : 'gray'\n}\n\nexport function getRouteStatusColor(\n  matches: AnyRouteMatch[],\n  route: AnyRoute | AnyRootRoute,\n) {\n  const found = matches.find((d) => d.routeId === route.id)\n  if (!found) return 'gray'\n  return getStatusColor(found)\n}\n\ntype Styles =\n  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const mountedRef = React.useRef(false)\n  const isMounted = React.useCallback(() => mountedRef.current, [])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    mountedRef.current = true\n    return () => {\n      mountedRef.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n  try {\n    return JSON.stringify(newValue, name)\n  } catch (e) {\n    return `unable to stringify`\n  }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n  const isMounted = useIsMounted()\n  const [state, setState] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted()) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\n  )\n\n  return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n  Promise.resolve()\n    .then(callback)\n    .catch((error) =>\n      setTimeout(() => {\n        throw error\n      }),\n    )\n}\n\nexport function multiSortBy<T>(\n  arr: T[],\n  accessors: ((item: T) => any)[] = [(d) => d],\n): T[] {\n  return arr\n    .map((d, i) => [d, i] as const)\n    .sort(([a, ai], [b, bi]) => {\n      for (const accessor of accessors) {\n        const ao = accessor(a)\n        const bo = accessor(b)\n\n        if (typeof ao === 'undefined') {\n          if (typeof bo === 'undefined') {\n            continue\n          }\n          return 1\n        }\n\n        if (ao === bo) {\n          continue\n        }\n\n        return ao > bo ? 1 : -1\n      }\n\n      return ai - bi\n    })\n    .map(([d]) => d)\n}\n"],"names":[],"mappings":";;;AAMa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,SAAO,MAAM,WAAW,aAAa,MAAM,aACvC,SACA,MAAM,WAAW,YACf,WACA,MAAM,WAAW,UACf,QACA,MAAM,WAAW,YACf,UACA;AACZ;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACxD,MAAI,CAAC;AAAc,WAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AA2CO,SAAS,eAAe;AACvB,QAAA,aAAa,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,MAAM,YAAY,MAAM,WAAW,SAAS,CAAA,CAAE;AAEhE,QAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,eAAW,UAAU;AACrB,WAAO,MAAM;AACX,iBAAW,UAAU;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAU,CAAA,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EACT;AACF;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY;AAClB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AAErD,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,aAAa;AACf,mBAAS,KAAK;AAAA,QAChB;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGL,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IAAA,CACP;AAAA,EAAA;AAEP;AAEO,SAAS,YACd,KACA,YAAkC,CAAC,CAAC,MAAM,CAAC,GACtC;AACL,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QACF;AACO,eAAA;AAAA,MACT;AAEA,UAAI,OAAO,IAAI;AACb;AAAA,MACF;AAEO,aAAA,KAAK,KAAK,IAAI;AAAA,IACvB;AAEA,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;;;;;;;;"}

package/dist/cjs/utils.d.cts

@@ -3,8 +3,8 @@ import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router';
 import { Theme } from './theme.cjs';
 export declare const isServer: boolean;
 type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
-export declare function getStatusColor(match: AnyRouteMatch, theme: Theme): "#444" | "#80cb00" | "#ff0085" | "#0099ff";
-export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme): "#444" | "#80cb00" | "#ff0085" | "#0099ff";
+export declare function getStatusColor(match: AnyRouteMatch): "blue" | "yellow" | "red" | "green" | "gray";
+export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute): "blue" | "yellow" | "red" | "green" | "gray";
 type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
 export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
 export declare function useIsMounted(): () => boolean;

package/dist/esm/Explorer.d.ts

@@ -1,11 +1,4 @@
 import * as React from 'react';
-export declare const Entry: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-export declare const LabelButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const ExpandButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const Value: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-export declare const SubEntries: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const Info: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 type ExpanderProps = {
     expanded: boolean;
     style?: React.CSSProperties;