@tanstack/devtools-ui 0.3.2 → 0.3.4

package/dist/cjs/styles/use-styles.cjs

@@ -1,461 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const goober = require("goober");
-const solidJs = require("solid-js");
-const tokens = require("./tokens.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 buttonVariantColors = {
-  primary: {
-    bg: tokens.tokens.colors.purple[500],
-    hover: tokens.tokens.colors.purple[600],
-    active: tokens.tokens.colors.purple[700],
-    text: "#fff",
-    border: tokens.tokens.colors.purple[500]
-  },
-  secondary: {
-    bg: tokens.tokens.colors.gray[800],
-    hover: tokens.tokens.colors.gray[700],
-    active: tokens.tokens.colors.gray[600],
-    text: tokens.tokens.colors.gray[100],
-    border: tokens.tokens.colors.gray[700]
-  },
-  info: {
-    bg: tokens.tokens.colors.blue[500],
-    hover: tokens.tokens.colors.blue[600],
-    active: tokens.tokens.colors.blue[700],
-    text: "#fff",
-    border: tokens.tokens.colors.blue[500]
-  },
-  warning: {
-    bg: tokens.tokens.colors.yellow[500],
-    hover: tokens.tokens.colors.yellow[600],
-    active: tokens.tokens.colors.yellow[700],
-    text: "#fff",
-    border: tokens.tokens.colors.yellow[500]
-  },
-  danger: {
-    bg: tokens.tokens.colors.red[500],
-    hover: tokens.tokens.colors.red[600],
-    active: tokens.tokens.colors.red[700],
-    text: "#fff",
-    border: tokens.tokens.colors.red[500]
-  },
-  success: {
-    bg: tokens.tokens.colors.green[500],
-    hover: tokens.tokens.colors.green[600],
-    active: tokens.tokens.colors.green[700],
-    text: "#fff",
-    border: tokens.tokens.colors.green[500]
-  }
-};
-const stylesFactory = (theme = "dark") => {
-  const { colors, font, size, alpha } = tokens.tokens;
-  const { fontFamily } = font;
-  const css = goober__namespace.css;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  return {
-    logo: css`
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      background-color: transparent;
-      border: none;
-      width: ${size[12]};
-      height: ${size[12]};
-      font-family: ${fontFamily.sans};
-      gap: ${tokens.tokens.size[0.5]};
-      padding: 0px;
-      &:hover {
-        opacity: 0.7;
-      }
-    `,
-    selectWrapper: css`
-      width: 100%;
-      max-width: 300px;
-      display: flex;
-      flex-direction: column;
-      gap: 0.375rem;
-    `,
-    selectContainer: css`
-      width: 100%;
-    `,
-    selectLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${colors.gray[100]};
-      text-align: left;
-    `,
-    selectDescription: css`
-      font-size: 0.8rem;
-      color: ${colors.gray[400]};
-      margin: 0;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    select: css`
-      appearance: none;
-      width: 100%;
-      padding: 0.75rem 3rem 0.75rem 0.75rem;
-      border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
-      font-size: 0.875rem;
-      transition: all 0.2s ease;
-      cursor: pointer;
-
-      /* Custom arrow */
-      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-      background-repeat: no-repeat;
-      background-position: right 0.75rem center;
-      background-size: 1.25rem;
-
-      &:hover {
-        border-color: ${colors.gray[600]};
-      }
-
-      &:focus {
-        outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
-      }
-    `,
-    inputWrapper: css`
-      width: 100%;
-      max-width: 300px;
-      display: flex;
-      flex-direction: column;
-      gap: 0.375rem;
-    `,
-    inputContainer: css`
-      width: 100%;
-    `,
-    inputLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${colors.gray[100]};
-      text-align: left;
-    `,
-    inputDescription: css`
-      font-size: 0.8rem;
-      color: ${colors.gray[400]};
-      margin: 0;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    input: css`
-      appearance: none;
-      width: 100%;
-      padding: 0.75rem;
-      border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
-      font-size: 0.875rem;
-      font-family: ${fontFamily.mono};
-      transition: all 0.2s ease;
-
-      &::placeholder {
-        color: ${colors.gray[500]};
-      }
-
-      &:hover {
-        border-color: ${colors.gray[600]};
-      }
-
-      &:focus {
-        outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
-      }
-    `,
-    checkboxWrapper: css`
-      display: flex;
-      align-items: flex-start;
-      gap: 0.75rem;
-      cursor: pointer;
-      user-select: none;
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: ${colors.darkGray[800]};
-      }
-    `,
-    checkboxContainer: css`
-      width: 100%;
-    `,
-    checkboxLabelContainer: css`
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-      flex: 1;
-    `,
-    checkbox: css`
-      appearance: none;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 2px solid ${colors.gray[700]};
-      border-radius: 0.375rem;
-      background-color: ${colors.darkGray[800]};
-      display: grid;
-      place-items: center;
-      transition: all 0.2s ease;
-      flex-shrink: 0;
-      margin-top: 0.125rem;
-
-      &:hover {
-        border-color: ${colors.purple[400]};
-      }
-
-      &:checked {
-        background-color: ${colors.purple[500]};
-        border-color: ${colors.purple[500]};
-      }
-
-      &:checked::after {
-        content: '';
-        width: 0.4rem;
-        height: 0.6rem;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-        margin-top: -3px;
-      }
-    `,
-    checkboxLabel: css`
-      color: ${colors.gray[100]};
-      font-size: 0.875rem;
-      font-weight: 500;
-      line-height: 1.4;
-      text-align: left;
-    `,
-    checkboxDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.8rem;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    button: {
-      base: css`
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-family: ${tokens.tokens.font.fontFamily.sans};
-        font-size: 0.8rem;
-        font-weight: 500;
-        border-radius: 0.2rem;
-        padding: 0.2rem 0.6rem;
-        cursor: pointer;
-        transition:
-          background 0.2s,
-          color 0.2s,
-          border 0.2s,
-          box-shadow 0.2s;
-        outline: none;
-        border-width: 1px;
-        border-style: solid;
-      `,
-      variant(variant, outline, ghost) {
-        const v = buttonVariantColors[variant];
-        if (ghost) {
-          return css`
-            background: transparent;
-            color: ${v.bg};
-            border-color: transparent;
-            &:hover {
-              background: ${tokens.tokens.colors.purple[100]};
-            }
-            &:active {
-              background: ${tokens.tokens.colors.purple[200]};
-            }
-          `;
-        }
-        if (outline) {
-          return css`
-            background: transparent;
-            color: ${v.bg};
-            border-color: ${v.bg};
-            &:hover {
-              background: ${tokens.tokens.colors.purple[100]};
-              border-color: ${v.hover};
-            }
-            &:active {
-              background: ${tokens.tokens.colors.purple[200]};
-              border-color: ${v.active};
-            }
-          `;
-        }
-        return css`
-          background: ${v.bg};
-          color: ${v.text};
-          border-color: ${v.border};
-          &:hover {
-            background: ${v.hover};
-            border-color: ${v.hover};
-          }
-          &:active {
-            background: ${v.active};
-            border-color: ${v.active};
-          }
-        `;
-      }
-    },
-    tag: {
-      dot: (color) => css`
-        width: ${tokens.tokens.size[1.5]};
-        height: ${tokens.tokens.size[1.5]};
-        border-radius: ${tokens.tokens.border.radius.full};
-        background-color: ${tokens.tokens.colors[color][500]};
-      `,
-      base: css`
-        display: flex;
-        gap: ${tokens.tokens.size[1.5]};
-        box-sizing: border-box;
-        height: ${tokens.tokens.size[6.5]};
-        background: ${t(colors.gray[50], colors.darkGray[500])};
-        color: ${t(colors.gray[700], colors.gray[300])};
-        border-radius: ${tokens.tokens.border.radius.sm};
-        font-size: ${font.size.sm};
-        padding: ${tokens.tokens.size[1]};
-        padding-left: ${tokens.tokens.size[1.5]};
-        align-items: center;
-        font-weight: ${font.weight.medium};
-        border: ${t("1px solid " + colors.gray[300], "1px solid transparent")};
-        user-select: none;
-        position: relative;
-        &:focus-visible {
-          outline-offset: 2px;
-          outline: 2px solid ${colors.blue[800]};
-        }
-      `,
-      label: css`
-        font-size: ${font.size.xs};
-      `,
-      count: css`
-        font-size: ${font.size.xs};
-        padding: 0 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: ${t(colors.gray[500], colors.gray[400])};
-        background-color: ${t(colors.gray[200], colors.darkGray[300])};
-        border-radius: 2px;
-        font-variant-numeric: tabular-nums;
-        height: ${tokens.tokens.size[4.5]};
-      `
-    },
-    tree: {
-      collapsible: css`
-        cursor: pointer;
-        transition: all 0.2s ease;
-        &:hover {
-          background-color: ${colors.darkGray[700]};
-          border-radius: ${tokens.tokens.border.radius.sm};
-          padding: 0 ${tokens.tokens.size[1]};
-        }
-      `,
-      valueCollapsed: css`
-        color: ${colors.gray[400]};
-      `,
-      valueFunction: css`
-        color: ${colors.cyan[400]};
-      `,
-      valueString: css`
-        color: ${colors.green[400]};
-      `,
-      valueNumber: css`
-        color: ${colors.yellow[400]};
-      `,
-      valueBoolean: css`
-        color: ${colors.pink[400]};
-      `,
-      valueNull: css`
-        color: ${colors.gray[400]};
-        font-style: italic;
-      `,
-      valueKey: css`
-        color: ${colors.blue[300]};
-      `,
-      valueBraces: css`
-        color: ${colors.gray[500]};
-      `,
-      valueContainer: (isRoot) => css`
-        display: block;
-        margin-left: ${isRoot ? "0" : "1rem"};
-      `
-    },
-    section: {
-      main: css`
-        margin-bottom: 2rem;
-        padding: 1.5rem;
-        background-color: ${colors.darkGray[800]};
-        border: 1px solid ${colors.gray[700]};
-        border-radius: 0.75rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      `,
-      title: css`
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: ${colors.gray[100]};
-        margin: 0 0 1rem 0;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${colors.gray[700]};
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        text-align: left;
-      `,
-      icon: css`
-        height: 20px;
-        width: 20px;
-        & > svg {
-          height: 100%;
-          width: 100%;
-        }
-        color: ${colors.purple[400]};
-      `,
-      description: css`
-        color: ${colors.gray[400]};
-        font-size: 0.875rem;
-        margin: 0 0 1.5rem 0;
-        line-height: 1.5;
-        text-align: left;
-      `
-    },
-    mainPanel: {
-      panel: css`
-        padding: 0;
-        background: ${colors.darkGray[700]};
-        overflow-y: auto;
-        height: 100%;
-      `,
-      withPadding: css`
-        padding: ${tokens.tokens.size[4]};
-      `
-    }
-  };
-};
-function useStyles() {
-  const [_styles] = solidJs.createSignal(stylesFactory());
-  return _styles;
-}
-exports.useStyles = useStyles;
-//# sourceMappingURL=use-styles.cjs.map

