From ca2fe8ece1bc94769f1b52ac444dd8e15b7f996a Mon Sep 17 00:00:00 2001
From: Carter Mintey <cmintey8@gmail.com>
Date: Thu, 7 Nov 2024 21:44:29 -0600
Subject: [PATCH] copy component from skeleton to fix typing

---
 src/lib/components/Tab/TabGroup.svelte        | 73 +++++++++++++++++++
 src/routes/account/+page.svelte               |  3 +-
 src/routes/admin/+layout.svelte               |  3 +-
 .../admin/groups/[groupId]/+layout@.svelte    |  3 +-
 4 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Tab/TabGroup.svelte

diff --git a/src/lib/components/Tab/TabGroup.svelte b/src/lib/components/Tab/TabGroup.svelte
new file mode 100644
index 0000000..75f0bb6
--- /dev/null
+++ b/src/lib/components/Tab/TabGroup.svelte
@@ -0,0 +1,73 @@
+<!-- Custom TabGroup component from Skeleton which fixes a type issue with svelte 5 -->
+<script lang="ts">
+    import type { CssClasses } from "@skeletonlabs/skeleton";
+    // Slots
+    /**
+     * @slot panel - An optional region to house tab content.
+     */
+
+    import { setContext } from "svelte";
+
+    // Props (Group)
+    /** Provide classes to set the tab list flex justification. */
+    export let justify: CssClasses = "justify-start";
+    /** Provide classes to set the tab group border styles. */
+    export let border: CssClasses = "border-b border-surface-400-500-token";
+
+    // Props (Tab)
+    /** Provide classes to style each tab's active styles. */
+    export let active: CssClasses = "border-b-2 border-surface-900-50-token";
+    /** Provide classes to style each tab's hover styles. */
+    export let hover: CssClasses = "hover:variant-soft";
+    /** Provide classes to style each tab's flex styles. */
+    export let flex: CssClasses = "flex-none";
+    /** Provide classes to style each tab's padding styles. */
+    export let padding: CssClasses = "px-4 py-2";
+    /** Provide classes to style each tab's box radius styles. */
+    export let rounded: CssClasses = "rounded-tl-container-token rounded-tr-container-token";
+    /** Provide classes to set the vertical spacing between items. */
+    export let spacing: CssClasses = "space-y-1";
+
+    // Props (regions)
+    /** Provide arbitrary classes to style the tab list region. */
+    export let regionList: CssClasses = "";
+    /** Provide arbitrary classes to style the tab panel region. */
+    export let regionPanel: CssClasses = "";
+
+    // Props (a11y)
+    /** Provide the ID of the element that labels the tab list. */
+    export let labelledby = "";
+    /** Matches the tab aria-control value, pairs with the panel. */
+    export let panellabelledby = "";
+
+    // Context
+    setContext("active", active);
+    setContext("hover", hover);
+    setContext("flex", flex);
+    setContext("padding", padding);
+    setContext("rounded", rounded);
+    setContext("spacing", spacing);
+
+    // Classes
+    const cBase = "space-y-4";
+    const cList = "flex overflow-x-auto hide-scrollbar";
+    const cPanel = "";
+
+    // Reactive
+    $: classesBase = `${cBase} ${$$props.class ?? ""}`;
+    $: classesList = `${cList} ${justify} ${border} ${regionList}`;
+    $: classesPanel = `${cPanel} ${regionPanel}`;
+</script>
+
+<div class="tab-group {classesBase}" data-testid="tab-group">
+    <!-- Tab List -->
+    <div class="tab-list {classesList}" aria-labelledby={labelledby} role="tablist">
+        <slot />
+    </div>
+    <!-- Tab Panel -->
+    {#if $$slots.panel}
+        <div class="tab-panel {classesPanel}" aria-labelledby={panellabelledby} role="tabpanel" tabindex="0">
+            <slot name="panel" />
+        </div>
+    {/if}
+</div>
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 3750509..29f8570 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -3,8 +3,9 @@
     import ChangePassword from "$lib/components/account/ChangePassword.svelte";
     import EditProfile from "$lib/components/account/EditProfile.svelte";
     import Avatar from "$lib/components/Avatar.svelte";
-    import { FileButton, Tab, TabGroup } from "@skeletonlabs/skeleton";
+    import { FileButton, Tab } from "@skeletonlabs/skeleton";
     import type { PageServerData } from "./$types";
+    import TabGroup from "$lib/components/Tab/TabGroup.svelte";
 
     interface Props {
         data: PageServerData;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 36f9242..18864a6 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import { Tab, TabGroup } from "@skeletonlabs/skeleton";
+    import { Tab } from "@skeletonlabs/skeleton";
     import type { Snapshot } from "./$types";
+    import TabGroup from "$lib/components/Tab/TabGroup.svelte";
 
     interface Props {
         children?: import("svelte").Snippet;
diff --git a/src/routes/admin/groups/[groupId]/+layout@.svelte b/src/routes/admin/groups/[groupId]/+layout@.svelte
index 352608a..c38b7ef 100644
--- a/src/routes/admin/groups/[groupId]/+layout@.svelte
+++ b/src/routes/admin/groups/[groupId]/+layout@.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import { goto, invalidateAll } from "$app/navigation";
-    import { Tab, TabGroup } from "@skeletonlabs/skeleton";
+    import { Tab } from "@skeletonlabs/skeleton";
     import type { LayoutData, Snapshot } from "./$types";
     import { page } from "$app/stores";
     import { GroupAPI } from "$lib/api/groups";
+    import TabGroup from "$lib/components/Tab/TabGroup.svelte";
 
     interface Props {
         data: LayoutData;