@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Layout/Header.svelte

@@ -0,0 +1,528 @@
+<script>
+  import { page } from "$app/stores";
+  import { base } from "$app/paths";
+  import { goto } from "$app/navigation";
+  import Logo from "../../../assets/images/Logo.png";
+  import { Avatar } from "flowbite-svelte";
+  import DarkModeToggle from "../DarkModeToggle.svelte";
+  import PageBackButton from "../pages/performers/PageBackButton.svelte";
+  import Icon from "../Icons/Icon.svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../../utils/portal.js";
+
+  export let signoutHandler = () => {};
+  export let name = "";
+  export let avatar = "";
+  export let email = "";
+  export let navLinks = [];
+  export let dropdownLinks = [];
+  export let showBackButton = false;
+
+  let showMobileSheet = false;
+  let showDesktopDropdown = false;
+
+  // Reactive current path for active state
+  $: currentPath = $page.url.pathname;
+
+  function isActive(href, path) {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  function handleDropdownItemClick(href) {
+    showDesktopDropdown = false;
+    goto(href);
+  }
+
+  function handleMobileSheetItemClick(href) {
+    showMobileSheet = false;
+    goto(href);
+  }
+</script>
+
+<!--
+  HEADER - Responsive layout
+  Mobile: Logo + DarkMode + Avatar (triggers bottom sheet)
+  Desktop: Logo + Nav Links + DarkMode + Avatar (triggers dropdown)
+-->
+
+{#if showBackButton}
+  <!-- Sub-page header with back button (mobile only via CSS) -->
+  <div class="header-back-button">
+    <PageBackButton />
+  </div>
+  <!-- Still show normal header content on desktop even for sub-pages -->
+  <div class="header-desktop-content">
+    <div class="header-logo">
+      <a href="/"><img src={Logo} alt="Micdrop" width="100" /></a>
+    </div>
+
+    <nav class="header-nav">
+      {#each navLinks as { label, href }}
+        <a
+          {href}
+          class="header-nav-link"
+          class:active={isActive(href, currentPath)}
+        >
+          {label}
+        </a>
+      {/each}
+    </nav>
+
+    <div class="header-actions">
+      <DarkModeToggle />
+      <div class="header-avatar-wrapper">
+        <button
+          class="avatar-button"
+          on:click={() => showDesktopDropdown = !showDesktopDropdown}
+        >
+          <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        </button>
+
+        {#if showDesktopDropdown}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div class="dropdown-backdrop" on:click={() => showDesktopDropdown = false}></div>
+          <div class="desktop-dropdown">
+            <div class="dropdown-header">
+              <span class="dropdown-name">{name || "Performer"}</span>
+              <span class="dropdown-email">{email || ""}</span>
+            </div>
+            <div class="dropdown-divider"></div>
+            {#each dropdownLinks as { label, href }}
+              <button
+                class="dropdown-item"
+                on:click={() => handleDropdownItemClick(href)}
+              >
+                {label}
+              </button>
+            {/each}
+            <div class="dropdown-divider"></div>
+            <button
+              class="dropdown-item dropdown-item--danger"
+              on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+            >
+              Sign out
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Normal header -->
+  <div class="header-logo">
+    <a href="/"><img src={Logo} alt="Micdrop" width="100" /></a>
+  </div>
+
+  <!-- Desktop nav links (hidden on mobile via CSS) -->
+  <nav class="header-nav">
+    {#each navLinks as { label, href }}
+      <a
+        {href}
+        class="header-nav-link"
+        class:active={isActive(href, currentPath)}
+      >
+        {label}
+      </a>
+    {/each}
+  </nav>
+
+  <div class="header-actions">
+    <DarkModeToggle />
+
+    <div class="header-avatar-wrapper">
+      <!-- Mobile: triggers bottom sheet -->
+      <button class="avatar-button avatar-button--mobile" on:click={() => showMobileSheet = true}>
+        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+      </button>
+
+      <!-- Desktop: triggers dropdown -->
+      <button
+        class="avatar-button avatar-button--desktop"
+        on:click={() => showDesktopDropdown = !showDesktopDropdown}
+      >
+        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+      </button>
+
+      <!-- Desktop dropdown -->
+      {#if showDesktopDropdown}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="dropdown-backdrop" on:click={() => showDesktopDropdown = false}></div>
+        <div class="desktop-dropdown">
+          <div class="dropdown-header">
+            <span class="dropdown-name">{name || "Performer"}</span>
+            <span class="dropdown-email">{email || ""}</span>
+          </div>
+          <div class="dropdown-divider"></div>
+          {#each dropdownLinks as { label, href }}
+            <button
+              class="dropdown-item"
+              on:click={() => handleDropdownItemClick(href)}
+            >
+              {label}
+            </button>
+          {/each}
+          <div class="dropdown-divider"></div>
+          <button
+            class="dropdown-item dropdown-item--danger"
+            on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+          >
+            Sign out
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<!-- Mobile Bottom Sheet (avatar menu) -->
+{#if showMobileSheet}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="mobile-sheet-backdrop"
+    on:click={() => { showMobileSheet = false; }}
+    transition:fade={{ duration: 300 }}
+    use:portal
+  >
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="mobile-sheet-content"
+      on:click|stopPropagation
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar -->
+      <div class="sheet-handle-wrapper">
+        <div class="sheet-handle"></div>
+      </div>
+
+      <!-- User info -->
+      <div class="sheet-user-info">
+        <p class="sheet-user-name">{name || "Performer"}</p>
+        <p class="sheet-user-email">{email || ""}</p>
+      </div>
+
+      <!-- Actions -->
+      <div class="sheet-actions">
+        {#each dropdownLinks as { label, href }}
+          <button
+            on:click={() => handleMobileSheetItemClick(href)}
+            class="sheet-action-item"
+          >
+            {label}
+          </button>
+        {/each}
+
+        <button on:click={() => { showMobileSheet = false; signoutHandler(); }} class="sheet-action-item sheet-signout">
+          Sign Out
+        </button>
+      </div>
+
+      <!-- Cancel -->
+      <div class="sheet-cancel-section">
+        <button on:click={() => showMobileSheet = false} class="sheet-cancel-btn">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* Header layout */
+  .header-logo {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-logo a {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Desktop nav links */
+  .header-nav {
+    display: none;
+    align-items: center;
+    gap: 0.25rem;
+    margin-left: 2rem;
+    flex: 1;
+  }
+
+  @media (min-width: 768px) {
+    .header-nav {
+      display: flex;
+    }
+  }
+
+  .header-nav-link {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Tartiary));
+    text-decoration: none;
+    border-radius: 0.5rem;
+    transition: all 0.15s;
+  }
+
+  .header-nav-link:hover {
+    color: hsl(var(--Text-Primary));
+    background-color: hsl(var(--hover-primary));
+    text-decoration: none;
+  }
+
+  .header-nav-link.active {
+    color: hsl(var(--primary-700));
+    background-color: hsl(var(--hover-primary));
+  }
+
+  /* Header actions */
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .header-avatar-wrapper {
+    position: relative;
+    margin-left: 0.25rem;
+  }
+
+  .avatar-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    border-radius: 9999px;
+    transition: opacity 0.15s;
+  }
+
+  .avatar-button:hover {
+    opacity: 0.8;
+  }
+
+  .avatar-button:focus {
+    outline: none;
+  }
+
+  /* Show mobile avatar on mobile, desktop avatar on desktop */
+  .avatar-button--mobile {
+    display: block;
+  }
+
+  .avatar-button--desktop {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .avatar-button--mobile {
+      display: none;
+    }
+
+    .avatar-button--desktop {
+      display: block;
+    }
+  }
+
+  /* Back button section (mobile only) */
+  .header-back-button {
+    display: block;
+    flex: 1;
+  }
+
+  .header-desktop-content {
+    display: none;
+    width: 100%;
+    align-items: center;
+  }
+
+  @media (min-width: 768px) {
+    .header-back-button {
+      display: none;
+    }
+
+    .header-desktop-content {
+      display: flex;
+    }
+  }
+
+  /* Desktop dropdown */
+  .dropdown-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-dropdown, 30);
+    background: transparent;
+  }
+
+  .desktop-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    width: 220px;
+    background-color: hsl(var(--BG-Primary));
+    border: 1px solid hsl(var(--Stroke-Primary));
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    z-index: calc(var(--z-dropdown, 30) + 1);
+    overflow: hidden;
+  }
+
+  .dropdown-header {
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary));
+  }
+
+  .dropdown-name {
+    display: block;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary));
+    font-size: 0.875rem;
+  }
+
+  .dropdown-email {
+    display: block;
+    font-size: 0.75rem;
+    color: hsl(var(--Text-Tartiary));
+    margin-top: 0.125rem;
+  }
+
+  .dropdown-divider {
+    height: 1px;
+    background-color: hsl(var(--Stroke-Primary));
+  }
+
+  .dropdown-item {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary));
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  .dropdown-item:hover {
+    background-color: hsl(var(--hover-primary));
+  }
+
+  .dropdown-item--danger {
+    color: #dc2626;
+  }
+
+  .dropdown-item--danger:hover {
+    background-color: #fef2f2;
+  }
+
+  /* Mobile action sheet */
+  .mobile-sheet-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+    /* iOS scroll lock */
+    touch-action: none;
+    -webkit-overflow-scrolling: none;
+    overscroll-behavior: none;
+  }
+
+  .mobile-sheet-content {
+    background-color: hsl(var(--BG-Primary));
+    border-radius: 1.5rem 1.5rem 0 0;
+    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    max-height: 90vh;
+    max-height: 90dvh;
+    overflow: hidden;
+    padding-bottom: var(--safe-bottom, 0px);
+    /* Allow touch interactions within sheet */
+    touch-action: pan-y;
+    overscroll-behavior: contain;
+  }
+
+  .sheet-handle-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 0.75rem 0 0.5rem;
+  }
+
+  .sheet-handle {
+    width: 2.5rem;
+    height: 0.25rem;
+    background-color: hsl(var(--Stroke-Primary));
+    border-radius: 0.125rem;
+  }
+
+  .sheet-user-info {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary));
+  }
+
+  .sheet-user-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary));
+    margin: 0;
+  }
+
+  .sheet-user-email {
+    font-size: 0.875rem;
+    color: hsl(var(--Text-Tartiary));
+    margin: 0.125rem 0 0;
+  }
+
+  .sheet-actions {
+    padding: 0.5rem 0;
+  }
+
+  .sheet-action-item {
+    width: 100%;
+    text-align: left;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary));
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  .sheet-action-item:active {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .sheet-signout {
+    color: #dc2626;
+  }
+
+  .sheet-cancel-section {
+    border-top: 8px solid hsl(var(--BG-Secondary));
+  }
+
+  .sheet-cancel-btn {
+    width: 100%;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary));
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  .sheet-cancel-btn:active {
+    background-color: hsl(var(--BG-Secondary));
+  }
+</style>

