DOCS: added doc examples

Author: TheMcnafaha

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

@@ -7,7 +7,7 @@ export default component$(() => {
         <CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
           ✅
         </CheckboxIndicator>
-        Accept item
+        I have read the README file
       </MyCheckbox>
     </>
   );

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

@@ -1,19 +1,44 @@
 import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
-import { MyCheckbox, CheckboxIndicator, CheckList } from '@qwik-ui/headless';
+import {
+  MyCheckbox,
+  CheckboxIndicator,
+  CheckList,
+  ChecklistIndicator,
+  Checkbox,
+} 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 ariaLabeledBy="pizza-toppings">
+      <CheckList ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
         <MyCheckbox
-          class="flex items-center gap-3 border-2 border-black p-2 "
+          class="flex items-center gap-3 border-2 border-black  p-2"
           checkList={true}
         >
-          <CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
-            ✅
-          </CheckboxIndicator>
+          <ChecklistIndicator class="w-fit bg-black">
+            <div q:slot="checkbox" id="true-img">
+              🍕
+            </div>
+
+            <div q:slot="checklist" id="mixed-img">
+              ➖
+            </div>
+          </ChecklistIndicator>
           Pick all toppings
         </MyCheckbox>
+
+        {toppingNames.map((name, i) => {
+          return (
+            <MyCheckbox class="ml-8 flex items-center gap-3 border-2  border-black p-2">
+              <CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+                {toppingImages[i]}
+              </CheckboxIndicator>
+              {name}
+            </MyCheckbox>
+          );
+        })}
       </CheckList>
     </>
   );

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

@@ -6,7 +6,7 @@ export default component$(() => {
   return (
     <>
       <p>I'm the default checkbox!!!</p>
-      <MyCheckbox class="bg-slate-900 text-white">
+      <MyCheckbox class=" text-white">
         <div class="flex items-center gap-3">
           <CheckboxIndicator class="w-fit bg-slate-600">
             <p id="indicator">✅</p>