From f03512d07ca36b6e332e9836afc796594e6bf936 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 18:01:29 -0800
Subject: [PATCH] Type RadioGroup with $$Props

---
 .../components/radio-group/RadioGroup.svelte  | 40 +++++++++++++------
 .../radio-group/RadioGroupOption.svelte       | 25 ++++++++++--
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index c5838b6..d200a1a 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -43,6 +43,14 @@
 
     return context;
   }
+
+  type TRadioGroupProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    value: StateDefinition["value"];
+    disabled?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -51,25 +59,31 @@
   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";
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "change",
-  ]);
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TRadioGroupProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
-  export let disabled = false;
   export let value: StateDefinition["value"];
+  export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
+  const dispatch = createEventDispatcher<{
+    change: any;
+  }>();
+
+  /***** Component *****/
   let radioGroupRef: HTMLElement | null = null;
   let options: StateDefinition["options"] = [];
 
   let id = `headlessui-radiogroup-${useId()}`;
 
-  const dispatch = createEventDispatcher<{
-    change: any;
-  }>();
-
   let api = writable<StateDefinition>({
     options,
     value,
@@ -200,6 +214,8 @@
     id,
     role: "radiogroup",
   };
+
+  $: slotProps = {};
 </script>
 
 <DescriptionProvider name="RadioGroupDescription" let:describedby>
@@ -208,14 +224,14 @@
       {...{ ...$$restProps, ...propsWeControl }}
       {as}
       use={[...use, forwardEvents]}
-      slotProps={{}}
+      {slotProps}
       name={"RadioGroup"}
       bind:el={radioGroupRef}
       aria-labelledby={labelledby}
       aria-describedby={describedby}
       on:keydown={handleKeyDown}
     >
-      <slot />
+      <slot {...slotProps} />
     </Render>
   </LabelProvider>
 </DescriptionProvider>
diff --git a/src/lib/components/radio-group/RadioGroupOption.svelte b/src/lib/components/radio-group/RadioGroupOption.svelte
index 0eec933..2390070 100644
--- a/src/lib/components/radio-group/RadioGroupOption.svelte
+++ b/src/lib/components/radio-group/RadioGroupOption.svelte
@@ -1,3 +1,13 @@
+<script lang="ts" context="module">
+  type TRadioGroupOptionProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    value: unknown;
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { onDestroy } from "svelte";
   import DescriptionProvider from "$lib/components/description/DescriptionProvider.svelte";
@@ -9,19 +19,26 @@
   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";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TRadioGroupOptionProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
+  export let value: unknown;
+  export let disabled: boolean = false;
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   enum OptionState {
     Empty = 1 << 0,
     Active = 1 << 1,
   }
 
-  export let value: unknown;
-  export let disabled: boolean = false;
   let api = useRadioGroupContext("RadioGroupOption");
   let id = `headlessui-radiogroup-option-${useId()}`;
   let optionRef: HTMLElement | null = null;