@pzerelles/headlessui-svelte 2.1.2-next.33 → 2.1.2-next.35

package/dist/button/Button.svelte

@@ -3,7 +3,7 @@
 
   const DEFAULT_BUTTON_TAG = "button" as const
 
-  type ButtonRenderPropArg = {
+  export type ButtonRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
@@ -11,16 +11,14 @@
     autofocus: boolean
   }
 
-  export type ButtonProps = Props<
-    typeof DEFAULT_BUTTON_TAG,
-    ButtonRenderPropArg,
-    {
-      element?: HTMLElement
-      disabled?: boolean
-      autofocus?: boolean
-      type?: "button" | "submit" | "reset"
-    }
-  >
+  export type ButtonOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+    autofocus?: boolean
+    type?: "button" | "submit" | "reset"
+  }
+
+  export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>
 </script>
 
 <script lang="ts">

package/dist/button/Button.svelte.d.ts

@@ -1,17 +1,18 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
-type ButtonRenderPropArg = {
+export type ButtonRenderPropArg = {
     disabled: boolean;
     hover: boolean;
     focus: boolean;
     active: boolean;
     autofocus: boolean;
 };
-export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+export type ButtonOwnProps = {
     element?: HTMLElement;
     disabled?: boolean;
     autofocus?: boolean;
     type?: "button" | "submit" | "reset";
-}>;
+};
+export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>;
 declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
 export default Button;

package/dist/button/index.d.ts

@@ -1 +1 @@
-export { default as Button, type ButtonProps } from "./Button.svelte";
+export { default as Button, type ButtonProps, type ButtonRenderPropArg as ButtonSlot, type ButtonOwnProps, } from "./Button.svelte";

package/dist/button/index.js

@@ -1 +1 @@
-export { default as Button } from "./Button.svelte";
+export { default as Button, } from "./Button.svelte";

package/dist/checkbox/Checkbox.svelte

@@ -3,7 +3,7 @@
 
   const DEFAULT_CHECKBOX_TAG = "span" as const
 
