@getmicdrop/svelte-components 5.20.1 → 5.20.2

package/dist/calendar/FAQs/FAQs.svelte

@@ -1,88 +1,88 @@
-<script>
-  import { ChevronUpOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  const defaultLabels = {
-    title: 'FAQs',
-    emptyMessage: 'No FAQs available.',
-    itemFallback: 'Item',
-  };
-
-  let {
-    faqs = [],
-    title = undefined,
-    showTitle = true,
-    accordion = false,
-    /** @type {string} Text shown when no FAQs are available */
-    emptyMessage = undefined,
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-  let effectiveTitle = $derived(title ?? labels.title);
-  let effectiveEmptyMessage = $derived(emptyMessage ?? labels.emptyMessage);
-
-  let openIndex = $state(null);
-
-  let items = $derived(faqs.map((f) =>
-    typeof f === 'string' ? { question: '', answer: f } : f
-  ));
-
-  function toggleAccordion(index) {
-    openIndex = openIndex === index ? null : index;
-  }
-</script>
-
-<div class="flex flex-col gap-3">
-  {#if showTitle}
-    <h2 class={typography.h2}>{effectiveTitle}</h2>
-  {/if}
-
-  {#if items.length}
-    {#if accordion}
-      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
-        {#each items as { question, answer }, index}
-          <div>
-            <h3>
-              <button
-                type="button"
-                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
-                  {index === 0 ? 'rounded-t-lg' : ''}
-                  {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
-                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
-                onclick={() => toggleAccordion(index)}
-                aria-expanded={openIndex === index}
-                aria-controls="accordion-body-{index}"
-              >
-                <span>{question || `${labels.itemFallback} ${index + 1}`}</span>
-                <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}" aria-hidden="true" />
-              </button>
-            </h3>
-            <div
-              id="accordion-body-{index}"
-              class="{openIndex === index ? '' : 'hidden'}"
-              aria-labelledby="accordion-heading-{index}"
-            >
-              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
-                <p class="{typography.smMuted} leading-relaxed">{answer}</p>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {:else}
-      <div class="space-y-4">
-        {#each items as { question, answer }}
-          <div>
-            {#if question}
-              <p class="{typography.label} mb-1">{question}</p>
-            {/if}
-            <p class="{typography.smMuted} leading-relaxed">{answer}</p>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  {:else}
-    <p class="{typography.smMuted}">{effectiveEmptyMessage}</p>
-  {/if}
-</div>
+<script>
+  import { ChevronUpOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    title: 'FAQs',
+    emptyMessage: 'No FAQs available.',
+    itemFallback: 'Item',
+  };
+
+  let {
+    faqs = [],
+    title = undefined,
+    showTitle = true,
+    accordion = false,
+    /** @type {string} Text shown when no FAQs are available */
+    emptyMessage = undefined,
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+  let effectiveTitle = $derived(title ?? labels.title);
+  let effectiveEmptyMessage = $derived(emptyMessage ?? labels.emptyMessage);
+
+  let openIndex = $state(null);
+
+  let items = $derived(faqs.map((f) =>
+    typeof f === 'string' ? { question: '', answer: f } : f
+  ));
+
+  function toggleAccordion(index) {
+    openIndex = openIndex === index ? null : index;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class={typography.h2}>{effectiveTitle}</h2>
+  {/if}
+
+  {#if items.length}
+    {#if accordion}
+      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
+        {#each items as { question, answer }, index}
+          <div>
+            <h3>
+              <button
+                type="button"
+                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
+                  {index === 0 ? 'rounded-t-lg' : ''}
+                  {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
+                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
+                onclick={() => toggleAccordion(index)}
+                aria-expanded={openIndex === index}
+                aria-controls="accordion-body-{index}"
+              >
+                <span>{question || `${labels.itemFallback} ${index + 1}`}</span>
+                <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}" aria-hidden="true" />
+              </button>
+            </h3>
+            <div
+              id="accordion-body-{index}"
+              class="{openIndex === index ? '' : 'hidden'}"
+              aria-labelledby="accordion-heading-{index}"
+            >
+              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
+                <p class="{typography.smMuted} leading-relaxed">{answer}</p>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="space-y-4">
+        {#each items as { question, answer }}
+          <div>
+            {#if question}
+              <p class="{typography.label} mb-1">{question}</p>
+            {/if}
+            <p class="{typography.smMuted} leading-relaxed">{answer}</p>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {:else}
+    <p class="{typography.smMuted}">{effectiveEmptyMessage}</p>
+  {/if}
+</div>

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -1,140 +1,140 @@
-<script>
-  import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-  import { formatMonth } from '../../datetime/format';
-
-  const monthNames = [
-    'January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December'
-  ];
-
-  const defaultLabels = {
-    today: 'Today',
-    previousMonth: 'Previous month',
-    goToCurrentMonth: 'Go to current month',
-    nextMonth: 'Next month',
-  };
-
-  const today = new Date();
-  const todayLocalMonth = today.getMonth();
-  const todayLocalYear = today.getFullYear();
-
-  let {
-    currentYear = todayLocalYear,
-    currentMonth = todayLocalMonth,
-    handleNext = () => {},
-    handlePrev = () => {},
-    handleToday = () => {},
-    disablePastNavigation = true,
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let isAtCurrentMonth = $derived(
-    currentYear === todayLocalYear && currentMonth === todayLocalMonth
-  );
-
-  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
-
-  let prevPressed = $state(false);
-  let nextPressed = $state(false);
-  let todayPressed = $state(false);
-
-  function triggerHaptic(style = 'light') {
-    if (typeof window === 'undefined') return;
-
-    if (window.webkit?.messageHandlers?.haptic) {
-      window.webkit.messageHandlers.haptic.postMessage(style);
-      return;
-    }
-
-    if (window.TapticEngine) {
-      window.TapticEngine.impact({ style });
-      return;
-    }
-
-    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="w-full flex items-center justify-between select-none">
-  <h2 class="{typography.h1} text-3xl">
-    {formatMonth(new Date(currentYear, currentMonth, 1).toISOString(), 'UTC', false)}
-  </h2>
-  <div class="flex items-center gap-2">
-    <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-      class:scale-90={prevPressed}
-      class:bg-gray-100={prevPressed}
-      class:dark:bg-gray-700={prevPressed}
-      class:text-gray-900={prevPressed}
-      class:dark:text-white={prevPressed}
-      onclick={handlePrevClick}
-      ontouchstart={() => prevPressed = true}
-      ontouchend={() => prevPressed = false}
-      ontouchcancel={() => prevPressed = false}
-      onmousedown={() => prevPressed = true}
-      onmouseup={() => prevPressed = false}
-      onmouseleave={() => prevPressed = false}
-      disabled={!canGoPrev}
-      aria-label={labels.previousMonth}
-    >
-      <ChevronLeftOutline class="w-5 h-5" />
-    </button>
-    <button
-      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
-      class:scale-95={todayPressed}
-      class:bg-blue-700={todayPressed}
-      class:text-white={todayPressed}
-      onclick={handleTodayClick}
-      ontouchstart={() => todayPressed = true}
-      ontouchend={() => todayPressed = false}
-      ontouchcancel={() => todayPressed = false}
-      onmousedown={() => todayPressed = true}
-      onmouseup={() => todayPressed = false}
-      onmouseleave={() => todayPressed = false}
-      disabled={isAtCurrentMonth}
-      aria-label={labels.goToCurrentMonth}
-    >
-      {labels.today}
-    </button>
-    <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
-      class:scale-90={nextPressed}
-      class:bg-gray-100={nextPressed}
-      class:dark:bg-gray-700={nextPressed}
-      class:text-gray-900={nextPressed}
-      class:dark:text-white={nextPressed}
-      onclick={handleNextClick}
-      ontouchstart={() => nextPressed = true}
-      ontouchend={() => nextPressed = false}
-      ontouchcancel={() => nextPressed = false}
-      onmousedown={() => nextPressed = true}
-      onmouseup={() => nextPressed = false}
-      onmouseleave={() => nextPressed = false}
-      aria-label={labels.nextMonth}
-    >
-      <ChevronRightOutline class="w-5 h-5" />
-    </button>
-  </div>
-</header>
+<script>
+  import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+  import { formatMonth } from '../../datetime/format';
+
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  const defaultLabels = {
+    today: 'Today',
+    previousMonth: 'Previous month',
+    goToCurrentMonth: 'Go to current month',
+    nextMonth: 'Next month',
+  };
+
+  const today = new Date();
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  let {
+    currentYear = todayLocalYear,
+    currentMonth = todayLocalMonth,
+    handleNext = () => {},
+    handlePrev = () => {},
+    handleToday = () => {},
+    disablePastNavigation = true,
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let isAtCurrentMonth = $derived(
+    currentYear === todayLocalYear && currentMonth === todayLocalMonth
+  );
+
+  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
+
+  let prevPressed = $state(false);
+  let nextPressed = $state(false);
+  let todayPressed = $state(false);
+
+  function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined') return;
+
+    if (window.webkit?.messageHandlers?.haptic) {
+      window.webkit.messageHandlers.haptic.postMessage(style);
+      return;
+    }
+
+    if (window.TapticEngine) {
+      window.TapticEngine.impact({ style });
+      return;
+    }
+
+    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="w-full flex items-center justify-between select-none">
+  <h2 class="{typography.h1} text-3xl">
+    {formatMonth(new Date(currentYear, currentMonth, 1).toISOString(), 'UTC', false)}
+  </h2>
+  <div class="flex items-center gap-2">
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      class:scale-90={prevPressed}
+      class:bg-gray-100={prevPressed}
+      class:dark:bg-gray-700={prevPressed}
+      class:text-gray-900={prevPressed}
+      class:dark:text-white={prevPressed}
+      onclick={handlePrevClick}
+      ontouchstart={() => prevPressed = true}
+      ontouchend={() => prevPressed = false}
+      ontouchcancel={() => prevPressed = false}
+      onmousedown={() => prevPressed = true}
+      onmouseup={() => prevPressed = false}
+      onmouseleave={() => prevPressed = false}
+      disabled={!canGoPrev}
+      aria-label={labels.previousMonth}
+    >
+      <ChevronLeftOutline class="w-5 h-5" />
+    </button>
+    <button
+      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
+      class:scale-95={todayPressed}
+      class:bg-blue-700={todayPressed}
+      class:text-white={todayPressed}
+      onclick={handleTodayClick}
+      ontouchstart={() => todayPressed = true}
+      ontouchend={() => todayPressed = false}
+      ontouchcancel={() => todayPressed = false}
+      onmousedown={() => todayPressed = true}
+      onmouseup={() => todayPressed = false}
+      onmouseleave={() => todayPressed = false}
+      disabled={isAtCurrentMonth}
+      aria-label={labels.goToCurrentMonth}
+    >
+      {labels.today}
+    </button>
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+      class:scale-90={nextPressed}
+      class:bg-gray-100={nextPressed}
+      class:dark:bg-gray-700={nextPressed}
+      class:text-gray-900={nextPressed}
+      class:dark:text-white={nextPressed}
+      onclick={handleNextClick}
+      ontouchstart={() => nextPressed = true}
+      ontouchend={() => nextPressed = false}
+      ontouchcancel={() => nextPressed = false}
+      onmousedown={() => nextPressed = true}
+      onmouseup={() => nextPressed = false}
+      onmouseleave={() => nextPressed = false}
+      aria-label={labels.nextMonth}
+    >
+      <ChevronRightOutline class="w-5 h-5" />
+    </button>
+  </div>
+</header>