feat: working single example with new dot notation

Author: TheMcnafaha

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

@@ -1,12 +1,12 @@
 import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
-import { Checkbox } from '@qwik-ui/headless';
+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 ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
+      <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}
@@ -26,14 +26,14 @@ export default component$(() => {
         {toppingNames.map((name, i) => {
           return (
             <Checkbox.Root 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">
+              <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
                 {toppingImages[i]}
-              </CheckboxIndicator>
+              </Checkbox.Indicator>
               {name}
             </Checkbox.Root>
           );
         })}
-      </CheckList>
+      </Checklist.Root>
     </>
   );
 });

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

@@ -1,14 +1,11 @@
 import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
-import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
-import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
-import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
-import { Checkbox } from '@qwik-ui/headless';
+import { Checkbox, Checklist } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <>
       <h3 id="test123">Pick a cat</h3>
 
-      <CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
+      <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}
@@ -27,17 +24,17 @@ export default component$(() => {
         </Checkbox.Root>
 
         <Checkbox.Root class="flex items-center gap-3 bg-slate-900 pr-2 text-white">
-          <CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
           <p>Cat One</p>
         </Checkbox.Root>
 
         <Checkbox.Root class="bg-slate-900 text-white">
           <div class="flex items-center gap-3">
-            <CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
+            <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
             <p>Cat Two</p>
           </div>
         </Checkbox.Root>
-      </CheckList>
+      </Checklist.Root>
     </>
   );
 });

packages/kit-headless/src/components/checklist/checklist.tsx

@@ -1,5 +1,5 @@
 import { type JSXNode, Component, PropsOf } from '@builder.io/qwik';
-import { Checkbox, type MixedStateCheckboxProps } from '../checkbox/checkbox';
+import { CheckboxRoot, type MixedStateCheckboxProps } from '../checkbox/checkbox';
 import { ChecklistContextWrapper, getTriBool } from './checklist-context-wrapper';
 
 type CheckListProps = PropsOf<'ul'> & { ariaLabeledBy: string };
@@ -34,7 +34,7 @@ export const Checklist: Component<CheckListProps> = (props: CheckListProps) => {
     }
 
     switch (child.type) {
-      case Checkbox: {
+      case CheckboxRoot: {
         const typedProps = child.props as MixedStateCheckboxProps;
         // FYI: Obj.assign mutates
         Object.assign(typedProps, { _useCheckListContext: true });

packages/kit-headless/src/index.ts

@@ -1,5 +1,5 @@
 export * as Checkbox from './components/checkbox';
-export * as Checklist from './components/checklist/checklist';
+export * as Checklist from './components/checklist';
 export * as Accordion from './components/accordion/';
 export * as Carousel from './components/carousel';
 export * as Collapsible from './components/collapsible';