@getmicdrop/svelte-components 2.0.13 → 2.1.0

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/DarkModeToggle.svelte

@@ -11,6 +11,7 @@
   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);
@@ -63,7 +64,8 @@
     };
   });
 
-  function toggleTheme(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+  /** @param {MouseEvent} event */
+  function toggleTheme(event) {
     // Cycle: auto -> light -> dark -> auto
     if (themeMode === 'auto') {
       themeMode = 'light';

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":";;;;;;;;;AAuJA;;;;;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"}

package/dist/components/FAQs/FAQs.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let faqs = [];
+  export let title = "FAQs";
+  export let showTitle = true;
+
+  $: items = faqs.map(f =>
+    typeof f === 'string' ? { question: '', answer: f } : f
+  );
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class="section-title font-medium text-xl">{title}</h2>
+  {/if}
+
+  {#if items.length}
+    <div class="space-y-4">
+      {#each items as { question, answer }}
+        <div>
+          {#if question}
+            <p class="question-text text-[15px] font-medium mb-1">{question}</p>
+          {/if}
+          <p class="answer-text text-[15px] leading-relaxed">{answer}</p>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <p class="empty-text text-sm">No FAQs available.</p>
+  {/if}
+</div>
+
+<style>
+  /* Theme-responsive colors using CSS variables */
+  .section-title {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .question-text {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .answer-text {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .empty-text {
+    color: hsl(var(--Text-Tartiary));
+  }
+</style>

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

@@ -1,17 +1,17 @@
-export default QuarterView;
-type QuarterView = SvelteComponent<{
-    selectedDates: any;
-    saveStatus?: string | undefined;
-    currentevents?: any[] | undefined;
+export default FAQs;
+type FAQs = SvelteComponent<{
+    title?: string | undefined;
+    showTitle?: boolean | undefined;
+    faqs?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const QuarterView: $$__sveltets_2_IsomorphicComponent<{
-    selectedDates: any;
-    saveStatus?: string | undefined;
-    currentevents?: any[] | undefined;
+declare const FAQs: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    showTitle?: boolean | undefined;
+    faqs?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
@@ -28,4 +28,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=QuarterView.svelte.d.ts.map
+//# sourceMappingURL=FAQs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;;;;;;AA+CA;;;;;;mBAA8I;6CATjG,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/Input/Input.svelte

@@ -1,6 +1,7 @@
 <script>
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
+  import { createEventDispatcher, onDestroy } from "svelte";
   import WarningIcon from "../Icons/WarningIcon.svelte";
 
   export let required = false;
@@ -41,8 +42,16 @@
   export let showErrors = false; // Show errors immediately (bypass touched requirement)
   export let disableBuiltInValidation = false; // When true, disables the built-in blur validation (use for custom validation)
 
+  // Instant search props
+  export let instantSearch = false; // Enable search-as-you-type with debouncing
+  export let debounceMs = 250; // Debounce delay for instant search
+  export let minSearchChars = 2; // Minimum characters before search triggers
+  export let showClearButton = false; // Show clear (X) button when input has value
+
   let inputValue = value;
   let inputElement;
+  let debounceTimer;
+  const dispatch = createEventDispatcher();
 
   // Derive inputmode from type if not explicitly set
   $: computedInputmode = inputmode || getInputmodeFromType(type);
@@ -163,8 +172,56 @@
 
     // Update exported value for parent bind:value
     value = inputValue;
+
+    // Instant search functionality
+    if (instantSearch) {
+      clearTimeout(debounceTimer);
+
+      // Dispatch immediately if cleared
+      if (inputValue.length === 0) {
+        dispatch('search', { query: '' });
+        return;
+      }
+
+      // Only search if we have enough characters
+      if (inputValue.length >= minSearchChars) {
+        debounceTimer = setTimeout(() => {
+          dispatch('search', { query: inputValue });
+        }, debounceMs);
+      }
+    }
   };
 
+  // Clear input (for instant search clear button)
+  function clearInput() {
+    inputValue = '';
+    value = '';
+    clearTimeout(debounceTimer);
+    if (instantSearch) {
+      dispatch('search', { query: '' });
+    }
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+
+  // Handle keyboard shortcuts for instant search
+  function handleSearchKeyDown(event) {
+    if (instantSearch) {
+      if (event.key === 'Enter') {
+        clearTimeout(debounceTimer);
+        dispatch('search', { query: inputValue });
+      }
+      if (event.key === 'Escape') {
+        clearInput();
+      }
+    }
+  }
+
+  onDestroy(() => {
+    clearTimeout(debounceTimer);
+  });
+
   const isStrongPassword = (password) => {
     const minLength = 8;
     const hasUpperCase = /[A-Z]/.test(password);
@@ -399,7 +456,7 @@
       </div>
     {:else}
       <!-- Standard Input Layout -->
-      <div class="flex items-center">
+      <div class="relative flex items-center w-full">
         <input
           bind:this={inputElement}
           {id}
@@ -411,9 +468,10 @@
           on:change={checkForAutofill}
           on:animationstart={handleAnimationStart}
           on:blur={handleBlur}
+          on:keydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="input-field {icon
+          class="input-field flex-1 {icon || (showClearButton && inputValue)
             ? 'pr-10'
             : ''} {getContentFloatClass()} {displayErrorText
             ? 'input-error'
@@ -426,7 +484,26 @@
           {autofocus}
           inputmode={computedInputmode}
         />
-        {#if controlled && (buttonIcon || buttonText)}
+        {#if showClearButton && inputValue}
+          <button
+            type="button"
+            on:click={clearInput}
+            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 input-clear-button"
+            aria-label="Clear input"
+            tabindex="-1"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+              />
+            </svg>
+          </button>
+        {:else if controlled && (buttonIcon || buttonText)}
           <button
             type="button"
             on:click={handleButtonClick}
@@ -447,6 +524,13 @@
             {/if}
           </button>
         {/if}
+        {#if icon && type !== "textarea" && !(showClearButton && inputValue)}
+          <img
+            src={icon}
+            alt="Input icon"
+            class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2 text-Text-Primary"
+          />
+        {/if}
       </div>
     {/if}
 
@@ -467,17 +551,9 @@
         {#if helperIcon || hintIcon}
           <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
         {/if}
-        <span>{helperText || hintText}</span>
+        <span>{@html helperText || hintText}</span>
       </div>
     {/if}
-
-    {#if icon && type !== "textarea"}
-      <img
-        src={icon}
-        alt="Input icon"
-        class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2 text-Text-Primary"
-      />
-    {/if}
   </div>
 </div>
 
@@ -549,6 +625,18 @@
     cursor: not-allowed;
   }
 
+  .input-clear-button {
+    color: var(--input-text-placeholder);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+  }
+
+  .input-clear-button:hover {
+    color: var(--input-text);
+  }
+
   .input-field {
     padding: 0.25rem 0.625rem;
     height: 40px;

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

@@ -36,7 +36,13 @@ type Input = SvelteComponent<{
     inputmode?: null | undefined;
     showErrors?: boolean | undefined;
     disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
 }, {
+    search: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
@@ -78,7 +84,13 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     inputmode?: null | undefined;
     showErrors?: boolean | undefined;
     disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
 }, {
+    search: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 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> {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAkjB;6CATrgB,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":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAknB;6CATrkB,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/Input/OTPInput.svelte

@@ -89,7 +89,7 @@
       {disabled}
       aria-label="Digit {index + 1} of {length}"
       aria-describedby="otp-instructions"
-      class="otp-input w-12 h-12 md:w-14 md:h-14 text-center text-xl md:text-2xl text-Text-Primary font-semibold border-2 border-stroke-Primary rounded-xl focus:border-primary-700 focus:outline-none transition-colors bg-BG-Primary disabled:bg-BG-Secondary disabled:cursor-not-allowed"
+      class="otp-input w-12 h-12 md:w-14 md:h-14 text-center text-xl md:text-2xl text-text-primary font-semibold border-2 border-stroke-secondary rounded-xl focus:border-brand-primary focus:outline-none transition-colors bg-bg-tertiary disabled:bg-bg-quaternary disabled:cursor-not-allowed"
       on:input={(e) => handleInput(index, e)}
       on:keydown={(e) => handleKeyDown(index, e)}
       on:paste={handlePaste}

package/dist/components/MonthSwitcher/MonthSwitcher.svelte

@@ -0,0 +1,206 @@
+<script>
+  import ChevronLeft from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
+  import ChevronRight from 'carbon-icons-svelte/lib/ChevronRight.svelte';
+
+  // Use LOCAL time, not UTC - consistent with how calendar displays dates
+  const today = new Date();
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  export let currentYear = todayLocalYear;
+  export let currentMonth = todayLocalMonth;
+  export let handleNext = () => {};
+  export let handlePrev = () => {};
+  export let handleToday = () => {}; // Navigate back to current month
+  export let disablePastNavigation = true; // Prevent navigating to past months by default
+
+  $: isAtCurrentMonth =
+    currentYear === todayLocalYear && currentMonth === todayLocalMonth;
+
+  $: canGoPrev = !disablePastNavigation || !isAtCurrentMonth;
+
+  // Track pressed state for touch animations
+  let prevPressed = false;
+  let nextPressed = false;
+  let todayPressed = false;
+
+  // Haptic feedback for mobile
+  function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined') return;
+
+    // iOS WebKit
+    if (window.webkit?.messageHandlers?.haptic) {
+      window.webkit.messageHandlers.haptic.postMessage(style);
+      return;
+    }
+
+    // Taptic Engine
+    if (window.TapticEngine) {
+      window.TapticEngine.impact({ style });
+      return;
+    }
+
+    // Android fallback
+    if (navigator.vibrate) {
+      navigator.vibrate(style === 'light' ? 10 : 20);
+    }
+  }
+
+  function handlePrevClick() {
+    if (canGoPrev) {
+      triggerHaptic('light');
+      handlePrev();
+    }
+  }
+
+  function handleNextClick() {
+    triggerHaptic('light');
+    handleNext();
+  }
+
+  function handleTodayClick() {
+    triggerHaptic('light');
+    handleToday();
+  }
+</script>
+
+<header class="month-switcher w-full flex items-center justify-between select-none">
+  <h2 class="month-title text-3xl font-semibold">
+    {new Intl.DateTimeFormat("en", {
+      month: "long",
+    }).format(new Date(currentYear, currentMonth, 1))}
+  </h2>
+  <div class="flex items-center gap-2">
+    <button
+      class="nav-btn outline-none p-3 -m-1.5 rounded-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      class:pressed={prevPressed}
+      on:click={handlePrevClick}
+      on:touchstart={() => prevPressed = true}
+      on:touchend={() => prevPressed = false}
+      on:touchcancel={() => prevPressed = false}
+      on:mousedown={() => prevPressed = true}
+      on:mouseup={() => prevPressed = false}
+      on:mouseleave={() => prevPressed = false}
+      disabled={!canGoPrev}
+      aria-label="Previous month"
+    >
+      <ChevronLeft size={20} />
+    </button>
+    <button
+      class="today-btn text-sm font-medium px-3 py-1 rounded-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      class:pressed={todayPressed}
+      on:click={handleTodayClick}
+      on:touchstart={() => todayPressed = true}
+      on:touchend={() => todayPressed = false}
+      on:touchcancel={() => todayPressed = false}
+      on:mousedown={() => todayPressed = true}
+      on:mouseup={() => todayPressed = false}
+      on:mouseleave={() => todayPressed = false}
+      disabled={isAtCurrentMonth}
+      aria-label="Go to current month"
+    >
+      Today
+    </button>
+    <button
+      class="nav-btn cursor-pointer outline-none p-3 -m-1.5 rounded-full"
+      class:pressed={nextPressed}
+      on:click={handleNextClick}
+      on:touchstart={() => nextPressed = true}
+      on:touchend={() => nextPressed = false}
+      on:touchcancel={() => nextPressed = false}
+      on:mousedown={() => nextPressed = true}
+      on:mouseup={() => nextPressed = false}
+      on:mouseleave={() => nextPressed = false}
+      aria-label="Next month"
+    >
+      <ChevronRight size={20} />
+    </button>
+  </div>
+</header>
+
+<style>
+  /* Theme-responsive colors using CSS variables */
+  .nav-btn {
+    background: transparent;
+    border: none;
+    color: hsl(var(--Stroke-Primary));
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    transition: transform 0.1s ease, color 0.15s ease, background-color 0.15s ease;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .nav-btn:hover:not(:disabled) {
+      background-color: hsl(var(--BG-Secondary));
+      color: hsl(var(--Text-Primary));
+    }
+  }
+
+  .nav-btn.pressed:not(:disabled) {
+    transform: scale(0.9);
+    background-color: hsl(var(--BG-Secondary));
+    color: hsl(var(--Text-Primary));
+  }
+
+  .nav-btn:focus {
+    outline: none;
+  }
+
+  .nav-btn:focus-visible {
+    outline: 2px solid hsl(var(--Brand-Primary));
+    outline-offset: 2px;
+  }
+
+  .month-title {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .month-switcher {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
+  }
+
+  .today-btn {
+    background: transparent;
+    border: 1px solid hsl(var(--Stroke-Primary));
+    color: hsl(var(--Text-Primary));
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .today-btn:hover:not(:disabled) {
+      background-color: hsl(var(--Brand-Primary));
+      color: white;
+    }
+  }
+
+  .today-btn.pressed:not(:disabled) {
+    transform: scale(0.95);
+    background-color: hsl(var(--Brand-Primary));
+    color: white;
+  }
+
+  .today-btn:disabled {
+    opacity: 0.4;
+    border-color: hsl(var(--Stroke-Primary));
+    color: hsl(var(--Text-Tertiary));
+  }
+
+  .today-btn:focus {
+    outline: none;
+  }
+
+  .today-btn:focus-visible {
+    outline: 2px solid hsl(var(--Brand-Primary));
+    outline-offset: 2px;
+  }
+</style>

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

@@ -0,0 +1,37 @@
+export default MonthSwitcher;
+type MonthSwitcher = SvelteComponent<{
+    disablePastNavigation?: boolean | undefined;
+    currentYear?: number | undefined;
+    currentMonth?: number | undefined;
+    handleNext?: (() => void) | undefined;
+    handlePrev?: (() => void) | undefined;
+    handleToday?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MonthSwitcher: $$__sveltets_2_IsomorphicComponent<{
+    disablePastNavigation?: boolean | undefined;
+    currentYear?: number | undefined;
+    currentMonth?: number | undefined;
+    handleNext?: (() => void) | undefined;
+    handlePrev?: (() => void) | undefined;
+    handleToday?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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=MonthSwitcher.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAwGA;;;;;;;;;mBAAyN;6CAT5K,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"}