@tanstack/devtools-ui 0.3.0 → 0.3.1

package/dist/cjs/styles/tokens.cjs

@@ -2,44 +2,180 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tokens = {
   colors: {
+    inherit: "inherit",
+    current: "currentColor",
+    transparent: "transparent",
+    black: "#000000",
+    white: "#ffffff",
+    neutral: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
     darkGray: {
-      800: "#111318"
+      50: "#525c7a",
+      100: "#49536e",
+      200: "#414962",
+      300: "#394056",
+      400: "#313749",
+      500: "#292e3d",
+      600: "#212530",
+      700: "#191c24",
+      800: "#111318",
+      900: "#0b0d10"
     },
     gray: {
+      50: "#f9fafb",
       100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
       400: "#98a2b3",
       500: "#667085",
       600: "#475467",
-      700: "#344054"
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
     },
     blue: {
-      300: "#84CAFF"
+      25: "#F5FAFF",
+      50: "#EFF8FF",
+      100: "#D1E9FF",
+      200: "#B2DDFF",
+      300: "#84CAFF",
+      400: "#53B1FD",
+      500: "#2E90FA",
+      600: "#1570EF",
+      700: "#175CD3",
+      800: "#1849A9",
+      900: "#194185"
     },
     green: {
-      400: "#32D583"
+      25: "#F6FEF9",
+      50: "#ECFDF3",
+      100: "#D1FADF",
+      200: "#A6F4C5",
+      300: "#6CE9A6",
+      400: "#32D583",
+      500: "#12B76A",
+      600: "#039855",
+      700: "#027A48",
+      800: "#05603A",
+      900: "#054F31"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     yellow: {
-      400: "#FDB022"
+      25: "#FFFCF5",
+      50: "#FFFAEB",
+      100: "#FEF0C7",
+      200: "#FEDF89",
+      300: "#FEC84B",
+      400: "#FDB022",
+      500: "#F79009",
+      600: "#DC6803",
+      700: "#B54708",
+      800: "#93370D",
+      900: "#7A2E0E"
     },
     purple: {
+      25: "#FAFAFF",
+      50: "#F4F3FF",
+      100: "#EBE9FE",
+      200: "#D9D6FE",
+      300: "#BDB4FE",
       400: "#9B8AFB",
-      500: "#7A5AF8"
+      500: "#7A5AF8",
+      600: "#6938EF",
+      700: "#5925DC",
+      800: "#4A1FB8",
+      900: "#3E1C96"
+    },
+    teal: {
+      25: "#F6FEFC",
+      50: "#F0FDF9",
+      100: "#CCFBEF",
+      200: "#99F6E0",
+      300: "#5FE9D0",
+      400: "#2ED3B7",
+      500: "#15B79E",
+      600: "#0E9384",
+      700: "#107569",
+      800: "#125D56",
+      900: "#134E48"
     },
     pink: {
-      400: "#ec4899"
+      25: "#fdf2f8",
+      50: "#fce7f3",
+      100: "#fbcfe8",
+      200: "#f9a8d4",
+      300: "#f472b6",
+      400: "#ec4899",
+      500: "#db2777",
+      600: "#be185d",
+      700: "#9d174d",
+      800: "#831843",
+      900: "#500724"
+    },
+    cyan: {
+      25: "#ecfeff",
+      50: "#cffafe",
+      100: "#a5f3fc",
+      200: "#67e8f9",
+      300: "#22d3ee",
+      400: "#06b6d4",
+      500: "#0891b2",
+      600: "#0e7490",
+      700: "#155e75",
+      800: "#164e63",
+      900: "#083344"
     }
   },
   alpha: {
     20: "33"
   },
   font: {
+    size: {
+      xs: "calc(var(--tsrd-font-size) * 0.75)",
+      sm: "calc(var(--tsrd-font-size) * 0.875)"
+    },
+    weight: {
+      medium: "500"
+    },
     fontFamily: {
       sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
       mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
     }
   },
+  border: {
+    radius: {
+      sm: "calc(var(--tsrd-font-size) * 0.25)",
+      full: "9999px"
+    }
+  },
   size: {
     0.5: "calc(var(--tsrd-font-size) * 0.125)",
+    1: "calc(var(--tsrd-font-size) * 0.25)",
+    1.5: "calc(var(--tsrd-font-size) * 0.375)",
+    4.5: "calc(var(--tsrd-font-size) * 1.125)",
+    6.5: "calc(var(--tsrd-font-size) * 1.625)",
     12: "calc(var(--tsrd-font-size) * 3)"
   }
 };

package/dist/cjs/styles/tokens.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":";;AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MASR,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAGL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAKJ,KAAK;AAAA,IAOP;AAAA,IACA,OAAO;AAAA,MAML,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,IAMP;AAAA,IACA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,IAcA,MAAM;AAAA,MAMJ,KAAK;AAAA,IAMP;AAAA,EAcF;AAAA,EACA,OAAO;AAAA,IASL,IAAI;AAAA,EAGN;AAAA,EACA,MAAM;AAAA,IA6CJ,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAuBF,MAAM;AAAA,IAGJ,KAAK;AAAA,IAkBL,IAAI;AAAA,EAkBN;AAiCF;;"}
+{"version":3,"file":"tokens.cjs","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"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"}

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,13 +245,139 @@ 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]};
       `,

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    tree: {\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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"}
+{"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,7 +18,20 @@ 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;

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;"}