@tanstack/devtools-ui 0.3.1 → 0.3.3

package/src/components/main-panel.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+type PanelProps = JSX.IntrinsicElements['div'] & {
+  children?: any
+  className?: string
+  withPadding?: boolean
+}
+
+export const MainPanel = ({
+  className,
+  children,
+  class: classStyles,
+  withPadding,
+}: PanelProps) => {
+  const styles = useStyles()
+  return (
+    <div
+      class={clsx(styles().mainPanel.panel, className, classStyles, {
+        [styles().mainPanel.withPadding]: withPadding,
+      })}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/section.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export const Section = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['section']) => {
+  const styles = useStyles()
+  return (
+    <section class={clsx(styles().section.main, rest.class)} {...rest}>
+      {children}
+    </section>
+  )
+}
+
+export const SectionTitle = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['h3']) => {
+  const styles = useStyles()
+  return (
+    <h3 class={clsx(styles().section.title, rest.class)} {...rest}>
+      {children}
+    </h3>
+  )
+}
+
+export const SectionDescription = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['p']) => {
+  const styles = useStyles()
+  return (
+    <p class={clsx(styles().section.description, rest.class)} {...rest}>
+      {children}
+    </p>
+  )
+}
+
+export const SectionIcon = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['span']) => {
+  const styles = useStyles()
+  return (
+    <span class={clsx(styles().section.icon, rest.class)} {...rest}>
+      {children}
+    </span>
+  )
+}

package/src/components/tree.tsx

