Refactor types out into types.ts file and use /// <reference types="...">

Fixes packaging problems.

src/lib/components/dialog/Dialog.svelte

@@ -74,10 +74,8 @@
   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,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/dialog/DialogOverlay.svelte

@@ -12,7 +12,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/dialog/DialogTitle.svelte

@@ -13,7 +13,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/disclosure/Disclosure.svelte

@@ -58,7 +58,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/disclosure/DisclosureButton.svelte

@@ -15,9 +15,10 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { writable } from "svelte/store";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/disclosure/DisclosurePanel.svelte

@@ -23,10 +23,8 @@
   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,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/listbox/Listbox.svelte

@@ -78,7 +78,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/listbox/ListboxButton.svelte

@@ -15,8 +15,9 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/listbox/ListboxLabel.svelte

@@ -8,11 +8,12 @@
 <script lang="ts">
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/listbox/ListboxOption.svelte

@@ -15,11 +15,12 @@
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import { get_current_component } from "svelte/internal";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/listbox/ListboxOptions.svelte

@@ -18,14 +18,12 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import Render, {
-    Features,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/menu/Menu.svelte

@@ -12,7 +12,8 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   export enum MenuStates {
     Open,

src/lib/components/menu/MenuButton.svelte

@@ -14,11 +14,12 @@
   import { Focus } from "$lib/utils/calculate-active-index";
   import { tick } from "svelte";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/menu/MenuItem.svelte

@@ -14,11 +14,12 @@
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { afterUpdate, onDestroy, onMount, tick } from "svelte";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/menu/MenuItems.svelte

@@ -20,12 +20,10 @@
   import { tick } from "svelte";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import type { SupportedAs } from "$lib/internal/elements";
-  import Render, {
-    Features,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/popover/Popover.svelte

@@ -61,7 +61,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/popover/PopoverButton.svelte

@@ -22,8 +22,9 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/popover/PopoverGroup.svelte

@@ -24,7 +24,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/popover/PopoverOverlay.svelte

@@ -12,11 +12,9 @@
   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,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/popover/PopoverPanel.svelte

@@ -41,10 +41,8 @@
   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,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/radio-group/RadioGroup.svelte

@@ -61,7 +61,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/radio-group/RadioGroupOption.svelte

@@ -24,7 +24,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/switch/Switch.svelte

@@ -19,8 +19,9 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/switch/SwitchGroup.svelte

@@ -24,7 +24,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/tabs/Tab.svelte

@@ -19,8 +19,9 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/tabs/TabGroup.svelte

@@ -68,7 +68,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/tabs/TabList.svelte

@@ -11,7 +11,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/tabs/TabPanel.svelte

@@ -13,11 +13,9 @@
   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,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
   import { writable } from "svelte/store";
+  import { Features, type TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/tabs/TabPanels.svelte

@@ -11,7 +11,8 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+  import Render from "$lib/utils/Render.svelte";
+  import type { TPassThroughProps } from "$lib/types";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;

src/lib/components/transitions/TransitionChild.svelte

@@ -1,9 +1,5 @@
 <script lang="ts" context="module">
-  export type TTransitionChildProps<
-    TAsProp extends SupportedAs,
-    TDefaultAs
-  > = Omit<TPassThroughProps<{}, TAsProp, TDefaultAs>, "class"> & {
-    /** Classes to add to the transitioning element during the entire enter phase */
+  export type TTransitionProps = {
     enter?: string;
     /** Classes to add to the transitioning element before the enter phase starts */
     enterFrom?: string;
@@ -22,9 +18,23 @@
     leaveTo?: string;
     /** Whether the element should be unmounted, instead of just hidden, based on the open/closed state */
     unmount?: boolean;
-    /** The class attribute for the transition element. These classes will always be present. */
+    /**
+     * A list of actions to apply to the component's HTML element.
+     *
+     * Each action must take the form `[action]` or `[action, options]`:
+     *
+     * use={[[action1], [action2, action2Options], [action3]]}
+     */
+    use?: HTMLActionArray;
+    /** The class attribute for this component. It will always be present. */
     class?: string;
+    /** The style attribute for this component. It will always be present. */
+    style?: string;
+    /** The element this component should render as */
+    as?: SupportedAs;
   };
+
+  type TTransitionChildProps = TTransitionProps & Omit<TRestProps<"div">, "as">;
 </script>
 
 <script lang="ts">
@@ -47,15 +57,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, {
-    Features,
-    RenderStrategy,
-    type TPassThroughProps,
-  } from "$lib/utils/Render.svelte";
+  import Render, { RenderStrategy } from "$lib/utils/Render.svelte";
+  import { Features, type TRestProps } from "$lib/types";
 
   /***** Props *****/
-  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionChildProps<TAsProp, "div">;
+  type $$Props = TTransitionChildProps;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];

src/lib/components/transitions/TransitionChildWrapper.svelte

@@ -18,8 +18,7 @@
 
   /***** Props *****/
 
-  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionRootProps<TAsProp, "div">;
+  type $$Props = TTransitionRootProps;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];

src/lib/components/transitions/TransitionRoot.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" context="module">
-  export type TTransitionRootProps<
-    TAsProp extends SupportedAs,
-    TDefaultAs
-  > = TTransitionChildProps<TAsProp, TDefaultAs> & {
-    /** Whether the children should be shown */
-    show?: boolean;
-    /** Whether the transition should run on initial mount */
-    appear?: boolean;
-  };
+  export type TTransitionRootProps = TTransitionProps &
+    Omit<TRestProps<"div">, "as"> & {
+      /** Whether the children should be shown */
+      show?: boolean;
+      /** Whether the transition should run on initial mount */
+      appear?: boolean;
+    };
 </script>
 
 <script lang="ts">
@@ -16,7 +14,7 @@
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   import TransitionChild, {
-    type TTransitionChildProps,
+    type TTransitionProps,
   } from "$lib/components/transitions/TransitionChild.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
@@ -33,6 +31,7 @@
     TreeStates,
     useNesting,
   } from "./common.svelte";
+  import type { TRestProps } from "$lib/types";
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
     "beforeEnter",
     "beforeLeave",
@@ -41,8 +40,7 @@
   ]);
 
   /***** Props *****/
