@getmicdrop/svelte-components 2.4.0 → 2.6.0

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

@@ -1,6 +1,7 @@
 export default Checkbox;
 type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string | undefined;
+    color?: string | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     value?: string | undefined;
@@ -8,6 +9,11 @@ type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 }, {
     default: {};
 }>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -18,6 +24,7 @@ type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 };
 declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string | undefined;
+    color?: string | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     value?: string | undefined;
@@ -25,6 +32,11 @@ declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
 }, {
     default: {};
 }>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;;;eAAyK;sCATnI,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":"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/Dropdown/Dropdown.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
 
   /** @type {boolean} Whether the dropdown is open */
   export let open = false;
@@ -10,33 +10,96 @@
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
+  /** @type {string} Accessible label for the dropdown menu */
+  export let ariaLabel = "Menu";
 
   const dispatch = createEventDispatcher();
 
   let dropdownRef;
+  let focusedIndex = -1;
+  let menuItems = [];
+
+  // Update menu items when dropdown opens
+  async function updateMenuItems() {
+    await tick();
+    if (dropdownRef) {
+      menuItems = Array.from(dropdownRef.querySelectorAll('[role="menuitem"]:not([disabled])'));
+    }
+  }
+
+  // Focus a specific menu item by index
+  function focusItem(index) {
+    if (menuItems.length === 0) return;
+    if (index < 0) index = menuItems.length - 1;
+    if (index >= menuItems.length) index = 0;
+    focusedIndex = index;
+    menuItems[focusedIndex]?.focus();
+  }
+
+  // Get trigger element (previous sibling)
+  function getTriggerElement() {
+    const parent = dropdownRef?.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children);
+      const dropdownIndex = siblings.indexOf(dropdownRef);
+      if (dropdownIndex > 0) {
+        return siblings[dropdownIndex - 1];
+      }
+    }
+    return null;
+  }
 
   function handleClickOutside(event) {
     if (dropdownRef && !dropdownRef.contains(event.target)) {
-      // Check if click was on the trigger button (previous sibling)
-      const parent = dropdownRef.parentElement;
-      if (parent) {
-        const siblings = Array.from(parent.children);
-        const dropdownIndex = siblings.indexOf(dropdownRef);
-        if (dropdownIndex > 0) {
-          const trigger = siblings[dropdownIndex - 1];
-          if (trigger.contains(event.target)) {
-            return; // Let the trigger handle toggling
-          }
-        }
+      const trigger = getTriggerElement();
+      if (trigger?.contains(event.target)) {
+        return; // Let the trigger handle toggling
       }
       open = false;
     }
   }
 
   function handleKeydown(event) {
-    if (event.key === "Escape" && open) {
-      open = false;
+    if (!open) return;
+
+    // Only handle if event originated from within this dropdown or its trigger
+    const trigger = getTriggerElement();
+    if (!dropdownRef?.contains(event.target) && !trigger?.contains(event.target)) {
+      return;
     }
+
+    switch (event.key) {
+      case "Escape":
+        open = false;
+        trigger?.focus();
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        focusItem(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusItem(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusItem(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusItem(menuItems.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        open = false;
+        break;
+    }
+  }
+
+  // Watch for open state changes
+  $: if (open) {
+    focusedIndex = -1;
+    updateMenuItems();
   }
 
   onMount(() => {
@@ -64,6 +127,7 @@
     bind:this={dropdownRef}
     class="dropdown dropdown--{placement} {className}"
     role="menu"
+    aria-label={ariaLabel}
     {...$$restProps}
   >
     <slot />

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

@@ -5,6 +5,7 @@ type Dropdown = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     open?: boolean | undefined;
     placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
     activeUrl?: string | undefined;
+    ariaLabel?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -20,6 +21,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     open?: boolean | undefined;
     placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
     activeUrl?: string | undefined;
+    ariaLabel?: string | undefined;
 }, {
     default: {};
 }>, {

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgGA;;;;;;;;;;;;eAA6K;sCATvI,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":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;;eAAyL;sCATnJ,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/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/EmptyState/EmptyState.svelte.d.ts

@@ -0,0 +1,37 @@
+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 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>;
+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=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>;