@getmicdrop/svelte-components 2.6.4 → 2.8.1

package/dist/components/Calendar/{Calendar.svelte.d.ts → MiniMonthCalendar.svelte.d.ts}

@@ -1,43 +1,42 @@
-export default Calendar;
-type Calendar = SvelteComponent<{
+export default MiniMonthCalendar;
+type MiniMonthCalendar = SvelteComponent<{
     variant?: string | undefined;
-    view?: string | undefined;
-    events?: any[] | undefined;
     selectedDates?: any[] | undefined;
-    showMonths?: number | undefined;
-    compact?: boolean | undefined;
-    showNavigation?: boolean | undefined;
-    showViewSwitcher?: boolean | undefined;
-    readOnly?: boolean | undefined;
+    events?: any[] | undefined;
     saveStatus?: string | undefined;
     showLegend?: boolean | undefined;
+    showNavigation?: boolean | undefined;
+    showTodayButton?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    showPartialPreview?: boolean | undefined;
+    disablePastNavigation?: boolean | undefined;
 }, {
     dateSelect: CustomEvent<any>;
-    eventClick: CustomEvent<any>;
+    dayClick: CustomEvent<any>;
+    monthChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
+declare const MiniMonthCalendar: $$__sveltets_2_IsomorphicComponent<{
     variant?: string | undefined;
-    view?: string | undefined;
-    events?: any[] | undefined;
     selectedDates?: any[] | undefined;
-    showMonths?: number | undefined;
-    compact?: boolean | undefined;
-    showNavigation?: boolean | undefined;
-    showViewSwitcher?: boolean | undefined;
-    readOnly?: boolean | undefined;
+    events?: any[] | undefined;
     saveStatus?: string | undefined;
     showLegend?: boolean | undefined;
+    showNavigation?: boolean | undefined;
+    showTodayButton?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    showPartialPreview?: boolean | undefined;
+    disablePastNavigation?: boolean | undefined;
 }, {
     dateSelect: CustomEvent<any>;
-    eventClick: CustomEvent<any>;
+    dayClick: CustomEvent<any>;
+    monthChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import { Calendar } from '@fullcalendar/core';
 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;
@@ -51,4 +50,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=Calendar.svelte.d.ts.map
+//# sourceMappingURL=MiniMonthCalendar.svelte.d.ts.map

package/dist/components/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwxBA;;;;;;;;;;;;;;;;;mBAAwR;6CAT3O,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/Card.svelte

@@ -1,9 +1,9 @@
 <script>
-  export let className;
+  export let className = '';
 </script>
 
 <section
-  class={`w-full bg-bg-primary p-3.5 sm:p-4 md:p-5 md:shadow md:rounded-lg ${className}`}
+  class={`w-full bg-bg-primary p-6 shadow rounded-[16px] ${className}`}
 >
   <slot />
 </section>

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

@@ -1,6 +1,6 @@
 export default Card;
 type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    className: any;
+    className?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -11,7 +11,7 @@ type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    className: any;
+    className?: string | undefined;
 }, {
     default: {};
 }>, {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;;eAAsH;sCAThF,KAAK,EAAE,KAAK;;;;;6CALL,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":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;;eAAqI;sCAT/F,KAAK,EAAE,KAAK;;;;;6CALL,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/Checkbox/Checkbox.svelte

@@ -0,0 +1,90 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {boolean} Whether the checkbox is checked */
+  export let checked = false;
+  /** @type {string} The value attribute */
+  export let value = "";
+  /** @type {string} Name attribute for form submission */
+  export let name = "";
+  /** @type {boolean} Whether the checkbox is disabled */
+  export let disabled = false;
+  /** @type {string} Color variant */
+  export let color = "primary";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch("change", { checked, value });
+  }
+
+  // Color classes matching flowbite-svelte
+  const colorClasses = {
+    primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
+    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+  };
+
+  $: inputClasses = [
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
+    "focus:ring-2",
+    colorClasses[color] || colorClasses.primary,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" ");
+</script>
+
+<label class="checkbox {className}" class:checkbox--disabled={disabled}>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    on:change={handleChange}
+    on:click
+    on:focus
+    on:blur
+    on:keydown
+    on:keyup
+    class={inputClasses}
+  />
+  {#if $$slots.default}
+    <span class="checkbox__label">
+      <slot />
+    </span>
+  {/if}
+</label>
+
+<style>
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  .checkbox--disabled {
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--text-primary, #1f2937);
+  }
+
+  :global(.dark) .checkbox__label,
+  :global(.micdrop.dark) .checkbox__label {
+    color: #f3f4f6;
+  }
+</style>

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

@@ -0,0 +1,64 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,KAAK,EAAE,KAAK;;;;;6CALL,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.svelte

@@ -1,79 +1,81 @@
 <script>
-  import { onMount } from 'svelte';
-  import SunIcon from './Icons/SunIcon.svelte';
-  import MoonIcon from './Icons/MoonIcon.svelte';
+  import { onMount } from "svelte";
+  import SunIcon from "./Icons/SunIcon.svelte";
+  import MoonIcon from "./Icons/MoonIcon.svelte";
 
   // Optional props for layout control
-  export let isExpanded = false;
-  export let containerSelector = '.performer-portal'; // Can be '.micdrop', '.performer-portal', etc.
+  // export let isExpanded = false; // Deprecated
+  export let containerSelector = ".performer-portal"; // Can be '.micdrop', '.performer-portal', etc.
 
   // Theme mode: 'auto' | 'light' | 'dark'
-  let themeMode = 'auto';
+  let themeMode = "auto";
   let isDark = false; // Current display state (for applying classes)
 
+  /** @param {boolean} enable */
   function setMicdropDarkClass(enable) {
     // Support both performers portal and micdrop frontend
     const container = document.querySelector(containerSelector);
     if (enable) {
-      if (container) container.classList.add('dark');
-      document.documentElement.classList.add('dark');
+      if (container) container.classList.add("dark");
+      document.documentElement.classList.add("dark");
     } else {
-      if (container) container.classList.remove('dark');
-      document.documentElement.classList.remove('dark');
+      if (container) container.classList.remove("dark");
+      document.documentElement.classList.remove("dark");
     }
   }
 
   function getSystemPreference() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
 
   function applyTheme() {
-    if (themeMode === 'auto') {
+    if (themeMode === "auto") {
       isDark = getSystemPreference();
     } else {
-      isDark = themeMode === 'dark';
+      isDark = themeMode === "dark";
     }
     setMicdropDarkClass(isDark);
   }
 
   onMount(() => {
     // Check localStorage for saved theme
-    const savedTheme = localStorage.getItem('theme');
+    const savedTheme = localStorage.getItem("theme");
 
-    if (savedTheme === 'dark' || savedTheme === 'light') {
+    if (savedTheme === "dark" || savedTheme === "light") {
       themeMode = savedTheme;
     } else {
       // No saved preference or 'auto' = auto mode
-      themeMode = 'auto';
+      themeMode = "auto";
     }
 
     applyTheme();
 
     // Listen for system preference changes (only matters in auto mode)
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
-      if (themeMode === 'auto') {
+      if (themeMode === "auto") {
         applyTheme();
       }
     };
-    mediaQuery.addEventListener('change', handleChange);
+    mediaQuery.addEventListener("change", handleChange);
 
     return () => {
-      mediaQuery.removeEventListener('change', handleChange);
+      mediaQuery.removeEventListener("change", handleChange);
     };
   });
 
+  /** @param {MouseEvent} event */
   function toggleTheme(event) {
     // Cycle: auto -> light -> dark -> auto
-    if (themeMode === 'auto') {
-      themeMode = 'light';
-      localStorage.setItem('theme', 'light');
-    } else if (themeMode === 'light') {
-      themeMode = 'dark';
-      localStorage.setItem('theme', 'dark');
+    if (themeMode === "auto") {
+      themeMode = "light";
+      localStorage.setItem("theme", "light");
+    } else if (themeMode === "light") {
+      themeMode = "dark";
+      localStorage.setItem("theme", "dark");
     } else {
-      themeMode = 'auto';
-      localStorage.removeItem('theme');
+      themeMode = "auto";
+      localStorage.removeItem("theme");
     }
 
     applyTheme();
@@ -85,22 +87,15 @@
   }
 
   // Tooltip text based on current mode
-  $: titleText = themeMode === 'auto'
-    ? 'Auto theme (following device) - click for light mode'
-    : themeMode === 'light'
-    ? 'Light mode - click for dark mode'
-    : 'Dark mode - click for auto';
+  $: titleText =
+    themeMode === "auto"
+      ? "Auto theme (following device) - click for light mode"
+      : themeMode === "light"
+        ? "Light mode - click for dark mode"
+        : "Dark mode - click for auto";
 </script>
 
-<div
-  class="transition-all flex items-center justify-center"
-  class:w-full={isExpanded || !isExpanded}
-  class:flex-row={isExpanded}
-  class:flex-col={!isExpanded}
-  class:py-4={isExpanded || !isExpanded}
-  class:gap-3={isExpanded}
-  class:gap-4={!isExpanded}
->
+<div class="transition-all flex items-center justify-center w-full py-4">
   <button
     on:click={toggleTheme}
     on:touchend={(e) => e.currentTarget.blur()}
@@ -109,17 +104,17 @@
     title={titleText}
   >
     <!-- Sun icon - shown when mode is 'light' -->
-    <span class="theme-icon sun-icon" class:hidden={themeMode !== 'light'}>
+    <span class="theme-icon sun-icon" class:hidden={themeMode !== "light"}>
       <SunIcon size="20" color="currentColor" />
     </span>
 
     <!-- Moon icon - shown when mode is 'dark' -->
-    <span class="theme-icon moon-icon" class:hidden={themeMode !== 'dark'}>
+    <span class="theme-icon moon-icon" class:hidden={themeMode !== "dark"}>
       <MoonIcon size="20" color="currentColor" />
     </span>
 
     <!-- Auto icon container - shown when mode is 'auto' -->
-    {#if themeMode === 'auto'}
+    {#if themeMode === "auto"}
       <div class="auto-icon-container">
         <!-- Light half (top-left) with sun -->
         <div class="auto-half auto-light-half">
@@ -133,12 +128,6 @@
     {/if}
   </button>
 
-  <!-- Label shown when expanded -->
-  {#if isExpanded}
-    <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-      {themeMode === 'auto' ? 'Auto' : themeMode === 'light' ? 'Light' : 'Dark'}
-    </span>
-  {/if}
 </div>
 
 <style>
@@ -194,7 +183,7 @@
     .theme-toggle-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
-      border-color: #0284FE;
+      border-color: #0284fe;
     }
 
     :global(.dark) .theme-toggle-btn:hover {

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

@@ -1,6 +1,5 @@
 export default DarkModeToggle;
 type DarkModeToggle = SvelteComponent<{
-    isExpanded?: boolean | undefined;
     containerSelector?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -8,7 +7,6 @@ type DarkModeToggle = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const DarkModeToggle: $$__sveltets_2_IsomorphicComponent<{
-    isExpanded?: boolean | undefined;
     containerSelector?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

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":";;;;;;;;;AAqJA;;;;;mBAA8J;6CATjH,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":";;;;;;;;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"}

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,207 @@
+<script>
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+
+  /** @type {boolean} Whether the drawer is visible */
+  export let show = false;
+  /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
+  export let hidden = true;
+  /** @type {string} Optional title for the drawer header */
+  export let title = "";
+  /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
+  export let placement = "left";
+  /** @type {string} Width of the drawer (for left/right placement) */
+  export let width = "320px";
+  /** @type {string} Height of the drawer (for top/bottom placement) */
+  export let height = "auto";
+  /** @type {number} Transition duration in ms */
+  export let duration = 200;
+  /** @type {boolean} Whether clicking the backdrop closes the drawer */
+  export let closeOnBackdropClick = true;
+  /** @type {boolean} Whether pressing Escape closes the drawer */
+  export let closeOnEscape = true;
+  /** @type {string} Optional id for the drawer element */
+  export let id = "";
+  /** @type {object|undefined} Custom transition params (flowbite API) */
+  export let transitionParams = undefined;
+
+  const dispatch = createEventDispatcher();
+
+  // Support both show and hidden props (flowbite uses hidden)
+  $: isVisible = show || !hidden;
+
+  function close() {
+    hidden = true;
+    show = false;
+    dispatch("close");
+  }
+
+  function handleBackdropClick(e) {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (closeOnEscape && e.key === "Escape" && isVisible) {
+      close();
+    }
+  }
+
+  // Calculate transition params based on placement (use custom if provided)
+  $: computedTransitionParams = transitionParams || (() => {
+    switch (placement) {
+      case "left":
+        return { x: -320, duration, easing: cubicOut };
+      case "right":
+        return { x: 320, duration, easing: cubicOut };
+      case "top":
+        return { y: -320, duration, easing: cubicOut };
+      case "bottom":
+        return { y: 320, duration, easing: cubicOut };
+      default:
+        return { x: -320, duration, easing: cubicOut };
+    }
+  })();
+
+  // Lock body scroll when drawer is open
+  $: if (typeof document !== "undefined") {
+    if (isVisible) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isVisible}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="drawer-backdrop"
+    on:click={handleBackdropClick}
+    transition:fade={{ duration: 150 }}
+  >
+    <div
+      {id}
+      class="drawer drawer--{placement}"
+      style="--drawer-width: {width}; --drawer-height: {height};"
+      on:click|stopPropagation
+      transition:fly={computedTransitionParams}
+    >
+      <!-- Optional header with title -->
+      {#if title || $$slots.header}
+        <div class="drawer__header">
+          {#if $$slots.header}
+            <slot name="header" />
+          {:else}
+            <h3 class="drawer__title">{title}</h3>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Content slot -->
+      <div class="drawer__content">
+        <slot />
+      </div>
+
+      <!-- Actions slot (optional) -->
+      {#if $$slots.actions}
+        <div class="drawer__actions">
+          <slot name="actions" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+    display: flex;
+    touch-action: none;
+  }
+
+  .drawer {
+    position: absolute;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Placement variants */
+  .drawer--left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer__header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+  }
+
+  .drawer__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    margin: 0;
+  }
+
+  .drawer__content {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__actions {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>