@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/DarkModeToggle.svelte

@@ -1,255 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import SunIcon from "./Icons/SunIcon.svelte";
-  import MoonIcon from "./Icons/MoonIcon.svelte";
-
-  // Optional props for layout control
-  // export let isExpanded = false; // Deprecated
-  export let containerSelector = ".performer-portal"; // Can be '.micdrop', '.performer-portal', etc.
-
-  // Theme mode: 'auto' | 'light' | 'dark'
-  let themeMode = "auto";
-  let isDark = false; // Current display state (for applying classes)
-
-  /** @param {boolean} enable */
-  function setMicdropDarkClass(enable) {
-    // Support both performers portal and micdrop frontend
-    const container = document.querySelector(containerSelector);
-    if (enable) {
-      if (container) container.classList.add("dark");
-      document.documentElement.classList.add("dark");
-    } else {
-      if (container) container.classList.remove("dark");
-      document.documentElement.classList.remove("dark");
-    }
-  }
-
-  function getSystemPreference() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-
-  function applyTheme() {
-    if (themeMode === "auto") {
-      isDark = getSystemPreference();
-    } else {
-      isDark = themeMode === "dark";
-    }
-    setMicdropDarkClass(isDark);
-  }
-
-  onMount(() => {
-    // Check localStorage for saved theme
-    const savedTheme = localStorage.getItem("theme");
-
-    if (savedTheme === "dark" || savedTheme === "light") {
-      themeMode = savedTheme;
-    } else {
-      // No saved preference or 'auto' = auto mode
-      themeMode = "auto";
-    }
-
-    applyTheme();
-
-    // Listen for system preference changes (only matters in auto mode)
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (themeMode === "auto") {
-        applyTheme();
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  });
-
-  /** @param {MouseEvent} event */
-  function toggleTheme(event) {
-    // Cycle: auto -> light -> dark -> auto
-    if (themeMode === "auto") {
-      themeMode = "light";
-      localStorage.setItem("theme", "light");
-    } else if (themeMode === "light") {
-      themeMode = "dark";
-      localStorage.setItem("theme", "dark");
-    } else {
-      themeMode = "auto";
-      localStorage.removeItem("theme");
-    }
-
-    applyTheme();
-
-    // Immediately blur the button to remove focus state on mobile
-    if (event && event.currentTarget) {
-      event.currentTarget.blur();
-    }
-  }
-
-  // Tooltip text based on current mode
-  $: titleText =
-    themeMode === "auto"
-      ? "Auto theme (following device) - click for light mode"
-      : themeMode === "light"
-        ? "Light mode - click for dark mode"
-        : "Dark mode - click for auto";
-</script>
-
-<div class="transition-all flex items-center justify-center w-full py-4">
-  <button
-    on:click={toggleTheme}
-    on:touchend={(e) => e.currentTarget.blur()}
-    class="theme-toggle-btn focus:outline-none"
-    aria-label="Toggle theme"
-    title={titleText}
-  >
-    <!-- Sun icon - shown when mode is 'light' -->
-    <span class="theme-icon sun-icon" class:hidden={themeMode !== "light"}>
-      <SunIcon size="20" color="currentColor" />
-    </span>
-
-    <!-- Moon icon - shown when mode is 'dark' -->
-    <span class="theme-icon moon-icon" class:hidden={themeMode !== "dark"}>
-      <MoonIcon size="20" color="currentColor" />
-    </span>
-
-    <!-- Auto icon container - shown when mode is 'auto' -->
-    {#if themeMode === "auto"}
-      <div class="auto-icon-container">
-        <!-- Light half (top-left) with sun -->
-        <div class="auto-half auto-light-half">
-          <SunIcon size="12" color="#f59e0b" />
-        </div>
-        <!-- Dark half (bottom-right) with moon -->
-        <div class="auto-half auto-dark-half">
-          <MoonIcon size="12" color="white" />
-        </div>
-      </div>
-    {/if}
-  </button>
-
-</div>
-
-<style>
-  .theme-toggle-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    border: 1.5px solid rgb(229 231 235);
-    background-color: white;
-    color: rgb(17 24 39);
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-         user-select: none;
-  }
-
-  .theme-toggle-btn:focus,
-  .theme-toggle-btn:focus-visible,
-  .theme-toggle-btn:active {
-    outline: none !important;
-    box-shadow: none !important;
-    border-color: rgb(229 231 235) !important;
-    ring: none !important;
-    --tw-ring-shadow: none !important;
-    --tw-ring-offset-shadow: none !important;
-  }
-
-  :global(.dark) .theme-toggle-btn:focus,
-  :global(.dark) .theme-toggle-btn:focus-visible,
-  :global(.dark) .theme-toggle-btn:active {
-    border-color: rgb(55 65 81) !important;
-    ring: none !important;
-    --tw-ring-shadow: none !important;
-    --tw-ring-offset-shadow: none !important;
-  }
-
-  :global(.dark) .theme-toggle-btn {
-    border-color: rgb(55 65 81);
-    background-color: rgb(31 41 55);
-    color: rgb(243 244 246);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .theme-toggle-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
-      border-color: #0284fe;
-    }
-
-    :global(.dark) .theme-toggle-btn:hover {
-      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
-    }
-
-    .theme-toggle-btn:active {
-      transform: translateY(0);
-    }
-  }
-
-  .theme-icon {
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .sun-icon {
-    color: #f59e0b;
-  }
-
-  .moon-icon {
-    color: white;
-  }
-
-  /* Auto mode - diagonal split button */
-  .auto-icon-container {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    border-radius: 8px;
-  }
-
-  .auto-half {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .auto-light-half {
-    background-color: white;
-    clip-path: polygon(0 0, 100% 0, 0 100%);
-  }
-
-  .auto-light-half :global(svg) {
-    transform: translate(-4px, -4px);
-  }
-
-  .auto-dark-half {
-    background-color: rgb(31 41 55);
-    clip-path: polygon(100% 0, 100% 100%, 0 100%);
-  }
-
-  .auto-dark-half :global(svg) {
-    transform: translate(4px, 4px);
-  }
-
-  .hidden {
-    opacity: 0;
-    transform: rotate(180deg) scale(0);
-    position: absolute;
-  }
-
-  .theme-icon:not(.hidden) {
-    opacity: 1;
-    transform: rotate(0deg) scale(1);
-  }
-</style>

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

@@ -1 +0,0 @@
-{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.svelte.js"],"names":[],"mappings":";;;;;;;;AAkJA;;;;mBAAiJ;6CATpG,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/Drawer/Drawer.svelte

@@ -1,224 +0,0 @@
-<script>
-  import { onDestroy } from "svelte";
-  import { fly, fade } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} [show] - Whether the drawer is visible
-   * @property {boolean} [hidden] - Flowbite-style hidden prop (inverse of show)
-   * @property {string} [title] - Optional title for the drawer header
-   * @property {'left'|'right'|'top'|'bottom'} [placement] - Which side the drawer slides from
-   * @property {string} [width] - Width of the drawer (for left/right placement)
-   * @property {string} [height] - Height of the drawer (for top/bottom placement)
-   * @property {number} [duration] - Transition duration in ms
-   * @property {boolean} [closeOnBackdropClick] - Whether clicking the backdrop closes the drawer
-   * @property {boolean} [closeOnEscape] - Whether pressing Escape closes the drawer
-   * @property {string} [id] - Optional id for the drawer element
-   * @property {object} [transitionParams] - Custom transition params (flowbite API)
-   * @property {Function} [onclose] - Callback when drawer closes
-   * @property {import('svelte').Snippet} [header] - Snippet for header content
-   * @property {import('svelte').Snippet} [actions] - Snippet for actions content
-   * @property {import('svelte').Snippet} [children] - Default slot content
-   */
-
-  /** @type {Props} */
-  let {
-    show = $bindable(false),
-    hidden = $bindable(true),
-    title = "",
-    placement = "left",
-    width = "320px",
-    height = "auto",
-    duration = 200,
-    closeOnBackdropClick = true,
-    closeOnEscape = true,
-    id = "",
-    transitionParams = undefined,
-    onclose,
-    header,
-    actions,
-    children
-  } = $props();
-
-  // Support both show and hidden props (flowbite uses hidden)
-  let isVisible = $derived(show || !hidden);
-
-  function close() {
-    hidden = true;
-    show = false;
-    onclose?.();
-  }
-
-  function handleBackdropClick(e) {
-    if (closeOnBackdropClick && e.target === e.currentTarget) {
-      close();
-    }
-  }
-
-  function handleKeydown(e) {
-    if (closeOnEscape && e.key === "Escape" && isVisible) {
-      close();
-    }
-  }
-
-  // Calculate transition params based on placement (use custom if provided)
-  let computedTransitionParams = $derived(transitionParams || (() => {
-    switch (placement) {
-      case "left":
-        return { x: -320, duration, easing: cubicOut };
-      case "right":
-        return { x: 320, duration, easing: cubicOut };
-      case "top":
-        return { y: -320, duration, easing: cubicOut };
-      case "bottom":
-        return { y: 320, duration, easing: cubicOut };
-      default:
-        return { x: -320, duration, easing: cubicOut };
-    }
-  })());
-
-  // Lock body scroll when drawer is open
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (isVisible) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if isVisible}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="drawer-backdrop"
-    onclick={handleBackdropClick}
-    transition:fade={{ duration: 150 }}
-  >
-    <div
-      {id}
-      class="drawer drawer--{placement}"
-      style="--drawer-width: {width}; --drawer-height: {height};"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={computedTransitionParams}
-    >
-      <!-- Optional header with title -->
-      {#if title || header}
-        <div class="drawer__header">
-          {#if header}
-            {@render header()}
-          {:else}
-            <h3 class="drawer__title">{title}</h3>
-          {/if}
-        </div>
-      {/if}
-
-      <!-- Content slot -->
-      <div class="drawer__content">
-        {#if children}
-          {@render children()}
-        {/if}
-      </div>
-
-      <!-- Actions slot (optional) -->
-      {#if actions}
-        <div class="drawer__actions">
-          {@render actions()}
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<style>
-  .drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: var(--z-modal, 50);
-    display: flex;
-    touch-action: none;
-  }
-
-  .drawer {
-    position: absolute;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /* Placement variants */
-  .drawer--left {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--drawer-width, 320px);
-    max-width: 100vw;
-  }
-
-  .drawer--right {
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--drawer-width, 320px);
-    max-width: 100vw;
-  }
-
-  .drawer--top {
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--drawer-height, auto);
-    max-height: 100vh;
-  }
-
-  .drawer--bottom {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: var(--drawer-height, auto);
-    max-height: 100vh;
-  }
-
-  .drawer__header {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    flex-shrink: 0;
-  }
-
-  .drawer__title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: hsl(var(--Text-Primary, 220 13% 13%));
-    margin: 0;
-  }
-
-  .drawer__content {
-    flex: 1;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .drawer__actions {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-</style>

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

@@ -1,130 +0,0 @@
-export default Drawer;
-type Drawer = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Drawer: import("svelte").Component<{
-    /**
-     * - Whether the drawer is visible
-     */
-    show?: boolean | undefined;
-    /**
-     * - Flowbite-style hidden prop (inverse of show)
-     */
-    hidden?: boolean | undefined;
-    /**
-     * - Optional title for the drawer header
-     */
-    title?: string | undefined;
-    /**
-     * - Which side the drawer slides from
-     */
-    placement?: "left" | "right" | "top" | "bottom" | undefined;
-    /**
-     * - Width of the drawer (for left/right placement)
-     */
-    width?: string | undefined;
-    /**
-     * - Height of the drawer (for top/bottom placement)
-     */
-    height?: string | undefined;
-    /**
-     * - Transition duration in ms
-     */
-    duration?: number | undefined;
-    /**
-     * - Whether clicking the backdrop closes the drawer
-     */
-    closeOnBackdropClick?: boolean | undefined;
-    /**
-     * - Whether pressing Escape closes the drawer
-     */
-    closeOnEscape?: boolean | undefined;
-    /**
-     * - Optional id for the drawer element
-     */
-    id?: string | undefined;
-    /**
-     * - Custom transition params (flowbite API)
-     */
-    transitionParams?: object | undefined;
-    /**
-     * - Callback when drawer closes
-     */
-    onclose?: Function | undefined;
-    /**
-     * - Snippet for header content
-     */
-    header?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Snippet for actions content
-     */
-    actions?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Default slot content
-     */
-    children?: import("svelte").Snippet<[]> | undefined;
-}, {}, "show" | "hidden">;
-type Props = {
-    /**
-     * - Whether the drawer is visible
-     */
-    show?: boolean | undefined;
-    /**
-     * - Flowbite-style hidden prop (inverse of show)
-     */
-    hidden?: boolean | undefined;
-    /**
-     * - Optional title for the drawer header
-     */
-    title?: string | undefined;
-    /**
-     * - Which side the drawer slides from
-     */
-    placement?: "left" | "right" | "top" | "bottom" | undefined;
-    /**
-     * - Width of the drawer (for left/right placement)
-     */
-    width?: string | undefined;
-    /**
-     * - Height of the drawer (for top/bottom placement)
-     */
-    height?: string | undefined;
-    /**
-     * - Transition duration in ms
-     */
-    duration?: number | undefined;
-    /**
-     * - Whether clicking the backdrop closes the drawer
-     */
-    closeOnBackdropClick?: boolean | undefined;
-    /**
-     * - Whether pressing Escape closes the drawer
-     */
-    closeOnEscape?: boolean | undefined;
-    /**
-     * - Optional id for the drawer element
-     */
-    id?: string | undefined;
-    /**
-     * - Custom transition params (flowbite API)
-     */
-    transitionParams?: object | undefined;
-    /**
-     * - Callback when drawer closes
-     */
-    onclose?: Function | undefined;
-    /**
-     * - Snippet for header content
-     */
-    header?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Snippet for actions content
-     */
-    actions?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Default slot content
-     */
-    children?: import("svelte").Snippet<[]> | undefined;
-};
-//# sourceMappingURL=Drawer.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;AAgJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAqD"}