Type Tabs using $$Props

src/lib/components/tabs/Tab.svelte

@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+  type TTabProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte";
   import { Focus, focusIn } from "$lib/utils/focus-management";
@@ -9,15 +18,21 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTabProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
-
   export let disabled = false;
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useTabsContext("Tab");
   let id = `headlessui-tabs-tab-${useId()}`;
   let tabRef: HTMLElement | null = null;

src/lib/components/tabs/TabGroup.svelte

@@ -36,6 +36,15 @@
 
     return context;
   }
+
+  type TTabGroupProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    defaultIndex?: number;
+    vertical?: boolean;
+    manual?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -52,10 +61,11 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+
-    "change",
+  /***** Props *****/
-  ]);
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTabGroupProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
@@ -63,13 +73,18 @@
   export let vertical = false;
   export let manual = false;
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
+  const dispatch = createEventDispatcher();
+
+  /***** Component *****/
   let selectedIndex: StateDefinition["selectedIndex"] = null;
   let tabs: StateDefinition["tabs"] = [];
   let panels: StateDefinition["panels"] = [];
   let listRef: StateDefinition["listRef"] = writable(null);
 
-  const dispatch = createEventDispatcher();
-
   let api = writable<StateDefinition>({
     selectedIndex,
     orientation: vertical ? "vertical" : "horizontal",

src/lib/components/tabs/TabList.svelte

@@ -1,15 +1,29 @@
+<script lang="ts" context="module">
+  type TTabListProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { useTabsContext } from "./TabGroup.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTabListProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useTabsContext("TabList");
   let listRef = $api.listRef;
 

src/lib/components/tabs/TabPanel.svelte

@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TTabPanelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte";
   import { useTabsContext } from "./TabGroup.svelte";
@@ -6,13 +13,23 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features } from "$lib/utils/Render.svelte";
+  import Render, {
+    Features,
+    type TPassThroughProps,
+  } from "$lib/utils/Render.svelte";
   import { writable } from "svelte/store";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTabPanelProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let elementRef = writable<HTMLElement | null>(null);
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;

src/lib/components/tabs/TabPanels.svelte

@@ -1,15 +1,29 @@
+<script lang="ts" context="module">
+  type TTabPanelsProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { useTabsContext } from "./TabGroup.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTabPanelsProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useTabsContext("TabPanels");
   $: slotProps = { selectedIndex: $api.selectedIndex };
 </script>

src/routes/tabs/tabs-with-pure-tailwind.svelte

@@ -56,7 +56,6 @@
     >
       {#each tabs as tab, tabIdx (tab.name)}
         <Tab
-          key={tab.name}
           disabled={tab.disabled}
           class={({ selected }) =>
             classNames(
@@ -85,7 +84,7 @@
 
     <TabPanels class="mt-4">
       {#each tabs as tab (tab.name)}
-        <TabPanel class="bg-white rounded-lg p-4 shadow" key={tab.name}>
+        <TabPanel class="bg-white rounded-lg p-4 shadow">
           {tab.content}
         </TabPanel>
       {/each}