feat(component): add wrapped headless toggle to daisy implementation

Author: gilf

packages/daisy/src/components/toggle/toggle.tsx

@@ -0,0 +1,22 @@
+import { component$, PropFunction, QwikMouseEvent } from '@builder.io/qwik';
+import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
+
+interface ToggleProps {
+  class?: string;
+  checked: boolean;
+  label?: string;
+  onClick$: PropFunction<(evt: QwikMouseEvent) => void>;
+}
+
+export const Toggle = component$(
+  ({ checked, label, ...props }: ToggleProps) => {
+    return (
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          {label && <span class="label-text">{label}</span>}
+          <HeadlessToggle class="toggle" pressed={checked} {...props} />
+        </label>
+      </div>
+    );
+  }
+);

packages/daisy/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/collapse/collapse';
 export * from './components/tabs';
+export * from './components/toggle/toggle';

packages/headless/src/components/toggle/toggle.tsx

@@ -1,4 +1,9 @@
-import { component$, PropFunction, useSignal } from '@builder.io/qwik';
+import {
+  component$,
+  PropFunction,
+  QwikMouseEvent,
+  useSignal,
+} from '@builder.io/qwik';
 
 interface ToggleProps {
   value?: string;
@@ -14,7 +19,7 @@ interface ToggleProps {
    */
   defaultPressed?: boolean;
 
-  onClick$: PropFunction<(evt: Event) => void>;
+  onClick$: PropFunction<(evt: QwikMouseEvent) => void>;
 }
 
 export const Toggle = component$((props: ToggleProps) => {
@@ -35,12 +40,12 @@ export const Toggle = component$((props: ToggleProps) => {
       aria-pressed={pressedState.value}
       data-state={pressedState.value ? 'on' : 'off'}
       data-disabled={disabled ? '' : undefined}
-      onClick$={(event) => {
+      onClick$={(event: QwikMouseEvent<HTMLInputElement>) => {
         if (!disabled) {
           pressedState.value = !pressedState.value;
           if (onClick$) {
             // REPORT MISSING QwikMouseEvent to Qwik github
-            onClick$(event as any);
+            onClick$(event);
           }
         }
       }}

packages/website/src/routes/daisy-example/index.tsx

@@ -1,10 +1,11 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { Collapse, Tabs, Tab, TabPanel } from '@qwik-ui/daisy';
+import { Collapse, Tabs, Tab, TabPanel, Toggle } from '@qwik-ui/daisy';
 
 export default component$(() => {
   const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
   const activeTab = useSignal(0);
+  const toggleChecked = useSignal(false);
 
   return (
     <div>
@@ -42,10 +43,19 @@ export default component$(() => {
         </Tabs>
       </div>
 
+      <div>
+        <Toggle
+          checked={toggleChecked.value}
+          onClick$={() => {
+            toggleChecked.value = !toggleChecked.value;
+          }}
+        />
+      </div>
+
       {/* hack to prevent tailwind purge */}
       <div
         style={{ display: 'none' }}
-        class="collapse collapse-title text-xl font-medium collapse-content max-h-fit tabs tabs-boxed tab tab-active tab-bordered tab-lifted"
+        class="collapse collapse-title text-xl font-medium collapse-content max-h-fit tabs tabs-boxed tab tab-active tab-bordered tab-lifted form-control abel cursor-pointer toggle label-text"
       />
     </div>
   );