Add headless checkbox

apps/component-tests/tailwind.config.cjs

@@ -8,6 +8,7 @@ module.exports = {
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
+    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
     // PLUGIN-START

apps/website/src/_state/component-statuses.ts

@@ -38,6 +38,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Draft,
     Collapsible: ComponentStatus.Beta,
     Combobox: ComponentStatus.Beta,
+    Checkbox: ComponentStatus.Beta,
     Label: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,

apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx

@@ -0,0 +1,42 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@qwik-ui/headless';
+export default component$(() => {
+  const initialVal1 = false;
+  const controlledSig1 = useSignal(initialVal1);
+  const initialVal2 = true;
+  const controlledSig2 = useSignal(initialVal2);
+  return (
+    <>
+      <div class="flex gap-8">
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig1}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal1}`}</p>
+          <p>The current value is: {`${controlledSig1.value}`}</p>
+        </div>
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig2}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal2}`}</p>
+          <p>The current value is: {`${controlledSig2.value}`}</p>
+        </div>
+      </div>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx

@@ -0,0 +1,24 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Checkbox } from '@qwik-ui/headless';
+export default component$(() => {
+  const initialVal1 = false;
+  const controlledSig1 = useSignal(initialVal1);
+  return (
+    <>
+      <div class="flex gap-8">
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig1}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+        </div>
+      </div>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx

@@ -0,0 +1,14 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@qwik-ui/headless';
+export default component$(() => {
+  return (
+    <>
+      <Checkbox.Root id="test" class="flex items-center gap-3 border-2 border-black p-2 ">
+        <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+          ✅
+        </Checkbox.Indicator>
+        I have read the README
+      </Checkbox.Root>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx

@@ -0,0 +1,39 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom'];
+const toppingImages = ['🌶️', '🍗', '🍍', '🍄'];
+export default component$(() => {
+  return (
+    <>
+      <h3 id="pizza-toppings">Pizza toppings</h3>
+      <Checklist.Root ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
+        <Checkbox.Root
+          class="flex items-center gap-3 border-2 border-black  p-2"
+          checklist={true}
+        >
+          <Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+            <div q:slot="true" id="true-img">
+              🍕
+            </div>
+
+            <div q:slot="mixed" id="mixed-img">
+              ➖
+            </div>
+          </Checklist.Indicator>
+          Pick all toppings
+        </Checkbox.Root>
+
+        {toppingNames.map((name, i) => {
+          return (
+            <Checkbox.Root class="ml-8 flex items-center gap-3 border-2  border-black p-2">
+              <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+                {toppingImages[i]}
+              </Checkbox.Indicator>
+              {name}
+            </Checkbox.Root>
+          );
+        })}
+      </Checklist.Root>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx

@@ -0,0 +1,47 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+// TODO: add logic to handle user passed sigs with trues
+// this test basically ensures that the sig passed to the checklist controlls trumps all its children
+export default component$(() => {
+  const checklistSig = useSignal(false);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900  text-white"
+          checklist={true}
+          bind:checked={checklistSig}
+          id="checklist"
+        >
+          <Checklist.Indicator class="w-fit">
+            <div q:slot="true" id="true-img">
+              ✅
+            </div>
+
+            <div q:slot="mixed" id="mixed-img">
+              ➖
+            </div>
+          </Checklist.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          id="child-1"
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root id="child-2" class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>Im a true.tsx</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+      <p>You signal is: </p>
+      <p id="signal-to-text">{`${checklistSig.value}`}</p>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx

@@ -0,0 +1,36 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+export default component$(() => {
+  const firstUserSig = useSignal(false);
+  const secondUserSig = useSignal(false);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900 p-2 text-white"
+          checklist={true}
+        >
+          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+            ✅
+          </Checkbox.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          bind:checked={firstUserSig}
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>No other stuff is needed here</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx

@@ -0,0 +1,41 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+export default component$(() => {
+  const firstUserSig = useSignal(false);
+  const secondUserSig = useSignal(true);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900 p-2 text-white"
+          checklist={true}
+        >
+          <Checklist.Indicator class="w-fit">
+            <div q:slot="true" id="true-img">
+              ✅
+            </div>
+            <div q:slot="mixed" id="mixed-img">
+              ➖
+            </div>
+          </Checklist.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          bind:checked={firstUserSig}
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>No other stuff is needed here</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx

@@ -0,0 +1,46 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+// this test basically ensures that the sig passed to the checklist controlls trumps all its children
+export default component$(() => {
+  const checklistSig = useSignal(true);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900  text-white"
+          checklist={true}
+          bind:checked={checklistSig}
+          id="checklist"
+        >
+          <Checklist.Indicator class="w-fit">
+            <div q:slot="true" id="true-img">
+              ✅
+            </div>
+
+            <div q:slot="mixed" id="mixed-img">
+              ➖
+            </div>
+          </Checklist.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          id="child-1"
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root id="child-2" class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>Im a true.tsx</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+      <p>You signal is: </p>
+      <p id="signal-to-text">{`${checklistSig.value}`}</p>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx

@@ -0,0 +1,36 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+export default component$(() => {
+  const firstUserSig = useSignal(true);
+  const secondUserSig = useSignal(true);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900 p-2 text-white"
+          checklist={true}
+        >
+          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+            ✅
+          </Checkbox.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          bind:checked={firstUserSig}
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>No other stuff is needed here</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx

@@ -0,0 +1,36 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
+export default component$(() => {
+  const firstUserSig = useSignal(true);
+  const secondUserSig = useSignal(true);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900 p-2 text-white"
+          checklist={true}
+        >
+          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+            ✅
+          </Checkbox.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          bind:checked={firstUserSig}
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+            <p>No other stuff is needed here</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+    </>
+  );
+});