From ea76038d74631dc8a3f3f0a67f5bd669109f3c5e Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Wed, 26 Jun 2024 19:53:51 +0300
Subject: [PATCH] feat(next/use-tabs): support className in renderTabs

Support the className attribute in `renderTabs`.
---
 src/next/use-tabs.d.ts | 8 ++++----
 src/next/use-tabs.js   | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/next/use-tabs.d.ts b/src/next/use-tabs.d.ts
index 8f77cdd..0758bc4 100644
--- a/src/next/use-tabs.d.ts
+++ b/src/next/use-tabs.d.ts
@@ -24,10 +24,10 @@ interface Result<T extends Tab> {
 	onActivate: (e: Event) => void;
 }
 
-export type RenderTabs<T extends Tab> = Pick<
-	Result<T>,
-	'tabs' | 'active' | 'onActivate'
->;
+export interface RenderTabs<T extends Tab>
+	extends Pick<Result<T>, 'tabs' | 'active' | 'onActivate'> {
+	className?: string;
+}
 
 export declare const useTabs: <T extends Tab, P extends Options>(
 	tabs: T[],
diff --git a/src/next/use-tabs.js b/src/next/use-tabs.js
index a2d710a..fe60218 100644
--- a/src/next/use-tabs.js
+++ b/src/next/use-tabs.js
@@ -48,15 +48,16 @@ export const useTabs = (tabs, { hashParam, onActivate }) => {
 	};
 };
 
-export const renderTabs = ({ tabs, active, onActivate }) =>
+export const renderTabs = ({ tabs, active, onActivate, className }) =>
 	tabs.map((tab) => {
 		const title = invoke(tab.title);
 		return html`<cosmoz-tab-next
 			name=${tab.name}
+			class=${ifDefined(className)}
+			title=${ifDefined(typeof title === 'string' ? title : undefined)}
 			?active=${active.name === tab.name}
 			?hidden=${tab.hidden}
 			?disabled=${tab.disabled}
-			title=${ifDefined(typeof title === 'string' ? title : undefined)}
 			@click=${onActivate}
 			>${tab.content ?? title}</cosmoz-tab-next
 		>`;