@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/CropImage/CropImage.svelte

@@ -1,5 +1,6 @@
 <script>
   import Cropper from 'svelte-easy-crop';
+  import { CloseOutline, MinusOutline, PlusOutline } from "../Icons";
   import Button from '../Button/Button.svelte';
 
   export let showModal = false;
@@ -121,191 +122,119 @@
 {#if showModal}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- Flowbite Modal Backdrop -->
   <div
-    class="fixed inset-0 z-[9999] flex items-center justify-center bg-gray-900 bg-opacity-50 p-4"
+    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
     on:click|self={closeModal}
   >
-    <div
-      class="relative bg-BG-Primary rounded-2xl shadow-lg w-full max-w-[556px] max-h-[90vh] overflow-auto"
-    >
-      <!-- Header -->
-      <div class="flex items-center justify-between p-4 border-b border-stroke-Primary">
-        <h3 class="text-xl font-medium text-Text-Primary">Crop image</h3>
-        <button
-          type="button"
-          class="text-Text-Tartiary hover:text-Text-Primary transition-colors"
-          on:click={closeModal}
-          aria-label="Close"
-        >
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-
-      <!-- Cropper Container -->
-      <div class="p-4 sm:p-6">
-        <div class="cropper-container">
-          {#if isLoading}
-            <div class="absolute inset-0 flex items-center justify-center bg-gray-200 z-10">
-              <span class="text-Text-Tartiary">Loading...</span>
-            </div>
-          {/if}
-          <Cropper
-            image={imageSrc}
-            bind:crop
-            bind:zoom
-            aspect={1}
-            minZoom={1}
-            maxZoom={3}
-            showGrid={true}
-            on:cropcomplete={handleCropComplete}
-          />
-        </div>
-
-        <!-- Instructions -->
-        <p class="text-sm text-Text-Tartiary text-center mt-3">
-          Drag to position • Pinch or use slider to zoom
-        </p>
-
-        <!-- Zoom Controls -->
-        <div class="flex items-center justify-center mt-4 mx-auto gap-3" style="max-width: 280px;">
+    <!-- Flowbite Modal Container -->
+    <div class="relative w-full max-w-lg max-h-full">
+      <!-- Flowbite Modal Content -->
+      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
+        <!-- Flowbite Modal Header -->
+        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            Crop image
+          </h3>
           <button
             type="button"
-            class="zoom-button"
-            on:click={() => (zoom = Math.max(1, zoom - 0.2))}
-            aria-label="Zoom out"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            on:click={closeModal}
+            aria-label="Close modal"
           >
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
-            </svg>
+            <CloseOutline class="w-3 h-3" aria-hidden="true" />
+            <span class="sr-only">Close modal</span>
           </button>
+        </div>
 
-          <input
-            type="range"
-            min="1"
-            max="3"
-            step="0.1"
-            bind:value={zoom}
-            class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer zoom-slider"
-            style="--progress: {progress}%"
-            aria-label="Zoom level"
-          />
+        <!-- Flowbite Modal Body -->
+        <div class="p-4 md:p-6 space-y-4">
+          <!-- Cropper Container -->
+          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
+            {#if isLoading}
+              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Loading...</span>
+              </div>
+            {/if}
+            <Cropper
+              image={imageSrc}
+              bind:crop
+              bind:zoom
+              aspect={1}
+              minZoom={1}
+              maxZoom={3}
+              showGrid={true}
+              on:cropcomplete={handleCropComplete}
+            />
+          </div>
+
+          <!-- Instructions -->
+          <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
+            Drag to position. Pinch or use slider to zoom.
+          </p>
+
+          <!-- Zoom Controls -->
+          <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
+            <!-- Zoom Out Button (Flowbite icon button) -->
+            <button
+              type="button"
+              class="flex items-center justify-center w-9 h-9 text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 shrink-0"
+              on:click={() => (zoom = Math.max(1, zoom - 0.2))}
+              aria-label="Zoom out"
+            >
+              <MinusOutline class="w-4 h-4" aria-hidden="true" />
+            </button>
+
+            <!-- Flowbite Range Slider -->
+            <input
+              type="range"
+              min="1"
+              max="3"
+              step="0.1"
+              bind:value={zoom}
+              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
+              aria-label="Zoom level"
+            />
+
+            <!-- Zoom In Button (Flowbite icon button) -->
+            <button
+              type="button"
+              class="flex items-center justify-center w-9 h-9 text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 shrink-0"
+              on:click={() => (zoom = Math.min(3, zoom + 0.2))}
+              aria-label="Zoom in"
+            >
+              <PlusOutline class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
 
-          <button
+        <!-- Flowbite Modal Footer -->
+        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
+          <Button
             type="button"
-            class="zoom-button"
-            on:click={() => (zoom = Math.min(3, zoom + 0.2))}
-            aria-label="Zoom in"
+            variant="alternative"
+            size="md"
+            minWidth="sm"
+            on:click={closeModal}
+            disabled={isSaving || isUploadingImage}
           >
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-          </button>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            size="md"
+            minWidth="sm"
+            on:click={handleSave}
+            disabled={isLoading || isSaving || isUploadingImage}
+          >
+            {#if isSaving || isUploadingImage}
+              Uploading...
+            {:else}
+              Save
+            {/if}
+          </Button>
         </div>
       </div>
-
-      <!-- Actions -->
-      <div class="flex items-center justify-end gap-3 p-4 border-t border-stroke-Primary">
-        <Button type="button" variant="gray-outline" size="md" minWidth="sm" on:click={closeModal} disabled={isSaving || isUploadingImage}>
-          Cancel
-        </Button>
-        <Button type="button" size="md" minWidth="sm" on:click={handleSave} disabled={isLoading || isSaving || isUploadingImage}>
-          {#if isSaving || isUploadingImage}
-            Uploading...
-          {:else}
-            Save
-          {/if}
-        </Button>
-      </div>
     </div>
   </div>
 {/if}
-
-<style>
-  .cropper-container {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    max-height: 400px;
-    background-color: #1f2937;
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-
-  @media (min-width: 640px) {
-    .cropper-container {
-      aspect-ratio: 4 / 3;
-      max-height: 340px;
-    }
-  }
-
-  .zoom-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background-color: hsl(var(--BG-Secondary));
-    color: hsl(var(--Text-Primary));
-    border: 1px solid hsl(var(--Stroke-Primary));
-    cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s;
-    flex-shrink: 0;
-  }
-
-  .zoom-button:hover {
-    background-color: hsl(var(--BG-Tertiary, var(--BG-Secondary)));
-    border-color: hsl(var(--Stroke-Secondary, var(--Stroke-Primary)));
-  }
-
-  .zoom-button:active {
-    transform: scale(0.95);
-  }
-
-  .zoom-slider {
-    background: linear-gradient(
-      to right,
-      hsl(var(--primary-700)) 0%,
-      hsl(var(--primary-700)) var(--progress, 0%),
-      #e5e7eb var(--progress, 0%),
-      #e5e7eb 100%
-    );
-  }
-
-  .zoom-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-            appearance: none;
-    width: 20px;
-    height: 20px;
-    background: hsl(var(--primary-700));
-    cursor: pointer;
-    border-radius: 50%;
-    border: 3px solid hsl(var(--primary-200));
-    box-shadow: 0 0 0 1px hsl(var(--primary-700));
-  }
-
-  .zoom-slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: hsl(var(--primary-700));
-    cursor: pointer;
-    border-radius: 50%;
-    border: 3px solid hsl(var(--primary-200));
-    box-shadow: 0 0 0 1px hsl(var(--primary-700));
-  }
-
-  .zoom-slider::-webkit-slider-track {
-    background: transparent;
-    height: 8px;
-    border-radius: 4px;
-  }
-
-  .zoom-slider::-moz-range-track {
-    background: transparent;
-    height: 8px;
-    border-radius: 4px;
-    border: none;
-  }
-</style>

package/dist/components/CropImage/CropImage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AAyMA;;;;;;;;mBAAsL;6CATzI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA+MA;;;;;;;;mBAAsL;6CATzI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/DarkModeToggle.stories.svelte

@@ -1,34 +1,36 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import DarkModeToggle from './DarkModeToggle.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/DarkModeToggle',
     component: DarkModeToggle,
     tags: ['autodocs'],
-  };
+  });
+
 </script>
 
 <script>