package/dist/components/Layout/Header.svelte.d.ts

@@ -0,0 +1,42 @@
+/** @typedef {typeof __propDef.props}  HeaderProps */
+/** @typedef {typeof __propDef.events}  HeaderEvents */
+/** @typedef {typeof __propDef.slots}  HeaderSlots */
+export default class Header extends SvelteComponent<{
+    name?: string | undefined;
+    email?: string | undefined;
+    signoutHandler?: (() => void) | undefined;
+    avatar?: string | undefined;
+    navLinks?: any[] | undefined;
+    dropdownLinks?: any[] | undefined;
+    showBackButton?: boolean | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        email?: string | undefined;
+        signoutHandler?: (() => void) | undefined;
+        avatar?: string | undefined;
+        navLinks?: any[] | undefined;
+        dropdownLinks?: any[] | undefined;
+        showBackButton?: boolean | undefined;
+    };
+    events: {
+        click: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Header.svelte.d.ts.map

package/dist/components/Layout/Header.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.svelte.js"],"names":[],"mappings":"AAsNA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;;;;;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;gCAxNJ,QAAQ;AAqNxC;;;;;;;;;;;;;;;;;;EAAwK"}

package/dist/components/Modal/ConfirmationModal.spec.d.ts

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

package/dist/components/Modal/ConfirmationModal.spec.d.ts.map

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