Checkbox Group

import { createSignal } from "solid-js"
import * as Checkbox from "@danielfrg/solid-ui/checkbox"
import * as CheckboxGroup from "@danielfrg/solid-ui/checkbox-group"
import styles from "./index.module.css"

export function DemoCheckboxGroupHero() {
  const [value, setValue] = createSignal(["react"])

  return (
    <div>
      <CheckboxGroup.Root class={styles.root} value={value()} onValueChange={setValue}>
        <span class={styles.label}>Frameworks</span>
        <div class={styles.items}>
          <Checkbox.Root
            class={styles.checkbox}
            value="react"
            checked={value().includes("react")}
            onChange={(checked) => {
              if (checked) setValue([...value(), "react"])
              else setValue(value().filter((v) => v !== "react"))
            }}
          >
            <Checkbox.Input class={styles.input} />
            <Checkbox.Control class={styles.control}>
              <Checkbox.Indicator class={styles.indicator}>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label class={styles["checkbox-label"]}>React</Checkbox.Label>
          </Checkbox.Root>

          <Checkbox.Root
            class={styles.checkbox}
            value="solid"
            checked={value().includes("solid")}
            onChange={(checked) => {
              if (checked) setValue([...value(), "solid"])
              else setValue(value().filter((v) => v !== "solid"))
            }}
          >
            <Checkbox.Input class={styles.input} />
            <Checkbox.Control class={styles.control}>
              <Checkbox.Indicator class={styles.indicator}>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label class={styles["checkbox-label"]}>SolidJS</Checkbox.Label>
          </Checkbox.Root>

          <Checkbox.Root
            class={styles.checkbox}
            value="vue"
            checked={value().includes("vue")}
            onChange={(checked) => {
              if (checked) setValue([...value(), "vue"])
              else setValue(value().filter((v) => v !== "vue"))
            }}
          >
            <Checkbox.Input class={styles.input} />
            <Checkbox.Control class={styles.control}>
              <Checkbox.Indicator class={styles.indicator}>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label class={styles["checkbox-label"]}>Vue</Checkbox.Label>
          </Checkbox.Root>
        </div>
      </CheckboxGroup.Root>
      <p class={styles.value}>Selected: {value().join(", ") || "none"}</p>
    </div>
  )
}

function CheckIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="3"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.25rem;
  background-color: white;
  color: white;
  flex-shrink: 0;
  transition:
    background-color 150ms,
    border-color 150ms;
}

.control[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-label {
  font-size: 0.875rem;
  color: var(--color-gray-700);
  user-select: none;
  cursor: default;
}

.value {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}