@tanstack/devtools-ui 0.2.2

package/src/components/checkbox.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface CheckboxProps {
+  label?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  description?: string
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const styles = useStyles()
+  const [isChecked, setIsChecked] = createSignal(props.checked || false)
+
+  const handleChange = (e: Event) => {
+    const checked = (e.target as HTMLInputElement).checked
+    setIsChecked(checked)
+    props.onChange?.(checked)
+  }
+
+  return (
+    <div class={styles().checkboxContainer}>
+      <label class={styles().checkboxWrapper}>
+        <input
+          type="checkbox"
+          checked={isChecked()}
+          class={styles().checkbox}
+          onInput={handleChange}
+        />
+        <div class={styles().checkboxLabelContainer}>
+          {props.label && (
+            <span class={styles().checkboxLabel}>{props.label}</span>
+          )}
+          {props.description && (
+            <span class={styles().checkboxDescription}>
+              {props.description}
+            </span>
+          )}
+        </div>
+      </label>
+    </div>
+  )
+}

package/src/components/input.tsx

@@ -0,0 +1,42 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface InputProps {
+  label?: string
+  type?: 'text' | 'number' | 'password' | 'email'
+  value?: string
+  placeholder?: string
+  onChange?: (value: string) => void
+  description?: string
+}
+
+export function Input(props: InputProps) {
+  const styles = useStyles()
+  const [val, setVal] = createSignal(props.value || '')
+
+  const handleChange = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value
+    setVal((prev) => (prev !== value ? value : prev))
+    props.onChange?.(value)
+  }
+
+  return (
+    <div class={styles().inputContainer}>
+      <div class={styles().inputWrapper}>
+        {props.label && (
+          <label class={styles().inputLabel}>{props.label}</label>
+        )}
+        {props.description && (
+          <p class={styles().inputDescription}>{props.description}</p>
+        )}
+        <input
+          type={props.type || 'text'}
+          class={styles().input}
+          value={val()}
+          placeholder={props.placeholder}
+          onInput={handleChange}
+        />
+      </div>
+    </div>
+  )
+}