-  import { Story } from '@storybook/addon-svelte-csf';
-</script>
+  </script>
 
 <Story name="Default">
   <div class="flex flex-col gap-4 p-4">
     <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
-    <p class="text-sm text-gray-600 dark:text-gray-400">
+    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
       Cycles through: Auto → Light → Dark → Auto
     </p>
     <DarkModeToggle />
-    <p class="text-xs text-gray-500">
+    <p class="text-xs text-gray-500 dark:text-gray-400">
       Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
     </p>
   </div>
 </Story>
 
 <Story name="In Header">
-  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white">Application Header</h2>
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
       <DarkModeToggle />
     </div>
   </div>
@@ -36,17 +38,17 @@
 
 <Story name="Theme States Demo">
   <div class="space-y-4 p-4">
-    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
         Current Theme Demo
       </h3>
-      <p class="text-gray-600 dark:text-gray-300 mb-4">
+      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
         This content changes appearance based on the selected theme mode.
       </p>
       <DarkModeToggle />
     </div>
 
-    <div class="text-sm text-gray-500 dark:text-gray-400">
+    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
       <p><strong>Auto Mode:</strong> Follows system preferences</p>
       <p><strong>Light Mode:</strong> Forces light theme</p>
       <p><strong>Dark Mode:</strong> Forces dark theme</p>

