fix(Tabs): class is reactive including child components

docs(tabs): added examples, props, and slots tables

src/lib/components/tabs/Tab.svelte

@@ -11,7 +11,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	export let href: string;
-	export let index: number;
+	export let key: string;
 
 	useContext({
 		context_id: TABS_CONTEXT_ID,
@@ -21,14 +21,14 @@
 
 	setContext(TABS_TAB_CONTEXT_ID, {
 		tab: true,
-		index
+		key
 	});
 
-	const { variant, currentTab }: { variant: string; currentTab: Writable<number | undefined> } =
+	const { variant, currentTab }: { variant: string; currentTab: Writable<string> } =
 		getContext(TABS_CONTEXT_ID);
 
 	let defaultClass = '';
-	$: if (index === $currentTab) {
+	$: if (key === $currentTab) {
 		defaultClass =
 			'group border-transparent group inline-flex items-center py-4 px-1 font-medium text-sm';
 		if (variant === 'full-width' || variant === 'bar') {
@@ -64,8 +64,8 @@
 	{#if variant === 'bar'}
 		<span
 			class="absolute inset-x-0 bottom-0 h-0.5"
-			class:bg-primary={index === $currentTab}
-			class:bg-transparent={index !== $currentTab}
+			class:bg-primary={key === $currentTab}
+			class:bg-transparent={key !== $currentTab}
 		/>
 		<HoverBackground />
 	{/if}

src/lib/components/tabs/Tabs.svelte

@@ -7,11 +7,11 @@
 	import { writable, type Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 
-	export let currentTab: number | undefined;
+	export let currentTab = '';
 	export let variant: 'default' | 'full-width' | 'bar' = 'default';
 	export let containerClass: string | undefined = undefined;
 
-	let selected: Writable<number | undefined> = writable(currentTab);
+	let selected: Writable<string> = writable(currentTab);
 	$: $selected = currentTab;
 
 	setContext(TABS_CONTEXT_ID, {
@@ -27,7 +27,7 @@
 	} else {
 		defaultContainerClass = 'border-light-border dark:border-dark-border overflow-hidden border-b';
 	}
-	const finalContainerClass = twMerge(defaultContainerClass, containerClass);
+	$: finalContainerClass = twMerge(defaultContainerClass, containerClass);
 
 	let defaultClass = '';
 	if (variant === 'bar') {
@@ -38,7 +38,7 @@
 	} else {
 		defaultClass = '-mb-px flex space-x-8';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 {#if variant === 'bar'}

src/routes/tabs/+page.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
 	import type { MaterialIcon } from '../../lib/types';
 	import { Card, Col, Tabs } from '../../lib';
+	import {
+		example1,
+		example2,
+		example3,
+		props,
+		slots,
+		iconProps,
+		tabProps,
+		tabSlots
+	} from './examples';
+	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
 
 	interface Tab {
 		href: string;
@@ -10,27 +21,23 @@
 
 	const tabs: Tab[] = [
 		{
-			href: '#step1',
-			title: 'Step 1',
+			href: '#tab1',
+			title: 'Tab 1',
 			icon: 'home'
 		},
 		{
-			href: '#step2',
-			title: 'Step 2',
+			href: '#tab2',
+			title: 'Tab 2',
 			icon: 'done'
 		},
 		{
-			href: '#step3',
-			title: 'Step 3',
+			href: '#tab3',
+			title: 'Tab 3',
 			icon: 'info'
 		}
 	];
 
-	let currentTab: number | undefined = undefined;
-
-	function handleClick(index: number) {
-		currentTab = index;
-	}
+	let currentTab = '#tab1';
 </script>
 
 <Col class="col-24">
@@ -39,12 +46,16 @@
 		<Card.Content slot="content" class="p-4">
 			<Tabs {currentTab}>
 				{#each tabs as tab, i}
-					<Tabs.Tab index={i} href={tab.href} on:click={() => handleClick(i)}>
+					<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
 						<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
 						{tab.title}
 					</Tabs.Tab>
 				{/each}
 			</Tabs>
+
+			<br />
+
+			<CodeBlock language="svelte" code={example1} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -55,12 +66,16 @@
 		<Card.Content slot="content" class="p-4">
 			<Tabs {currentTab} variant="full-width">
 				{#each tabs as tab, i}
-					<Tabs.Tab index={i} href={tab.href} on:click={() => handleClick(i)}>
+					<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
 						<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
 						{tab.title}
 					</Tabs.Tab>
 				{/each}
 			</Tabs>
+
+			<br />
+
+			<CodeBlock language="svelte" code={example2} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -71,12 +86,36 @@
 		<Card.Content slot="content" class="p-4">
 			<Tabs {currentTab} variant="bar">
 				{#each tabs as tab, i}
-					<Tabs.Tab index={i} href={tab.href} on:click={() => handleClick(i)}>
+					<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
 						<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
 						{tab.title}
 					</Tabs.Tab>
 				{/each}
 			</Tabs>
+
+			<br />
+
+			<CodeBlock language="svelte" code={example3} />
 		</Card.Content>
 	</Card>
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Tabs" {props} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Tabs" {slots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Tabs.Tab" props={tabProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Tabs.Tab" slots={tabSlots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Tabs.Tab.Icon" props={iconProps} />
+</Col>

src/routes/tabs/examples.ts

@@ -0,0 +1,187 @@
+import type { Slot, Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'currentTab',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'variant',
+		type: "'default' | 'full-width' | 'bar'",
+		default: 'default'
+	},
+	{
+		id: '3',
+		prop: 'containerClass',
+		type: 'string | undefined',
+		default: ''
+	}
+];
+
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: '<Tabs.Tab />'
+	}
+];
+
+export const tabProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'href',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'key',
+		type: 'string',
+		default: ''
+	}
+];
+
+export const tabSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'icon',
+		component: '<Tabs.Tab.Icon slot="icon" />'
+	},
+	{
+		id: '2',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'icon',
+		type: '<a class="link" href="/types#MaterialIcon">MaterialIcon</a>',
+		default: ''
+	}
+];
+
+export const example1 = `
+<script lang="ts">
+	import { Tabs } from 'stwui';
+
+   interface Tab {
+		href: string;
+		title: string;
+		icon: MaterialIcon;
+	}
+
+	const tabs: Tab[] = [
+		{
+			href: '#tab1',
+			title: 'Tab 1',
+			icon: 'home'
+		},
+		{
+			href: '#tab2',
+			title: 'Tab 2',
+			icon: 'done'
+		},
+		{
+			href: '#tab3',
+			title: 'Tab 3',
+			icon: 'info'
+		}
+	];
+
+	let currentTab = '#tab1';
+</script>
+
+<Tabs {currentTab}>
+   {#each tabs as tab, i}
+      <Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
+         <Tabs.Tab.Icon slot="icon" icon={tab.icon} />
+         {tab.title}
+      </Tabs.Tab>
+   {/each}
+</Tabs>`;
+
+export const example2 = `
+<script lang="ts">
+	import { Tabs } from 'stwui';
+
+   interface Tab {
+		href: string;
+		title: string;
+		icon: MaterialIcon;
+	}
+
+	const tabs: Tab[] = [
+		{
+			href: '#tab1',
+			title: 'Tab 1',
+			icon: 'home'
+		},
+		{
+			href: '#tab2',
+			title: 'Tab 2',
+			icon: 'done'
+		},
+		{
+			href: '#tab3',
+			title: 'Tab 3',
+			icon: 'info'
+		}
+	];
+
+	let currentTab = '#tab1';
+</script>
+
+<Tabs {currentTab} variant="full-width">
+   {#each tabs as tab, i}
+      <Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
+         <Tabs.Tab.Icon slot="icon" icon={tab.icon} />
+         {tab.title}
+      </Tabs.Tab>
+   {/each}
+</Tabs>`;
+
+export const example3 = `
+<script lang="ts">
+	import { Tabs } from 'stwui';
+
+   interface Tab {
+		href: string;
+		title: string;
+		icon: MaterialIcon;
+	}
+
+	const tabs: Tab[] = [
+		{
+			href: '#tab1',
+			title: 'Tab 1',
+			icon: 'home'
+		},
+		{
+			href: '#tab2',
+			title: 'Tab 2',
+			icon: 'done'
+		},
+		{
+			href: '#tab3',
+			title: 'Tab 3',
+			icon: 'info'
+		}
+	];
+
+	let currentTab = '#tab1';
+</script>
+
+<Tabs {currentTab} variant="bar">
+   {#each tabs as tab, i}
+      <Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
+         <Tabs.Tab.Icon slot="icon" icon={tab.icon} />
+         {tab.title}
+      </Tabs.Tab>
+   {/each}
+</Tabs>`;