@tanstack/router-devtools 1.112.18 → 1.114.0

package/dist/cjs/useStyles.cjs

@@ -1,570 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const goober = require("goober");
-const tokens = require("./tokens.cjs");
-const context = require("./context.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
-const stylesFactory = (shadowDOMTarget) => {
-  const { colors, font, size, alpha, border } = tokens.tokens;
-  const { fontFamily, lineHeight, size: fontSize } = font;
-  const css = shadowDOMTarget ? goober__namespace.css.bind({ target: shadowDOMTarget }) : goober__namespace.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.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.tokens.size[2]};
-    `,
-    row: css`
-      display: flex;
-      align-items: center;
-      padding: ${tokens.tokens.size[2]} ${tokens.tokens.size[2.5]};
-      gap: ${tokens.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.tokens.size[2]};
-      font-weight: ${font.weight.medium};
-      font-size: ${font.size.xs};
-      min-height: ${tokens.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.tokens.size[0]} ${tokens.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.tokens.size[1.5]} ${tokens.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.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.tokens.size[2]};
-      font-size: ${tokens.tokens.font.size.xs};
-      color: ${tokens.tokens.colors.gray[300]};
-      line-height: ${tokens.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.tokens.border.radius.sm};
-        font-weight: ${tokens.tokens.font.weight.normal};
-        background-color: ${tokens.tokens.colors[color][900]}${tokens.tokens.alpha[90]};
-        color: ${tokens.tokens.colors[color][300]};
-        border: 1px solid ${tokens.tokens.colors[color][600]};
-        margin-bottom: ${tokens.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.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 = React.useContext(context.ShadowDomTargetContext);
-  const [_styles] = React.useState(() => stylesFactory(shadowDomTarget));
-  return _styles;
-}
-exports.useStyles = useStyles;
-//# sourceMappingURL=useStyles.cjs.map

package/dist/cjs/useStyles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyles.cjs","sources":["../../src/useStyles.tsx"],"sourcesContent":["import React from 'react'\n\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { ShadowDomTargetContext } from './context'\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: 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 = React.useContext(ShadowDomTargetContext)\n  const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))\n  return _styles\n}\n"],"names":["tokens","goober","ShadowDomTargetContext"],"mappings":"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"}

package/dist/cjs/useStyles.d.cts

@@ -1,52 +0,0 @@
-export declare function useStyles(): {
-    devtoolsPanelContainer: string;
-    devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
-    devtoolsPanelContainerResizing: (isResizing: boolean) => string;
-    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
-    logo: string;
-    tanstackLogo: string;
-    routerLogo: string;
-    devtoolsPanel: string;
-    dragHandle: string;
-    firstContainer: string;
-    routerExplorerContainer: string;
-    routerExplorer: string;
-    row: string;
-    detailsHeader: string;
-    maskedBadge: string;
-    maskedLocation: string;
-    detailsContent: string;
-    routeMatchesToggle: string;
-    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => string[];
-    detailsHeaderInfo: string;
-    matchRow: (active: boolean) => string[];
-    matchIndicator: (color: "green" | "red" | "yellow" | "gray" | "blue" | "purple") => string[];
-    matchID: string;
-    ageTicker: (showWarning: boolean) => string[];
-    secondContainer: string;
-    thirdContainer: string;
-    fourthContainer: string;
-    routesContainer: string;
-    routesRowContainer: (active: boolean, isMatch: boolean) => string[];
-    routesRow: (isMatch: boolean) => string[];
-    routeParamInfo: string;
-    nestedRouteRow: (isRoot: boolean) => string;
-    code: string;
-    matchesContainer: string;
-    cachedMatchesContainer: string;
-    maskedBadgeContainer: string;
-    matchDetails: string;
-    matchStatus: (status: "pending" | "success" | "error" | "notFound" | "redirected", isFetching: false | "beforeLoad" | "loader") => string;
-    matchDetailsInfo: string;
-    matchDetailsInfoLabel: string;
-    mainCloseBtn: string;
-    mainCloseBtnPosition: (position: "top-left" | "top-right" | "bottom-left" | "bottom-right") => string;
-    mainCloseBtnAnimation: (isOpen: boolean) => string;
-    routerLogoCloseButton: string;
-    mainCloseBtnDivider: string;
-    mainCloseBtnIconContainer: string;
-    mainCloseBtnIconOuter: string;
-    mainCloseBtnIconInner: string;
-    panelCloseBtn: string;
-    panelCloseBtnIcon: string;
-};