package/dist/components/DarkModeToggle.stories.svelte.d.ts

@@ -1,8 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { DarkModeToggle as component };
-    export let tags: string[];
-}
 export default DarkModeToggle;
 type DarkModeToggle = SvelteComponent<{
     [x: string]: never;

package/dist/components/DarkModeToggle.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAyEA;;;;mBAA0H;2BAtE7F,yBAAyB;6CA6DT,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DarkModeToggle.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwEA;;;;mBAA0H;2BAnE7F,yBAAyB;6CA0DT,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/DarkModeToggle.svelte

@@ -82,6 +82,7 @@
 
     // Immediately blur the button to remove focus state on mobile
     if (event && event.currentTarget) {
+      // @ts-ignore
       event.currentTarget.blur();
     }
   }
@@ -95,161 +96,54 @@
         : "Dark mode - click for auto";
 </script>
 
-<div class="transition-all flex items-center justify-center w-full py-4">
+<div class="flex w-full items-center justify-center py-4 transition-all">
   <button
     on:click={toggleTheme}
     on:touchend={(e) => e.currentTarget.blur()}
-    class="theme-toggle-btn focus:outline-none"
+    class="relative flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900 transition-all hover:border-blue-500 hover:shadow-md focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
     aria-label="Toggle theme"
     title={titleText}
   >
     <!-- Sun icon - shown when mode is 'light' -->
-    <span class="theme-icon sun-icon" class:hidden={themeMode !== "light"}>
-      <SunIcon size="20" color="currentColor" />
+    <span
+      class="text-amber-500 transition-all duration-300 {themeMode === 'light'
+        ? 'scale-100 rotate-0 opacity-100'
+        : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+    >
+      <SunIcon size="20" />
     </span>
 
     <!-- Moon icon - shown when mode is 'dark' -->
