Add some more examples

src/routes/radio-group/radio-group.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { RadioGroup, RadioGroupOption } from "$lib";
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  let access = [
+    {
+      id: "access-1",
+      name: "Public access",
+      description: "This project would be available to anyone who has the link",
+    },
+    {
+      id: "access-2",
+      name: "Private to Project Members",
+      description: "Only members of this project would be able to access",
+    },
+    {
+      id: "access-3",
+      name: "Private to you",
+      description: "You are the only one able to access this project",
+    },
+  ];
+  let active;
+</script>
+
+<div class="p-12 max-w-xl">
+  <a href="/">Link before</a>
+  <RadioGroup
+    value={active}
+    on:updateValue={(event) => (active = event.detail)}
+  >
+    <fieldset class="space-y-4">
+      <legend>
+        <h2 class="text-xl">Privacy setting</h2>
+      </legend>
+
+      <div class="bg-white rounded-md -space-y-px">
+        {#each access as { id, name, description }, i (id)}
+          <RadioGroupOption
+            value={id}
+            class={({ active }) =>
+              classNames(
+                // Rounded corners
+                i === 0 && "rounded-tl-md rounded-tr-md",
+                access.length - 1 === i && "rounded-bl-md rounded-br-md",
+
+                // Shared
+                "relative border p-4 flex focus:outline-none",
+                active
+                  ? "bg-indigo-50 border-indigo-200 z-10"
+                  : "border-gray-200"
+              )}
+            let:active
+            let:checked
+          >
+            <div class="flex justify-between items-center w-full">
+              <div class="ml-3 flex flex-col cursor-pointer">
+                <span
+                  class={classNames(
+                    "block text-sm leading-5 font-medium",
+                    active ? "text-indigo-900" : "text-gray-900"
+                  )}
+                >
+                  {name}
+                </span>
+                <span
+                  class={classNames(
+                    "block text-sm leading-5",
+                    active ? "text-indigo-700" : "text-gray-500"
+                  )}
+                >
+                  {description}
+                </span>
+              </div>
+              <div>
+                {#if checked}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    class="h-5 w-5 text-indigo-500"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width={2}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                {/if}
+              </div>
+            </div>
+          </RadioGroupOption>
+        {/each}
+      </div>
+    </fieldset>
+  </RadioGroup>
+  <a href="/">Link after</a>
+</div>

src/routes/switch/switch-with-pure-tailwind.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Switch, SwitchGroup, SwitchLabel } from "$lib";
+
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+
+  let state = false;
+</script>
+
+<div class="flex items-start justify-center w-screen h-full p-12 bg-gray-50">
+  <SwitchGroup as="div" class="flex items-center space-x-4">
+    <SwitchLabel>Enable notifications</SwitchLabel>
+
+    <Switch
+      as="button"
+      checked={state}
+      on:updateValue={(event) => (state = event.detail)}
+      class={({ checked }) =>
+        classNames(
+          "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
+          checked ? "bg-indigo-600" : "bg-gray-200"
+        )}
+      let:checked
+    >
+      <span
+        class={classNames(
+          "inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200",
+          checked ? "translate-x-5" : "translate-x-0"
+        )}
+      />
+    </Switch>
+  </SwitchGroup>
+</div>

src/routes/tabs/tabs-with-pure-tailwind.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import {
+    Switch,
+    SwitchGroup,
+    SwitchLabel,
+    Tab,
+    TabGroup,
+    TabList,
+    TabPanel,
+    TabPanels,
+  } from "$lib";
+
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+
+  let tabs = [
+    { name: "My Account", content: "Tab content for my account" },
+    { name: "Company", content: "Tab content for company", disabled: true },
+    { name: "Team Members", content: "Tab content for team members" },
+    { name: "Billing", content: "Tab content for billing" },
+  ];
+
+  let manual = false;
+</script>
+
+<div
+  class="flex flex-col items-start w-screen h-full p-12 bg-gray-50 space-y-12"
+>
+  <SwitchGroup as="div" class="flex items-center space-x-4">
+    <SwitchLabel>Manual keyboard activation</SwitchLabel>
+
+    <Switch
+      as="button"
+      checked={manual}
+      on:updateValue={(event) => (manual = event.detail)}
+      class={({ checked }) =>
+        classNames(
+          "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
+          checked ? "bg-indigo-600" : "bg-gray-200"
+        )}
+      let:checked
+    >
+      <span
+        class={classNames(
+          "inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200",
+          checked ? "translate-x-5" : "translate-x-0"
+        )}
+      />
+    </Switch>
+  </SwitchGroup>
+
+  <TabGroup class="flex flex-col max-w-3xl w-full" as="div" {manual}>
+    <TabList
+      class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
+    >
+      {#each tabs as tab, tabIdx (tab.name)}
+        <Tab
+          key={tab.name}
+          disabled={tab.disabled}
+          class={({ selected }) =>
+            classNames(
+              selected ? "text-gray-900" : "text-gray-500 hover:text-gray-700",
+              tabIdx === 0 ? "rounded-l-lg" : "",
+              tabIdx === tabs.length - 1 ? "rounded-r-lg" : "",
+              tab.disabled && "opacity-50",
+              "group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
+            )}
+          let:selected
+        >
+          <span>{tab.name}</span>
+          {#if tab.disabled}
+            <small class="inline-block px-4 text-xs">(disabled)</small>
+            <span
+              aria-hidden="true"
+              class={classNames(
+                selected ? "bg-indigo-500" : "bg-transparent",
+                "absolute inset-x-0 bottom-0 h-0.5"
+              )}
+            />
+          {/if}
+        </Tab>
+      {/each}
+    </TabList>
+
+    <TabPanels class="mt-4">
+      {#each tabs as tab (tab.name)}
+        <TabPanel class="bg-white rounded-lg p-4 shadow" key={tab.name}>
+          {tab.content}
+        </TabPanel>
+      {/each}
+    </TabPanels>
+  </TabGroup>
+</div>

src/routes/transitions/component-examples/dropdown.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { Transition } from "$lib";
+
+  let open = false;
+</script>
+
+<svelte:head>
+  <title>Transition Component - Playground</title>
+</svelte:head>
+
+<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+  <div class="relative inline-block text-left">
+    <div>
+      <span class="rounded-md shadow-sm">
+        <button
+          type="button"
+          class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
+          id="options-menu"
+          aria-haspopup="true"
+          aria-expanded={open || undefined}
+          on:click={() => (open = !open)}
+        >
+          Options
+          <svg
+            class="w-5 h-5 ml-2 -mr-1"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </span>
+    </div>
+
+    <Transition
+      show={open}
+      enter="transition ease-out duration-75"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-150"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+      class="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg"
+    >
+      <div class="bg-white rounded-md shadow-xs">
+        <div
+          class="py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <a
+            href="/"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            Account settings
+          </a>
+          <a
+            href="/"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            Support
+          </a>
+          <a
+            href="/"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            License
+          </a>
+          <form method="POST" action="#">
+            <button
+              type="submit"
+              class="block w-full px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+              role="menuitem"
+            >
+              Sign out
+            </button>
+          </form>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</div>

src/routes/transitions/component-examples/modal.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { Transition, TransitionChild } from "$lib";
+
+  let isOpen = false;
+  function toggle() {
+    isOpen = !isOpen;
+  }
+
+  let email = "";
+  let events: string[] = [];
+  let inputRef: HTMLElement | null = null;
+
+  function addEvent(name: string) {
+    events = [...events, `${new Date().toJSON()} - ${name}`];
+  }
+</script>
+
+<div>
+  <div class="flex p-12 space-x-4">
+    <div class="inline-block p-12">
+      <span class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">
+        <button
+          on:click={toggle}
+          type="button"
+          class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue sm:text-sm sm:leading-5"
+        >
+          Show modal
+        </button>
+      </span>
+    </div>
+
+    <ul class="p-4 text-gray-900 bg-gray-200">
+      <h3 class="font-bold">Events:</h3>
+      {#each events as event}
+        <li class="font-mono text-sm">
+          {event}
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  <Transition
+    show={isOpen}
+    class="fixed inset-0 z-10 overflow-y-auto"
+    on:beforeEnter={() => {
+      addEvent("Before enter");
+    }}
+    on:afterEnter={() => {
+      inputRef?.focus();
+      addEvent("After enter");
+    }}
+    on:beforeLeave={() => {
+      addEvent("Before leave (before confirm)");
+      window.confirm("Are you sure?");
+      addEvent("Before leave (after confirm)");
+    }}
+    on:afterLeave={(event) => {
+      addEvent(`After leave (before alert)`);
+      window.alert("Consider it done!");
+      addEvent(`After leave (after alert)`);
+      email = "";
+    }}
+  >
+    <div
+      class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div class="fixed inset-0 transition-opacity">
+          <div class="absolute inset-0 bg-gray-500 opacity-75" />
+        </div>
+      </TransitionChild>
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" />&#8203;
+      <TransitionChild
+        class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline"
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        enterTo="opacity-100 translate-y-0 sm:scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      >
+        <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10"
+            >
+              <!-- Heroicon name: exclamation -->
+              <svg
+                class="w-6 h-6 text-red-600"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3
+                class="text-lg font-medium leading-6 text-gray-900"
+                id="modal-headline"
+              >
+                Deactivate account
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm leading-5 text-gray-500">
+                  Are you sure you want to deactivate your account? All of your
+                  data will be permanently removed. This action cannot be
+                  undone.
+                </p>
+              </div>
+              <div class="mt-2">
+                <div>
+                  <!-- svelte-ignore a11y-label-has-associated-control -->
+                  <label
+                    html-for="email"
+                    class="block text-sm font-medium leading-5 text-gray-700"
+                  >
+                    Email address
+                  </label>
+                  <div class="relative mt-1 rounded-md shadow-sm">
+                    <input
+                      bind:this={inputRef}
+                      bind:value={email}
+                      id="email"
+                      class="block w-full px-3 form-input sm:text-sm sm:leading-5"
+                      placeholder="name@example.com"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
+          <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
+            <button
+              type="button"
+              class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red sm:text-sm sm:leading-5"
+            >
+              Deactivate
+            </button>
+          </span>
+          <span class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">
+            <button
+              on:click={toggle}
+              type="button"
+              class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue sm:text-sm sm:leading-5"
+            >
+              Cancel
+            </button>
+          </span>
+        </div>
+      </TransitionChild>
+    </div>
+  </Transition>
+</div>