@@ -1,9 +1,100 @@
-import { For, Show, createSignal } from 'solid-js'
+import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { css, useStyles } from '../styles/use-styles'
+import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any }) {
-  return <JsonValue isRoot value={props.value} />
+export function JsonTree(props: { value: any; copyable?: boolean }) {
+  return <JsonValue isRoot value={props.value} copyable={props.copyable} />
+}
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
+
+const CopyButton = (props: { value: unknown }) => {
+  const styles = useStyles()
+  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
+
+  return (
+    <button
+      class={styles().tree.actionButton}
+      title="Copy object to clipboard"
+      aria-label={`${
+        copyState() === 'NoCopy'
+          ? 'Copy object to clipboard'
+          : copyState() === 'SuccessCopy'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
+      }`}
+      onClick={
+        copyState() === 'NoCopy'
+          ? () => {
+              navigator.clipboard
+                .writeText(JSON.stringify(props.value, null, 2))
+                .then(
+                  () => {
+                    setCopyState('SuccessCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                  (err) => {
+                    console.error('Failed to copy: ', err)
+                    setCopyState('ErrorCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                )
+            }
+          : undefined
+      }
+    >
+      <Switch>
+        <Match when={copyState() === 'NoCopy'}>
+          <Copier />
+        </Match>
+        <Match when={copyState() === 'SuccessCopy'}>
+          <CopiedCopier theme={'dark'} />
+        </Match>
+        <Match when={copyState() === 'ErrorCopy'}>
+          <ErrorCopier />
+        </Match>
+      </Switch>
+    </button>
+  )
+}
+
+const Expander = (props: { expanded: boolean }) => {
+  const styles = useStyles()
+  return (
+    <span
+      class={clsx(
+        styles().tree.expander,
+        css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `,
+        props.expanded &&
+          css`
+            & svg {
+              top: -1px;
+            }
+          `,
+      )}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12L10 8L6 4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  )
 }
 
 function JsonValue(props: {
@@ -11,8 +102,9 @@ function JsonValue(props: {
   keyName?: string
   isRoot?: boolean
   isLastKey?: boolean
+  copyable?: boolean
 }) {
-  const { value, keyName, isRoot = false, isLastKey } = props
+  const { value, keyName, isRoot = false, isLastKey, copyable } = props
   const styles = useStyles()
 
   return (
@@ -44,13 +136,22 @@ function JsonValue(props: {
           )
         }
         if (Array.isArray(value)) {
-          return <ArrayValue keyName={keyName} value={value} />
+          return (
+            <ArrayValue copyable={copyable} keyName={keyName} value={value} />
+          )
         }
         if (typeof value === 'object') {
-          return <ObjectValue keyName={keyName} value={value} />
+          return (
+            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+          )
         }
         return <span />
       })()}
+      {copyable && (
+        <div class={clsx(styles().tree.actions, 'actions')}>
+          <CopyButton value={value} />
+        </div>
+      )}
       {isLastKey || isRoot ? '' : <span>,</span>}
     </span>
   )
@@ -59,14 +160,17 @@ function JsonValue(props: {
 const ArrayValue = ({
   value,
   keyName,
+  copyable,
 }: {
   value: Array<any>
+  copyable?: boolean
   keyName?: string
 }) => {
   const styles = useStyles()
   const [expanded, setExpanded] = createSignal(true)
   return (
-    <span>
+    <span class={styles().tree.expanderContainer}>
+      <Expander expanded={expanded()} />
       {keyName && (
         <span
           onclick={(e) => {
@@ -77,20 +181,25 @@ const ArrayValue = ({
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
           &quot;{keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{value.length} items</span>
         </span>
       )}
       <span class={styles().tree.valueBraces}>[</span>
       <Show when={expanded()}>
-        <For each={value}>
-          {(item, i) => {
-            const isLastKey = i() === value.length - 1
-            return (
-              <>
-                <JsonValue value={item} isLastKey={isLastKey} />
-              </>
-            )
-          }}
-        </For>
+        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+          <For each={value}>
+            {(item, i) => {
+              const isLastKey = i() === value.length - 1
+              return (
+                <JsonValue
+                  copyable={copyable}
+                  value={item}
+                  isLastKey={isLastKey}
+                />
+              )
+            }}
+          </For>
+        </span>
       </Show>
       <Show when={!expanded()}>
         <span
@@ -101,7 +210,7 @@ const ArrayValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          {`... ${value.length} more`}
+          {`...`}
         </span>
       </Show>
       <span class={styles().tree.valueBraces}>]</span>
@@ -112,9 +221,11 @@ const ArrayValue = ({
 const ObjectValue = ({
   value,
   keyName,
+  copyable,
 }: {
   value: Record<string, any>
   keyName?: string
+  copyable?: boolean
 }) => {
   const styles = useStyles()
   const [expanded, setExpanded] = createSignal(true)
@@ -122,7 +233,8 @@ const ObjectValue = ({
   const lastKeyName = keys[keys.length - 1]
 
   return (
-    <span>
+    <span class={styles().tree.expanderContainer}>
+      {keyName && <Expander expanded={expanded()} />}
       {keyName && (
         <span
           onClick={(e) => {
@@ -133,21 +245,25 @@ const ObjectValue = ({
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
           &quot;{keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{keys.length} items</span>
         </span>
       )}
       <span class={styles().tree.valueBraces}>{'{'}</span>
       <Show when={expanded()}>
-        <For each={keys}>
-          {(k) => (
-            <>
-              <JsonValue
-                value={value[k]}
-                keyName={k}
-                isLastKey={lastKeyName === k}
-              />
-            </>
-          )}
-        </For>
+        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+          <For each={keys}>
+            {(k) => (
+              <>
+                <JsonValue
+                  value={value[k]}
+                  keyName={k}
+                  isLastKey={lastKeyName === k}
+                  copyable={copyable}
+                />
+              </>
+            )}
+          </For>
+        </span>
       </Show>
       <Show when={!expanded()}>
         <span
@@ -158,7 +274,7 @@ const ObjectValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          {`... ${keys.length} more`}
+          {`...`}
         </span>
       </Show>
       <span class={styles().tree.valueBraces}>{'}'}</span>

package/src/icons.ts

@@ -0,0 +1 @@
+export * from './components/icons'

package/src/index.ts

@@ -5,3 +5,11 @@ export { TanStackLogo } from './components/logo'
 export { JsonTree } from './components/tree'
 export { Button } from './components/button'
 export { Tag } from './components/tag'
+export { MainPanel } from './components/main-panel'
+export {
+  Section,
+  SectionTitle,
+  SectionDescription,
+  SectionIcon,
+} from './components/section'
+export { Header, HeaderLogo } from './components/header'

package/src/styles/use-styles.ts

@@ -50,10 +50,11 @@ const buttonVariantColors: Record<
     border: tokens.colors.green[500],
   },
 }
+export const css = goober.css
 const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
-  const { colors, font, size, alpha } = tokens
+  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 {
@@ -352,6 +353,62 @@ 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]};
+        /* outline: 1px solid ${colors.yellow[400]}; */
+      `,
+      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 ${colors.blue[800]};
+          outline-offset: 2px;
+        }
+      `,
+      expanderContainer: css`
+        position: relative;
+      `,
+      expander: css`
+        position: absolute;
+        left: -16px;
+        top: 3px;
+        & path {
+          stroke: ${colors.blue[300]};
+        }
+        & svg {
+          width: ${size[3]};
+          height: ${size[3]};
+        }
+
+        display: inline-flex;
+        align-items: center;
+        transition: all 0.1s ease;
+        /* outline: 1px solid ${colors.blue[400]}; */
+      `,
+      expandedLine: (hasBorder: boolean) => css`
+        display: block;
+        padding-left: 0.75rem;
+        margin-left: -0.7rem;
+        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ''}
+      `,
       collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
@@ -361,6 +418,16 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
           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]};
       `,
@@ -389,6 +456,121 @@ 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[600], 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]};
+        border-radius: 0.75rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      `,
+      title: css`
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: ${colors.gray[100]};
+        margin: 0 0 1rem 0;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid ${colors.gray[700]};
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        text-align: left;
+      `,
+      icon: css`
+        height: 20px;
+        width: 20px;
+        & > svg {
+          height: 100%;
+          width: 100%;
+        }
+        color: ${colors.purple[400]};
+      `,
+      description: css`
+        color: ${colors.gray[400]};
+        font-size: 0.875rem;
+        margin: 0 0 1.5rem 0;
+        line-height: 1.5;
+        text-align: left;
+      `,
+    },
+    mainPanel: {
+      panel: css`
+        padding: 0;
+        background: ${colors.darkGray[700]};
+        overflow-y: auto;
+        height: 100%;
+      `,
+      withPadding: css`
+        padding: ${tokens.size[4]};
       `,
     },
   }

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