feat(tab): custom class

src/lib/components/Tabs/TabsContent.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { getTabsContext } from './tabsContext';
 
 	export let value: string;
+	export let className: string = '';
+	export { className as class };
 	const { activeTab } = getTabsContext();
 
 	$: isActive = $activeTab === value;
 </script>
 
 {#if isActive}
-	<div class="p-4">
+	<div class={cn('p-4', className)}>
 		<slot />
 	</div>
 {/if}

src/lib/components/Tabs/TabsList.svelte

@@ -1,4 +1,11 @@
-<div class="border-b border-sucu-gray-light">
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let className: string = '';
+	export { className as class };
+</script>
+
+<div class={cn('border-b border-sucu-gray-light', className)}>
 	<nav class="-mb-2 sm:mb-0 flex space-x-8 text-sucu-pink-hover">
 		<slot />
 	</nav>

src/lib/components/Tabs/TabsRoot.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { setTabsContext } from './tabsContext';
 
 	export let defaultActiveTab: string = '';
+	export let className: string = '';
+	export { className as class };
 
 	const tabs = setTabsContext();
 
@@ -10,6 +13,6 @@
 	}
 </script>
 
-<div>
+<div class={className}>
 	<slot />
 </div>

src/lib/components/Tabs/TabsTrigger.svelte

@@ -5,6 +5,8 @@
 	import { slide } from 'svelte/transition';
 
 	export let value: string;
+	export let className: string = '';
+	export { className as class };
 
 	const tabsContext = getTabsContext();
 	const { activeTab } = tabsContext;
@@ -20,7 +22,7 @@
 	}
 </script>
 
-<div class="relative inline-block">
+<div class={cn('relative inline-block', className)}>
 	<button
 		class={cn(
 			'text-base mx-auto whitespace-nowrap py-4 px-1 font-medium sm:text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',