@tanstack/devtools-ui 0.2.2

package/dist/cjs/styles/tokens.d.cts

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

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

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const goober = require("goober");
+const solidJs = require("solid-js");
+const tokens = require("./tokens.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
+const stylesFactory = () => {
+  const { colors, font, size, alpha } = tokens.tokens;
+  const { fontFamily } = font;
+  const css = goober__namespace.css;
+  return {
+    logo: css`
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      background-color: transparent;
+      border: none;
+      width: ${size[12]};
+      height: ${size[12]};
+      font-family: ${fontFamily.sans};
+      gap: ${tokens.tokens.size[0.5]};
+      padding: 0px;
+      &:hover {
+        opacity: 0.7;
+      }
+    `,
+    selectWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    selectContainer: css`
+      width: 100%;
+    `,
+    selectLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    selectDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    select: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+      cursor: pointer;
+
+      /* Custom arrow */
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 1.25rem;
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    inputWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    inputContainer: css`
+      width: 100%;
+    `,
+    inputLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    inputDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    input: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.mono};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${colors.gray[500]};
+      }
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    checkboxWrapper: css`
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: ${colors.darkGray[800]};
+      }
+    `,
+    checkboxContainer: css`
+      width: 100%;
+    `,
+    checkboxLabelContainer: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    checkbox: css`
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid ${colors.gray[700]};
+      border-radius: 0.375rem;
+      background-color: ${colors.darkGray[800]};
+      display: grid;
+      place-items: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+
+      &:hover {
+        border-color: ${colors.purple[400]};
+      }
+
+      &:checked {
+        background-color: ${colors.purple[500]};
+        border-color: ${colors.purple[500]};
+      }
+
+      &:checked::after {
+        content: '';
+        width: 0.4rem;
+        height: 0.6rem;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+        margin-top: -3px;
+      }
+    `,
+    checkboxLabel: css`
+      color: ${colors.gray[100]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.4;
+    `,
+    checkboxDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.8rem;
+      line-height: 1.3;
+    `
+  };
+};
+function useStyles() {
+  const [_styles] = solidJs.createSignal(stylesFactory());
+  return _styles;
+}
+exports.useStyles = useStyles;
+//# sourceMappingURL=use-styles.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,19 @@
+export declare function useStyles(): import('solid-js').Accessor<{
+    logo: string;
+    selectWrapper: string;
+    selectContainer: string;
+    selectLabel: string;
+    selectDescription: string;
+    select: string;
+    inputWrapper: string;
+    inputContainer: string;
+    inputLabel: string;
+    inputDescription: string;
+    input: string;
+    checkboxWrapper: string;
+    checkboxContainer: string;
+    checkboxLabelContainer: string;
+    checkbox: string;
+    checkboxLabel: string;
+    checkboxDescription: string;
+}>;

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

@@ -0,0 +1,8 @@
+interface CheckboxProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    description?: string;
+}
+export declare function Checkbox(props: CheckboxProps): import("solid-js").JSX.Element;
+export {};

package/dist/esm/components/checkbox.js

@@ -0,0 +1,55 @@
+import { template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { createSignal } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function Checkbox(props) {
+  const styles = useStyles();
+  const [isChecked, setIsChecked] = createSignal(props.checked || false);
+  const handleChange = (e) => {
+    const checked = e.target.checked;
+    setIsChecked(checked);
+    props.onChange?.(checked);
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    _el$3.$$input = handleChange;
+    insert(_el$4, (() => {
+      var _c$ = memo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$2();
+        insert(_el$5, () => props.label);
+        effect(() => className(_el$5, styles().checkboxLabel));
+        return _el$5;
+      })();
+    })(), null);
+    insert(_el$4, (() => {
+      var _c$2 = memo(() => !!props.description);
+      return () => _c$2() && (() => {
+        var _el$6 = _tmpl$2();
+        insert(_el$6, () => props.description);
+        effect(() => className(_el$6, styles().checkboxDescription));
+        return _el$6;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    effect(() => _el$3.checked = isChecked());
+    return _el$;
+  })();
+}
+delegateEvents(["input"]);
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface CheckboxProps {\n  label?: string\n  checked?: boolean\n  onChange?: (checked: boolean) => void\n  description?: string\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const styles = useStyles()\n  const [isChecked, setIsChecked] = createSignal(props.checked || false)\n\n  const handleChange = (e: Event) => {\n    const checked = (e.target as HTMLInputElement).checked\n    setIsChecked(checked)\n    props.onChange?.(checked)\n  }\n\n  return (\n    <div class={styles().checkboxContainer}>\n      <label class={styles().checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          checked={isChecked()}\n          class={styles().checkbox}\n          onInput={handleChange}\n        />\n        <div class={styles().checkboxLabelContainer}>\n          {props.label && (\n            <span class={styles().checkboxLabel}>{props.label}</span>\n          )}\n          {props.description && (\n            <span class={styles().checkboxDescription}>\n              {props.description}\n            </span>\n          )}\n        </div>\n      </label>\n    </div>\n  )\n}\n"],"names":["Checkbox","props","styles","useStyles","isChecked","setIsChecked","createSignal","checked","handleChange","e","target","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","$$input","_$insert","_c$","_$memo","label","_el$5","_tmpl$2","_$effect","_$className","checkboxLabel","_c$2","description","_el$6","checkboxDescription","_p$","_v$","checkboxContainer","_v$2","checkboxWrapper","_v$3","checkbox","_v$4","checkboxLabelContainer","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;AAUO,SAASA,SAASC,OAAsB;AAC7C,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAAaL,MAAMM,WAAW,KAAK;AAErE,QAAMC,eAAeA,CAACC,MAAa;AACjC,UAAMF,UAAWE,EAAEC,OAA4BH;AAC/CF,iBAAaE,OAAO;AACpBN,UAAMU,WAAWJ,OAAO;AAAA,EAC1B;AAEA,UAAA,MAAA;AAAA,QAAAK,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAF,UAAAG,UAOiBX;AAAYY,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGpBrB,MAAMsB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACuCvB,MAAMsB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAApCtB,OAAAA,EAAS0B,aAAa,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAJ,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACArB,MAAM6B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAN,QAAAA;AAAAL,eAAAW,OAAA,MAEI9B,MAAM6B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OADP7B,OAAAA,EAAS8B,mBAAmB,CAAA;AAAA,eAAAD;AAAAA,MAAA,GAAA;AAAA,IAG1C,GAAA,GAAA,IAAA;AAAAL,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhBKhC,OAAAA,EAASiC,mBAAiBC,OACtBlC,OAAAA,EAASmC,iBAAeC,OAI3BpC,OAAAA,EAASqC,UAAQC,OAGdtC,SAASuC;AAAsBP,cAAAD,IAAAxB,KAAAkB,UAAAf,MAAAqB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAS,KAAAf,UAAAb,OAAAmB,IAAAS,IAAAN,IAAA;AAAAE,eAAAL,IAAAU,KAAAhB,UAAAX,OAAAiB,IAAAU,IAAAL,IAAA;AAAAE,eAAAP,IAAAW,KAAAjB,UAAAV,OAAAgB,IAAAW,IAAAJ,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAxB,GAAAoC;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnB,iBAAAV,MAAAT,UAJhCH,UAAAA,CAAW;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAiB9B;AAACkC,eAAA,CAAA,OAAA,CAAA;"}

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

@@ -0,0 +1,10 @@
+interface InputProps {
+    label?: string;
+    type?: 'text' | 'number' | 'password' | 'email';
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    description?: string;
+}
+export declare function Input(props: InputProps): import("solid-js").JSX.Element;
+export {};