package/dist/cjs/styles/use-styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nconst stylesFactory = (theme: 'light' | 'dark' = 'dark') => {\n  const { colors, font, size, alpha } = tokens\n  const { fontFamily } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: transparent;\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: ${v.bg};\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n              border-color: ${v.hover};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n              border-color: ${v.active};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${v.bg};\n          color: ${v.text};\n          border-color: ${v.border};\n          &:hover {\n            background: ${v.hover};\n            border-color: ${v.hover};\n          }\n          &:active {\n            background: ${v.active};\n            border-color: ${v.active};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${tokens.colors[color][500]};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${colors.darkGray[700]};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      valueCollapsed: css`\n        color: ${colors.gray[400]};\n      `,\n      valueFunction: css`\n        color: ${colors.cyan[400]};\n      `,\n      valueString: css`\n        color: ${colors.green[400]};\n      `,\n      valueNumber: css`\n        color: ${colors.yellow[400]};\n      `,\n      valueBoolean: css`\n        color: ${colors.pink[400]};\n      `,\n      valueNull: css`\n        color: ${colors.gray[400]};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${colors.blue[300]};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${colors.darkGray[800]};\n        border: 1px solid ${colors.gray[700]};\n        border-radius: 0.75rem;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${colors.gray[100]};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${colors.gray[700]};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${colors.purple[400]};\n      `,\n      description: css`\n        color: ${colors.gray[400]};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: css`\n        padding: 0;\n        background: ${colors.darkGray[700]};\n        overflow-y: auto;\n        height: 100%;\n      `,\n      withPadding: css`\n        padding: ${tokens.size[4]};\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}

package/dist/cjs/styles/use-styles.d.cts

@@ -1,53 +0,0 @@
-import { tokens } from './tokens.cjs';
-import { ButtonVariant } from '../components/button.cjs';
-export declare function useStyles(): import('solid-js').Accessor<{
-    logo: string;
-    selectWrapper: string;
-    selectContainer: string;
-    selectLabel: string;
-    selectDescription: string;
-    select: string;
-    inputWrapper: string;
-    inputContainer: string;
-    inputLabel: string;
-    inputDescription: string;
-    input: string;
-    checkboxWrapper: string;
-    checkboxContainer: string;
-    checkboxLabelContainer: string;
-    checkbox: string;
-    checkboxLabel: string;
-    checkboxDescription: string;
-    button: {
-        base: string;
-        variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean): string;
-    };
-    tag: {
-        dot: (color: keyof typeof tokens.colors) => string;
-        base: string;
-        label: string;
-        count: string;
-    };
-    tree: {
-        collapsible: string;
-        valueCollapsed: string;
-        valueFunction: string;
-        valueString: string;
-        valueNumber: string;
-        valueBoolean: string;
-        valueNull: string;
-        valueKey: string;
-        valueBraces: string;
-        valueContainer: (isRoot: boolean) => string;
-    };
-    section: {
-        main: string;
-        title: string;
-        icon: string;
-        description: string;
-    };
-    mainPanel: {
-        panel: string;
-        withPadding: string;
-    };
-}>;