-  type CheckboxRenderPropArg = {
+  export type CheckboxRenderPropArg = {
     checked: boolean
     changing: boolean
     focus: boolean
@@ -22,22 +22,24 @@
     | "role"
     | "tabIndex"
 
+  export type CheckboxOwnProps<TType = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TType
+    disabled?: boolean
+    indeterminate?: boolean
+    checked?: boolean
+    defaultChecked?: boolean
+    autofocus?: boolean
+    form?: string
+    name?: string
+    onchange?: (checked: boolean) => void
+  }
+
   export type CheckboxProps<TType = string> = Props<
     typeof DEFAULT_CHECKBOX_TAG,
     CheckboxRenderPropArg,
-    {
-      element?: HTMLElement
-      id?: string
-      value?: TType
-      disabled?: boolean
-      indeterminate?: boolean
-      checked?: boolean
-      defaultChecked?: boolean
-      autofocus?: boolean
-      form?: string
-      name?: string
-      onchange?: (checked: boolean) => void
-    }
+    CheckboxOwnProps<TType>
   >
 </script>
 

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_CHECKBOX_TAG: "span";
-type CheckboxRenderPropArg = {
+export type CheckboxRenderPropArg = {
     checked: boolean;
     changing: boolean;
     focus: boolean;
@@ -10,7 +10,7 @@ type CheckboxRenderPropArg = {
     disabled: boolean;
     indeterminate: boolean;
 };
-export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, {
+export type CheckboxOwnProps<TType = string> = {
     element?: HTMLElement;
     id?: string;
     value?: TType;
@@ -22,7 +22,8 @@ export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, C
     form?: string;
     name?: string;
     onchange?: (checked: boolean) => void;
-}>;
+};
+export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, CheckboxOwnProps<TType>>;
 declare class __sveltets_Render<TType> {
     props(): CheckboxProps<TType>;
     events(): {};

package/dist/checkbox/index.d.ts

@@ -1 +1 @@
-export { default as Checkbox, type CheckboxProps } from "./Checkbox.svelte";
+export { default as Checkbox, type CheckboxProps, type CheckboxRenderPropArg as CheckboxSlot, type CheckboxOwnProps, } from "./Checkbox.svelte";

package/dist/checkbox/index.js

@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Checkbox, } from "./Checkbox.svelte";

package/dist/close-button/index.d.ts

@@ -1 +1,2 @@
 export { default as CloseButton, type CloseButtonProps } from "./CloseButton.svelte";
+export { type ButtonSlot as CloseButtonSlot, type ButtonOwnProps as CloseButtonOwnProps } from "../button/index.js";

package/dist/close-button/index.js

@@ -1 +1,2 @@
 export { default as CloseButton } from "./CloseButton.svelte";
+export {} from "../button/index.js";

package/dist/data-interactive/DataInteractive.svelte

@@ -8,7 +8,7 @@
 
   const DEFAULT_DATA_INTERACTIVE_TAG = "svelte:fragment" as const
 
-  type DataInteractiveRenderPropArg = {
+  export type DataInteractiveRenderPropArg = {
     hover: boolean
     focus: boolean
     active: boolean

package/dist/data-interactive/DataInteractive.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PropsAsChild } from "../utils/types.js";
-type DataInteractiveRenderPropArg = {
+export type DataInteractiveRenderPropArg = {
     hover: boolean;
     focus: boolean;
     active: boolean;

package/dist/data-interactive/index.d.ts

@@ -1 +1 @@
-export { default as DataInteractive, type DataInteractiveProps } from "./DataInteractive.svelte";
+export { default as DataInteractive, type DataInteractiveProps, type DataInteractiveRenderPropArg as DataInteractiveSlot, } from "./DataInteractive.svelte";

package/dist/data-interactive/index.js

@@ -1 +1 @@
-export { default as DataInteractive } from "./DataInteractive.svelte";
+export { default as DataInteractive, } from "./DataInteractive.svelte";

package/dist/description/Description.svelte

@@ -3,14 +3,12 @@
 
   const DEFAULT_DESCRIPTION_TAG = "p" as const
 
-  export type DescriptionProps = Props<
-    typeof DEFAULT_DESCRIPTION_TAG,
-    {},
-    {
-      id?: string
-      element?: HTMLElement
-    }
-  >
+  export type DescriptionOwnProps = {
+    id?: string
+    element?: HTMLElement
+  }
+
+  export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, DescriptionOwnProps>
 </script>
 
 <script lang="ts">

package/dist/description/Description.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_DESCRIPTION_TAG: "p";
-export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, {
+export type DescriptionOwnProps = {
     id?: string;
     element?: HTMLElement;
-}>;
+};
+export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, DescriptionOwnProps>;
 declare const Description: import("svelte").Component<DescriptionProps, {}, "element">;
 export default Description;

package/dist/description/index.d.ts

@@ -1 +1 @@
-export { default as Description, type DescriptionProps } from "./Description.svelte";
+export { default as Description, type DescriptionProps, type DescriptionOwnProps } from "./Description.svelte";

package/dist/dialog/Dialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import type { SvelteHTMLElements } from "svelte/elements"
 
   export const DEFAULT_DIALOG_TAG = "div" as const
 
@@ -12,21 +11,19 @@
 
   export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type DialogProps = Props<
-    typeof DEFAULT_DIALOG_TAG,
-    DialogRenderPropArg,
-    PropsForFeatures<typeof DialogRenderFeatures> & {
-      element?: HTMLElement
-      id?: string
-      open?: boolean
-      onclose(value: boolean): void
-      initialFocus?: HTMLElement
-      role?: "dialog" | "alertdialog"
-      autofocus?: boolean
-      transition?: boolean
-      __demoMode?: boolean
-    }
-  >
+  export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement
+    id?: string
+    open?: boolean
+    onclose(value: boolean): void
+    initialFocus?: HTMLElement
+    role?: "dialog" | "alertdialog"
+    autofocus?: boolean
+    transition?: boolean
+    __demoMode?: boolean
+  }
+
+  export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>
 </script>
 
 <script lang="ts">

package/dist/dialog/Dialog.svelte.d.ts

@@ -5,7 +5,7 @@ export type DialogRenderPropArg = {
     open: boolean;
 };
 export declare const DialogRenderFeatures: number;
-export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, PropsForFeatures<typeof DialogRenderFeatures> & {
+export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
     element?: HTMLElement;
     id?: string;
     open?: boolean;
@@ -15,6 +15,7 @@ export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg,
     autofocus?: boolean;
     transition?: boolean;
     __demoMode?: boolean;
-}>;
+};
+export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>;
 declare const Dialog: import("svelte").Component<DialogProps, {}, "element">;
 export default Dialog;

package/dist/dialog/DialogBackdrop.svelte

@@ -1,17 +1,14 @@
 <script lang="ts" module>
   import type { Props } from "../utils/types.js"
-  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_BACKDROP_TAG = "div" as const
-  type BackdropRenderPropArg = {
+  export type BackdropRenderPropArg = {
     open: boolean
   }
 
-  export type DialogBackdropProps = Props<
-    typeof DEFAULT_BACKDROP_TAG,
-    BackdropRenderPropArg,
-    { transition?: boolean; element?: HTMLElement }
-  >
+  export type DialogBackdropOwnProps = { transition?: boolean; element?: HTMLElement }
+
+  export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, DialogBackdropOwnProps>
 </script>
 
 <script lang="ts">

package/dist/dialog/DialogBackdrop.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Props } from "../utils/types.js";
 declare let DEFAULT_BACKDROP_TAG: "div";
-type BackdropRenderPropArg = {
+export type BackdropRenderPropArg = {
     open: boolean;
 };
-export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, {
+export type DialogBackdropOwnProps = {
     transition?: boolean;
     element?: HTMLElement;
-}>;
+};
+export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, DialogBackdropOwnProps>;
 declare const DialogBackdrop: import("svelte").Component<DialogBackdropProps, {}, "element">;
 export default DialogBackdrop;

package/dist/dialog/DialogPanel.svelte

@@ -1,21 +1,18 @@
 <script lang="ts" module>
   import type { Props } from "../utils/types.js"
-  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
+  export type PanelRenderPropArg = {
     open: boolean
   }
 
-  export type DialogPanelProps = Props<
-    typeof DEFAULT_PANEL_TAG,
-    PanelRenderPropArg,
-    {
-      element?: HTMLElement
-      id?: string
-      transition?: boolean
-    }
-  >
+  export type DialogPanelOwnProps = {
+    element?: HTMLElement
+    id?: string
+    transition?: boolean
+  }
+
+  export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>
 </script>
 
 <script lang="ts">

package/dist/dialog/DialogPanel.svelte.d.ts

@@ -1,12 +1,13 @@
 import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANEL_TAG: "div";
-type PanelRenderPropArg = {
+export type PanelRenderPropArg = {
     open: boolean;
 };
-export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, {
+export type DialogPanelOwnProps = {
     element?: HTMLElement;
     id?: string;
     transition?: boolean;
-}>;
+};
+export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>;
 declare const DialogPanel: import("svelte").Component<DialogPanelProps, {}, "element">;
 export default DialogPanel;

package/dist/dialog/DialogTitle.svelte

@@ -1,17 +1,14 @@
 <script lang="ts" module>
   import type { Props } from "../utils/types.js"
-  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_TITLE_TAG = "h2" as const
-  type TitleRenderPropArg = {
+  export type TitleRenderPropArg = {
     open: boolean
   }
 
-  export type DialogTitleProps = Props<
-    typeof DEFAULT_TITLE_TAG,
-    TitleRenderPropArg,
-    { id?: string; element?: HTMLElement }
-  >
+  export type DialogTitleOwnProps = { id?: string; element?: HTMLElement }
+
+  export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>
 
   //
 </script>

package/dist/dialog/DialogTitle.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Props } from "../utils/types.js";
 declare let DEFAULT_TITLE_TAG: "h2";
-type TitleRenderPropArg = {
+export type TitleRenderPropArg = {
     open: boolean;
 };
-export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, {
+export type DialogTitleOwnProps = {
     id?: string;
     element?: HTMLElement;
-}>;
+};
+export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>;
 declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "element">;
 export default DialogTitle;

package/dist/dialog/context.svelte.js

@@ -7,7 +7,7 @@ export var DialogStates;
 export function useDialogContext(component) {
     const context = getContext("DialogContext");
     if (!context) {
-        let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
+        const err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDialogContext);
         throw err;

package/dist/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dialog, type DialogProps } from "./Dialog.svelte";
-export { default as DialogBackdrop, type DialogBackdropProps } from "./DialogBackdrop.svelte";
-export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel.svelte";
-export { default as DialogTitle, type DialogTitleProps } from "./DialogTitle.svelte";
+export { default as Dialog, type DialogProps, type DialogRenderPropArg as DialogSlot, type DialogOwnProps, } from "./Dialog.svelte";
+export { default as DialogBackdrop, type DialogBackdropProps, type BackdropRenderPropArg as DialogBackdropSlot, type DialogBackdropOwnProps, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, type DialogPanelProps, type PanelRenderPropArg as DialogPanelSlot, type DialogPanelOwnProps, } from "./DialogPanel.svelte";
+export { default as DialogTitle, type DialogTitleProps, type TitleRenderPropArg as DialogTitleSlot, type DialogTitleOwnProps, } from "./DialogTitle.svelte";

package/dist/dialog/index.js

@@ -1,4 +1,4 @@
-export { default as Dialog } from "./Dialog.svelte";
-export { default as DialogBackdrop } from "./DialogBackdrop.svelte";
-export { default as DialogPanel } from "./DialogPanel.svelte";
-export { default as DialogTitle } from "./DialogTitle.svelte";
+export { default as Dialog, } from "./Dialog.svelte";
+export { default as DialogBackdrop, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, } from "./DialogPanel.svelte";
+export { default as DialogTitle, } from "./DialogTitle.svelte";

package/dist/field/Field.svelte

@@ -3,16 +3,12 @@
 
   let DEFAULT_FIELD_TAG = "div" as const
 
-  type FieldRenderPropArg = {}
-
-  export type FieldProps = Props<
-    typeof DEFAULT_FIELD_TAG,
-    FieldRenderPropArg,
-    {
-      element?: HTMLElement
-      disabled?: boolean
-    }
-  >
+  export type FieldOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+  }
+
+  export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, {}, FieldOwnProps>
 </script>
 
 <script lang="ts">

package/dist/field/Field.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Props } from "../utils/types.js";
 declare let DEFAULT_FIELD_TAG: "div";
-type FieldRenderPropArg = {};
-export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, FieldRenderPropArg, {
+export type FieldOwnProps = {
     element?: HTMLElement;
     disabled?: boolean;
-}>;
+};
+export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, {}, FieldOwnProps>;
 declare const Field: import("svelte").Component<FieldProps, {}, "element">;
 export default Field;

package/dist/field/index.d.ts

@@ -1 +1 @@
-export { default as Field, type FieldProps } from "./Field.svelte";
+export { default as Field, type FieldProps, type FieldOwnProps } from "./Field.svelte";

package/dist/fieldset/Fieldset.svelte

@@ -3,17 +3,14 @@
 
   const DEFAULT_FIELDSET_TAG = "fieldset" as const
 
-  type FieldsetRenderPropArg = {}
   type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role"
 
-  export type FieldsetProps = Props<
-    typeof DEFAULT_FIELDSET_TAG,
-    FieldsetRenderPropArg,
-    {
-      element?: HTMLElement
-      disabled?: boolean
-    }
-  >
+  export type FieldsetOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+  }
+
+  export type FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, {}, FieldsetOwnProps>
 </script>
 
 <script lang="ts">

package/dist/fieldset/Fieldset.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_FIELDSET_TAG: "fieldset";
-type FieldsetRenderPropArg = {};
-export type FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, FieldsetRenderPropArg, {
+export type FieldsetOwnProps = {
     element?: HTMLElement;
     disabled?: boolean;
-}>;
+};
+export type FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, {}, FieldsetOwnProps>;
 declare const Fieldset: import("svelte").Component<FieldsetProps, {}, "element">;
 export default Fieldset;

package/dist/fieldset/index.d.ts

@@ -1 +1 @@
-export { default as Fieldset, type FieldsetProps } from "./Fieldset.svelte";
+export { default as Fieldset, type FieldsetProps, type FieldsetOwnProps } from "./Fieldset.svelte";

package/dist/focus-trap/FocusTrap.svelte

@@ -39,23 +39,20 @@
 
   export * from "./FocusTrapFeatures.js"
 
-  type FocusTrapRenderPropArg = {}
   type FocusTrapPropsWeControl = never
 
-  export type FocusTrapProps = Props<
-    typeof DEFAULT_FOCUS_TRAP_TAG,
-    FocusTrapRenderPropArg,
-    {
-      element?: HTMLElement
-      initialFocus?: HTMLElement
-      // A fallback element to focus, but this element will be skipped when tabbing around. This is
-      // only done for focusing a fallback parent container (e.g.: A `Dialog`, but you want to tab
-      // *inside* the dialog excluding the dialog itself).
-      initialFocusFallback?: HTMLElement
-      features?: FocusTrapFeatures
-      containers?: Containers
-    }
-  >
+  export type FocusTrapOwnProps = {
+    element?: HTMLElement
+    initialFocus?: HTMLElement
+    // A fallback element to focus, but this element will be skipped when tabbing around. This is
+    // only done for focusing a fallback parent container (e.g.: A `Dialog`, but you want to tab
+    // *inside* the dialog excluding the dialog itself).
+    initialFocusFallback?: HTMLElement
+    features?: FocusTrapFeatures
+    containers?: Containers
+  }
+
+  export type FocusTrapProps = Props<typeof DEFAULT_FOCUS_TRAP_TAG, {}, FocusTrapOwnProps>
 
   function useRestoreElement(options?: { enabled: boolean }) {
     const { enabled } = $derived(options ?? { enabled: true })

package/dist/focus-trap/FocusTrap.svelte.d.ts

@@ -3,13 +3,13 @@ import { FocusTrapFeatures } from "./FocusTrapFeatures.js";
 type Containers = (() => Iterable<HTMLElement>) | Iterable<HTMLElement>;
 declare const DEFAULT_FOCUS_TRAP_TAG: "div";
 export * from "./FocusTrapFeatures.js";
-type FocusTrapRenderPropArg = {};
-export type FocusTrapProps = Props<typeof DEFAULT_FOCUS_TRAP_TAG, FocusTrapRenderPropArg, {
+export type FocusTrapOwnProps = {
     element?: HTMLElement;
     initialFocus?: HTMLElement;
     initialFocusFallback?: HTMLElement;
     features?: FocusTrapFeatures;
     containers?: Containers;
-}>;
+};
+export type FocusTrapProps = Props<typeof DEFAULT_FOCUS_TRAP_TAG, {}, FocusTrapOwnProps>;
 declare const FocusTrap: import("svelte").Component<FocusTrapProps, {}, "element">;
 export default FocusTrap;

package/dist/input/Input.svelte

@@ -4,7 +4,7 @@
 
   const DEFAULT_INPUT_TAG = "input" as const
 
-  type InputRenderPropArg = {
+  export type InputRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
@@ -13,18 +13,16 @@
   }
   type InputPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type InputProps<TValue = string> = Props<
-    typeof DEFAULT_INPUT_TAG,
-    InputRenderPropArg,
-    {
-      element?: HTMLElement
-      id?: string
-      value?: TValue
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+  export type InputOwnProps<TValue = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TValue
+    disabled?: boolean
+    invalid?: boolean
+    autofocus?: boolean
+  }
+
+  export type InputProps<TValue = string> = Props<typeof DEFAULT_INPUT_TAG, InputRenderPropArg, InputOwnProps<TValue>>
 </script>
 
 <script lang="ts" generics="TValue = string">