@tanstack/devtools-ui 0.2.2 → 0.3.1

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

@@ -20,10 +20,55 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
-const stylesFactory = () => {
+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;
@@ -54,12 +99,14 @@ const stylesFactory = () => {
       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;
@@ -103,12 +150,14 @@ const stylesFactory = () => {
       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;
@@ -196,12 +245,163 @@ const stylesFactory = () => {
       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"};
+      `
+    }
   };
 };
 function useStyles() {

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

@@ -1 +1 @@
-{"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'\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha } = tokens\n  const { fontFamily } = font\n  const css = goober.css\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    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\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    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\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    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\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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"}
+{"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  }\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,3 +1,5 @@
+import { tokens } from './tokens.cjs';
+import { ButtonVariant } from '../components/button.cjs';
 export declare function useStyles(): import('solid-js').Accessor<{
     logo: string;
     selectWrapper: string;
@@ -16,4 +18,26 @@ export declare function useStyles(): import('solid-js').Accessor<{
     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;
+    };
 }>;

package/dist/esm/components/button.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'solid-js';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning';
+type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    outline?: boolean;
+    ghost?: boolean;
+    children?: any;
+    className?: string;
+};
+export declare function Button(props: ButtonProps): JSX.Element;
+export {};

package/dist/esm/components/button.js

@@ -0,0 +1,23 @@
+import { template, spread, mergeProps, insert } from "solid-js/web";
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+function Button(props) {
+  const styles = useStyles();
+  const [local, rest] = splitProps(props, ["variant", "outline", "ghost", "children", "className"]);
+  const variant = local.variant || "primary";
+  const classes = clsx(styles().button.base, styles().button.variant(variant, local.outline, local.ghost), local.className);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(rest, {
+      "class": classes
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map

package/dist/esm/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button.tsx"],"sourcesContent":["import { splitProps } from 'solid-js'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js'\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\ntype ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: ButtonVariant\n  outline?: boolean\n  ghost?: boolean\n  children?: any\n  className?: string\n}\n\nexport function Button(props: ButtonProps) {\n  const styles = useStyles()\n  const [local, rest] = splitProps(props, [\n    'variant',\n    'outline',\n    'ghost',\n    'children',\n    'className',\n  ])\n  const variant = local.variant || 'primary'\n  const classes = clsx(\n    styles().button.base,\n    styles().button.variant(variant, local.outline, local.ghost),\n    local.className,\n  )\n\n  return (\n    <button {...rest} class={classes}>\n      {local.children}\n    </button>\n  )\n}\n"],"names":["Button","props","styles","useStyles","local","rest","splitProps","variant","classes","clsx","button","base","outline","ghost","className","_el$","_tmpl$","_$spread","_$mergeProps","_$insert","children"],"mappings":";;;;;AAoBO,SAASA,OAAOC,OAAoB;AACzC,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,OAAOC,IAAI,IAAIC,WAAWL,OAAO,CACtC,WACA,WACA,SACA,YACA,WAAW,CACZ;AACD,QAAMM,UAAUH,MAAMG,WAAW;AACjC,QAAMC,UAAUC,KACdP,OAAAA,EAASQ,OAAOC,MAChBT,SAASQ,OAAOH,QAAQA,SAASH,MAAMQ,SAASR,MAAMS,KAAK,GAC3DT,MAAMU,SACR;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WACcb,MAAI;AAAA,MAAA,SAASG;AAAAA,IAAAA,CAAO,GAAA,OAAA,IAAA;AAAAW,WAAAJ,MAAA,MAC7BX,MAAMgB,QAAQ;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/esm/components/tag.d.ts

@@ -0,0 +1,7 @@
+import { tokens } from '../styles/tokens.js';
+export declare const Tag: (props: {
+    color: keyof typeof tokens.colors;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+}) => import("solid-js").JSX.Element;

package/dist/esm/components/tag.js

@@ -0,0 +1,40 @@
+import { template, insert, createComponent, effect, className } from "solid-js/web";
+import { Show } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<button><span></span><span>`);
+const Tag = (props) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    insert(_el$3, () => props.label);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.count && props.count > 0;
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        insert(_el$4, () => props.count);
+        effect(() => className(_el$4, styles().tag.count));
+        return _el$4;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = props.disabled, _v$2 = styles().tag.base, _v$3 = styles().tag.dot(props.color), _v$4 = styles().tag.label;
+      _v$ !== _p$.e && (_el$.disabled = _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+};
+export {
+  Tag
+};
+//# sourceMappingURL=tag.js.map

package/dist/esm/components/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../../src/components/tag.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport type { tokens } from '../styles/tokens'\n\nexport const Tag = (props: {\n  color: keyof typeof tokens.colors\n  label: string\n  count?: number\n  disabled?: boolean\n}) => {\n  const styles = useStyles()\n  return (\n    <button disabled={props.disabled} class={styles().tag.base}>\n      <span class={styles().tag.dot(props.color)} />\n      <span class={styles().tag.label}>{props.label}</span>\n\n      <Show when={props.count && props.count > 0}>\n        <span class={styles().tag.count}>{props.count}</span>\n      </Show>\n    </button>\n  )\n}\n"],"names":["Tag","props","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","label","_$createComponent","Show","when","count","children","_el$4","_tmpl$","_$effect","_$className","tag","_p$","_v$","disabled","_v$2","base","_v$3","dot","color","_v$4","e","t","a","o","undefined"],"mappings":";;;;AAIO,MAAMA,MAAMA,CAACC,UAKd;AACJ,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,WAAAF,OAAA,MAGsCP,MAAMU,KAAK;AAAAD,WAAAN,MAAAQ,gBAE5CC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,MAAMc,SAASd,MAAMc,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAC,OAAAA;AAAAR,eAAAO,OAAA,MACNhB,MAAMc,KAAK;AAAAI,eAAA,MAAAC,UAAAH,OAAhCf,SAASmB,IAAIN,KAAK,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAE,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MALjBtB,MAAMuB,UAAQC,OAASvB,SAASmB,IAAIK,MAAIC,OAC3CzB,SAASmB,IAAIO,IAAI3B,MAAM4B,KAAK,GAACC,OAC7B5B,SAASmB,IAAIV;AAAKY,cAAAD,IAAAS,MAAA3B,KAAAoB,WAAAF,IAAAS,IAAAR;AAAAE,eAAAH,IAAAU,KAAAZ,UAAAhB,MAAAkB,IAAAU,IAAAP,IAAA;AAAAE,eAAAL,IAAAW,KAAAb,UAAAd,OAAAgB,IAAAW,IAAAN,IAAA;AAAAG,eAAAR,IAAAY,KAAAd,UAAAZ,OAAAc,IAAAY,IAAAJ,IAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA/B;AAAAA,EAAA,GAAA;AAOrC;"}

package/dist/esm/components/tree.d.ts

@@ -0,0 +1,3 @@
+export declare function JsonTree(props: {
+    value: any;
+}): import("solid-js").JSX.Element;

package/dist/esm/components/tree.js

@@ -0,0 +1,237 @@
+import { createComponent, template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { createSignal, Show, For } from "solid-js";
+import clsx from "clsx";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$3 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$4 = /* @__PURE__ */ template(`<span>null`), _tmpl$5 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$6 = /* @__PURE__ */ template(`<span>,`), _tmpl$7 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
+function JsonTree(props) {
+  return createComponent(JsonValue, {
+    isRoot: true,
+    get value() {
+      return props.value;
+    }
+  });
+}
+function JsonValue(props) {
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey
+  } = props;
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
+      return () => _c$() && (() => {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
+        _el$5.nextSibling;
+        insert(_el$2, keyName, _el$5);
+        effect(() => className(_el$2, styles().tree.valueKey));
+        return _el$2;
+      })();
+    })(), null);
+    insert(_el$, () => {
+      if (typeof value === "string") {
+        return (() => {
+          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
+          _el$9.nextSibling;
+          insert(_el$6, value, _el$9);
+          effect(() => className(_el$6, styles().tree.valueString));
+          return _el$6;
+        })();
+      }
+      if (typeof value === "number") {
+        return (() => {
+          var _el$10 = _tmpl$();
+          insert(_el$10, value);
+          effect(() => className(_el$10, styles().tree.valueNumber));
+          return _el$10;
+        })();
+      }
+      if (typeof value === "boolean") {
+        return (() => {
+          var _el$11 = _tmpl$();
+          insert(_el$11, () => String(value));
+          effect(() => className(_el$11, styles().tree.valueBoolean));
+          return _el$11;
+        })();
+      }
+      if (value === null) {
+        return (() => {
+          var _el$12 = _tmpl$4();
+          effect(() => className(_el$12, styles().tree.valueNull));
+          return _el$12;
+        })();
+      }
+      if (value === void 0) {
+        return (() => {
+          var _el$13 = _tmpl$5();
+          effect(() => className(_el$13, styles().tree.valueNull));
+          return _el$13;
+        })();
+      }
+      if (typeof value === "function") {
+        return (() => {
+          var _el$14 = _tmpl$();
+          insert(_el$14, () => String(value));
+          effect(() => className(_el$14, styles().tree.valueFunction));
+          return _el$14;
+        })();
+      }
+      if (Array.isArray(value)) {
+        return createComponent(ArrayValue, {
+          keyName,
+          value
+        });
+      }
+      if (typeof value === "object") {
+        return createComponent(ObjectValue, {
+          keyName,
+          value
+        });
+      }
+      return _tmpl$();
+    }, null);
+    insert(_el$, isLastKey || isRoot ? "" : _tmpl$6(), null);
+    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
+    return _el$;
+  })();
+}
+const ArrayValue = ({
+  value,
+  keyName
+}) => {
+  const styles = useStyles();
+  const [expanded, setExpanded] = createSignal(true);
+  return (() => {
+    var _el$17 = _tmpl$7(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling;
+    insert(_el$17, keyName && (() => {
+      var _el$21 = _tmpl$2(), _el$22 = _el$21.firstChild, _el$24 = _el$22.nextSibling;
+      _el$24.nextSibling;
+      _el$21.$$click = (e) => {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        setExpanded(!expanded());
+      };
+      insert(_el$21, keyName, _el$24);
+      effect(() => className(_el$21, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+      return _el$21;
+    })(), _el$18);
+    insert(_el$17, createComponent(Show, {
+      get when() {
+        return expanded();
+      },
+      get children() {
+        return createComponent(For, {
+          each: value,
+          children: (item, i) => {
+            const isLastKey = i() === value.length - 1;
+            return createComponent(JsonValue, {
+              value: item,
+              isLastKey
+            });
+          }
+        });
+      }
+    }), _el$20);
+    insert(_el$17, createComponent(Show, {
+      get when() {
+        return !expanded();
+      },
+      get children() {
+        var _el$19 = _tmpl$();
+        _el$19.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$19, () => `... ${value.length} more`);
+        effect(() => className(_el$19, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$19;
+      }
+    }), _el$20);
+    effect((_p$) => {
+      var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
+      _v$ !== _p$.e && className(_el$18, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$20, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$17;
+  })();
+};
+const ObjectValue = ({
+  value,
+  keyName
+}) => {
+  const styles = useStyles();
+  const [expanded, setExpanded] = createSignal(true);
+  const keys = Object.keys(value);
+  const lastKeyName = keys[keys.length - 1];
+  return (() => {
+    var _el$25 = _tmpl$8(), _el$26 = _el$25.firstChild, _el$28 = _el$26.nextSibling;
+    insert(_el$25, keyName && (() => {
+      var _el$29 = _tmpl$2(), _el$30 = _el$29.firstChild, _el$32 = _el$30.nextSibling;
+      _el$32.nextSibling;
+      _el$29.$$click = (e) => {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        setExpanded(!expanded());
+      };
+      insert(_el$29, keyName, _el$32);
+      effect(() => className(_el$29, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+      return _el$29;
+    })(), _el$26);
+    insert(_el$25, createComponent(Show, {
+      get when() {
+        return expanded();
+      },
+      get children() {
+        return createComponent(For, {
+          each: keys,
+          children: (k) => createComponent(JsonValue, {
+            get value() {
+              return value[k];
+            },
+            keyName: k,
+            isLastKey: lastKeyName === k
+          })
+        });
+      }
+    }), _el$28);
+    insert(_el$25, createComponent(Show, {
+      get when() {
+        return !expanded();
+      },
+      get children() {
+        var _el$27 = _tmpl$();
+        _el$27.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$27, () => `... ${keys.length} more`);
+        effect(() => className(_el$27, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$27;
+      }
+    }), _el$28);
+    effect((_p$) => {
+      var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
+      _v$3 !== _p$.e && className(_el$26, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$28, _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$25;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  JsonTree
+};
+//# sourceMappingURL=tree.js.map