-    <span class="theme-icon moon-icon" class:hidden={themeMode !== "dark"}>
-      <MoonIcon size="20" color="currentColor" />
+    <span
+      class="transition-all duration-300 {themeMode === 'dark'
+        ? 'scale-100 rotate-0 opacity-100'
+        : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+    >
+      <MoonIcon size="20" color="white" />
     </span>
 
     <!-- Auto icon container - shown when mode is 'auto' -->
     {#if themeMode === "auto"}
-      <div class="auto-icon-container">
+      <div class="absolute inset-0 overflow-hidden rounded-lg">
         <!-- Light half (top-left) with sun -->
-        <div class="auto-half auto-light-half">
-          <SunIcon size="12" color="#f59e0b" />
+        <div
+          class="absolute flex h-full w-full items-center justify-center bg-white"
+          style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+        >
+          <span class="-translate-x-1 -translate-y-1 text-amber-500">
+            <SunIcon size="12" />
+          </span>
         </div>
         <!-- Dark half (bottom-right) with moon -->
-        <div class="auto-half auto-dark-half">
-          <MoonIcon size="12" color="white" />
+        <div
+          class="absolute flex h-full w-full items-center justify-center bg-gray-800"
+          style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
+        >
+          <span class="translate-x-1 translate-y-1">
+            <MoonIcon size="12" color="white" />
+          </span>
         </div>
       </div>
     {/if}
   </button>
-
 </div>
-
-<style>
-  .theme-toggle-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    border: 1.5px solid rgb(229 231 235);
-    background-color: white;
-    color: rgb(17 24 39);
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-         user-select: none;
-  }
-
-  .theme-toggle-btn:focus,
-  .theme-toggle-btn:focus-visible,
-  .theme-toggle-btn:active {
-    outline: none !important;
-    box-shadow: none !important;
-    border-color: rgb(229 231 235) !important;
-    ring: none !important;
-    --tw-ring-shadow: none !important;
-    --tw-ring-offset-shadow: none !important;
-  }
-
-  :global(.dark) .theme-toggle-btn:focus,
-  :global(.dark) .theme-toggle-btn:focus-visible,
-  :global(.dark) .theme-toggle-btn:active {
-    border-color: rgb(55 65 81) !important;
-    ring: none !important;
-    --tw-ring-shadow: none !important;
-    --tw-ring-offset-shadow: none !important;
-  }
-
-  :global(.dark) .theme-toggle-btn {
-    border-color: rgb(55 65 81);
-    background-color: rgb(31 41 55);
-    color: rgb(243 244 246);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .theme-toggle-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
-      border-color: #0284fe;
-    }
-
-    :global(.dark) .theme-toggle-btn:hover {
-      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
-    }
-
-    .theme-toggle-btn:active {
-      transform: translateY(0);
-    }
-  }
-
-  .theme-icon {
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .sun-icon {
-    color: #f59e0b;
-  }
-
-  .moon-icon {
-    color: white;
-  }
-
-  /* Auto mode - diagonal split button */
-  .auto-icon-container {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    border-radius: 8px;
-  }
-
-  .auto-half {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .auto-light-half {
-    background-color: white;
-    clip-path: polygon(0 0, 100% 0, 0 100%);
-  }
-
-  .auto-light-half :global(svg) {
-    transform: translate(-4px, -4px);
-  }
-
-  .auto-dark-half {
-    background-color: rgb(31 41 55);
-    clip-path: polygon(100% 0, 100% 100%, 0 100%);
-  }
-
-  .auto-dark-half :global(svg) {
-    transform: translate(4px, 4px);
-  }
-
-  .hidden {
-    opacity: 0;
-    transform: rotate(180deg) scale(0);
-    position: absolute;
-  }
-
-  .theme-icon:not(.hidden) {
-    opacity: 1;
-    transform: rotate(0deg) scale(1);
-  }
-</style>

package/dist/components/DarkModeToggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.svelte.js"],"names":[],"mappings":";;;;;;;;AAkJA;;;;mBAAiJ;6CATpG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.svelte.js"],"names":[],"mappings":";;;;;;;;AAwJA;;;;mBAAiJ;6CATpG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}