TimeInput: Expose as subcomponent of TimePicker

packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### Enhancements
 
+-   `TimeInput`: Expose as subcomponent of `TimePicker` ([#63145](https://github.com/WordPress/gutenberg/pull/63145)).
 -   `RadioControl`: add support for option help text ([#63751](https://github.com/WordPress/gutenberg/pull/63751)).
 
 ### Internal

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

@@ -3,8 +3,7 @@
  */
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
-import { default as TimeInput } from './time-input';
 import { default as DateTimePicker } from './date-time';
 
-export { DatePicker, TimePicker, TimeInput };
+export { DatePicker, TimePicker };
 export default DateTimePicker;

packages/components/src/date-time/stories/time.story.tsx

@@ -16,6 +16,8 @@ import TimePicker from '../time';
 const meta: Meta< typeof TimePicker > = {
 	title: 'Components/TimePicker',
 	component: TimePicker,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },
 	argTypes: {
 		currentTime: { control: 'date' },
 		onChange: { action: 'onChange', control: { type: null } },
@@ -49,3 +51,18 @@ const Template: StoryFn< typeof TimePicker > = ( {
 };
 
 export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );
+
+const TimeInputTemplate: StoryFn< typeof TimePicker.TimeInput > = ( args ) => {
+	return <TimePicker.TimeInput { ...args } />;
+};
+
+/**
+ * The time input can be used in isolation as `<TimePicker.TimeInput />`. In this case, the `value` will be passed
+ * as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ */
+export const TimeInput = TimeInputTemplate.bind( {} );
+TimeInput.args = {
+	label: 'Time',
+};
+// Hide TimePicker controls because they don't apply to TimeInput
+TimeInput.parameters = { controls: { include: [] } };

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

@@ -32,7 +32,7 @@ import {
 	validateInputElementTarget,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
-import { TimeInput } from '../time-input';
+import { TimeInput } from './time-input';
 
 const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
@@ -252,4 +252,29 @@ export function TimePicker( {
 	);
 }
 
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * 	const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * 	return (
+ * 		<TimePicker.TimeInput
+ * 			value={ time }
+ * 			onChange={ setTime }
+ * 			label="Time"
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign( TimePicker.TimeInput, { displayName: 'TimePicker.TimeInput' } );
+
 export default TimePicker;

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

@@ -62,6 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);

packages/components/src/date-time/time-input/index.tsx → packages/components/src/date-time/time/time-input/index.tsx

@@ -18,20 +18,20 @@ import {
 	HoursInput,
 	MinutesInput,
 	Fieldset,
-} from '../time/styles';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+} from '../styles';
+import { HStack } from '../../../h-stack';
+import Button from '../../../button';
+import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
 	buildPadInputStateReducer,
 	validateInputElementTarget,
-} from '../utils';
-import type { TimeInputProps } from '../types';
-import type { InputChangeCallback } from '../../input-control/types';
-import { useControlledValue } from '../../utils';
-import BaseControl from '../../base-control';
+} from '../../utils';
+import type { TimeInputProps } from '../../types';
+import type { InputChangeCallback } from '../../../input-control/types';
+import { useControlledValue } from '../../../utils';
+import BaseControl from '../../../base-control';
 
 export function TimeInput( {
 	value: valueProp,