@tanstack/devtools-ui 0.3.2 → 0.3.4

package/src/styles/use-styles.ts

@@ -1,7 +1,9 @@
 import * as goober from 'goober'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
+import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
 import type { ButtonVariant } from '../components/button'
+import type { Theme } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
@@ -50,10 +52,11 @@ const buttonVariantColors: Record<
     border: tokens.colors.green[500],
   },
 }
-const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
-  const { colors, font, size, alpha } = tokens
+export const css = goober.css
+const stylesFactory = (theme: Theme = 'dark') => {
+  const { colors, font, size, alpha, border } = tokens
   const { fontFamily } = font
-  const css = goober.css
+
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
@@ -86,12 +89,12 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
     selectLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     selectDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -101,9 +104,9 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       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]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       transition: all 0.2s ease;
       cursor: pointer;
@@ -115,7 +118,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       background-size: 1.25rem;
 
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
 
       &:focus {
@@ -137,12 +140,12 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
     inputLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     inputDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -152,25 +155,26 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       font-family: ${fontFamily.mono};
       transition: all 0.2s ease;
 
       &::placeholder {
-        color: ${colors.gray[500]};
+        color: ${t(colors.gray[400], colors.gray[500])};
       }
 
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
 
       &:focus {
         outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
+        box-shadow: 0 0 0 3px
+          ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
       }
     `,
     checkboxWrapper: css`
@@ -184,7 +188,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       transition: background-color 0.2s ease;
 
       &:hover {
-        background-color: ${colors.darkGray[800]};
+        background-color: ${t(colors.gray[100], colors.darkGray[800])};
       }
     `,
     checkboxContainer: css`
@@ -200,9 +204,9 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       appearance: none;
       width: 1.25rem;
       height: 1.25rem;
-      border: 2px solid ${colors.gray[700]};
+      border: 2px solid ${t(colors.gray[300], colors.gray[700])};
       border-radius: 0.375rem;
-      background-color: ${colors.darkGray[800]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
       display: grid;
       place-items: center;
       transition: all 0.2s ease;
@@ -210,33 +214,33 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       margin-top: 0.125rem;
 
       &:hover {
-        border-color: ${colors.purple[400]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
       }
 
       &:checked {
-        background-color: ${colors.purple[500]};
-        border-color: ${colors.purple[500]};
+        background-color: ${t(colors.purple[500], colors.purple[700])};
+        border-color: ${t(colors.purple[500], colors.purple[700])};
       }
 
       &:checked::after {
         content: '';
         width: 0.4rem;
         height: 0.6rem;
-        border: solid white;
+        border: solid ${t('#fff', colors.gray[100])};
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
         margin-top: -3px;
       }
     `,
     checkboxLabel: css`
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.4;
       text-align: left;
     `,
     checkboxDescription: css`
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       font-size: 0.8rem;
       line-height: 1.3;
       text-align: left;
@@ -266,43 +270,43 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         if (ghost) {
           return css`
             background: transparent;
-            color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
             border-color: transparent;
             &:hover {
-              background: ${tokens.colors.purple[100]};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
             }
           `
         }
         if (outline) {
           return css`
             background: transparent;
-            color: ${v.bg};
-            border-color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
+            border-color: ${t(v.bg, v.bg)};
             &:hover {
-              background: ${tokens.colors.purple[100]};
-              border-color: ${v.hover};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
+              border-color: ${t(v.hover, v.hover)};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
-              border-color: ${v.active};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
+              border-color: ${t(v.active, v.active)};
             }
           `
         }
         // Default solid button
         return css`
-          background: ${v.bg};
-          color: ${v.text};
-          border-color: ${v.border};
+          background: ${t(v.bg, v.bg)};
+          color: ${t(v.text, v.text)};
+          border-color: ${t(v.border, v.border)};
           &:hover {
-            background: ${v.hover};
-            border-color: ${v.hover};
+            background: ${t(v.hover, v.hover)};
+            border-color: ${t(v.hover, v.hover)};
           }
           &:active {
-            background: ${v.active};
-            border-color: ${v.active};
+            background: ${t(v.active, v.active)};
+            border-color: ${t(v.active, v.active)};
           }
         `
       },
@@ -312,7 +316,10 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         width: ${tokens.size[1.5]};
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
-        background-color: ${tokens.colors[color][500]};
+        background-color: ${t(
+          tokens.colors[color][500],
+          tokens.colors[color][500],
+        )};
       `,
       base: css`
         display: flex;
@@ -332,7 +339,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         position: relative;
         &:focus-visible {
           outline-offset: 2px;
-          outline: 2px solid ${colors.blue[800]};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
         }
       `,
       label: css`
@@ -352,36 +359,102 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       `,
     },
     tree: {
+      info: css`
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${font.size.xs};
+        margin-right: ${size[1]};
+      `,
+      actionButton: css`
+        background-color: transparent;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        border: none;
+        display: inline-flex;
+        padding: 0px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        width: ${size[3]};
+        height: ${size[3]};
+        position: relative;
+        z-index: 1;
+
+        &:hover svg {
+          color: ${t(colors.gray[600], colors.gray[400])};
+        }
+
+        &:focus-visible {
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
+          outline-offset: 2px;
+        }
+      `,
+      expanderContainer: css`
+        position: relative;
+      `,
+      expander: css`
+        position: absolute;
+        left: -16px;
+        top: 3px;
+        & path {
+          stroke: ${t(colors.blue[400], colors.blue[300])};
+        }
+        & svg {
+          width: ${size[3]};
+          height: ${size[3]};
+        }
+
+        display: inline-flex;
+        align-items: center;
+        transition: all 0.1s ease;
+      `,
+      expandedLine: (hasBorder: boolean) => css`
+        display: block;
+        padding-left: 0.75rem;
+        margin-left: -0.7rem;
+        ${hasBorder
+          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`
+          : ''}
+      `,
       collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
         &:hover {
-          background-color: ${colors.darkGray[700]};
+          background-color: ${t(colors.gray[100], colors.darkGray[700])};
           border-radius: ${tokens.border.radius.sm};
           padding: 0 ${tokens.size[1]};
         }
       `,
+      actions: css`
+        display: inline-flex;
+        margin-left: ${size[2]};
+        gap: ${size[2]};
+        align-items: center;
+        & svg {
+          height: 12px;
+          width: 12px;
+        }
+      `,
       valueCollapsed: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
       `,
       valueFunction: css`
-        color: ${colors.cyan[400]};
+        color: ${t(colors.cyan[500], colors.cyan[400])};
       `,
       valueString: css`
-        color: ${colors.green[400]};
+        color: ${t(colors.green[500], colors.green[400])};
       `,
       valueNumber: css`
-        color: ${colors.yellow[400]};
+        color: ${t(colors.yellow[500], colors.yellow[400])};
       `,
       valueBoolean: css`
-        color: ${colors.pink[400]};
+        color: ${t(colors.pink[500], colors.pink[400])};
       `,
       valueNull: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-style: italic;
       `,
       valueKey: css`
-        color: ${colors.blue[300]};
+        color: ${t(colors.blue[400], colors.blue[300])};
       `,
       valueBraces: css`
         color: ${colors.gray[500]};
@@ -389,24 +462,93 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       valueContainer: (isRoot: boolean) => css`
         display: block;
         margin-left: ${isRoot ? '0' : '1rem'};
+
+        &:not(:hover) .actions {
+          display: none;
+        }
+
+        &:hover .actions {
+          display: inline-flex;
+        }
+      `,
+    },
+    header: {
+      row: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: ${tokens.size[2]} ${tokens.size[2.5]};
+        gap: ${tokens.size[2.5]};
+        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;
+        align-items: center;
+      `,
+      logoAndToggleContainer: css`
+        display: flex;
+        gap: ${tokens.size[3]};
+        align-items: center;
+        & > button {
+          padding: 0;
+          background: transparent;
+          border: none;
+          display: flex;
+          gap: ${size[0.5]};
+          flex-direction: column;
+        }
+      `,
+      logo: css`
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        background-color: transparent;
+        border: none;
+        gap: ${tokens.size[0.5]};
+        padding: 0px;
+        &:hover {
+          opacity: 0.7;
+        }
+        &:focus-visible {
+          outline-offset: 4px;
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+        }
+      `,
+      tanstackLogo: css`
+        font-size: ${font.size.md};
+        font-weight: ${font.weight.bold};
+        line-height: ${font.lineHeight.xs};
+        white-space: nowrap;
+        color: ${t(colors.gray[700], colors.gray[300])};
+      `,
+      flavorLogo: (flavorLight: string, flavorDark: string) => css`
+        font-weight: ${font.weight.semibold};
+        font-size: ${font.size.xs};
+        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});
+        background-clip: text;
+        -webkit-background-clip: text;
+        line-height: 1;
+        -webkit-text-fill-color: transparent;
+        white-space: nowrap;
       `,
     },
     section: {
       main: css`
         margin-bottom: 2rem;
         padding: 1.5rem;
-        background-color: ${colors.darkGray[800]};
-        border: 1px solid ${colors.gray[700]};
+        background-color: ${t(colors.gray[50], colors.darkGray[800])};
+        border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        box-shadow: ${t(
+          '0 1px 3px rgba(0,0,0,0.06)',
+          '0 1px 3px rgba(0,0,0,0.18)',
+        )};
       `,
       title: css`
         font-size: 1.125rem;
         font-weight: 600;
-        color: ${colors.gray[100]};
+        color: ${t(colors.gray[900], colors.gray[100])};
         margin: 0 0 1rem 0;
         padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${colors.gray[700]};
+        border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -419,10 +561,10 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
           height: 100%;
           width: 100%;
         }
