components: Expose TS types of props for public components

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Expose the TS types for props of public components ([#72831](https://github.com/WordPress/gutenberg/pull/72831)).
+
 ## 30.7.0 (2025-10-29)
 
 ### Bug Fixes

packages/components/src/alignment-matrix-control/index.tsx

@@ -120,4 +120,6 @@ export const AlignmentMatrixControl = Object.assign(
 	}
 );
 
+export type { AlignmentMatrixControlProps };
+
 export default AlignmentMatrixControl;

packages/components/src/angle-picker-control/index.tsx

@@ -104,4 +104,6 @@ function UnforwardedAnglePickerControl(
  */
 export const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );
 
+export type { AnglePickerControlProps };
+
 export default AnglePickerControl;

packages/components/src/animate/index.tsx

@@ -69,4 +69,6 @@ export function Animate( { type, options = {}, children }: AnimateProps ) {
 	} );
 }
 
+export type { AnimateProps };
+
 export default Animate;

packages/components/src/autocomplete/index.tsx

@@ -446,6 +446,8 @@ export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	};
 }
 
+export type { AutocompleteProps };
+
 export default function Autocomplete( {
 	children,
 	isSelected,

packages/components/src/base-control/index.tsx

@@ -166,4 +166,6 @@ export const BaseControl = Object.assign(
 	}
 );
 
+export type { BaseControlProps };
+
 export default BaseControl;

packages/components/src/border-box-control/index.ts

@@ -1,3 +1,5 @@
 export { default as BorderBoxControl } from './border-box-control/component';
 export { useBorderBoxControl } from './border-box-control/hook';
 export { hasSplitBorders, isEmptyBorder, isDefinedBorder } from './utils';
+
+export type { BorderBoxControlProps } from './types';

packages/components/src/border-control/index.ts

@@ -1,2 +1,4 @@
 export { default as BorderControl } from './border-control/component';
 export { useBorderControl } from './border-control/hook';
+
+export type { BorderControlProps } from './types';

packages/components/src/box-control/index.tsx

@@ -234,4 +234,7 @@ function BoxControl( {
 }
 
 export { applyValueToSides } from './utils';
+
+export type { BoxControlProps };
+
 export default BoxControl;

packages/components/src/button-group/index.tsx

@@ -54,4 +54,6 @@ function UnforwardedButtonGroup(
  */
 export const ButtonGroup = forwardRef( UnforwardedButtonGroup );
 
+export type { ButtonGroupProps };
+
 export default ButtonGroup;

packages/components/src/button/index.tsx

@@ -304,4 +304,7 @@ export function UnforwardedButton(
  * ```
  */
 export const Button = forwardRef( UnforwardedButton );
+
+export type { ButtonProps };
+
 export default Button;

packages/components/src/card/index.ts

@@ -4,3 +4,10 @@ export { default as CardDivider, useCardDivider } from './card-divider';
 export { default as CardFooter, useCardFooter } from './card-footer';
 export { default as CardHeader, useCardHeader } from './card-header';
 export { default as CardMedia, useCardMedia } from './card-media';
+export type {
+	Props as CardProps,
+	BodyProps as CardBodyProps,
+	FooterProps as CardFooterProps,
+	HeaderProps as CardHeaderProps,
+	MediaProps as CardMediaProps,
+} from './types';

packages/components/src/checkbox-control/index.tsx

@@ -155,4 +155,6 @@ export function CheckboxControl(
 	);
 }
 
+export type { CheckboxControlProps };
+
 export default CheckboxControl;

packages/components/src/clipboard-button/index.tsx

@@ -19,6 +19,8 @@ import type { WordPressComponentProps } from '../context';
 
 const TIMEOUT = 4000;
 
+export type { ClipboardButtonProps };
+
 export default function ClipboardButton( {
 	className,
 	children,

packages/components/src/color-indicator/index.tsx

@@ -44,4 +44,6 @@ function UnforwardedColorIndicator(
  */
 export const ColorIndicator = forwardRef( UnforwardedColorIndicator );
 
+export type { ColorIndicatorProps };
+
 export default ColorIndicator;

packages/components/src/color-palette/index.tsx

@@ -366,4 +366,6 @@ function UnforwardedColorPalette(
  */
 export const ColorPalette = forwardRef( UnforwardedColorPalette );
 
+export type { ColorPaletteProps };
+
 export default ColorPalette;

packages/components/src/color-picker/index.ts

@@ -2,3 +2,5 @@
  * Internal dependencies
  */
 export { LegacyAdapter as ColorPicker } from './legacy-adapter';
+
+export type { ColorPickerProps } from './types';

packages/components/src/combobox-control/index.tsx

@@ -405,4 +405,6 @@ function ComboboxControl( props: ComboboxControlProps ) {
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
 }
 
+export type { ComboboxControlProps };
+
 export default ComboboxControl;

packages/components/src/composite/index.tsx

@@ -249,3 +249,5 @@ export const Composite = Object.assign(
 		} ),
 	}
 );
+
+export type { CompositeProps } from './types';

packages/components/src/confirm-dialog/index.tsx

@@ -4,3 +4,5 @@
 import ConfirmDialog from './component';
 
 export { ConfirmDialog };
+
+export type { ConfirmDialogProps } from './types';

packages/components/src/custom-gradient-picker/index.tsx

@@ -208,4 +208,6 @@ export function CustomGradientPicker( {
 	);
 }
 
+export type { CustomGradientPickerProps };
+
 export default CustomGradientPicker;

packages/components/src/custom-select-control/index.tsx

@@ -212,4 +212,6 @@ function CustomSelectControl< T extends CustomSelectOption >(
 	);
 }
 
+export type { CustomSelectProps };
+
 export default CustomSelectControl;

packages/components/src/dashicon/index.tsx

@@ -48,4 +48,6 @@ function Dashicon( {
 	return <span className={ iconClass } style={ styles } { ...extraProps } />;
 }
 
+export type { DashiconProps };
+
 export default Dashicon;

packages/components/src/date-time/index.ts

@@ -7,3 +7,4 @@ import { default as DateTimePicker } from './date-time';
 
 export { DatePicker, TimePicker };
 export default DateTimePicker;
+export type { DatePickerProps, TimeInputProps, TimePickerProps } from './types';

packages/components/src/dimension-control/index.tsx

@@ -129,4 +129,6 @@ export function DimensionControl( props: DimensionControlProps ) {
 	);
 }
 
+export type { DimensionControlProps };
+
 export default DimensionControl;

packages/components/src/disabled/index.tsx

@@ -89,4 +89,6 @@ function Disabled( {
 Disabled.Context = Context;
 Disabled.Consumer = Consumer;
 
+export type { DisabledProps };
+
 export default Disabled;

packages/components/src/disclosure/index.tsx

@@ -40,4 +40,7 @@ const UnforwardedDisclosureContent = (
 };
 
 export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
+
+export type { DisclosureContentProps };
+
 export default DisclosureContent;

packages/components/src/draggable/index.tsx

@@ -259,4 +259,6 @@ export function Draggable( {
 	);
 }
 
+export type { DraggableProps };
+
 export default Draggable;

packages/components/src/drop-zone/index.tsx

@@ -137,4 +137,6 @@ export function DropZoneComponent( {
 	);
 }
 
+export type { DropZoneProps };
+
 export default DropZoneComponent;

packages/components/src/dropdown-menu/index.tsx

@@ -304,4 +304,6 @@ export const DropdownMenu = contextConnectWithoutRef(
 	'DropdownMenu'
 );
 
+export type { DropdownMenuProps };
+
 export default DropdownMenu;

packages/components/src/dropdown/index.tsx

@@ -182,4 +182,6 @@ const UnconnectedDropdown = (
  */
 export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );
 
+export type { DropdownProps };
+
 export default Dropdown;

packages/components/src/duotone-picker/index.ts

@@ -1,2 +1,4 @@
 export { default as DuotonePicker } from './duotone-picker';
 export { default as DuotoneSwatch } from './duotone-swatch';
+
+export type { DuotonePickerProps } from './types';

packages/components/src/elevation/index.ts

@@ -1,2 +1,4 @@
 export { default as Elevation } from './component';
 export * from './hook';
+
+export type { ElevationProps } from './types';

packages/components/src/external-link/index.tsx

@@ -93,4 +93,6 @@ function UnforwardedExternalLink(
  */
 export const ExternalLink = forwardRef( UnforwardedExternalLink );
 
+export type { ExternalLinkProps };
+
 export default ExternalLink;

packages/components/src/flex/index.ts

@@ -1,3 +1,5 @@
 export { default as Flex, useFlex } from './flex';
 export { default as FlexItem, useFlexItem } from './flex-item';
 export { default as FlexBlock, useFlexBlock } from './flex-block';
+
+export type { FlexProps } from './types';

packages/components/src/focal-point-picker/index.tsx

@@ -305,4 +305,6 @@ export function FocalPointPicker( {
 	);
 }
 
+export type { FocalPointPickerProps };
+
 export default FocalPointPicker;

packages/components/src/focusable-iframe/index.tsx

@@ -8,6 +8,8 @@ import deprecated from '@wordpress/deprecated';
  */
 import type { FocusableIframeProps } from './types';
 
+export type { FocusableIframeProps };
+
 export default function FocusableIframe( {
 	iframeRef,
 	...props

packages/components/src/font-size-picker/index.tsx

@@ -297,4 +297,6 @@ const UnforwardedFontSizePicker = (
 
 export const FontSizePicker = forwardRef( UnforwardedFontSizePicker );
 
+export type { FontSizePickerProps };
+
 export default FontSizePicker;

packages/components/src/form-file-upload/index.tsx

@@ -82,4 +82,6 @@ export function FormFileUpload( {
 	);
 }
 
+export type { FormFileUploadProps };
+
 export default FormFileUpload;

packages/components/src/form-toggle/index.tsx

@@ -80,4 +80,6 @@ function UnforwardedFormToggle(
  */
 export const FormToggle = forwardRef( UnforwardedFormToggle );
 
+export type { FormToggleProps };
+
 export default FormToggle;

packages/components/src/form-token-field/index.tsx

@@ -779,4 +779,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
 }
 
+export type { FormTokenFieldProps };
+
 export default FormTokenField;

packages/components/src/gradient-picker/index.tsx

@@ -245,4 +245,6 @@ export function GradientPicker( {
 	);
 }
 
+export type { GradientPickerComponentProps as GradientPickerProps };
+
 export default GradientPicker;

packages/components/src/grid/index.ts

@@ -1,2 +1,4 @@
 export { default as Grid } from './component';
 export { default as useGrid } from './hook';
+
+export type { GridProps } from './types';

packages/components/src/guide/index.tsx

@@ -177,4 +177,6 @@ function Guide( {
 	);
 }
 
+export type { GuideProps };
+
 export default Guide;

packages/components/src/heading/index.ts

@@ -1,2 +1,4 @@
 export { default as Heading } from './component';
 export { useHeading } from './hook';
+
+export type { HeadingProps } from './types';