docs: infer the types automatically (#2911)

apps/engineering/content/design/components/form-input.mdx

@@ -2,7 +2,7 @@
 title: FormInput
 description: A form input component with built-in label, description, and error handling capabilities.
 ---
-import { 
+import {
   DefaultFormInputVariant,
   RequiredFormInputVariant,
   SuccessFormInputVariant,
@@ -67,27 +67,12 @@ Example of a FormInput with multiple props configured for a specific use case.
 ## Props
 The FormInput component extends the standard Input component props with additional form-specific properties:
 
-<AutoTypeTable
-    name="FormInputProps"
-    type={`import { InputProps } from "../input"
-import { ReactNode } from "react"
-export interface FormInputProps extends InputProps {
-  /** Text label for the input field */
-  label?: string;
-  /** Helper text providing additional context */
-  description?: string;
-  /** Whether the field is required */
-  required?: boolean;
-  /** Error message to display when validation fails */
-  error?: string;
-  /** ID for the input element, auto-generated if not provided */
-  id?: string;
-  /** Additional class names to apply to the fieldset wrapper */
-  className?: string;
-  /** Visual state variant passed to the underlying Input component */
-  variant?: 'default' | 'success' | 'warning' | 'error';
-}`}
-/>
+  <AutoTypeTable
+      name="DocumentedFormInputProps"
+      path="../../internal/ui/src/components/form/index.tsx"
+
+    />
+
 
 ## Accessibility
 FormInput is built with accessibility in mind:

apps/engineering/content/design/components/input.mdx

@@ -3,17 +3,19 @@ title: Input
 description: A text input field component with different states, validations, and icon support.
 ---
 import { RenderComponentWithSnippet } from "@/app/components/render"
-import { 
-  InputDefaultVariant, 
+import {
+  InputDefaultVariant,
   InputSuccessVariant,
   InputWarningVariant,
   InputErrorVariant,
   InputDisabledVariant,
   InputWithDefaultValue,
   InputWithPasswordToggle,
-  InputWithBothIcons 
+  InputWithBothIcons
 } from "./input/input.variants.tsx"
 
+
+
 # Input
 
 A versatile input component that supports various states, validations, and icon placements. Use it to collect user input with appropriate visual feedback and enhanced usability through icons.
@@ -77,18 +79,9 @@ Example of an input with both leading and trailing icons for enhanced functional
 The Input component accepts all standard HTML input attributes plus the following:
 
   <AutoTypeTable
-      name="InputProps"
-      type={`import { ReactNode } from "react"
-export interface InputProps {
-  /** Determines the visual style and state of the input */
-  variant?: 'default' | 'success' | 'warning' | 'error';
-  /** Optional icon component to display on the left side */
-  leftIcon?: ReactNode;
-  /** Optional icon component to display on the right side */
-  rightIcon?: ReactNode;
-  /** Additional classes to apply to the wrapper div */
-  wrapperClassName?: string;
-}`}
+      name="DocumentedInputProps"
+      path="../../internal/ui/src/components/input.tsx"
+
     />
 
 

internal/ui/src/components/form/form-input.tsx

@@ -1,14 +1,16 @@
 import { CircleInfo, TriangleWarning2 } from "@unkey/icons";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Input, type InputProps } from "../input";
+import { type DocumentedInputProps, Input, type InputProps } from "../input";
 
-export interface FormInputProps extends InputProps {
+// Hack to populate fumadocs' AutoTypeTable
+export type DocumentedFormInputProps = DocumentedInputProps & {
   label?: string;
   description?: string;
   required?: boolean;
   error?: string;
-}
+};
+export type FormInputProps = InputProps & DocumentedFormInputProps;
 
 export const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(
   ({ label, description, error, required, id, className, variant, ...props }, ref) => {

internal/ui/src/components/input.tsx

@@ -49,13 +49,14 @@ const inputWrapperVariants = cva("relative flex items-center w-full", {
   },
 });
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    VariantProps<typeof inputVariants> {
+// Hack to populate fumadocs' AutoTypeTable
+export type DocumentedInputProps = VariantProps<typeof inputVariants> & {
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   wrapperClassName?: string;
-}
+};
+
+export type InputProps = DocumentedInputProps & React.InputHTMLAttributes<HTMLInputElement>;
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, variant, type, leftIcon, rightIcon, wrapperClassName, ...props }, ref) => {