@tanstack/router-devtools 0.0.1-alpha.1 → 0.0.1-beta.101

package/build/types/Explorer.d.ts

@@ -0,0 +1,47 @@
+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<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & 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;
+};
+export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
+type Entry = {
+    label: string;
+};
+type RendererProps = {
+    handleEntry: HandleEntryFn;
+    label?: React.ReactNode;
+    value: unknown;
+    subEntries: Entry[];
+    subEntryPages: Entry[][];
+    type: string;
+    expanded: boolean;
+    toggleExpanded: () => void;
+    pageSize: number;
+    renderer?: Renderer;
+};
+/**
+ * Chunk elements in the array by size
+ *
+ * when the array cannot be chunked evenly by size, the last chunk will be
+ * filled with the remaining elements
+ *
+ * @example
+ * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
+ */
+export declare function chunkArray<T>(array: T[], size: number): T[][];
+type Renderer = (props: RendererProps) => JSX.Element;
+export declare const DefaultRenderer: Renderer;
+type HandleEntryFn = (entry: Entry) => JSX.Element;
+type ExplorerProps = Partial<RendererProps> & {
+    renderer?: Renderer;
+    defaultExpanded?: true | Record<string, boolean>;
+};
+export default function Explorer({ value, defaultExpanded, renderer, pageSize, ...rest }: ExplorerProps): JSX.Element;
+export {};

package/build/types/devtools.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AnyRouter } from '@tanstack/router';
+export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * The standard React className property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+export declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
+export declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
+export {};

package/build/types/index.d.ts

@@ -1,76 +1 @@
-/**
- * react-router-devtools
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-import React from 'react';
-
-declare type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
-     */
-    panelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    /**
-     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    closeButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-    /**
-     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    toggleButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-    /**
-     * The position of the TanStack Router logo to open and close the devtools panel.
-     * Defaults to 'bottom-left'.
-     */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /**
-     * Use this to render the devtools inside a different type of container element for a11y purposes.
-     * Any string which corresponds to a valid intrinsic JSX element is allowed.
-     * Defaults to 'footer'.
-     */
-    containerElement?: string | any;
-    /**
-     * A boolean variable indicating if the "lite" version of the library is being used
-     */
-    useRouter?: () => unknown;
-}
-interface DevtoolsPanelOptions {
-    /**
-     * The standard React style object used to style a component with inline styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * The standard React className property used to style a component with classes
-     */
-    className?: string;
-    /**
-     * A boolean variable indicating whether the panel is open or closed
-     */
-    isOpen?: boolean;
-    /**
-     * A function that toggles the open and close state of the panel
-     */
-    setIsOpen: (isOpen: boolean) => void;
-    /**
-     * Handles the opening and closing the devtools panel
-     */
-    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * A boolean variable indicating if the "lite" version of the library is being used
-     */
-    useRouter: () => unknown;
-}
-declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, useRouter: useRouterImpl, }: DevtoolsOptions): React.ReactElement | null;
-declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
-
-export { PartialKeys, TanStackRouterDevtools, TanStackRouterDevtoolsPanel };
+export * from './devtools';

package/build/types/styledComponents.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ActivePanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Code: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Select: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "key" | keyof import("react").SelectHTMLAttributes<HTMLSelectElement>> & import("react").RefAttributes<HTMLSelectElement>>;

package/build/types/theme.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export declare const defaultTheme: {
+    readonly background: "#0b1521";
+    readonly backgroundAlt: "#132337";
+    readonly foreground: "white";
+    readonly gray: "#3f4e60";
+    readonly grayAlt: "#222e3e";
+    readonly inputBackgroundColor: "#fff";
+    readonly inputTextColor: "#000";
+    readonly success: "#00ab52";
+    readonly danger: "#ff0085";
+    readonly active: "#006bff";
+    readonly warning: "#ffb200";
+};
+export type Theme = typeof defaultTheme;
+interface ProviderProps {
+    theme: Theme;
+    children?: React.ReactNode;
+}
+export declare function ThemeProvider({ theme, ...rest }: ProviderProps): JSX.Element;
+export declare function useTheme(): {
+    readonly background: "#0b1521";
+    readonly backgroundAlt: "#132337";
+    readonly foreground: "white";
+    readonly gray: "#3f4e60";
+    readonly grayAlt: "#222e3e";
+    readonly inputBackgroundColor: "#fff";
+    readonly inputTextColor: "#000";
+    readonly success: "#00ab52";
+    readonly danger: "#ff0085";
+    readonly active: "#006bff";
+    readonly warning: "#ffb200";
+};
+export {};

package/build/types/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export default function useLocalStorage<T>(key: string, defaultValue: T | undefined): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void];

package/build/types/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(query: string): boolean | undefined;

package/build/types/utils.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/router';
+import { Theme } from './theme';
+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): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff";
+export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff";
+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;
+/**
+ * Displays a string regardless the type of the data
+ * @param {unknown} value Value to be stringified
+ */
+export declare const displayValue: (value: unknown) => string;
+/**
+ * This hook is a safe useState version which schedules state updates in microtasks
+ * to prevent updating a component state while React is rendering different components
+ * or when the component is not mounted anymore.
+ */
+export declare function useSafeState<T>(initialState: T): [T, (value: T) => void];
+export declare function multiSortBy<T>(arr: T[], accessors?: ((item: T) => any)[]): T[];
+export {};