-        color: ${colors.purple[400]};
+        color: ${t(colors.purple[500], colors.purple[400])};
       `,
       description: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-size: 0.875rem;
         margin: 0 0 1.5rem 0;
         line-height: 1.5;
@@ -430,20 +572,21 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       `,
     },
     mainPanel: {
-      panel: css`
-        padding: 0;
-        background: ${colors.darkGray[700]};
+      panel: (withPadding: boolean) => css`
+        padding: ${withPadding ? tokens.size[4] : 0};
+        background: ${t(colors.gray[50], colors.darkGray[700])};
         overflow-y: auto;
         height: 100%;
       `,
-      withPadding: css`
-        padding: ${tokens.size[4]};
-      `,
     },
   }
 }
 
 export function useStyles() {
-  const [_styles] = createSignal(stylesFactory())
-  return _styles
+  const { theme } = useTheme()
+  const [styles, setStyles] = createSignal(stylesFactory(theme()))
+  createEffect(() => {
+    setStyles(stylesFactory(theme()))
+  })
+  return styles
 }

package/dist/cjs/components/button.cjs

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const clsx = require("clsx");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<button>`);
-function Button(props) {
-  const styles = useStyles.useStyles();
-  const [local, rest] = solidJs.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$();
-    web.spread(_el$, web.mergeProps(rest, {
-      "class": classes
-    }), false, true);
-    web.insert(_el$, () => local.children);
-    return _el$;
-  })();
-}
-exports.Button = Button;
-//# sourceMappingURL=button.cjs.map