-  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionRootProps<TAsProp, "div">;
+  type $$Props = TTransitionRootProps;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];

src/lib/types.ts

@@ -0,0 +1,89 @@
+/// <reference types="svelte2tsx/svelte-jsx" />
+
+import type { HTMLActionArray } from "./hooks/use-actions";
+import type { SupportedAs, SupportedElement } from "./internal/elements";
+
+// Can't figure out how to import from Render.svelte, so this must be moved here instead.
+export enum Features {
+  /** No features at all */
+  None = 0,
+
+  /**
+   * When used, this will allow us to use one of the render strategies.
+   *
+   * **The render strategies are:**
+   *    - **Unmount**   _(Will unmount the component.)_
+   *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+   */
+  RenderStrategy = 1,
+
+  /**
+   * When used, this will allow the user of our component to be in control. This can be used when
+   * you want to transition based on some state.
+   */
+  Static = 2,
+}
+
+export type TRestProps<T> = T extends SupportedElement
+  ? Omit<
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[T]>,
+    "class" | "style"
+  >
+  : {};
+
+export type TResolveAs<TAsProp, TDefaultAs> = SupportedAs extends TAsProp
+  ? TDefaultAs
+  : TAsProp;
+
+export type TRenderProps<
+  TSlotProps extends {},
+  TAsProp extends SupportedAs,
+  TDefaultAs
+  > = TRestProps<TResolveAs<TAsProp, TDefaultAs>> & {
+    name: string;
+    slotProps: TSlotProps;
+    el?: HTMLElement | null;
+    visible?: boolean;
+    features?: Features;
+    as: TAsProp;
+    static?: boolean;
+    unmount?: boolean;
+    /**
+     * A list of actions to apply to the component's HTML element.
+     *
+     * Each action must take the form `[action]` or `[action, options]`:
+     *
+     * use={[[action1], [action2, action2Options], [action3]]}
+     */
+    use?: HTMLActionArray;
+    /**
+     * The class attribute for this component.
+     *
+     * In addition to a regular string, this may be a function that returns a string.
+     * In that case, the function will be passed this component's slot props as an argument,
+     * allowing you to conditionally apply classes. See the component's documentation for more.
+     */
+    class?: ((props: TSlotProps) => string) | string;
+    /**
+     * The style attribute for this component.
+     *
+     * In addition to a regular string, this may be a function that returns a string.
+     * In that case, the function will be passed this component's slot props as an argument,
+     * allowing you to conditionally apply styles. See the component's documentation for more.
+     */
+    style?: ((props: TSlotProps) => string) | string;
+  };
+
+export type TInternalProps = "name" | "slotProps" | "el" | "visible" | "features";
+
+export type TPassThroughProps<
+  TSlotProps extends {},
+  TAsProp extends SupportedAs,
+  TDefaultAs
+  > = Omit<
+    TRenderProps<TSlotProps, TAsProp, TDefaultAs>,
+    TInternalProps | "as" | "static" | "unmount"
+  > & {
+    /** The HTML element the component should render as */
+    as?: TAsProp;
+  };

