@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Input/MultiSelect.svelte

@@ -0,0 +1,557 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // Props matching old Flowbite wrapper for drop-in replacement
+  export let value = []; // Array of selected values
+  export let items = []; // Array of { name: string, value: any }
+  export let placeholder = "Select options";
+  export let label = "";
+  export let required = false;
+  export let disabled = false;
+  export let error = "";
+  export let hideClear = false;
+  export let name = "";
+  export let id = "";
+  export let animateFocus = true; // Enable focus animation effect (auto-disabled when disabled)
+
+  $: shouldAnimate = animateFocus && !disabled;
+
+  let isOpen = false;
+  let triggerElement;
+  let dropdownElement;
+  let focusedIndex = -1;
+
+  // Ensure value is always an array
+  $: if (!Array.isArray(value)) {
+    value = [];
+  }
+
+  $: selectedItems = items.filter((item) => value.includes(item.value));
+  $: hasSelection = selectedItems.length > 0;
+
+  function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = 0;
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    focusedIndex = -1;
+  }
+
+  function toggleItem(item) {
+    const index = value.indexOf(item.value);
+    if (index === -1) {
+      value = [...value, item.value];
+    } else {
+      value = value.filter((v) => v !== item.value);
+    }
+    dispatch("change", { value, items: selectedItems });
+  }
+
+  function removeItem(item, event) {
+    event.stopPropagation();
+    value = value.filter((v) => v !== item.value);
+    dispatch("change", { value, items: selectedItems });
+  }
+
+  function clearAll(event) {
+    event.stopPropagation();
+    value = [];
+    dispatch("change", { value: [], items: [] });
+  }
+
+  function handleKeydown(event) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          toggleItem(items[focusedIndex]);
+        } else {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          isOpen = true;
+          focusedIndex = 0;
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function handleClickOutside(event) {
+    if (
+      triggerElement &&
+      !triggerElement.contains(event.target) &&
+      dropdownElement &&
+      !dropdownElement.contains(event.target)
+    ) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+</script>
+
+<div class="multiselect-wrapper">
+  {#if label}
+    <div class="multiselect-label-row">
+      <label for={id || name} class="multiselect-label">
+        {label}{#if required}<span class="multiselect-required">*</span>{/if}
+      </label>
+    </div>
+  {/if}
+
+  <div class="multiselect-container">
+    <button
+      type="button"
+      bind:this={triggerElement}
+      {id}
+      {name}
+      class="multiselect-trigger"
+      class:multiselect-error={error}
+      class:multiselect-disabled={disabled}
+      class:multiselect-open={isOpen}
+      class:multiselect-animate-focus={shouldAnimate}
+      {disabled}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      aria-labelledby={label ? `${id || name}-label` : undefined}
+      on:click={toggle}
+      on:keydown={handleKeydown}
+    >
+      <div class="multiselect-value-area">
+        {#if hasSelection}
+          <div class="multiselect-tags">
+            {#each selectedItems as item}
+              <span class="multiselect-tag">
+                <span class="multiselect-tag-text">{item.name}</span>
+                <button
+                  type="button"
+                  class="multiselect-tag-remove"
+                  on:click={(e) => removeItem(item, e)}
+                  aria-label="Remove {item.name}"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    class="multiselect-tag-remove-icon"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </span>
+            {/each}
+          </div>
+        {:else}
+          <span class="multiselect-placeholder">{placeholder}</span>
+        {/if}
+      </div>
+
+      <div class="multiselect-actions">
+        {#if hasSelection && !hideClear}
+          <button
+            type="button"
+            class="multiselect-clear"
+            on:click={clearAll}
+            aria-label="Clear all"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        {/if}
+        <svg
+          class="multiselect-chevron"
+          class:multiselect-chevron-open={isOpen}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+          />
+        </svg>
+      </div>
+    </button>
+
+    {#if isOpen}
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <ul
+        bind:this={dropdownElement}
+        class="multiselect-dropdown"
+        role="listbox"
+        tabindex="-1"
+        aria-multiselectable="true"
+        aria-activedescendant={focusedIndex >= 0
+          ? `${id || name}-option-${focusedIndex}`
+          : undefined}
+      >
+        {#each items as item, index}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <li
+            id="{id || name}-option-{index}"
+            class="multiselect-option"
+            class:multiselect-option-selected={value.includes(item.value)}
+            class:multiselect-option-focused={index === focusedIndex}
+            role="option"
+            aria-selected={value.includes(item.value)}
+            on:click={() => toggleItem(item)}
+            on:mouseenter={() => (focusedIndex = index)}
+          >
+            <span class="multiselect-checkbox" class:multiselect-checkbox-checked={value.includes(item.value)}>
+              {#if value.includes(item.value)}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M4.5 12.75l6 6 9-13.5"
+                  />
+                </svg>
+              {/if}
+            </span>
+            <span class="multiselect-option-text">{item.name}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class="multiselect-error-text">{error}</p>
+  {/if}
+</div>
+
+<style>
+  /* Use same CSS variables as Input for consistency */
+  .multiselect-wrapper {
+    --ms-bg: #f9fafb;
+    --ms-text: #0d1526;
+    --ms-text-placeholder: #6b7280;
+    --ms-border: #e5e7eb;
+    --ms-border-error: #ff6666;
+    --ms-focus-ring: #3b82f6;
+    --ms-dropdown-bg: #ffffff;
+    --ms-option-hover: #f3f4f6;
+    --ms-tag-bg: #e5e7eb;
+    --ms-tag-text: #374151;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .multiselect-label-row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .multiselect-label {
+    color: var(--ms-text-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .multiselect-required {
+    color: var(--ms-border-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .multiselect-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    min-height: 40px;
+    padding: 0.375rem 0.625rem;
+    background-color: var(--ms-bg);
+    border: 1px solid var(--ms-border);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    text-align: left;
+  }
+
+  @media (min-width: 640px) {
+    .multiselect-trigger {
+      padding: 0.375rem 0.75rem;
+    }
+  }
+
+  .multiselect-trigger:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ms-focus-ring);
+    border-color: var(--ms-focus-ring);
+  }
+
+  .multiselect-trigger:hover:not(:focus):not(.multiselect-disabled) {
+    border-color: var(--ms-focus-ring);
+  }
+
+  .multiselect-trigger.multiselect-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .multiselect-trigger.multiselect-error {
+    border-color: var(--ms-border-error);
+  }
+
+  /* Animate focus effect */
+  .multiselect-animate-focus {
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
+  }
+
+  .multiselect-animate-focus:focus {
+    transform: scale(1.01);
+  }
+
+  .multiselect-value-area {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .multiselect-placeholder {
+    color: var(--ms-text-placeholder);
+    font-weight: 500;
+    font-size: 0.875rem;
+  }
+
+  .multiselect-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .multiselect-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    background-color: var(--ms-tag-bg);
+    color: var(--ms-tag-text);
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    max-width: 100%;
+  }
+
+  .multiselect-tag-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .multiselect-tag-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--ms-text-placeholder);
+    border-radius: 0.25rem;
+    transition: color 0.1s ease;
+  }
+
+  .multiselect-tag-remove:hover {
+    color: var(--ms-text);
+  }
+
+  .multiselect-tag-remove-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .multiselect-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  .multiselect-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--ms-text-placeholder);
+    border-radius: 0.25rem;
+    transition: color 0.1s ease;
+  }
+
+  .multiselect-clear:hover {
+    color: var(--ms-text);
+  }
+
+  .multiselect-clear svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .multiselect-chevron {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--ms-text-placeholder);
+    transition: transform 0.2s ease;
+  }
+
+  .multiselect-chevron-open {
+    transform: rotate(180deg);
+  }
+
+  .multiselect-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background-color: var(--ms-dropdown-bg);
+    border: 1px solid var(--ms-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    max-height: 240px;
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+  }
+
+  .multiselect-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--ms-text);
+    transition: background-color 0.1s ease;
+  }
+
+  .multiselect-option:hover,
+  .multiselect-option-focused {
+    background-color: var(--ms-option-hover);
+  }
+
+  .multiselect-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    border: 1.5px solid var(--ms-border);
+    border-radius: 0.25rem;
+    background-color: var(--ms-dropdown-bg);
+    transition: background-color 0.1s ease, border-color 0.1s ease;
+  }
+
+  .multiselect-checkbox-checked {
+    background-color: var(--ms-focus-ring);
+    border-color: var(--ms-focus-ring);
+  }
+
+  .multiselect-checkbox svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    color: white;
+  }
+
+  .multiselect-option-text {
+    flex: 1;
+  }
+
+  .multiselect-error-text {
+    margin-top: 0.25rem;
+    color: var(--ms-border-error);
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .multiselect-wrapper {
+    --ms-bg: #111827;
+    --ms-text: #f7f7f8;
+    --ms-text-placeholder: #9ca3af;
+    --ms-border: #374151;
+    --ms-dropdown-bg: #111827;
+    --ms-option-hover: #374151;
+    --ms-tag-bg: #374151;
+    --ms-tag-text: #e5e7eb;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+/** @typedef {typeof __propDef.props}  MultiSelectProps */
+/** @typedef {typeof __propDef.events}  MultiSelectEvents */
+/** @typedef {typeof __propDef.slots}  MultiSelectSlots */
+export default class MultiSelect extends SvelteComponent<{
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    placeholder?: string | undefined;
+    id?: string | undefined;
+    value?: any[] | undefined;
+    animateFocus?: boolean | undefined;
+    items?: any[] | undefined;
+    hideClear?: boolean | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MultiSelectProps = typeof __propDef.props;
+export type MultiSelectEvents = typeof __propDef.events;
+export type MultiSelectSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        error?: string | undefined;
+        disabled?: boolean | undefined;
+        label?: string | undefined;
+        name?: string | undefined;
+        required?: boolean | undefined;
+        placeholder?: string | undefined;
+        id?: string | undefined;
+        value?: any[] | undefined;
+        animateFocus?: boolean | undefined;
+        items?: any[] | undefined;
+        hideClear?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=MultiSelect.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/MultiSelect.svelte.js"],"names":[],"mappings":"AA+MA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;;;;;;;;;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCAjNJ,QAAQ;AA8MxC;;;;;;;;;;;;;;;;;;;;;;EAA8L"}

package/dist/components/Input/OTPInput.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=OTPInput.spec.d.ts.map

package/dist/components/Input/OTPInput.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/OTPInput.spec.js"],"names":[],"mappings":""}