rune-lab 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2025] [Yrrrrrf]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+<h1 align="center">
+   <img src="./resources/img/rune.png" alt="Rune-Lab Icon" width="128" height="128" description="Some glowing runes"> 
+   <div align="center">Rune Lab</div>
+</h1>
+
+<!-- [![JSR Package](https://img.shields.io/badge/JSR-Package-blue?style=for-the-badge&logo=typescript)](https://jsr.io/@yrrrrrf/rune-lab) -->
+[![GitHub](https://img.shields.io/badge/github-rune--lab-blue?style=for-the-badge&logo=github)](https://github.com/Yrrrrrf/rune-lab)
+
+## Overview
+
+Rune Lab is a SvelteKit component library **designed for the SvelteHack 2024**. It provides a collection of reusable UI components and utilities built with modern web technologies. The library emphasizes type safety, performance, and developer experience.
+
+## Features
+
+- **Svelte 5 Ready**: Built with the latest Svelte features
+- **TypeScript Support**: Full type safety and IDE integration
+- **Tailwind CSS**: Utility-first styling with custom components
+- **Zero Dependencies**: Lightweight and efficient
+- **Hot Reload**: Development-friendly with watch mode
+- **JSR Distribution**: Modern package distribution
+
+## Installation
+
+```bash
+jsr add @rune-lab
+# jsr add @yrrrrrf/rune-lab
+```
+
+## Usage
+
+### Components
+
+TODO
+TODO
+TODO
+TODO
+TODO
+
+## Development
+
+```bash
+bun install  # Install dependencies
+bun watch  # Start development watch mode
+bun run build  # Build library
+bun test  # Run tests
+```
+
+## Project Structure
+
+```
+rune-lab/
+├── src/
+│   └── lib/
+│       ├── components/
+│       ├── utils/
+│       └── index.ts
+├── tests/
+├── watch.ts
+└── package.json
+```
+
+## License
+
+MIT License - [LICENSE](LICENSE)

package/dist/components/UIShowcase.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">
+  import ThemeSelector from "./layout/ThemeSelector.svelte";
+
+  // State management with Svelte 5 runes
+  let activeTab = $state(0);
+  let counter = $state(0);
+  let modalOpen = $state(false);
+  let drawerOpen = $state(false);
+  let loading = $state(false);
+  let progress = $state(0);
+  let rating = $state(3);
+  let selected = $state("Option 1");
+  let steps = $state(1);
+  let toast = $state("");
+  
+  // Color variants for demonstration
+  const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];
+  const sizes = ['xs', 'sm', 'md', 'lg'];
+  
+  // Mock data for examples
+  const stats = [
+    { title: "Downloads", value: "31K", desc: "Jan 1st - Feb 1st" },
+    { title: "New Users", value: "4,200", desc: "↗︎ 400 (22%)" },
+    { title: "New Registers", value: "1,200", desc: "↘︎ 90 (14%)" }
+  ];
+
+  // Simulate loading
+  function simulateLoading() {
+    loading = true;
+    setTimeout(() => loading = false, 2000);
+  }
+
+  // Show toast message
+  function showToast(message: string) {
+    toast = message;
+    setTimeout(() => toast = "", 3000);
+  }
+
+  // Progress bar simulation
+  $effect(() => {
+    const interval = setInterval(() => {
+      if (progress < 100) {
+        progress += 1;
+      } else {
+        progress = 0;
+      }
+    }, 100);
+
+    return () => clearInterval(interval);
+  });
+
+  const tabs = [
+    { title: 'Basic UI', icon: '🎨' },
+    { title: 'Components', icon: '🧩' },
+    { title: 'Layout', icon: '📐' },
+    { title: 'Data Display', icon: '📊' },
+    { title: 'Feedback', icon: '💫' }
+  ];
+</script>
+
+<ThemeSelector />
+
+<div class="min-h-screen bg-base-200 p-4">
+  <!-- Header with Theme Demo -->
+  <div class="text-center mb-8 hero bg-base-100 rounded-box p-8">
+    <div class="hero-content text-center">
+      <div>
+        <h1 class="text-5xl font-bold mb-4">DaisyUI Showcase</h1>
+        <p class="text-xl opacity-75 mb-6">A comprehensive demonstration of DaisyUI components with Svelte 5</p>
+        <div class="flex justify-center gap-2">
+          <button class="btn btn-primary" onclick={() => modalOpen = true}>Open Modal</button>
+          <button class="btn btn-secondary" onclick={() => drawerOpen = true}>Open Drawer</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Navigation Tabs -->
+  <div class="tabs tabs-boxed justify-center mb-8">
+    {#each tabs as tab, i}
+      <button
+        class="tab {activeTab === i ? 'tab-active' : ''}"
+        onclick={() => activeTab = i}
+      >
+        <span class="mr-2">{tab.icon}</span>
+        {tab.title}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Main Content -->
+  <div class="container mx-auto">
+    {#if activeTab === 0}
+      <!-- Basic UI Elements -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Buttons Showcase -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Buttons</h2>
+            <div class="flex flex-wrap gap-2">
+              {#each colors as color}
+                <button class="btn btn-{color}">{color}</button>
+              {/each}
+            </div>
+            <div class="divider">Sizes</div>
+            <div class="flex flex-wrap gap-2 items-center">
+              {#each sizes as size}
+                <button class="btn btn-{size}">{size}</button>
+              {/each}
+            </div>
+            <div class="divider">States</div>
+            <div class="flex flex-wrap gap-2">
+              <button class="btn btn-primary loading">Loading</button>
+              <button class="btn btn-disabled">Disabled</button>
+              <button class="btn btn-outline">Outline</button>
+              <button class="btn btn-link">Link</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Form Elements -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Form Elements</h2>
+            <div class="form-control gap-4">
+              <label class="input-group">
+                <span>Email</span>
+                <input type="text" placeholder="info@site.com" class="input input-bordered" />
+              </label>
+              
+              <select class="select select-bordered w-full" bind:value={selected}>
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+              </select>
+
+              <div class="flex gap-4">
+                <label class="label cursor-pointer">
+                  <span class="label-text mr-2">Toggle</span>
+                  <input type="checkbox" class="toggle toggle-primary" />
+                </label>
+
+                <label class="label cursor-pointer">
+                  <span class="label-text mr-2">Radio</span>
+                  <input type="radio" name="radio-10" class="radio radio-primary" />
+                </label>
+              </div>
+
+              <input type="range" min="0" max="100" class="range range-primary" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+    {:else if activeTab === 1}
+      <!-- Advanced Components -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Dropdown and Menu -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Dropdowns & Menus</h2>
+            <div class="flex flex-wrap gap-4">
+              <div class="dropdown">
+                <button class="btn m-1">Dropdown</button>
+                <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                  <li><button class="w-full text-left">Item 1</button></li>
+                  <li><button class="w-full text-left">Item 2</button></li>
+                </ul>
+              </div>
+
+              <div class="menu bg-base-200 rounded-box">
+                <li><button class="w-full text-left">Menu Item 1</button></li>
+                <li><button class="w-full text-left">Menu Item 2</button></li>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Steps -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Steps</h2>
+            <ul class="steps steps-vertical lg:steps-horizontal w-full">
+              <li class="step step-primary">Register</li>
+              <li class="step" class:step-primary={steps >= 2}>Choose plan</li>
+              <li class="step" class:step-primary={steps >= 3}>Purchase</li>
+              <li class="step" class:step-primary={steps === 4}>Receive Product</li>
+            </ul>
+            <div class="flex justify-center mt-4">
+              <button class="btn btn-primary" onclick={() => steps = steps < 4 ? steps + 1 : 1}>
+                Next Step
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    {:else if activeTab === 2}
+      <!-- Layout Elements -->
+      <div class="grid grid-cols-1 gap-6">
+        <!-- Hero Section -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Hero Section</h2>
+            <div class="hero bg-base-200 rounded-box">
+              <div class="hero-content text-center">
+                <div class="max-w-md">
+                  <h1 class="text-5xl font-bold">Hello there</h1>
+                  <p class="py-6">This is a sample hero section with a button below.</p>
+                  <button class="btn btn-primary">Get Started</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Grid Layout -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Grid Layout</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {#each Array(3) as _, i}
+                <div class="bg-primary text-primary-content p-4 rounded-box text-center">
+                  Grid Item {i + 1}
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      </div>
+
+    {:else if activeTab === 3}
+      <!-- Data Display -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Stats -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Statistics</h2>
+            <div class="stats shadow">
+              {#each stats as stat}
+                <div class="stat">
+                  <div class="stat-title">{stat.title}</div>
+                  <div class="stat-value">{stat.value}</div>
+                  <div class="stat-desc">{stat.desc}</div>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Table</h2>
+            <div class="overflow-x-auto">
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Job</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Cy Ganderton</td>
+                    <td>Quality Control Specialist</td>
+                    <td><button class="btn btn-xs">Details</button></td>
+                  </tr>
+                  <tr>
+                    <td>Hart Hagerty</td>
+                    <td>Desktop Support Technician</td>
+                    <td><button class="btn btn-xs">Details</button></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    {:else if activeTab === 4}
+      <!-- Feedback Elements -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Alerts -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Alerts</h2>
+            <div class="flex flex-col gap-2">
+              {#each colors as color}
+                <div class="alert alert-{color}">
+                  <span>This is a {color} alert</span>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress & Loading -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Progress & Loading</h2>
+            <progress class="progress w-full" value={progress} max="100"></progress>
+            <div class="flex gap-2 mt-4">
+              <button class="btn" onclick={simulateLoading}>
+                {loading ? 'Loading...' : 'Simulate Loading'}
+              </button>
+              {#if loading}
+                <span class="loading loading-spinner loading-lg"></span>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Modal -->
+  {#if modalOpen}
+    <div class="modal modal-open">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg">Modal Title</h3>
+        <p class="py-4">This is a sample modal dialog using DaisyUI.</p>
+        <div class="modal-action">
+          <button class="btn" onclick={() => modalOpen = false}>Close</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+      <!-- Drawer -->
+  {#if drawerOpen}
+    <div class="drawer drawer-end">
+      <input id="my-drawer" type="checkbox" class="drawer-toggle" checked />
+      <div class="drawer-side">
+        <button 
+          class="drawer-overlay" 
+          onclick={() => drawerOpen = false}
+          onkeydown={(e) => e.key === 'Escape' && (drawerOpen = false)}
+        ></button>
+        <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
+          <li><button class="w-full text-left">Sidebar Item 1</button></li>
+          <li><button class="w-full text-left">Sidebar Item 2</button></li>
+        </ul>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Toast -->
+  {#if toast}
+    <div class="toast toast-end">
+      <div class="alert alert-info">
+        <span>{toast}</span>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Footer -->
+  <footer class="footer footer-center p-4 bg-base-300 text-base-content mt-8">
+    <div>
+      <p>Made with 💝 using Svelte 5 and DaisyUI</p>
+    </div>
+  </footer>
+</div>

package/dist/components/UIShowcase.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const UiShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+type UiShowcase = ReturnType<typeof UiShowcase>;
+export default UiShowcase;

package/dist/components/layout/Footer.svelte

@@ -0,0 +1,115 @@
+<!-- src/lib/components/layout/Footer.svelte -->
+<script lang="ts">
+    import { appData } from '../../stores/app.svelte.js';
+
+    // Define footer section types
+    interface FooterLink {
+        text: string;
+        href: string;
+    }
+
+    interface FooterSection {
+        title: string;
+        links: FooterLink[];
+    }
+
+    // Footer sections configuration
+    const footerSections: FooterSection[] = [
+        {
+            title: "Product",
+            links: [
+                { text: "Features", href: "/features" },
+                { text: "Docs", href: "/docs" },
+                { text: "API", href: "/api" },
+                { text: "Pricing", href: "/pricing" }
+            ]
+        },
+        {
+            title: "Company",
+            links: [
+                { text: "About", href: "/about" },
+                { text: "Blog", href: "/blog" },
+                { text: "Careers", href: "/careers" },
+                { text: "Contact", href: "/contact" }
+            ]
+        },
+        {
+            title: "Resources",
+            links: [
+                { text: "Community", href: "/community" },
+                { text: "Help Center", href: "/help" },
+                { text: "Status", href: "/status" },
+                { text: "Terms", href: "/terms" }
+            ]
+        }
+    ];
+
+    // Current year for copyright
+    const currentYear = new Date().getFullYear();
+</script>
+
+<footer class="footer p-10 bg-base-200 text-base-content">
+    <!-- Logo and company info -->
+    <aside class="flex flex-col items-start gap-4">
+        <img 
+            src="/favicon.png" 
+            alt="{appData.name} Logo" 
+            class="h-12 w-12 rounded-lg hover:animate-pulse"
+        />
+        <div>
+            <h2 class="text-lg font-bold">{appData.name}</h2>
+            <p class="text-sm opacity-75">
+                Building better software<br/>
+                since {currentYear}
+            </p>
+        </div>
+
+        <!-- Social media links -->
+        <div class="flex gap-4">
+            <a 
+                href="https://github.com/Yrrrrrf" 
+                aria-label="Visit my GitHub profile"
+                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+            </a>
+            <a 
+                href="https://twitter.com" 
+                aria-label="Visit my Twitter profile"
+                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                </svg>
+            </a>
+            <a 
+                href="https://linkedin.com" 
+                aria-label="Visit my LinkedIn profile"
+                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                </svg>
+            </a>
+        </div>
+
+    <!-- Navigation sections -->
+    {#each footerSections as section}
+        <nav>
+            <h6 class="footer-title">{section.title}</h6>
+            {#each section.links as link}
+                <a href={link.href} class="link link-hover">{link.text}</a>
+            {/each}
+        </nav>
+    {/each}
+</footer>
+
+<!-- Copyright footer -->
+<footer class="footer footer-center p-4 bg-base-300 text-base-content">
+    <aside class="flex flex-col items-center gap-2">
+        <p>Copyright © {currentYear} {appData.name} - All rights reserved</p>
+        <p class="text-sm opacity-75">Version {appData.version}</p>
+    </aside>
+</footer>

package/dist/components/layout/Footer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Footer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Footer = InstanceType<typeof Footer>;
+export default Footer;

package/dist/components/layout/ThemeSelector.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { themeStore } from '../../stores/theme.svelte.js';
+    
+    // Local state using runes
+    let showDropdown = $state(false);
+    
+    // Initialize theme on mount
+    themeStore.init();
+    
+    // Get available themes
+    const themes = themeStore.getAvailableThemes();
+
+    function handleThemeSelect(themeValue: string) {
+        themeStore.setTheme(themeValue);
+        showDropdown = false;
+    }
+</script>
+
+<div class="theme-selector">
+    <button 
+        class="btn"
+        onclick={() => showDropdown = !showDropdown}
+    >
+        <span>{themeStore.themeConfig.icon}</span>
+    </button>
+
+    {#if showDropdown}
+        <ul class="theme-menu">
+            {#each themes as theme}
+                <li>
+                    <button
+                        class="theme-option"
+                        class:active={themeStore.currentTheme === theme.value}
+                        onclick={() => handleThemeSelect(theme.value)}
+                    >
+                        <span>{theme.icon}</span>
+                        <span>{theme.name}</span>
+                    </button>
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style>
+    .theme-selector {
+        position: relative;
+    }
+
+    .theme-menu {
+        position: absolute;
+        right: 0;
+        top: 100%;
+        margin-top: 0.5rem;
+        background: var(--background);
+        border: 1px solid var(--border);
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        min-width: 150px;
+    }
+
+    .theme-option {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        width: 100%;
+        text-align: left;
+    }
+
+    .theme-option:hover {
+        background: var(--hover);
+    }
+
+    .active {
+        background: var(--active);
+    }
+</style>

package/dist/components/layout/ThemeSelector.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeSelector: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;