From 5850f72027c7f45ac1a05c3b0cb6767b9b3f6bdd Mon Sep 17 00:00:00 2001
From: Jerry_wu <409187100@qq.com>
Date: Tue, 24 Sep 2024 15:36:18 +0800
Subject: [PATCH] headless Switch

---
 .../docs/headless/switch/examples/hero.tsx    | 29 ++++---------------
 .../src/components/switch/index.ts            |  4 ++-
 .../src/components/switch/switch-context.tsx  | 12 ++++----
 .../src/components/switch/switch-input.tsx    | 14 +++++++++
 .../src/components/switch/switch-lable.tsx    | 10 +++++++
 .../src/components/switch/switch-root.tsx     |  5 ++--
 6 files changed, 42 insertions(+), 32 deletions(-)
 create mode 100644 packages/kit-headless/src/components/switch/switch-input.tsx
 create mode 100644 packages/kit-headless/src/components/switch/switch-lable.tsx

diff --git a/apps/website/src/routes/docs/headless/switch/examples/hero.tsx b/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
index e02b83356..f5d8cfe43 100644
--- a/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
+++ b/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
@@ -1,31 +1,14 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { Select } from '@qwik-ui/headless';
+import { component$ } from '@builder.io/qwik';
+import { Switch } from '@qwik-ui/headless';
 
 export default component$(() => {
-  useStyles$(styles);
-  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
   return (
-    <Select.Root class="select">
-      <Select.Label>Logged in users</Select.Label>
-      <Select.Trigger class="select-trigger">
-        <Select.DisplayValue placeholder="Select an option" />
-      </Select.Trigger>
-      <Select.Popover class="select-popover">
-        {users.map((user) => (
-          <Select.Item class="select-item" key={user}>
-            <Select.ItemLabel>{user}</Select.ItemLabel>
-            <Select.ItemIndicator>
-              <LuCheck />
-            </Select.ItemIndicator>
-          </Select.Item>
-        ))}
-      </Select.Popover>
-    </Select.Root>
+    <Switch.Root>
+      <Switch.Label>sdsds</Switch.Label>
+      <Switch.Input/>
+    </Switch.Root>
   );
 });
 
-// internal
-import styles from '../snippets/select.css?inline';
-import { LuCheck } from '@qwikest/icons/lucide';
 
diff --git a/packages/kit-headless/src/components/switch/index.ts b/packages/kit-headless/src/components/switch/index.ts
index 336ce12bb..234a55a00 100644
--- a/packages/kit-headless/src/components/switch/index.ts
+++ b/packages/kit-headless/src/components/switch/index.ts
@@ -1 +1,3 @@
-export {}
+export { SwitchRoot as Root } from './switch-root'
+export { SwitchInput as Input } from './switch-input'
+export { SwitchLable as Label } from './switch-lable'
diff --git a/packages/kit-headless/src/components/switch/switch-context.tsx b/packages/kit-headless/src/components/switch/switch-context.tsx
index 17a7db5dd..f55d083a1 100644
--- a/packages/kit-headless/src/components/switch/switch-context.tsx
+++ b/packages/kit-headless/src/components/switch/switch-context.tsx
@@ -1,12 +1,12 @@
-import { createContextId, type Signal } from '@builder.io/qwik';
+import { createContextId, QRL, type Signal } from '@builder.io/qwik';
 
 export interface SwitchState {
-  'bind:checked': Signal<boolean>;
-  defaultChecked: boolean;
-  disabled: boolean;
-  label: string;
+  'bind:checked'?: Signal<boolean>;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onChange$?: QRL<() => void>
 }
 //
-export type SwitchContextState = Omit<SwitchState, 'bind:checked'> & { bindChecked: Signal<boolean> }
+export type SwitchContextState = Omit<SwitchState, 'bind:checked'> & { bindChecked?: Signal<boolean> }
 
 export const SwitchContext = createContextId<SwitchContextState>('SwitchContext');
diff --git a/packages/kit-headless/src/components/switch/switch-input.tsx b/packages/kit-headless/src/components/switch/switch-input.tsx
new file mode 100644
index 000000000..ae116452f
--- /dev/null
+++ b/packages/kit-headless/src/components/switch/switch-input.tsx
@@ -0,0 +1,14 @@
+
+import { component$, PropsOf, useContext } from '@builder.io/qwik';
+import { SwitchContext } from './switch-context';
+export const SwitchInput = component$<PropsOf<'input'>>(() => {
+    const context = useContext(SwitchContext)
+    return (
+      <input
+        type="checkbox"
+			  role="switch"
+        onChange$={context.onChange$}
+      />
+    );
+  },
+);
diff --git a/packages/kit-headless/src/components/switch/switch-lable.tsx b/packages/kit-headless/src/components/switch/switch-lable.tsx
new file mode 100644
index 000000000..b336b2266
--- /dev/null
+++ b/packages/kit-headless/src/components/switch/switch-lable.tsx
@@ -0,0 +1,10 @@
+
+import { component$, PropsOf, Slot } from '@builder.io/qwik';
+export const SwitchLable = component$<PropsOf<'lable'>>(() => {
+    return (
+      <label>
+        <Slot></Slot>
+      </label>
+    );
+  },
+);
diff --git a/packages/kit-headless/src/components/switch/switch-root.tsx b/packages/kit-headless/src/components/switch/switch-root.tsx
index 1788a05ed..92e6757ba 100644
--- a/packages/kit-headless/src/components/switch/switch-root.tsx
+++ b/packages/kit-headless/src/components/switch/switch-root.tsx
@@ -9,12 +9,13 @@ export type SwitchProps = PropsOf<'div'> & SwitchState;
 
 
 
-export const SwitchRoot = component$(({defaultChecked, disabled, label, ...rest}: SwitchProps) => {
+export const SwitchRoot = component$(({defaultChecked, disabled, label, onChange$, ...rest}: SwitchProps) => {
   const context: SwitchContextState = {
     defaultChecked,
     disabled,
     label,
-    bindChecked: rest['bind:checked']
+    bindChecked: rest['bind:checked'],
+    onChange$: onChange$
   }
 
   useContextProvider(SwitchContext, context)