@getmicdrop/svelte-components 2.6.3 → 2.8.0

package/dist/components/Dropdown/SelectDropdown.svelte

@@ -0,0 +1,301 @@
+<script>
+  /**
+   * SelectDropdown - A self-contained dropdown with trigger button and option selection.
+   * Includes full keyboard navigation (Arrow keys, Home, End, Escape).
+   *
+   * @example
+   * <SelectDropdown
+   *   options={[{ label: 'Option 1', value: 'opt1' }, { label: 'Option 2', value: 'opt2' }]}
+   *   bind:selected
+   *   placeholder="Select an option"
+   *   on:select={(e) => console.log(e.detail)}
+   * />
+   */
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+
+  /** @type {Array<{label: string, value: string}>} Options to display */
+  export let options = [];
+  /** @type {{label: string, value: string}|null} Currently selected option */
+  export let selected = null;
+  /** @type {string} Placeholder text when no option is selected */
+  export let placeholder = "Select";
+  /** @type {string} Additional CSS classes for the container */
+  let className = "";
+  export { className as class };
+  /** @type {boolean} Whether the dropdown is disabled */
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  let isOpen = false;
+  let triggerRef;
+  let menuRef;
+  let focusedIndex = -1;
+  let optionElements = [];
+
+  async function toggleDropdown() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = -1;
+      await tick();
+      updateOptionElements();
+    }
+  }
+
+  function updateOptionElements() {
+    if (menuRef) {
+      optionElements = Array.from(menuRef.querySelectorAll('[role="option"]'));
+    }
+  }
+
+  function focusOption(index) {
+    if (optionElements.length === 0) return;
+    if (index < 0) index = optionElements.length - 1;
+    if (index >= optionElements.length) index = 0;
+    focusedIndex = index;
+    optionElements[focusedIndex]?.focus();
+  }
+
+  function selectOption(option) {
+    selected = option;
+    dispatch("select", option);
+    isOpen = false;
+    triggerRef?.focus();
+  }
+
+  function handleClickOutside(event) {
+    if (
+      triggerRef &&
+      !triggerRef.contains(event.target) &&
+      menuRef &&
+      !menuRef.contains(event.target)
+    ) {
+      isOpen = false;
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (!isOpen) return;
+
+    // Only handle if event originated from within this dropdown
+    if (!menuRef?.contains(event.target) && !triggerRef?.contains(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        isOpen = false;
+        triggerRef?.focus();
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        focusOption(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusOption(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusOption(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusOption(optionElements.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        isOpen = false;
+        break;
+    }
+  }
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("click", handleClickOutside);
+      window.addEventListener("keydown", handleKeyDown);
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("keydown", handleKeyDown);
+    }
+  });
+</script>
+
+<div class="select-dropdown {className}">
+  <button
+    bind:this={triggerRef}
+    type="button"
+    class="select-dropdown__trigger"
+    class:select-dropdown__trigger--disabled={disabled}
+    on:click|preventDefault={toggleDropdown}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={placeholder}
+    {disabled}
+  >
+    <span class="select-dropdown__value">
+      {selected?.label || placeholder}
+    </span>
+    <svg
+      class="select-dropdown__icon"
+      class:select-dropdown__icon--open={isOpen}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M19 9l-7 7-7-7"
+      />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={menuRef}
+      class="select-dropdown__menu"
+      role="listbox"
+      aria-label={placeholder}
+    >
+      {#each options as option}
+        <button
+          type="button"
+          class="select-dropdown__option"
+          class:select-dropdown__option--selected={selected?.value === option.value}
+          on:click|preventDefault={() => selectOption(option)}
+          role="option"
+          aria-selected={selected?.value === option.value}
+        >
+          {option.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .select-dropdown {
+    position: relative;
+    display: inline-block;
+    font-size: 0.75rem;
+  }
+
+  .select-dropdown__trigger {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    text-align: left;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .select-dropdown__trigger:hover:not(:disabled) {
+    border-color: hsl(var(--Stroke-Secondary, 220 13% 75%));
+  }
+
+  .select-dropdown__trigger:focus {
+    outline: none;
+    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    box-shadow: 0 0 0 2px hsl(var(--Brand-Primary, 221 83% 53%) / 0.2);
+  }
+
+  .select-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select-dropdown__value {
+    flex: 1;
+  }
+
+  .select-dropdown__icon {
+    width: 1rem;
+    height: 1rem;
+    margin-left: 0.5rem;
+    transition: transform 0.15s ease;
+  }
+
+  .select-dropdown__icon--open {
+    transform: rotate(180deg);
+  }
+
+  .select-dropdown__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    margin-top: 0.25rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .select-dropdown__menu::-webkit-scrollbar {
+    display: none;
+  }
+
+  .select-dropdown__option {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    text-align: left;
+    background: transparent;
+    border: none;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .select-dropdown__option:hover {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .select-dropdown__option:focus {
+    outline: none;
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .select-dropdown__option--selected {
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%) / 0.1);
+    color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  /* Dark mode */
+  :global(.dark) .select-dropdown__trigger {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+
+  :global(.dark) .select-dropdown__menu {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+
+  :global(.dark) .select-dropdown__option {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .select-dropdown__option:hover,
+  :global(.dark) .select-dropdown__option:focus {
+    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
+  }
+</style>

package/dist/components/Dropdown/SelectDropdown.svelte.d.ts

@@ -0,0 +1,51 @@
+export default SelectDropdown;
+type SelectDropdown = SvelteComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+    placeholder?: string | undefined;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SelectDropdown: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+    placeholder?: string | undefined;
+}, {
+    select: 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> {
+    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=SelectDropdown.svelte.d.ts.map

package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA6KA;;;;eAdyB,MAAM;eAAS,MAAM;;;eAC3B,MAAM;eAAS,MAAM;;;;;;;mBAa2I;6CATtI,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/EmptyState/EmptyState.svelte

@@ -0,0 +1,80 @@
+<script>
+  /**
+   * EmptyState - Display an empty state message with optional icon
+   *
+   * @example
+   * <EmptyState message="No results found" />
+   * <EmptyState message="No events" subtext="Create your first event to get started" />
+   */
+
+  /** @type {string} Main message to display */
+  export let message = 'No results found';
+  /** @type {string} Secondary descriptive text */
+  export let subtext = '';
+  /** @type {any} Icon component or image path */
+  export let icon = null;
+  /** @type {'component' | 'image'} Type of icon provided */
+  export let iconType = 'component';
+  /** @type {string} Size classes for the icon */
+  export let iconSize = 'w-20 h-20';
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class="empty-state {className}">
+  {#if icon}
+    {#if iconType === 'component'}
+      <svelte:component this={icon} class="empty-state__icon {iconSize}" />
+    {:else if iconType === 'image'}
+      <img src={icon} alt="" class="empty-state__icon {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class="empty-state__message">{message}</h3>
+  {#if subtext}
+    <p class="empty-state__subtext">{subtext}</p>
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+  }
+
+  .empty-state__icon {
+    margin-bottom: 0.75rem;
+    color: hsl(var(--Text-Tertiary, 220 9% 46%));
+  }
+
+  .empty-state__message {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary, 220 13% 18%));
+    margin: 0;
+  }
+
+  .empty-state__subtext {
+    font-size: 0.875rem;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    margin: 0.25rem 0 0;
+  }
+
+  /* Dark mode */
+  :global(.dark) .empty-state__icon {
+    color: hsl(var(--Text-Tertiary, 220 9% 60%));
+  }
+
+  :global(.dark) .empty-state__message {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .empty-state__subtext {
+    color: hsl(var(--Text-Secondary, 220 9% 70%));
+  }
+</style>

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

@@ -1,35 +1,31 @@
-export namespace meta {
-    export let title: string;
-    export { QuarterView as component };
-    export namespace argTypes {
-        namespace currentevents {
-            let control: string;
-        }
-        namespace selectedDates {
-            let control_1: string;
-            export { control_1 as control };
-        }
-    }
-}
-export default QuarterView;
-type QuarterView = SvelteComponent<{
-    [x: string]: never;
+export default EmptyState;
+type EmptyState = SvelteComponent<{
+    class?: string | undefined;
+    message?: string | undefined;
+    icon?: any;
+    subtext?: string | undefined;
+    iconType?: "image" | "component" | undefined;
+    iconSize?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const QuarterView: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
+declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    message?: string | undefined;
+    icon?: any;
+    subtext?: string | undefined;
+    iconType?: "image" | "component" | undefined;
+    iconSize?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import QuarterView from "./QuarterView.svelte";
 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: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -38,4 +34,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=QuarterView.stories.svelte.d.ts.map
+//# sourceMappingURL=EmptyState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/EmptyState/EmptyState.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA6DA;;;WAbW,GAAG;;;;;;mBAaoK;6CATrI,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/ErrorDisplay.svelte.d.ts

@@ -3,9 +3,9 @@ type ErrorDisplay = SvelteComponent<{
     className?: string | undefined;
     error?: string | undefined;
     show?: boolean | undefined;
-    shake?: boolean | undefined;
     icon?: string | undefined;
     iconSize?: string | undefined;
+    shake?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -15,9 +15,9 @@ declare const ErrorDisplay: $$__sveltets_2_IsomorphicComponent<{
     className?: string | undefined;
     error?: string | undefined;
     show?: boolean | undefined;
-    shake?: boolean | undefined;
     icon?: string | undefined;
     iconSize?: string | undefined;
+    shake?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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"}