package/dist/cjs/components/button.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.cjs","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,UAAAA;AACf,QAAM,CAACC,OAAOC,IAAI,IAAIC,QAAAA,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,eAAAF,MAAAG,IAAAA,WACcb,MAAI;AAAA,MAAA,SAASG;AAAAA,IAAAA,CAAO,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAJ,MAAA,MAC7BX,MAAMgB,QAAQ;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAGrB;;"}

package/dist/cjs/components/button.d.cts

@@ -1,11 +0,0 @@
-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/cjs/components/checkbox.cjs

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span>`);
-function Checkbox(props) {
-  const styles = useStyles.useStyles();
-  const [isChecked, setIsChecked] = solidJs.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;
-    web.insert(_el$4, (() => {
-      var _c$ = web.memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$5 = _tmpl$2();
-        web.insert(_el$5, () => props.label);
-        web.effect(() => web.className(_el$5, styles().checkboxLabel));
-        return _el$5;
-      })();
-    })(), null);
-    web.insert(_el$4, (() => {
-      var _c$2 = web.memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$6 = _tmpl$2();
-        web.insert(_el$6, () => props.description);
-        web.effect(() => web.className(_el$6, styles().checkboxDescription));
-        return _el$6;
-      })();
-    })(), null);
-    web.effect((_p$) => {
-      var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$4, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    web.effect(() => _el$3.checked = isChecked());
-    return _el$;
-  })();
-}
-web.delegateEvents(["input"]);
-exports.Checkbox = Checkbox;
-//# sourceMappingURL=checkbox.cjs.map

package/dist/cjs/components/checkbox.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.cjs","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,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,QAAAA,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,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAGpBrB,MAAMsB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,YAAAA,OAAAI,OAAA,MACuCvB,MAAMsB,KAAK;AAAAG,YAAAA,OAAA,MAAAC,IAAAA,UAAAH,OAApCtB,OAAAA,EAAS0B,aAAa,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAJ,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,IAAAA,KAAA,MAAA,CAAA,CACArB,MAAM6B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAN,QAAAA;AAAAL,YAAAA,OAAAW,OAAA,MAEI9B,MAAM6B,WAAW;AAAAJ,YAAAA,OAAA,MAAAC,IAAAA,UAAAI,OADP7B,OAAAA,EAAS8B,mBAAmB,CAAA;AAAA,eAAAD;AAAAA,MAAA,GAAA;AAAA,IAG1C,GAAA,GAAA,IAAA;AAAAL,QAAAA,OAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhBKhC,OAAAA,EAASiC,mBAAiBC,OACtBlC,OAAAA,EAASmC,iBAAeC,OAI3BpC,OAAAA,EAASqC,UAAQC,OAGdtC,SAASuC;AAAsBP,cAAAD,IAAAxB,KAAAkB,IAAAA,UAAAf,MAAAqB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAS,KAAAf,IAAAA,UAAAb,OAAAmB,IAAAS,IAAAN,IAAA;AAAAE,eAAAL,IAAAU,KAAAhB,IAAAA,UAAAX,OAAAiB,IAAAU,IAAAL,IAAA;AAAAE,eAAAP,IAAAW,KAAAjB,IAAAA,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,QAAAA,aAAAV,MAAAT,UAJhCH,UAAAA,CAAW;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAiB9B;AAACkC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/components/checkbox.d.cts

@@ -1,8 +0,0 @@
-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/cjs/components/input.cjs

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><div><input>`), _tmpl$2 = /* @__PURE__ */ web.template(`<label>`), _tmpl$3 = /* @__PURE__ */ web.template(`<p>`);
-function Input(props) {
-  const styles = useStyles.useStyles();
-  const [val, setVal] = solidJs.createSignal(props.value || "");
-  const handleChange = (e) => {
-    const value = e.target.value;
-    setVal((prev) => prev !== value ? value : prev);
-    props.onChange?.(value);
-  };
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-    web.insert(_el$2, (() => {
-      var _c$ = web.memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$4 = _tmpl$2();
-        web.insert(_el$4, () => props.label);
-        web.effect(() => web.className(_el$4, styles().inputLabel));
-        return _el$4;
-      })();
-    })(), _el$3);
-    web.insert(_el$2, (() => {
-      var _c$2 = web.memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$5 = _tmpl$3();
-        web.insert(_el$5, () => props.description);
-        web.effect(() => web.className(_el$5, styles().inputDescription));
-        return _el$5;
-      })();
-    })(), _el$3);
-    _el$3.$$input = handleChange;
-    web.effect((_p$) => {
-      var _v$ = styles().inputContainer, _v$2 = styles().inputWrapper, _v$3 = props.type || "text", _v$4 = styles().input, _v$5 = props.placeholder;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.setAttribute(_el$3, "type", _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$3, _p$.o = _v$4);
-      _v$5 !== _p$.i && web.setAttribute(_el$3, "placeholder", _p$.i = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    });
-    web.effect(() => _el$3.value = val());
-    return _el$;
-  })();
-}
-web.delegateEvents(["input"]);
-exports.Input = Input;
-//# sourceMappingURL=input.cjs.map