@tanstack/router-devtools-core 1.114.0

package/dist/esm/useStyles.js

@@ -0,0 +1,565 @@
+import * as goober from "goober";
+import { useContext, createSignal } from "solid-js";
+import { tokens } from "./tokens.js";
+import { ShadowDomTargetContext } from "./context.js";
+const stylesFactory = (shadowDOMTarget) => {
+  const {
+    colors,
+    font,
+    size,
+    alpha,
+    border
+  } = tokens;
+  const {
+    fontFamily,
+    lineHeight,
+    size: fontSize
+  } = font;
+  const css = shadowDOMTarget ? goober.css.bind({
+    target: shadowDOMTarget
+  }) : goober.css;
+  return {
+    devtoolsPanelContainer: css`
+      direction: ltr;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      z-index: 99999;
+      width: 100%;
+      max-height: 90%;
+      border-top: 1px solid ${colors.gray[700]};
+      transform-origin: top;
+    `,
+    devtoolsPanelContainerVisibility: (isOpen) => {
+      return css`
+        visibility: ${isOpen ? "visible" : "hidden"};
+      `;
+    },
+    devtoolsPanelContainerResizing: (isResizing) => {
+      if (isResizing()) {
+        return css`
+          transition: none;
+        `;
+      }
+      return css`
+        transition: all 0.4s ease;
+      `;
+    },
+    devtoolsPanelContainerAnimation: (isOpen, height) => {
+      if (isOpen) {
+        return css`
+          pointer-events: auto;
+          transform: translateY(0);
+        `;
+      }
+      return css`
+        pointer-events: none;
+        transform: translateY(${height}px);
+      `;
+    },
+    logo: css`
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      background-color: transparent;
+      border: none;
+      font-family: ${fontFamily.sans};
+      gap: ${tokens.size[0.5]};
+      padding: 0px;
+      &:hover {
+        opacity: 0.7;
+      }
+      &:focus-visible {
+        outline-offset: 4px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+    tanstackLogo: css`
+      font-size: ${font.size.md};
+      font-weight: ${font.weight.bold};
+      line-height: ${font.lineHeight.xs};
+      white-space: nowrap;
+      color: ${colors.gray[300]};
+    `,
+    routerLogo: css`
+      font-weight: ${font.weight.semibold};
+      font-size: ${font.size.xs};
+      background: linear-gradient(to right, #84cc16, #10b981);
+      background-clip: text;
+      -webkit-background-clip: text;
+      line-height: 1;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+    `,
+    devtoolsPanel: css`
+      display: flex;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      background-color: ${colors.darkGray[700]};
+      color: ${colors.gray[300]};
+
+      @media (max-width: 700px) {
+        flex-direction: column;
+      }
+      @media (max-width: 600px) {
+        font-size: ${fontSize.xs};
+      }
+    `,
+    dragHandle: css`
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+      cursor: row-resize;
+      z-index: 100000;
+      &:hover {
+        background-color: ${colors.purple[400]}${alpha[90]};
+      }
+    `,
+    firstContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      border-right: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+    `,
+    routerExplorerContainer: css`
+      overflow-y: auto;
+      flex: 1;
+    `,
+    routerExplorer: css`
+      padding: ${tokens.size[2]};
+    `,
+    row: css`
+      display: flex;
+      align-items: center;
+      padding: ${tokens.size[2]} ${tokens.size[2.5]};
+      gap: ${tokens.size[2.5]};
+      border-bottom: ${colors.darkGray[500]} 1px solid;
+      align-items: center;
+    `,
+    detailsHeader: css`
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: ${colors.darkGray[600]};
+      padding: 0px ${tokens.size[2]};
+      font-weight: ${font.weight.medium};
+      font-size: ${font.size.xs};
+      min-height: ${tokens.size[8]};
+      line-height: ${font.lineHeight.xs};
+      text-align: left;
+      display: flex;
+      align-items: center;
+    `,
+    maskedBadge: css`
+      background: ${colors.yellow[900]}${alpha[70]};
+      color: ${colors.yellow[300]};
+      display: inline-block;
+      padding: ${tokens.size[0]} ${tokens.size[2.5]};
+      border-radius: ${border.radius.full};
+      font-size: ${font.size.xs};
+      font-weight: ${font.weight.normal};
+      border: 1px solid ${colors.yellow[300]};
+    `,
+    maskedLocation: css`
+      color: ${colors.yellow[300]};
+    `,
+    detailsContent: css`
+      padding: ${tokens.size[1.5]} ${tokens.size[2]};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: ${font.size.xs};
+    `,
+    routeMatchesToggle: css`
+      display: flex;
+      align-items: center;
+      border: 1px solid ${colors.gray[500]};
+      border-radius: ${border.radius.sm};
+      overflow: hidden;
+    `,
+    routeMatchesToggleBtn: (active, showBorder) => {
+      const base = css`
+        appearance: none;
+        border: none;
+        font-size: 12px;
+        padding: 4px 8px;
+        background: transparent;
+        cursor: pointer;
+        font-family: ${fontFamily.sans};
+        font-weight: ${font.weight.medium};
+      `;
+      const classes = [base];
+      if (active) {
+        const activeStyles = css`
+          background: ${colors.darkGray[400]};
+          color: ${colors.gray[300]};
+        `;
+        classes.push(activeStyles);
+      } else {
+        const inactiveStyles = css`
+          color: ${colors.gray[500]};
+          background: ${colors.darkGray[800]}${alpha[20]};
+        `;
+        classes.push(inactiveStyles);
+      }
+      if (showBorder) {
+        classes.push(css`
+          border-right: 1px solid ${tokens.colors.gray[500]};
+        `);
+      }
+      return classes;
+    },
+    detailsHeaderInfo: css`
+      flex: 1;
+      justify-content: flex-end;
+      display: flex;
+      align-items: center;
+      font-weight: ${font.weight.normal};
+      color: ${colors.gray[400]};
+    `,
+    matchRow: (active) => {
+      const base = css`
+        display: flex;
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        cursor: pointer;
+        align-items: center;
+        padding: ${size[1]} ${size[2]};
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[300]};
+      `;
+      const classes = [base];
+      if (active) {
+        const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+        classes.push(activeStyles);
+      }
+      return classes;
+    },
+    matchIndicator: (color) => {
+      const base = css`
+        flex: 0 0 auto;
+        width: ${size[3]};
+        height: ${size[3]};
+        background: ${colors[color][900]};
+        border: 1px solid ${colors[color][500]};
+        border-radius: ${border.radius.full};
+        transition: all 0.25s ease-out;
+        box-sizing: border-box;
+      `;
+      const classes = [base];
+      if (color === "gray") {
+        const grayStyles = css`
+          background: ${colors.gray[700]};
+          border-color: ${colors.gray[400]};
+        `;
+        classes.push(grayStyles);
+      }
+      return classes;
+    },
+    matchID: css`
+      flex: 1;
+      line-height: ${lineHeight["xs"]};
+    `,
+    ageTicker: (showWarning) => {
+      const base = css`
+        display: flex;
+        gap: ${size[1]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[400]};
+        font-variant-numeric: tabular-nums;
+        line-height: ${lineHeight["xs"]};
+      `;
+      const classes = [base];
+      if (showWarning) {
+        const warningStyles = css`
+          color: ${colors.yellow[400]};
+        `;
+        classes.push(warningStyles);
+      }
+      return classes;
+    },
+    secondContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      border-right: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+    `,
+    thirdContainer: css`
+      flex: 1 1 500px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-right: 1px solid ${colors.gray[700]};
+
+      @media (max-width: 700px) {
+        border-top: 2px solid ${colors.gray[700]};
+      }
+    `,
+    fourthContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    `,
+    routesContainer: css`
+      overflow-x: auto;
+      overflow-y: visible;
+    `,
+    routesRowContainer: (active, isMatch) => {
+      const base = css`
+        display: flex;
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        align-items: center;
+        padding: ${size[1]} ${size[2]};
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[300]};
+        cursor: ${isMatch ? "pointer" : "default"};
+        line-height: ${lineHeight["xs"]};
+      `;
+      const classes = [base];
+      if (active) {
+        const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+        classes.push(activeStyles);
+      }
+      return classes;
+    },
+    routesRow: (isMatch) => {
+      const base = css`
+        flex: 1 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: ${fontSize.xs};
+        line-height: ${lineHeight["xs"]};
+      `;
+      const classes = [base];
+      if (!isMatch) {
+        const matchStyles = css`
+          color: ${colors.gray[400]};
+        `;
+        classes.push(matchStyles);
+      }
+      return classes;
+    },
+    routeParamInfo: css`
+      color: ${colors.gray[400]};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+    `,
+    nestedRouteRow: (isRoot) => {
+      const base = css`
+        margin-left: ${isRoot ? 0 : size[3.5]};
+        border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
+      `;
+      return base;
+    },
+    code: css`
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+    `,
+    matchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+    `,
+    cachedMatchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+    maskedBadgeContainer: css`
+      flex: 1;
+      justify-content: flex-end;
+      display: flex;
+    `,
+    matchDetails: css`
+      display: flex;
+      flex-direction: column;
+      padding: ${tokens.size[2]};
+      font-size: ${tokens.font.size.xs};
+      color: ${tokens.colors.gray[300]};
+      line-height: ${tokens.font.lineHeight.sm};
+    `,
+    matchStatus: (status, isFetching) => {
+      const colorMap = {
+        pending: "yellow",
+        success: "green",
+        error: "red",
+        notFound: "purple",
+        redirected: "gray"
+      };
+      const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[status];
+      return css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        border-radius: ${tokens.border.radius.sm};
+        font-weight: ${tokens.font.weight.normal};
+        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};
+        color: ${tokens.colors[color][300]};
+        border: 1px solid ${tokens.colors[color][600]};
+        margin-bottom: ${tokens.size[2]};
+        transition: all 0.25s ease-out;
+      `;
+    },
+    matchDetailsInfo: css`
+      display: flex;
+      justify-content: flex-end;
+      flex: 1;
+    `,
+    matchDetailsInfoLabel: css`
+      display: flex;
+    `,
+    mainCloseBtn: css`
+      background: ${colors.darkGray[700]};
+      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};
+      border-radius: ${border.radius.md};
+      position: fixed;
+      z-index: 99999;
+      display: inline-flex;
+      width: fit-content;
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      gap: 8px;
+      align-items: center;
+      border: 1px solid ${colors.gray[500]};
+      font-size: ${font.size.xs};
+      cursor: pointer;
+      transition: all 0.25s ease-out;
+
+      &:hover {
+        background: ${colors.darkGray[500]};
+      }
+    `,
+    mainCloseBtnPosition: (position) => {
+      const base = css`
+        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
+        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
+      `;
+      return base;
+    },
+    mainCloseBtnAnimation: (isOpen) => {
+      if (!isOpen) {
+        return css`
+          opacity: 1;
+          pointer-events: auto;
+          visibility: visible;
+        `;
+      }
+      return css`
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      `;
+    },
+    routerLogoCloseButton: css`
+      font-weight: ${font.weight.semibold};
+      font-size: ${font.size.xs};
+      background: linear-gradient(to right, #98f30c, #00f4a3);
+      background-clip: text;
+      -webkit-background-clip: text;
+      line-height: 1;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+    `,
+    mainCloseBtnDivider: css`
+      width: 1px;
+      background: ${tokens.colors.gray[600]};
+      height: 100%;
+      border-radius: 999999px;
+      color: transparent;
+    `,
+    mainCloseBtnIconContainer: css`
+      position: relative;
+      width: ${size[5]};
+      height: ${size[5]};
+      background: pink;
+      border-radius: 999999px;
+      overflow: hidden;
+    `,
+    mainCloseBtnIconOuter: css`
+      width: ${size[5]};
+      height: ${size[5]};
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      filter: blur(3px) saturate(1.8) contrast(2);
+    `,
+    mainCloseBtnIconInner: css`
+      width: ${size[4]};
+      height: ${size[4]};
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    `,
+    panelCloseBtn: css`
+      position: absolute;
+      cursor: pointer;
+      z-index: 100001;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      outline: none;
+      background-color: ${colors.darkGray[700]};
+      &:hover {
+        background-color: ${colors.darkGray[500]};
+      }
+
+      top: 0;
+      right: ${size[2]};
+      transform: translate(0, -100%);
+      border-right: ${colors.darkGray[300]} 1px solid;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      border-top: ${colors.darkGray[300]} 1px solid;
+      border-bottom: none;
+      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
+      padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 100%;
+        left: -${size[2.5]};
+        height: ${size[1.5]};
+        width: calc(100% + ${size[5]});
+      }
+    `,
+    panelCloseBtnIcon: css`
+      color: ${colors.gray[400]};
+      width: ${size[2]};
+      height: ${size[2]};
+    `
+  };
+};
+function useStyles() {
+  const shadowDomTarget = useContext(ShadowDomTargetContext);
+  const [_styles] = createSignal(stylesFactory(shadowDomTarget));
+  return _styles;
+}
+export {
+  useStyles
+};
+//# sourceMappingURL=useStyles.js.map

