Export Tabs type from @gradio/tabs and fix the Playground to be c…

…ompatible with the new Tabs API (#9738)

* Export Tab type from @gradio/tab

* Fix DemosLite to use the new Tabs API

* add changeset

* Set the default value of the initial_tabs props

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/small-chicken-retire.md

@@ -0,0 +1,7 @@
+---
+"@gradio/tabs": patch
+"gradio": patch
+"website": patch
+---
+
+fix:Export `Tabs` type from `@gradio/tabs` and fix the Playground to be compatible with the new Tabs API

js/_website/src/lib/components/DemosLite.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BaseCode as Code, BaseWidget as CodeWidget } from "@gradio/code";
-	import { BaseTabs as Tabs } from "@gradio/tabs";
+	import { BaseTabs as Tabs, type Tab } from "@gradio/tabs";
 	import { BaseTabItem as TabItem } from "@gradio/tabitem";
 	import Slider from "./Slider.svelte";
 	import Fullscreen from "./icons/Fullscreen.svelte";
@@ -447,8 +447,23 @@
 		}
 	}
 
-	const TABS = ["Code", "Packages"] as const;
-	let selected_tab: (typeof TABS)[number] = "Code";
+	const TABS: Tab[] = [
+		{
+			name: "Code",
+			id: "code",
+			visible: true,
+			interactive: true,
+			elem_id: "code"
+		},
+		{
+			name: "Packages",
+			id: "packages",
+			visible: true,
+			interactive: true,
+			elem_id: "packages"
+		}
+	] as const;
+	let selected_tab: (typeof TABS)[number]["id"] = "code";
 	let generate_placeholders = [
 		"What do you want to build?",
 		"What do you want to build? e.g. 'An image to audio app'",
@@ -524,11 +539,16 @@
 					<div
 						class="mt-1 flex-1 flex flex-col relative overflow-scroll code-scroll"
 					>
-						<Tabs selected={selected_tab} elem_classes={["editor-tabs"]}>
+						<Tabs
+							inital_tabs={TABS}
+							selected={selected_tab}
+							elem_classes={["editor-tabs"]}
+						>
 							<TabItem
-								name={TABS[0]}
-								visible
-								interactive
+								id={TABS[0].id}
+								name={TABS[0].name}
+								visible={TABS[0].visible}
+								interactive={TABS[0].interactive}
 								elem_classes={["editor-tabitem"]}
 							>
 								<div class="flex-1">
@@ -543,9 +563,10 @@
 								</div>
 							</TabItem>
 							<TabItem
-								name={TABS[1]}
-								visible
-								interactive
+								id={TABS[1].id}
+								name={TABS[1].name}
+								visible={TABS[1].visible}
+								interactive={TABS[1].interactive}
 								elem_classes={["editor-tabitem"]}
 							>
 								<div class="flex-1">

js/tabs/Index.svelte

@@ -1,27 +1,19 @@
 <script context="module" lang="ts">
-	export { default as BaseTabs, TABS } from "./shared/Tabs.svelte";
+	export { default as BaseTabs, TABS, type Tab } from "./shared/Tabs.svelte";
 </script>
 
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
-	import Tabs from "./shared/Tabs.svelte";
+	import Tabs, { type Tab } from "./shared/Tabs.svelte";
 
 	const dispatch = createEventDispatcher();
 
-	interface Tab {
-		name: string;
-		id: string | number;
-		elem_id: string | undefined;
-		visible: boolean;
-		interactive: boolean;
-	}
-
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
-	export let inital_tabs: Tab[];
+	export let inital_tabs: Tab[] = [];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;

js/tabs/shared/Tabs.svelte

@@ -1,32 +1,31 @@
-<script context="module">
+<script context="module" lang="ts">
 	export const TABS = {};
+
+	export interface Tab {
+		name: string;
+		id: string | number;
+		elem_id: string | undefined;
+		visible: boolean;
+		interactive: boolean;
+	}
 </script>
 
 <script lang="ts">
 	import {
 		setContext,
 		createEventDispatcher,
 		onMount,
-		onDestroy,
-		tick
+		onDestroy
 	} from "svelte";
 	import OverflowIcon from "./OverflowIcon.svelte";
 	import { writable } from "svelte/store";
 	import type { SelectData } from "@gradio/utils";
 
-	interface Tab {
-		name: string;
-		id: string | number;
-		elem_id: string | undefined;
-		visible: boolean;
-		interactive: boolean;
-	}
-
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
-	export let inital_tabs: Tab[];
+	export let inital_tabs: Tab[] = [];
 
 	let tabs: Tab[] = inital_tabs;
 	let overflow_menu_open = false;