headless Switch

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';
 

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'

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');

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$}
+      />
+    );
+  },
+);

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>
+    );
+  },
+);

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)