package/dist/esm/useStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyles.js","sources":["../../src/useStyles.tsx"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal, useContext } from 'solid-js'\nimport { tokens } from './tokens'\nimport { ShadowDomTargetContext } from './context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = (shadowDOMTarget?: ShadowRoot) => {\n  const { colors, font, size, alpha, shadow, border } = tokens\n  const { fontFamily, lineHeight, size: fontSize } = font\n  const css = shadowDOMTarget\n    ? goober.css.bind({ target: shadowDOMTarget })\n    : goober.css\n\n  return {\n    devtoolsPanelContainer: css`\n      direction: ltr;\n      position: fixed;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n      if (isResizing()) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n      &:focus-visible {\n        outline-offset: 4px;\n        border-radius: ${border.radius.xs};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    tanstackLogo: css`\n      font-size: ${font.size.md};\n      font-weight: ${font.weight.bold};\n      line-height: ${font.lineHeight.xs};\n      white-space: nowrap;\n      color: ${colors.gray[300]};\n    `,\n    routerLogo: css`\n      font-weight: ${font.weight.semibold};\n      font-size: ${font.size.xs};\n      background: linear-gradient(to right, #84cc16, #10b981);\n      background-clip: text;\n      -webkit-background-clip: text;\n      line-height: 1;\n      -webkit-text-fill-color: transparent;\n      white-space: nowrap;\n    `,\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n\n      @media (max-width: 700px) {\n        flex-direction: column;\n      }\n      @media (max-width: 600px) {\n        font-size: ${fontSize.xs};\n      }\n    `,\n    dragHandle: css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n    firstContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      border-right: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n    `,\n    routerExplorerContainer: css`\n      overflow-y: auto;\n      flex: 1;\n    `,\n    routerExplorer: css`\n      padding: ${tokens.size[2]};\n    `,\n    row: css`\n      display: flex;\n      align-items: center;\n      padding: ${tokens.size[2]} ${tokens.size[2.5]};\n      gap: ${tokens.size[2.5]};\n      border-bottom: ${colors.darkGray[500]} 1px solid;\n      align-items: center;\n    `,\n    detailsHeader: css`\n      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      background-color: ${colors.darkGray[600]};\n      padding: 0px ${tokens.size[2]};\n      font-weight: ${font.weight.medium};\n      font-size: ${font.size.xs};\n      min-height: ${tokens.size[8]};\n      line-height: ${font.lineHeight.xs};\n      text-align: left;\n      display: flex;\n      align-items: center;\n    `,\n    maskedBadge: css`\n      background: ${colors.yellow[900]}${alpha[70]};\n      color: ${colors.yellow[300]};\n      display: inline-block;\n      padding: ${tokens.size[0]} ${tokens.size[2.5]};\n      border-radius: ${border.radius.full};\n      font-size: ${font.size.xs};\n      font-weight: ${font.weight.normal};\n      border: 1px solid ${colors.yellow[300]};\n    `,\n    maskedLocation: css`\n      color: ${colors.yellow[300]};\n    `,\n    detailsContent: css`\n      padding: ${tokens.size[1.5]} ${tokens.size[2]};\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: ${font.size.xs};\n    `,\n    routeMatchesToggle: css`\n      display: flex;\n      align-items: center;\n      border: 1px solid ${colors.gray[500]};\n      border-radius: ${border.radius.sm};\n      overflow: hidden;\n    `,\n    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => {\n      const base = css`\n        appearance: none;\n        border: none;\n        font-size: 12px;\n        padding: 4px 8px;\n        background: transparent;\n        cursor: pointer;\n        font-family: ${fontFamily.sans};\n        font-weight: ${font.weight.medium};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[400]};\n          color: ${colors.gray[300]};\n        `\n        classes.push(activeStyles)\n      } else {\n        const inactiveStyles = css`\n          color: ${colors.gray[500]};\n          background: ${colors.darkGray[800]}${alpha[20]};\n        `\n        classes.push(inactiveStyles)\n      }\n\n      if (showBorder) {\n        classes.push(css`\n          border-right: 1px solid ${tokens.colors.gray[500]};\n        `)\n      }\n\n      return classes\n    },\n    detailsHeaderInfo: css`\n      flex: 1;\n      justify-content: flex-end;\n      display: flex;\n      align-items: center;\n      font-weight: ${font.weight.normal};\n      color: ${colors.gray[400]};\n    `,\n    matchRow: (active: boolean) => {\n      const base = css`\n        display: flex;\n        border-bottom: 1px solid ${colors.darkGray[400]};\n        cursor: pointer;\n        align-items: center;\n        padding: ${size[1]} ${size[2]};\n        gap: ${size[2]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[300]};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[500]};\n        `\n        classes.push(activeStyles)\n      }\n\n      return classes\n    },\n    matchIndicator: (\n      color: 'green' | 'red' | 'yellow' | 'gray' | 'blue' | 'purple',\n    ) => {\n      const base = css`\n        flex: 0 0 auto;\n        width: ${size[3]};\n        height: ${size[3]};\n        background: ${colors[color][900]};\n        border: 1px solid ${colors[color][500]};\n        border-radius: ${border.radius.full};\n        transition: all 0.25s ease-out;\n        box-sizing: border-box;\n      `\n      const classes = [base]\n\n      if (color === 'gray') {\n        const grayStyles = css`\n          background: ${colors.gray[700]};\n          border-color: ${colors.gray[400]};\n        `\n        classes.push(grayStyles)\n      }\n\n      return classes\n    },\n    matchID: css`\n      flex: 1;\n      line-height: ${lineHeight['xs']};\n    `,\n    ageTicker: (showWarning: boolean) => {\n      const base = css`\n        display: flex;\n        gap: ${size[1]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[400]};\n        font-variant-numeric: tabular-nums;\n        line-height: ${lineHeight['xs']};\n      `\n\n      const classes = [base]\n\n      if (showWarning) {\n        const warningStyles = css`\n          color: ${colors.yellow[400]};\n        `\n        classes.push(warningStyles)\n      }\n\n      return classes\n    },\n    secondContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      border-right: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n    `,\n    thirdContainer: css`\n      flex: 1 1 500px;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      border-right: 1px solid ${colors.gray[700]};\n\n      @media (max-width: 700px) {\n        border-top: 2px solid ${colors.gray[700]};\n      }\n    `,\n    fourthContainer: css`\n      flex: 1 1 500px;\n      min-height: 40%;\n      max-height: 100%;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    `,\n    routesContainer: css`\n      overflow-x: auto;\n      overflow-y: visible;\n    `,\n    routesRowContainer: (active: boolean, isMatch: boolean) => {\n      const base = css`\n        display: flex;\n        border-bottom: 1px solid ${colors.darkGray[400]};\n        align-items: center;\n        padding: ${size[1]} ${size[2]};\n        gap: ${size[2]};\n        font-size: ${fontSize.xs};\n        color: ${colors.gray[300]};\n        cursor: ${isMatch ? 'pointer' : 'default'};\n        line-height: ${lineHeight['xs']};\n      `\n      const classes = [base]\n\n      if (active) {\n        const activeStyles = css`\n          background: ${colors.darkGray[500]};\n        `\n        classes.push(activeStyles)\n      }\n\n      return classes\n    },\n    routesRow: (isMatch: boolean) => {\n      const base = css`\n        flex: 1 0 auto;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        font-size: ${fontSize.xs};\n        line-height: ${lineHeight['xs']};\n      `\n\n      const classes = [base]\n\n      if (!isMatch) {\n        const matchStyles = css`\n          color: ${colors.gray[400]};\n        `\n        classes.push(matchStyles)\n      }\n\n      return classes\n    },\n    routeParamInfo: css`\n      color: ${colors.gray[400]};\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight['xs']};\n    `,\n    nestedRouteRow: (isRoot: boolean) => {\n      const base = css`\n        margin-left: ${isRoot ? 0 : size[3.5]};\n        border-left: ${isRoot ? '' : `solid 1px ${colors.gray[700]}`};\n      `\n      return base\n    },\n    code: css`\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight['xs']};\n    `,\n    matchesContainer: css`\n      flex: 1 1 auto;\n      overflow-y: auto;\n    `,\n    cachedMatchesContainer: css`\n      flex: 1 1 auto;\n      overflow-y: auto;\n      max-height: 50%;\n    `,\n    maskedBadgeContainer: css`\n      flex: 1;\n      justify-content: flex-end;\n      display: flex;\n    `,\n    matchDetails: css`\n      display: flex;\n      flex-direction: column;\n      padding: ${tokens.size[2]};\n      font-size: ${tokens.font.size.xs};\n      color: ${tokens.colors.gray[300]};\n      line-height: ${tokens.font.lineHeight.sm};\n    `,\n    matchStatus: (\n      status: 'pending' | 'success' | 'error' | 'notFound' | 'redirected',\n      isFetching: false | 'beforeLoad' | 'loader',\n    ) => {\n      const colorMap = {\n        pending: 'yellow',\n        success: 'green',\n        error: 'red',\n        notFound: 'purple',\n        redirected: 'gray',\n      } as const\n\n      const color =\n        isFetching && status === 'success'\n          ? isFetching === 'beforeLoad'\n            ? 'purple'\n            : 'blue'\n          : colorMap[status]\n\n      return css`\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 40px;\n        border-radius: ${tokens.border.radius.sm};\n        font-weight: ${tokens.font.weight.normal};\n        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};\n        color: ${tokens.colors[color][300]};\n        border: 1px solid ${tokens.colors[color][600]};\n        margin-bottom: ${tokens.size[2]};\n        transition: all 0.25s ease-out;\n      `\n    },\n    matchDetailsInfo: css`\n      display: flex;\n      justify-content: flex-end;\n      flex: 1;\n    `,\n    matchDetailsInfoLabel: css`\n      display: flex;\n    `,\n    mainCloseBtn: css`\n      background: ${colors.darkGray[700]};\n      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};\n      border-radius: ${border.radius.md};\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      gap: 8px;\n      align-items: center;\n      border: 1px solid ${colors.gray[500]};\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n\n      &:hover {\n        background: ${colors.darkGray[500]};\n      }\n    `,\n    mainCloseBtnPosition: (\n      position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',\n    ) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean) => {\n      if (!isOpen) {\n        return css`\n          opacity: 1;\n          pointer-events: auto;\n          visibility: visible;\n        `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    routerLogoCloseButton: css`\n      font-weight: ${font.weight.semibold};\n      font-size: ${font.size.xs};\n      background: linear-gradient(to right, #98f30c, #00f4a3);\n      background-clip: text;\n      -webkit-background-clip: text;\n      line-height: 1;\n      -webkit-text-fill-color: transparent;\n      white-space: nowrap;\n    `,\n    mainCloseBtnDivider: css`\n      width: 1px;\n      background: ${tokens.colors.gray[600]};\n      height: 100%;\n      border-radius: 999999px;\n      color: transparent;\n    `,\n    mainCloseBtnIconContainer: css`\n      position: relative;\n      width: ${size[5]};\n      height: ${size[5]};\n      background: pink;\n      border-radius: 999999px;\n      overflow: hidden;\n    `,\n    mainCloseBtnIconOuter: css`\n      width: ${size[5]};\n      height: ${size[5]};\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      filter: blur(3px) saturate(1.8) contrast(2);\n    `,\n    mainCloseBtnIconInner: css`\n      width: ${size[4]};\n      height: ${size[4]};\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    `,\n    panelCloseBtn: css`\n      position: absolute;\n      cursor: pointer;\n      z-index: 100001;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      outline: none;\n      background-color: ${colors.darkGray[700]};\n      &:hover {\n        background-color: ${colors.darkGray[500]};\n      }\n\n      top: 0;\n      right: ${size[2]};\n      transform: translate(0, -100%);\n      border-right: ${colors.darkGray[300]} 1px solid;\n      border-left: ${colors.darkGray[300]} 1px solid;\n      border-top: ${colors.darkGray[300]} 1px solid;\n      border-bottom: none;\n      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;\n      padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};\n\n      &::after {\n        content: ' ';\n        position: absolute;\n        top: 100%;\n        left: -${size[2.5]};\n        height: ${size[1.5]};\n        width: calc(100% + ${size[5]});\n      }\n    `,\n    panelCloseBtnIcon: css`\n      color: ${colors.gray[400]};\n      width: ${size[2]};\n      height: ${size[2]};\n    `,\n  }\n}\n\nexport function useStyles() {\n  const shadowDomTarget = useContext(ShadowDomTargetContext)\n  const [_styles] = createSignal(stylesFactory(shadowDomTarget))\n  return _styles\n}\n"],"names":["stylesFactory","shadowDOMTarget","colors","font","size","alpha","border","tokens","fontFamily","lineHeight","fontSize","css","goober","bind","target","devtoolsPanelContainer","gray","devtoolsPanelContainerVisibility","isOpen","devtoolsPanelContainerResizing","isResizing","devtoolsPanelContainerAnimation","height","logo","sans","radius","xs","blue","tanstackLogo","md","weight","bold","routerLogo","semibold","devtoolsPanel","sm","darkGray","dragHandle","purple","firstContainer","routerExplorerContainer","routerExplorer","row","detailsHeader","medium","maskedBadge","yellow","full","normal","maskedLocation","detailsContent","routeMatchesToggle","routeMatchesToggleBtn","active","showBorder","base","classes","activeStyles","push","inactiveStyles","detailsHeaderInfo","matchRow","matchIndicator","color","grayStyles","matchID","ageTicker","showWarning","warningStyles","secondContainer","thirdContainer","fourthContainer","routesContainer","routesRowContainer","isMatch","routesRow","matchStyles","routeParamInfo","nestedRouteRow","isRoot","code","matchesContainer","cachedMatchesContainer","maskedBadgeContainer","matchDetails","matchStatus","status","isFetching","colorMap","pending","success","error","notFound","redirected","matchDetailsInfo","matchDetailsInfoLabel","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","routerLogoCloseButton","mainCloseBtnDivider","mainCloseBtnIconContainer","mainCloseBtnIconOuter","mainCloseBtnIconInner","panelCloseBtn","panelCloseBtnIcon","useStyles","shadowDomTarget","useContext","ShadowDomTargetContext","_styles","createSignal"],"mappings":"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"}

package/dist/esm/utils.d.ts

@@ -0,0 +1,25 @@
+import { AnyRoute, AnyRouteMatch } from '@tanstack/router-core';
+import { Theme } from './theme.js';
+import { JSX } from 'solid-js';
+export declare const isServer: boolean;
+type StyledComponent<T> = T extends 'button' ? JSX.ButtonHTMLAttributes<HTMLButtonElement> : T extends 'input' ? JSX.InputHTMLAttributes<HTMLInputElement> : T extends 'select' ? JSX.SelectHTMLAttributes<HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? JSX.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
+export declare function getStatusColor(match: AnyRouteMatch): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
+export declare function getRouteStatusColor(matches: Array<AnyRouteMatch>, route: AnyRoute): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
+type Styles = JSX.CSSProperties | ((props: Record<string, any>, theme: Theme) => JSX.CSSProperties);
+export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): ({ ref, style, ...rest }: StyledComponent<T> & {
+    ref?: HTMLElementTagNameMap[T] | undefined;
+}) => JSX.Element;
+export declare function useIsMounted(): import('solid-js').Accessor<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: Array<T>, accessors?: Array<(item: T) => any>): Array<T>;
+export {};