@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/Layout/Header.svelte

@@ -1,538 +0,0 @@
-<script>
-  import { page } from '../../__LIB_STORES__.js';
-  import { base } from '../../__LIB_PATHS__.js';
-  import { goto } from '../../__LIB_NAVIGATION__.js';
-  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} rounded size="md" />
-        </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} rounded size="md" />
-      </button>
-
-      <!-- Desktop: triggers dropdown -->
-      <button
-        class="avatar-button avatar-button--desktop"
-        on:click={() => showDesktopDropdown = !showDesktopDropdown}
-      >
-        <Avatar src={avatar} rounded size="md" />
-      </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;
-  }
-
-  /* Fix avatar image aspect ratio and border radius */
-  :global(.avatar-button img) {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
-    aspect-ratio: 1 / 1 !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .avatar-button {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    transition: opacity 0.15s;
-    min-width: 40px;
-    min-height: 40px;
-  }
-
-  .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.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA8NA;;;;;;;;;;;;mBAA0M;6CAT7J,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/Layout/PageLayout.svelte

@@ -1,64 +0,0 @@
-<script>
-  import Breadcrumb from '../Breadcrumb/Breadcrumb.svelte';
-  import Card from '../Card.svelte';
-
-  /**
-   * Breadcrumb navigation data
-   * @type {Array<{name: string, href: string}>}
-   */
-  export let breadcrumb = [];
-
-  /**
-   * Page title displayed below breadcrumb
-   * @type {string}
-   */
-  export let title = '';
-
-  /**
-   * Subtitle displayed below title
-   * @type {string}
-   */
-  export let subtitle = '';
-
-  /**
-   * Layout variant
-   * - 'default': Content with standard padding, no wrapper
-   * - 'card': Content wrapped in Card component with max-width
-   * @type {'default' | 'card'}
-   */
-  export let variant = 'default';
-
-  /**
-   * Max width class for card variant (e.g., 'max-w-4xl', 'max-w-6xl')
-   * @type {string}
-   */
-  export let maxWidth = 'max-w-4xl';
-
-  /**
-   * Additional CSS classes for the content container
-   * @type {string}
-   */
-  export let className = '';
-
-  /**
-   * Whether to show the header (breadcrumb, title, subtitle)
-   * @type {boolean}
-   */
-  export let showHeader = true;
-</script>
-
-{#if showHeader}
-  <nav class="pt-4 px-4 text-text-primary text-lg font-semibold">
-    <Breadcrumb data={breadcrumb} {title} {subtitle} />
-  </nav>
-{/if}
-
-<div class="px-4 pb-20 md:pb-6 {className}">
-  {#if variant === 'card'}
-    <Card className="dark:bg-bg-primary {maxWidth}">
-      <slot />
-    </Card>
-  {:else}
-    <slot />
-  {/if}
-</div>

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

@@ -1,58 +0,0 @@
-export default PageLayout;
-type PageLayout = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    className?: string | undefined;
-    variant?: "default" | "card" | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    maxWidth?: string | undefined;
-    showHeader?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const PageLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    className?: string | undefined;
-    variant?: "default" | "card" | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    maxWidth?: string | undefined;
-    showHeader?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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=PageLayout.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/PageLayout.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqHA;;;;;;cA1CyB,MAAM;cAAQ,MAAM;;;;;;;;;;eA0CgK;sCATvK,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/Modal/ConfirmationModal.spec.d.ts.map

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