fix: api changes

Author: TheMcnafaha

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

@@ -3,7 +3,6 @@ import { Checkbox } from '@qwik-ui/headless';
 
 export default component$(() => {
   const userSig = useSignal(true);
-  import { Checkbox, Checklist } from '@qwik-ui/headless';
   return (
     <>
       <Checkbox.Root class="bg-slate-900 text-white" checkBoxSig={userSig}>

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

@@ -14,7 +14,7 @@ import { CheckListContext, CheckboxContext } from './context-id';
 import { TriBool, getTriBool } from '../checklist/checklist-context-wrapper';
 export type MixedStateCheckboxProps = {
   checkBoxSig?: Signal<boolean>;
-  checkList?: boolean;
+  checklist?: boolean;
   _useCheckListContext?: boolean;
   _overWriteCheckbox?: boolean;
 } & PropsOf<'div'>;
@@ -34,9 +34,9 @@ export type ChecklistTwoStateCheckboxProps = {
 } & PropsOf<'div'>;
 export const CheckboxRoot = component$<MixedStateCheckboxProps>((props) => {
   // this is done to avoid consumers dealing with two types checkboxes, could go in different files
-  if (props._useCheckListContext && !props.checkList) {
+  if (props._useCheckListContext && !props.checklist) {
   }
-  if (props.checkList) {
+  if (props.checklist) {
     return (
       <MixedStateCheckbox {...props}>
         <Slot />
@@ -141,6 +141,8 @@ export const ChecklistTwoStateCheckbox = component$<ChecklistTwoStateCheckboxPro
 );
 
 export const MixedStateCheckbox = component$<MixedStateCheckboxProps>((props) => {
+  console.log('mixed');
+
   // all the sig stuff should be refactored into a fancy hook
   const checklistContext = useContext(CheckListContext);
   const childCheckboxes = checklistContext.checkboxes;

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

@@ -1,6 +1,5 @@
 import { component$, useContext, PropsOf, Slot, useTask$ } from '@builder.io/qwik';
 import { CheckListContext } from './context-id';
-import { props } from 'cypress/types/bluebird';
 
 export type ChecklistIndicatorProps = PropsOf<'div'>;
 
@@ -9,19 +8,19 @@ export const ChecklistIndicator = component$<ChecklistIndicatorProps>((props) =>
 
   useTask$(({ track }) => {
     track(() => checklistSig.value);
-    console.log('here running hlol');
   });
 
   // weird comparions, but it gets the right behavior
   return (
     <div {...props}>
+      <p>Here lol: {JSON.stringify(checklistSig.value)}</p>
       {checklistSig.value === true && (
-        <div class={checklistSig.value === true ? 'visible' : 'invisible'}>
+        <div>
           <Slot name="true" />
         </div>
       )}
       {checklistSig.value === 'indeterminate' && (
-        <div class={checklistSig.value === 'indeterminate' ? 'visible' : 'invisible'}>
+        <div>
           <Slot name="mixed" />
         </div>
       )}