src/lib/utils/Render.svelte

@@ -1,101 +1,19 @@
 <script lang="ts" context="module">
-  import type { SupportedAs, SupportedElement } from "$lib/internal/elements";
+  import type { SupportedAs } from "$lib/internal/elements";
   import { getElementComponent } from "$lib/internal/elements";
   import { get_current_component } from "svelte/internal";
 
-  export enum Features {
-    /** No features at all */
-    None = 0,
-
-    /**
-     * When used, this will allow us to use one of the render strategies.
-     *
-     * **The render strategies are:**
-     *    - **Unmount**   _(Will unmount the component.)_
-     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
-     */
-    RenderStrategy = 1,
-
-    /**
-     * When used, this will allow the user of our component to be in control. This can be used when
-     * you want to transition based on some state.
-     */
-    Static = 2,
-  }
-
   export enum RenderStrategy {
     Unmount,
     Hidden,
   }
-
-  type TRestProps<T> = T extends SupportedElement
-    ? Omit<
-        svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[T]>,
-        "class" | "style"
-      >
-    : {};
-
-  type TResolveAs<TAsProp, TDefaultAs> = SupportedAs extends TAsProp
-    ? TDefaultAs
-    : TAsProp;
-  type TRenderProps<
-    TSlotProps extends {},
-    TAsProp extends SupportedAs,
-    TDefaultAs
-  > = TRestProps<TResolveAs<TAsProp, TDefaultAs>> & {
-    name: string;
-    slotProps: TSlotProps;
-    el?: HTMLElement | null;
-    visible?: boolean;
-    features?: Features;
-    as: TAsProp;
-    static?: boolean;
-    unmount?: boolean;
-    /**
-     * A list of actions to apply to the component's HTML element.
-     *
-     * Each action must take the form `[action]` or `[action, options]`:
-     *
-     * use={[[action1], [action2, action2Options], [action3]]}
-     */
-    use?: HTMLActionArray;
-    /**
-     * The class attribute for this component.
-     *
-     * In addition to a regular string, this may be a function that returns a string.
-     * In that case, the function will be passed this component's slot props as an argument,
-     * allowing you to conditionally apply classes. See the component's documentation for more.
-     */
-    class?: ((props: TSlotProps) => string) | string;
-    /**
-     * The style attribute for this component.
-     *
-     * In addition to a regular string, this may be a function that returns a string.
-     * In that case, the function will be passed this component's slot props as an argument,
-     * allowing you to conditionally apply styles. See the component's documentation for more.
-     */
-    style?: ((props: TSlotProps) => string) | string;
-  };
-
-  type TInternalProps = "name" | "slotProps" | "el" | "visible" | "features";
-
-  export type TPassThroughProps<
-    TSlotProps extends {},
-    TAsProp extends SupportedAs,
-    TDefaultAs
-  > = Omit<
-    TRenderProps<TSlotProps, TAsProp, TDefaultAs>,
-    TInternalProps | "as" | "static" | "unmount"
-  > & {
-    /** The HTML element the component should render as */
-    as?: TAsProp;
-  };
 </script>
 
 <script lang="ts">
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SvelteComponent } from "svelte";
+  import { Features, type TRenderProps } from "$lib/types";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   type TSlotProps = $$Generic<{}>;