Initial commit with files

Still need to fix the imports

src/lib/components/switch/Switch.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { StateDefinition } from "./SwitchGroup.svelte";
+    import { LabelContext } from "./LabelProvider.svelte";
+    import { DescriptionContext } from "./DescriptionProvider.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { getContext, createEventDispatcher } from "svelte";
+    import { Writable } from "svelte/store";
+
+    const dispatch = createEventDispatcher();
+    export let checked = false;
+    let api: Writable<StateDefinition> | undefined = getContext("SwitchApi");
+    let labelContext: Writable<LabelContext> | undefined = getContext(
+        "headlessui-label-context"
+    );
+    let descriptionContext: Writable<DescriptionContext> | undefined =
+        getContext("headlessui-description-context");
+    let id = `headlessui-switch-${useId()}`;
+    $: switchStore = $api?.switchStore;
+    let internalSwitchRef = null;
+
+    function toggle() {
+        dispatch("updateValue", !checked);
+    }
+
+    function handleClick(event: MouseEvent) {
+        event.preventDefault();
+        toggle();
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        if (event.key !== Keys.Tab) event.preventDefault();
+        if (event.key === Keys.Space) toggle();
+    }
+
+    // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
+    function handleKeyPress(event: KeyboardEvent) {
+        event.preventDefault();
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "switch",
+        tabIndex: 0,
+        "aria-checked": checked,
+        "aria-labelledby": $labelContext?.labelIds,
+        "aria-describedby": $descriptionContext?.descriptionIds,
+    };
+</script>
+
+{#if switchStore}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$switchStore}
+        on:click={handleClick}
+        on:keyup={handleKeyUp}
+        on:keypress={handleKeyPress}
+    >
+        <slot />
+    </button>
+{:else}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$internalSwitchRef}
+        on:click={handleClick}
+        on:keyup={handleKeyUp}
+        on:keypress={handleKeyPress}
+    >
+        <slot />
+    </button>
+{/if}

src/lib/components/switch/SwitchGroup.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+    export interface StateDefinition {
+        switchStore: Writable<HTMLButtonElement | null>;
+    }
+</script>
+
+<script lang="ts">
+    import DescriptionProvider from "./DescriptionProvider.svelte";
+    import LabelProvider from "./LabelProvider.svelte";
+    import { setContext } from "svelte";
+    import { Writable, writable } from "svelte/store";
+
+    let switchStore: Writable<HTMLButtonElement | null> = writable(null);
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext("SwitchApi", api);
+
+    function onClick() {
+        if (!$switchStore) return;
+        $switchStore.click();
+        $switchStore.focus({ preventScroll: true });
+    }
+
+    $: api.set({
+        switchStore,
+    });
+</script>
+
+<div {...$$restProps}>
+    <DescriptionProvider name="Switch.Description">
+        <LabelProvider name="Switch.Label" {onClick}>
+            <slot />
+        </LabelProvider>
+    </DescriptionProvider>
+</div>