@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -1,187 +1,187 @@
-<script>
-  import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  /**
-   * Default labels for user-visible strings in AboutShow.
-   * Consumers can override via the `labels` prop.
-   */
-  const defaultLabels = {
-    followLabel: (name) => `Follow ${name}:`,
-    showLess: 'Show less',
-    showMore: 'Show more',
-    closePopover: 'Close',
-  };
-
-  let {
-    performers = [],
-    ShowImage = '',
-    description = '',
-    showTitle = true,
-    title = "About the Show",
-    showReadMore = true,
-    getImageUrl = (url) => url,
-    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let activePerformer = $state(null);
-  let characterLimit = 1500;
-  let showFullDescription = $state(false);
-
-  let validPerformers = $derived(performers.filter(performer => {
-    const isConfirmed = performer.acceptedState === 2;
-    const isNotHidden = !performer.shouldBeHidden;
-    const profile = performer.RosterPerformer?.User?.performerProfile;
-    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
-    return isConfirmed && isNotHidden && hasName;
-  }));
-
-  function togglePerformer(id) {
-    if (activePerformer === id) {
-      activePerformer = null;
-    } else {
-      activePerformer = id;
-    }
-  }
-
-  function closePerformer() {
-    activePerformer = null;
-  }
-
-  function toggleDescription() {
-    showFullDescription = !showFullDescription;
-  }
-</script>
-
-<div class="flex flex-col gap-3">
-  {#if showTitle}
-    <h2 class="{typography.h2} text-xl">{title}</h2>
-  {/if}
-
-  {#if ShowImage && description}
-    <div>
-      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
-    </div>
-  {/if}
-
-  {#if description}
-    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
-      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>{description}</p>
-      {#if showReadMore && description.length > characterLimit}
-        <button
-          onclick={toggleDescription}
-          class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
-        >
-          {labels.showLess}
-        </button>
-      {/if}
-    {:else}
-      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>
-        {description.slice(0, characterLimit)}...
-      </p>
-      <button
-        onclick={toggleDescription}
-        class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
-      >
-        {labels.showMore}
-      </button>
-    {/if}
-  {/if}
-
-  {#if validPerformers.length > 0}
-    <div class="py-2">
-      {#if activePerformer !== null}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="fixed inset-0 z-40" onclick={closePerformer}></div>
-      {/if}
-
-      <div class="flex flex-wrap justify-start gap-4">
-        {#each validPerformers as performer, index}
-          {@const profile = performer.RosterPerformer?.User?.performerProfile}
-          {@const displayName = profile?.useStageName && profile?.stageName
-            ? profile.stageName
-            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
-          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
-          <div class="relative">
-            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
-              <!-- svelte-ignore a11y_click_events_have_key_events -->
-              <!-- svelte-ignore a11y_no_static_element_interactions -->
-              <div
-                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
-                onclick={(e) => e.stopPropagation()}
-              >
-                <div
-                  class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
-                ></div>
-
-                <button
-                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  onclick={closePerformer}
-                  aria-label={labels.closePopover}
-                >
-                  <CloseOutline class="w-5 h-5" />
-                </button>
-
-                <p class="{typography.sm} leading-relaxed pr-6">
-                  {profile?.biography || ''}
-                </p>
-
-                {#if profile?.instagram || profile?.twitter}
-                  <div class="flex gap-2 items-center {typography.smMuted} mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
-                    <span>{typeof labels.followLabel === 'function' ? labels.followLabel(firstName) : labels.followLabel}</span>
-                    {#if profile?.instagram}
-                      <a
-                        href={profile.instagram}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
-                        aria-label="Instagram profile"
-                      >
-                        <LogoInstagram size={20} />
-                      </a>
-                    {/if}
-                    {#if profile?.twitter}
-                      <a
-                        href={profile.twitter}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
-                        aria-label="Twitter profile"
-                      >
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
-                        </svg>
-                      </a>
-                    {/if}
-                  </div>
-                {/if}
-              </div>
-            {/if}
-
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div
-              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
-              onclick={() => togglePerformer(performer.ID)}
-            >
-              <img
-                src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
-                alt={displayName || 'Performer'}
-                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
-              />
-              <p class="{typography.xs} text-center leading-tight line-clamp-2">
-                {#if !performer.shouldBeHidden}
-                  {displayName}
-                {/if}
-              </p>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
+<script>
+  import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  /**
+   * Default labels for user-visible strings in AboutShow.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    followLabel: (name) => `Follow ${name}:`,
+    showLess: 'Show less',
+    showMore: 'Show more',
+    closePopover: 'Close',
+  };
+
+  let {
+    performers = [],
+    ShowImage = '',
+    description = '',
+    showTitle = true,
+    title = "About the Show",
+    showReadMore = true,
+    getImageUrl = (url) => url,
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let activePerformer = $state(null);
+  let characterLimit = 1500;
+  let showFullDescription = $state(false);
+
+  let validPerformers = $derived(performers.filter(performer => {
+    const isConfirmed = performer.acceptedState === 2;
+    const isNotHidden = !performer.shouldBeHidden;
+    const profile = performer.RosterPerformer?.User?.performerProfile;
+    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
+    return isConfirmed && isNotHidden && hasName;
+  }));
+
+  function togglePerformer(id) {
+    if (activePerformer === id) {
+      activePerformer = null;
+    } else {
+      activePerformer = id;
+    }
+  }
+
+  function closePerformer() {
+    activePerformer = null;
+  }
+
+  function toggleDescription() {
+    showFullDescription = !showFullDescription;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class="{typography.h2} text-xl">{title}</h2>
+  {/if}
+
+  {#if ShowImage && description}
+    <div>
+      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
+    </div>
+  {/if}
+
+  {#if description}
+    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>{description}</p>
+      {#if showReadMore && description.length > characterLimit}
+        <button
+          onclick={toggleDescription}
+          class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
+        >
+          {labels.showLess}
+        </button>
+      {/if}
+    {:else}
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>
+        {description.slice(0, characterLimit)}...
+      </p>
+      <button
+        onclick={toggleDescription}
+        class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
+      >
+        {labels.showMore}
+      </button>
+    {/if}
+  {/if}
+
+  {#if validPerformers.length > 0}
+    <div class="py-2">
+      {#if activePerformer !== null}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-40" onclick={closePerformer}></div>
+      {/if}
+
+      <div class="flex flex-wrap justify-start gap-4">
+        {#each validPerformers as performer, index}
+          {@const profile = performer.RosterPerformer?.User?.performerProfile}
+          {@const displayName = profile?.useStageName && profile?.stageName
+            ? profile.stageName
+            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
+          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
+          <div class="relative">
+            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
+                onclick={(e) => e.stopPropagation()}
+              >
+                <div
+                  class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
+                ></div>
+
+                <button
+                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  onclick={closePerformer}
+                  aria-label={labels.closePopover}
+                >
+                  <CloseOutline class="w-5 h-5" />
+                </button>
+
+                <p class="{typography.sm} leading-relaxed pr-6">
+                  {profile?.biography || ''}
+                </p>
+
+                {#if profile?.instagram || profile?.twitter}
+                  <div class="flex gap-2 items-center {typography.smMuted} mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                    <span>{typeof labels.followLabel === 'function' ? labels.followLabel(firstName) : labels.followLabel}</span>
+                    {#if profile?.instagram}
+                      <a
+                        href={profile.instagram}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        aria-label="Instagram profile"
+                      >
+                        <LogoInstagram size={20} />
+                      </a>
+                    {/if}
+                    {#if profile?.twitter}
+                      <a
+                        href={profile.twitter}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        aria-label="Twitter profile"
+                      >
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                        </svg>
+                      </a>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
+              onclick={() => togglePerformer(performer.ID)}
+            >
+              <img
+                src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
+                alt={displayName || 'Performer'}
+                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
+              />
+              <p class="{typography.xs} text-center leading-tight line-clamp-2">
+                {#if !performer.shouldBeHidden}
+                  {displayName}
+                {/if}
+              </p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>