From 570c2dc02966cc1d10a0290a6bfef912fa2d7f19 Mon Sep 17 00:00:00 2001
From: gilf <gil.fink@gmail.com>
Date: Sat, 17 Dec 2022 16:13:26 +0200
Subject: [PATCH] feat(component): add wrapped headless toggle to daisy
 implementation

---
 .../daisy/src/components/toggle/toggle.tsx    | 22 +++++++++++++++++++
 packages/daisy/src/index.ts                   |  1 +
 .../headless/src/components/toggle/toggle.tsx | 13 +++++++----
 .../src/routes/daisy-example/index.tsx        | 14 ++++++++++--
 4 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 packages/daisy/src/components/toggle/toggle.tsx

diff --git a/packages/daisy/src/components/toggle/toggle.tsx b/packages/daisy/src/components/toggle/toggle.tsx
new file mode 100644
index 000000000..13f8d5edc
--- /dev/null
+++ b/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>
+    );
+  }
+);
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index 4fffcdc59..e587a5f52 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -1,2 +1,3 @@
 export * from './components/collapse/collapse';
 export * from './components/tabs';
+export * from './components/toggle/toggle';
diff --git a/packages/headless/src/components/toggle/toggle.tsx b/packages/headless/src/components/toggle/toggle.tsx
index 8583caa3c..854aec8da 100644
--- a/packages/headless/src/components/toggle/toggle.tsx
+++ b/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);
           }
         }
       }}
diff --git a/packages/website/src/routes/daisy-example/index.tsx b/packages/website/src/routes/daisy-example/index.tsx
index 2d4176f05..0f0c2db99 100644
--- a/packages/website/src/routes/daisy-example/index.tsx
+++ b/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>
   );